133 lines
6.6 KiB
HTML
133 lines
6.6 KiB
HTML
<!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> |