Files
smart-house---final-/index.html
2026-03-24 08:28:37 +00:00

95 lines
2.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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 linstant </p>
</div>
</div>
<!-- Lien vers le JS -->
<script src="dashboard.js"></script>
</body>
</html>