Initial commit
This commit is contained in:
Anismahi
133
index.html
Normal file
133
index.html
Normal file
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" data-bs-theme="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Station Solaire | Dashboard PRO</title>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
|
||||
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav class="navbar shadow-sm mb-4 py-3">
|
||||
<div class="container-fluid px-4">
|
||||
<span class="navbar-brand mb-0 h1 fw-bold text-light d-flex align-items-center">
|
||||
<i class="bi bi-lightning-charge-fill text-warning me-2 fs-3"></i>
|
||||
Station Solaire Autonome
|
||||
</span>
|
||||
<div
|
||||
class="d-flex align-items-center bg-dark bg-opacity-50 px-3 py-2 rounded-pill border border-secondary border-opacity-25">
|
||||
<span id="status-text" class="me-3 fw-semibold small text-uppercase tracking-wide">Système en
|
||||
ligne</span>
|
||||
<div id="system-status" class="status-dot rounded-circle pulse-online"></div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid px-4">
|
||||
<div class="row g-4">
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-meteo rounded-3">
|
||||
<div class="card-body d-flex flex-column p-4">
|
||||
<h5 class="card-title fw-bold mb-4" style="color: #38bdf8;">
|
||||
<i class="bi bi-cloud-sun me-2"></i>Météo & Env.
|
||||
</h5>
|
||||
|
||||
<div class="mb-3 pb-3 border-bottom border-secondary border-opacity-50 text-center">
|
||||
<span class="badge bg-dark border border-secondary text-secondary mb-2">Via API Web
|
||||
(Serveur)</span>
|
||||
<div class="d-flex justify-content-center align-items-center mt-2">
|
||||
<i id="api-icon" class="bi bi-brightness-high text-warning display-4 me-3"></i>
|
||||
<div class="text-start">
|
||||
<h3 class="mb-0 fw-bold data-value" id="api-temp">--°C</h3>
|
||||
<small class="text-secondary text-uppercase fw-bold" id="api-desc">En
|
||||
attente...</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-auto mb-3">
|
||||
<span class="badge bg-dark border border-secondary text-secondary mb-3">Capteur Local
|
||||
(DHT11)</span>
|
||||
<div class="row">
|
||||
<div class="col-6 border-end border-secondary border-opacity-25">
|
||||
<h3 class="fw-bold data-value mb-0" id="temp-val">--</h3>
|
||||
<p class="text-secondary small text-uppercase mt-1 fw-bold"><i
|
||||
class="bi bi-thermometer-half"></i> Temp</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h3 class="fw-bold data-value mb-0" id="hum-val">--</h3>
|
||||
<p class="text-secondary small text-uppercase mt-1 fw-bold"><i
|
||||
class="bi bi-droplet"></i> Hum</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-outline-danger btn-sm mt-auto w-100" id="btn-test">
|
||||
<i class="bi bi-wifi-off"></i> Simuler Coupure
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-solaire rounded-3">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title fw-bold mb-4" style="color: #fbbf24;"><i
|
||||
class="bi bi-sun me-2"></i>Production Solaire</h5>
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div
|
||||
class="placeholder-box text-center p-3 rounded w-100 h-100 d-flex flex-column justify-content-center">
|
||||
<i class="bi bi-code-slash d-block fs-2 mb-2 opacity-50"></i><span>Espace Étudiant
|
||||
1</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-batterie rounded-3">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title fw-bold mb-4" style="color: #34d399;"><i
|
||||
class="bi bi-battery-charging me-2"></i>État Batterie</h5>
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div
|
||||
class="placeholder-box text-center p-3 rounded w-100 h-100 d-flex flex-column justify-content-center">
|
||||
<i class="bi bi-code-slash d-block fs-2 mb-2 opacity-50"></i><span>Espace Étudiant
|
||||
2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 col-md-6 col-lg-3">
|
||||
<div class="card card-admin rounded-3">
|
||||
<div class="card-body p-4">
|
||||
<h5 class="card-title fw-bold mb-4" style="color: #f87171;"><i
|
||||
class="bi bi-sliders me-2"></i>Administration</h5>
|
||||
<div class="d-flex h-100 align-items-center justify-content-center">
|
||||
<div
|
||||
class="placeholder-box text-center p-3 rounded w-100 h-100 d-flex flex-column justify-content-center">
|
||||
<i class="bi bi-code-slash d-block fs-2 mb-2 opacity-50"></i><span>Espace Étudiant
|
||||
4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
schema/.DS_Store
vendored
Normal file
BIN
schema/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
schema/schemaprojet/.DS_Store
vendored
Normal file
BIN
schema/schemaprojet/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
schema/schemaprojet/Capture d’écran 2026-03-08 à 09.26.45.png
Normal file
BIN
schema/schemaprojet/Capture d’écran 2026-03-08 à 09.26.45.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 578 KiB |
BIN
schema/schemaprojet/Capture d’écran 2026-03-08 à 09.27.01.png
Normal file
BIN
schema/schemaprojet/Capture d’écran 2026-03-08 à 09.27.01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
BIN
schema/schemaprojet/schema_echocharge.jpg
Normal file
BIN
schema/schemaprojet/schema_echocharge.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
115
script.js
Normal file
115
script.js
Normal file
@@ -0,0 +1,115 @@
|
||||
// --- VARIABLES D'ÉTAT ---
|
||||
let isOnline = true;
|
||||
let lastHeartbeat = Date.now();
|
||||
const TIMEOUT_MS = 5000; // 5 secondes pour les tests
|
||||
|
||||
// --- ÉLÉMENTS DU DOM ---
|
||||
const statusDot = document.getElementById('system-status');
|
||||
const statusText = document.getElementById('status-text');
|
||||
|
||||
const tempEl = document.getElementById('temp-val');
|
||||
const humEl = document.getElementById('hum-val');
|
||||
|
||||
const apiTempEl = document.getElementById('api-temp');
|
||||
const apiDescEl = document.getElementById('api-desc');
|
||||
const apiIconEl = document.getElementById('api-icon');
|
||||
|
||||
// =================================================================
|
||||
// --- NOUVEAU : GESTION DE LA VRAIE API MÉTÉO (OPEN-METEO) ---
|
||||
// =================================================================
|
||||
|
||||
// 1. Traduction des codes météo de l'API en Icônes et Textes
|
||||
function getWeatherDetails(code) {
|
||||
if (code === 0) return { desc: "Dégagé", icon: "bi-brightness-high", color: "text-warning" };
|
||||
if (code === 1 || code === 2 || code === 3) return { desc: "Nuageux", icon: "bi-cloud", color: "text-light" };
|
||||
if (code >= 45 && code <= 48) return { desc: "Brouillard", icon: "bi-cloud-haze", color: "text-secondary" };
|
||||
if (code >= 51 && code <= 67) return { desc: "Pluie", icon: "bi-cloud-rain", color: "text-info" };
|
||||
if (code >= 71 && code <= 77) return { desc: "Neige", icon: "bi-cloud-snow", color: "text-white" };
|
||||
if (code >= 95) return { desc: "Orage", icon: "bi-cloud-lightning", color: "text-danger" };
|
||||
return { desc: "Inconnu", icon: "bi-thermometer", color: "text-muted" };
|
||||
}
|
||||
|
||||
// 2. Fonction qui va chercher les données sur Internet
|
||||
async function fetchRealWeather() {
|
||||
try {
|
||||
// --- METS LES COORDONNÉES DE TA VILLE ICI ---
|
||||
const lat = 48.8566; // Latitude (Ex: Paris)
|
||||
const lon = 2.3522; // Longitude (Ex: Paris)
|
||||
|
||||
// L'URL magique de l'API Open-Meteo
|
||||
const url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,weather_code`;
|
||||
|
||||
// On lance la requête
|
||||
const response = await fetch(url);
|
||||
const data = await response.json(); // On convertit la réponse en JSON
|
||||
|
||||
// On extrait la température et le code météo
|
||||
const temp = data.current.temperature_2m;
|
||||
const code = data.current.weather_code;
|
||||
|
||||
// On récupère la bonne icône et le bon texte
|
||||
const weather = getWeatherDetails(code);
|
||||
|
||||
// On met à jour l'interface HTML !
|
||||
apiTempEl.innerText = temp + "°C";
|
||||
apiDescEl.innerText = weather.desc;
|
||||
apiIconEl.className = "bi " + weather.icon + " " + weather.color + " display-4 me-3";
|
||||
|
||||
} catch (error) {
|
||||
console.error("Erreur avec l'API Météo:", error);
|
||||
apiDescEl.innerText = "Erreur Web";
|
||||
apiIconEl.className = "bi bi-wifi-off text-danger display-4 me-3";
|
||||
}
|
||||
}
|
||||
|
||||
// =================================================================
|
||||
|
||||
// --- FONCTION DE MISE À JOUR DES DONNÉES LOCALES (Ton DHT11) ---
|
||||
function fetchLocalData() {
|
||||
if (!isOnline) return;
|
||||
|
||||
// Simulation de ton capteur DHT11 local
|
||||
tempEl.innerText = (22 + (Math.random() * 2 - 1)).toFixed(1);
|
||||
humEl.innerText = Math.floor(45 + Math.random() * 5);
|
||||
|
||||
lastHeartbeat = Date.now();
|
||||
}
|
||||
|
||||
// --- FONCTION WATCHDOG (LE HEARTBEAT) ---
|
||||
function checkSystemStatus() {
|
||||
if (Date.now() - lastHeartbeat > TIMEOUT_MS) {
|
||||
statusDot.className = "status-dot rounded-circle pulse-offline";
|
||||
statusText.innerText = "HORS LIGNE";
|
||||
statusText.style.color = "#ef4444";
|
||||
} else {
|
||||
statusDot.className = "status-dot rounded-circle pulse-online";
|
||||
statusText.innerText = "EN LIGNE";
|
||||
statusText.style.color = "#e2e8f0";
|
||||
}
|
||||
}
|
||||
|
||||
// --- LANCEMENT DES PROGRAMMES ---
|
||||
|
||||
// 1. Lancer la météo Web une première fois tout de suite
|
||||
fetchRealWeather();
|
||||
|
||||
// 2. Les boucles automatiques
|
||||
setInterval(fetchLocalData, 3000); // Mise à jour de ton capteur local toutes les 3s
|
||||
setInterval(checkSystemStatus, 1000); // Surveillance de la connexion
|
||||
|
||||
// ATTENTION: On ne met à jour la météo Web que toutes les 15 minutes (900 000 ms)
|
||||
// pour ne pas saturer l'API gratuite et se faire bloquer !
|
||||
setInterval(fetchRealWeather, 900000);
|
||||
|
||||
// --- GESTION DU BOUTON DE TEST ---
|
||||
document.getElementById('btn-test').addEventListener('click', function () {
|
||||
isOnline = !isOnline;
|
||||
if (isOnline) {
|
||||
this.innerHTML = '<i class="bi bi-wifi-off"></i> Simuler Coupure';
|
||||
this.classList.replace('btn-outline-success', 'btn-outline-danger');
|
||||
lastHeartbeat = Date.now();
|
||||
} else {
|
||||
this.innerHTML = '<i class="bi bi-wifi"></i> Rétablir Connexion';
|
||||
this.classList.replace('btn-outline-danger', 'btn-outline-success');
|
||||
}
|
||||
});
|
||||
81
style.css
Normal file
81
style.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/* --- COULEURS GLOBALES ET THEME SOMBRE --- */
|
||||
body {
|
||||
background-color: #0f172a;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #1e293b !important;
|
||||
border-bottom: 1px solid #334155;
|
||||
}
|
||||
|
||||
/* --- DESIGN DES WIDGETS (CARTES) --- */
|
||||
.card {
|
||||
background-color: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
min-height: 320px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.card-meteo {
|
||||
border-top: 4px solid #38bdf8;
|
||||
}
|
||||
|
||||
.card-solaire {
|
||||
border-top: 4px solid #fbbf24;
|
||||
}
|
||||
|
||||
.card-batterie {
|
||||
border-top: 4px solid #34d399;
|
||||
}
|
||||
|
||||
.card-admin {
|
||||
border-top: 4px solid #f87171;
|
||||
}
|
||||
|
||||
/* --- ANIMATION DU HEARTBEAT --- */
|
||||
.status-dot {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.pulse-online {
|
||||
background-color: #22c55e;
|
||||
box-shadow: 0 0 12px #22c55e;
|
||||
animation: pulse-green 2s infinite;
|
||||
}
|
||||
|
||||
.pulse-offline {
|
||||
background-color: #ef4444;
|
||||
box-shadow: 0 0 15px #ef4444;
|
||||
}
|
||||
|
||||
@keyframes pulse-green {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- TYPOGRAPHIE ET ELEMENTS VISUELS --- */
|
||||
.data-value {
|
||||
color: #e0f2fe;
|
||||
text-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
|
||||
}
|
||||
|
||||
.placeholder-box {
|
||||
border: 2px dashed #475569;
|
||||
background-color: #0f172a;
|
||||
color: #94a3b8;
|
||||
}
|
||||
Reference in New Issue
Block a user