95 lines
2.6 KiB
HTML
95 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Dashboard Smart House</title>
|
||
<style>
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background-color: #f0f0f0;
|
||
margin: 20px;
|
||
}
|
||
.dashboard {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.widget {
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
text-align: center;
|
||
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
||
font-size: 16px;
|
||
}
|
||
.climat { background-color: #ADD8E6; } /* bleu clair */
|
||
.securite { background-color: #D3D3D3; } /* gris clair */
|
||
.energie { background-color: #FFFACD; } /* jaune clair */
|
||
.lumiere { background-color: #F5F5DC; } /* blanc cassé */
|
||
.graphiques { background-color: #FFFFFF; grid-column: span 4; padding: 40px; }
|
||
.alertes { background-color: #FFC0CB; grid-column: span 4; padding: 20px; }
|
||
.icone {
|
||
font-size: 30px;
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
}
|
||
/* Classe pour alerte simulée */
|
||
.alert {
|
||
border: 3px solid red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Dashboard Smart House</h1>
|
||
|
||
<div class="dashboard">
|
||
<!-- Widget Climat mis à jour -->
|
||
<div class="widget climat">
|
||
<span class="icone">🌡️</span>
|
||
<strong>Climat</strong>
|
||
<p>Température : –</p>
|
||
<p>Humidité : –</p>
|
||
<p>Pression : –</p>
|
||
<p>Altitude : –</p>
|
||
</div>
|
||
|
||
<div class="widget securite">
|
||
<span class="icone">🚨</span>
|
||
<strong>Sécurité</strong>
|
||
<p>Mouvement : –</p>
|
||
<p>Distance : –</p>
|
||
</div>
|
||
|
||
<div class="widget energie">
|
||
<span class="icone">⚡</span>
|
||
<strong>Énergie</strong>
|
||
<p>Puissance : –</p>
|
||
<p>Consommation : –</p>
|
||
</div>
|
||
|
||
<div class="widget lumiere">
|
||
<span class="icone">💡</span>
|
||
<strong>Lumière</strong>
|
||
<p>Lux : –</p>
|
||
</div>
|
||
|
||
<div class="widget graphiques">
|
||
<span class="icone">📊</span>
|
||
<strong>Graphiques</strong>
|
||
<p>Zone vide pour graphique</p>
|
||
<canvas id="graph-temp" width="400" height="150"></canvas>
|
||
</div>
|
||
|
||
<div class="widget alertes">
|
||
<span class="icone">⚠️</span>
|
||
<strong>Alertes</strong>
|
||
<p>– Aucune alerte pour l’instant –</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lien vers le JS -->
|
||
<script src="dashboard.js"></script>
|
||
|
||
</body>
|
||
</html> |