e30ae8ed09
- App.tsx: full navigation (Auth stack + Main tabs with 5 screens) - Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen - HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors - MapScreen: interactive map with layer toggles (6 layers) - MarketplaceScreen: categories (6), products (5), search - ChatScreen: AI chat with quick prompts (4), bot responses - ProfileScreen: user info, stats, menu (9 items), logout - AlertsScreen: alert list with severity, acknowledge - SensorsScreen: sensor list with type filters (6 types), search - ZonesScreen: zone cards with stats - SettingsScreen: language picker (FR/EN/ES/DE), privacy, about - Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n - Hooks: useSensors, useAlerts, useNotifications, useLocation - Components: Card, Button, LoadingSpinner, ErrorBoundary, Header - Services: iotService, notificationService (with axios API client) - Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN) - Theme: colors.ts with full design system (Blue Ocean palette) - Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
207 lines
10 KiB
HTML
207 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Smart App City — 11 Énergie & Environnement (Blue v2)</title>
|
|
<link rel="stylesheet" href="shared-blue.css">
|
|
<style>
|
|
.energy-header {
|
|
background: linear-gradient(135deg, #1565C0, #00838F);
|
|
padding: 16px; color: white;
|
|
}
|
|
.energy-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
|
.energy-sub { font-size: 13px; opacity: 0.8; }
|
|
|
|
.energy-dashboard {
|
|
display: grid; grid-template-columns: repeat(2, 1fr);
|
|
gap: 10px; padding: 16px;
|
|
}
|
|
.energy-card {
|
|
background: white; border-radius: 16px; padding: 16px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
border: 1px solid var(--neutral-100);
|
|
}
|
|
.energy-card-icon { font-size: 28px; margin-bottom: 8px; }
|
|
.energy-card-value { font-size: 24px; font-weight: 700; color: var(--primary-500); }
|
|
.energy-card-unit { font-size: 12px; color: var(--neutral-500); }
|
|
.energy-card-label { font-size: 11px; color: var(--neutral-500); margin-top: 4px; }
|
|
.energy-card-trend { font-size: 11px; margin-top: 4px; }
|
|
.trend-up { color: var(--alert-success); }
|
|
.trend-down { color: var(--alert-danger); }
|
|
|
|
.chart-container {
|
|
margin: 0 16px 16px; background: white; border-radius: 16px;
|
|
padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
border: 1px solid var(--neutral-100);
|
|
}
|
|
.chart-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
|
|
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 100px; }
|
|
.bar {
|
|
flex: 1; border-radius: 4px 4px 0 0;
|
|
background: linear-gradient(to top, var(--primary-500), var(--primary-300));
|
|
position: relative;
|
|
}
|
|
.bar-label {
|
|
position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
|
|
font-size: 9px; color: var(--neutral-500);
|
|
}
|
|
|
|
.co2-gauge {
|
|
margin: 0 16px 16px; background: white; border-radius: 16px;
|
|
padding: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
|
border: 1px solid var(--neutral-100); text-align: center;
|
|
}
|
|
.gauge-value { font-size: 36px; font-weight: 700; color: var(--alert-success); }
|
|
.gauge-label { font-size: 12px; color: var(--neutral-500); }
|
|
.gauge-bar {
|
|
height: 8px; background: var(--neutral-200); border-radius: 4px;
|
|
margin: 12px 0 8px; overflow: hidden;
|
|
}
|
|
.gauge-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--alert-success), var(--alert-warning), var(--alert-danger)); }
|
|
|
|
.waste-section { padding: 0 16px 16px; }
|
|
.waste-item {
|
|
display: flex; align-items: center; gap: 12px;
|
|
background: white; border-radius: 12px; padding: 12px;
|
|
margin-bottom: 8px; border: 1px solid var(--neutral-100);
|
|
}
|
|
.waste-icon { font-size: 24px; }
|
|
.waste-info { flex: 1; }
|
|
.waste-label { font-size: 13px; font-weight: 600; }
|
|
.waste-status { font-size: 11px; color: var(--neutral-500); }
|
|
.waste-level {
|
|
width: 60px; height: 8px; background: var(--neutral-200);
|
|
border-radius: 4px; overflow: hidden;
|
|
}
|
|
.waste-fill { height: 100%; border-radius: 4px; }
|
|
/* Fixed viewport for PDF/iframe embedding */
|
|
html, body { width: 390px !important; height: 844px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="mobile-frame">
|
|
<div class="status-bar"><span>9:41</span></div>
|
|
|
|
<div class="energy-header">
|
|
<div class="energy-title">⚡ Énergie & Environnement</div>
|
|
<div class="energy-sub">Martinique · Données en temps réel</div>
|
|
</div>
|
|
|
|
<div class="content-area" style="top:80px;background:var(--neutral-50);">
|
|
|
|
<!-- Dashboard cards -->
|
|
<div class="energy-dashboard">
|
|
<div class="energy-card">
|
|
<div class="energy-card-icon">⚡</div>
|
|
<div class="energy-card-value">3.2</div>
|
|
<div class="energy-card-unit">MW consommés</div>
|
|
<div class="energy-card-label">Consommation actuelle</div>
|
|
<div class="energy-card-trend trend-down">↓ -5% vs hier</div>
|
|
</div>
|
|
<div class="energy-card">
|
|
<div class="energy-card-icon">☀️</div>
|
|
<div class="energy-card-value">1.8</div>
|
|
<div class="energy-card-unit">MW solaire</div>
|
|
<div class="energy-card-label">Production solaire</div>
|
|
<div class="energy-card-trend trend-up">↑ +12% vs hier</div>
|
|
</div>
|
|
<div class="energy-card">
|
|
<div class="energy-card-icon">💧</div>
|
|
<div class="energy-card-value">98.2%</div>
|
|
<div class="energy-card-unit">Qualité eau</div>
|
|
<div class="energy-card-label">Indice qualité réseau</div>
|
|
<div class="energy-card-trend trend-up">↑ Excellent</div>
|
|
</div>
|
|
<div class="energy-card">
|
|
<div class="energy-card-icon">🌡️</div>
|
|
<div class="energy-card-value">24.3</div>
|
|
<div class="energy-card-unit">°C moyenne</div>
|
|
<div class="energy-card-label">Température ville</div>
|
|
<div class="energy-card-trend">→ Stable</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Consumption chart -->
|
|
<div class="chart-container">
|
|
<div class="chart-title">Consommation électrique — 24h</div>
|
|
<div class="bar-chart">
|
|
<div class="bar" style="height:30%;"><span class="bar-label">0h</span></div>
|
|
<div class="bar" style="height:25%;"><span class="bar-label">4h</span></div>
|
|
<div class="bar" style="height:35%;"><span class="bar-label">8h</span></div>
|
|
<div class="bar" style="height:55%;"><span class="bar-label">10h</span></div>
|
|
<div class="bar" style="height:70%;"><span class="bar-label">12h</span></div>
|
|
<div class="bar" style="height:65%;"><span class="bar-label">14h</span></div>
|
|
<div class="bar" style="height:80%;"><span class="bar-label">16h</span></div>
|
|
<div class="bar" style="height:90%;"><span class="bar-label">18h</span></div>
|
|
<div class="bar" style="height:100%;"><span class="bar-label">20h</span></div>
|
|
<div class="bar" style="height:75%;"><span class="bar-label">22h</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CO2 Gauge -->
|
|
<div class="co2-gauge">
|
|
<div class="gauge-value">-5.2%</div>
|
|
<div class="gauge-label">Réduction CO₂ ce mois-ci vs année dernière</div>
|
|
<div class="gauge-bar"><div class="gauge-fill" style="width:65%;"></div></div>
|
|
<div style="display:flex;justify-content:space-between;font-size:10px;color:var(--neutral-400);">
|
|
<span>0%</span><span>Objectif: -10%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Waste management -->
|
|
<div style="padding:0 16px 8px; font-size:16px; font-weight:700;">🗑️ Gestion des déchets</div>
|
|
<div class="waste-section">
|
|
<div class="waste-item">
|
|
<div class="waste-icon">♻️</div>
|
|
<div class="waste-info"><div class="waste-label">Tri sélectif</div><div class="waste-status">Collecte demain · 7h</div></div>
|
|
<div class="waste-level"><div class="waste-fill" style="width:45%;background:var(--alert-success);"></div></div>
|
|
</div>
|
|
<div class="waste-item">
|
|
<div class="waste-icon">🗑️</div>
|
|
<div class="waste-info"><div class="waste-label">Ordures ménagères</div><div class="waste-status">Collecte demain · 6h</div></div>
|
|
<div class="waste-level"><div class="waste-fill" style="width:72%;background:var(--alert-warning);"></div></div>
|
|
</div>
|
|
<div class="waste-item">
|
|
<div class="waste-icon">🌿</div>
|
|
<div class="waste-info"><div class="waste-label">Déchets verts</div><div class="waste-status">Prochaine collecte: vendredi</div></div>
|
|
<div class="waste-level"><div class="waste-fill" style="width:30%;background:var(--alert-success);"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Water quality -->
|
|
<div style="padding:0 16px 8px; font-size:16px; font-weight:700;">💧 Qualité de l'eau</div>
|
|
<div class="energy-dashboard" style="padding-top:0;">
|
|
<div class="energy-card">
|
|
<div class="energy-card-value" style="color:var(--ocean-500);">7.2</div>
|
|
<div class="energy-card-label">pH moyen réseau</div>
|
|
</div>
|
|
<div class="energy-card">
|
|
<div class="energy-card-value" style="color:var(--alert-success);">0.3</div>
|
|
<div class="energy-card-label">Chlore (mg/L)</div>
|
|
</div>
|
|
<div class="energy-card">
|
|
<div class="energy-card-value" style="color:var(--alert-success);">99.1%</div>
|
|
<div class="energy-card-label">Conformité bactério.</div>
|
|
</div>
|
|
<div class="energy-card">
|
|
<div class="energy-card-value" style="color:var(--primary-500);">12</div>
|
|
<div class="energy-card-label">Capteurs actifs</div>
|
|
</div>
|
|
</div>
|
|
<div style="height:16px;"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Nav -->
|
|
<div class="bottom-nav">
|
|
<div class="bottom-nav-item active"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Accueil</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg><span>Carte</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg><span>AI Chat</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg><span>Marché</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>Profil</span></div>
|
|
</div>
|
|
<div style="position:absolute;bottom:88px;left:0;right:0;text-align:center;font-size:10px;color:var(--neutral-400);">11 — Énergie & Environnement · Blue v2</div>
|
|
</div>
|
|
</body>
|
|
</html>
|