diff --git a/dashboard.js b/dashboard.js index 1c8d74f..ff77d04 100644 --- a/dashboard.js +++ b/dashboard.js @@ -1,15 +1,16 @@ +/* global Chart */ // Permet à l'IDE de reconnaître Chart.js + // ------------------------------- -// 1 - Sélection des widgets +// 1️⃣ Sélection des widgets // ------------------------------- const climat = document.querySelector('.widget.climat'); const securite = document.querySelector('.widget.securite'); const energie = document.querySelector('.widget.energie'); const lumiere = document.querySelector('.widget.lumiere'); -const graphiques = document.querySelector('.widget.graphiques'); const alertes = document.querySelector('.widget.alertes'); // ------------------------------- -// 2 - Hover dynamique sur les widgets +// 2️⃣ Hover dynamique sur les widgets // ------------------------------- function setupHover(widget, colorNormal, colorHover) { widget.addEventListener('mouseenter', () => { @@ -20,63 +21,51 @@ function setupHover(widget, colorNormal, colorHover) { }); } -// Appliquer le hover sur chaque widget setupHover(climat, '#ADD8E6', '#87CEEB'); setupHover(securite, '#D3D3D3', '#C0C0C0'); setupHover(energie, '#FFFACD', '#FAFAD2'); setupHover(lumiere, '#F5F5DC', '#FFF8DC'); // ------------------------------- -// 3 - Simulation d'alerte visuelle +// 3️⃣ Simulation d'alerte visuelle // ------------------------------- function showAlert(widget) { - widget.classList.add('alert'); // contour rouge -} - -function hideAlert(widget) { - widget.classList.remove('alert'); // retire le contour rouge + widget.classList.add('alert'); } // Exemple : activer l'alerte sur climat showAlert(climat); -// Le bloc Alertes reste visible +// Le bloc alertes reste visible alertes.style.display = 'block'; // ------------------------------- -// 4 - Préparer la zone graphique vide +// 4️⃣ Graphique Chart.js // ------------------------------- const canvasTemp = document.getElementById('graph-temp'); -if (canvasTemp) { +if(canvasTemp) { const ctx = canvasTemp.getContext('2d'); - const myChart = new Chart(ctx, { + new Chart(ctx, { type: 'line', data: { - labels: [], // vide pour l'instant + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'Température', - data: [], // vide pour l'instant + data: [20, 22, 19, 23, 21], borderColor: 'blue', + backgroundColor: 'rgba(173,216,230,0.2)', tension: 0.4 }] }, options: { responsive: true, plugins: { - legend: { display: false } + legend: { display: true } }, scales: { - x: { display: false }, - y: { display: false } + x: { display: true, title: { display: true, text: 'Mois' } }, + y: { display: true, title: { display: true, text: '°C' } } } } }); -} - -// ------------------------------- -// 5 - Fonction de mise à jour future -// ------------------------------- -function majWidget(widget, valeur) { - // futur code pour mettre à jour le widget avec de vraies données - // exemple : climat.querySelector('p').innerText = "Température : " + valeur + "°C"; } \ No newline at end of file diff --git a/dashboard.php b/dashboard.php index 11791a7..4cc9330 100644 --- a/dashboard.php +++ b/dashboard.php @@ -6,11 +6,14 @@ if (!isset($_SESSION['user'])) { } include 'include/header.php'; -include 'include/nav.php'; ?> -

Dashboard

-

Bienvenue, ()

+

Dashboard Smart House

+ +

+ Bienvenue, + () +

Vous êtes Admin, vous pouvez gérer le site.

@@ -18,4 +21,50 @@ include 'include/nav.php';

Vous êtes Utilisateur, votre accès est limité.

+ +
+ +
+ 🌡️ + Climat +

Température : –

+

Humidité : –

+

Pression : –

+

Altitude : –

+
+ +
+ 🚨 + Sécurité +

Mouvement : –

+

Distance : –

+
+ +
+ ⚡ + Énergie +

Puissance : –

+

Consommation : –

+
+ +
+ 💡 + Lumière +

Lux : –

+
+ +
+ 📊 + Graphiques + +
+ +
+ ⚠️ + Alertes +

– Aucune alerte pour l’instant –

+
+ +
+ \ No newline at end of file diff --git a/include/footer.php b/include/footer.php index 0857763..016e7f7 100644 --- a/include/footer.php +++ b/include/footer.php @@ -3,6 +3,5 @@

© 2026 Smart House

- - - \ No newline at end of file + + \ No newline at end of file diff --git a/include/header.php b/include/header.php index ac8e737..81d704e 100644 --- a/include/header.php +++ b/include/header.php @@ -5,9 +5,12 @@ Smart House - + - - + + - \ No newline at end of file + + + + \ No newline at end of file diff --git a/include/nav.php b/include/nav.php index 5bea554..277edbe 100644 --- a/include/nav.php +++ b/include/nav.php @@ -1,16 +1,7 @@ - -
\ No newline at end of file diff --git a/js/chart.min.js b/js/chart.min.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css index ff75659..cccc49d 100644 --- a/style.css +++ b/style.css @@ -1,15 +1,11 @@ -/* ------------------ */ /* GLOBAL */ -/* ------------------ */ body { font-family: Arial, sans-serif; margin: 20px; background-color: #f0f0f0; } -/* ------------------ */ /* NAVIGATION */ -/* ------------------ */ nav { margin-bottom: 20px; } @@ -25,18 +21,14 @@ nav a:hover { color: #007BFF; } -/* ------------------ */ /* DASHBOARD */ -/* ------------------ */ .dashboard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } -/* ------------------ */ /* WIDGETS */ -/* ------------------ */ .widget { padding: 20px; border-radius: 10px; @@ -51,15 +43,8 @@ nav a:hover { .energie { background-color: #FFFACD; } .lumiere { background-color: #F5F5DC; } -.graphiques { - grid-column: span 4; - background-color: white; -} - -.alertes { - grid-column: span 4; - background-color: #FFC0CB; -} +.graphiques { grid-column: span 4; background-color: white; } +.alertes { grid-column: span 4; background-color: #FFC0CB; } /* icones */ .icone {