rubisalpha/smart-house---final-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajouter index.html

Browse Source
This commit is contained in:
rubisalpha
2026-03-24 08:28:37 +00:00
parent f385d6c568
commit d474ab8d86
1 changed files with 95 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
index.html Normal file
View File

@@ -0,0 +1,95 @@
<!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>