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
198 lines
8.6 KiB
HTML
198 lines
8.6 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 v2 — 12 Énergie Monitoring</title>
|
|
<link rel="stylesheet" href="shared-blue.css">
|
|
<style>
|
|
.energy-header {
|
|
padding: 16px;
|
|
background: linear-gradient(135deg, #F57C00, #E65100);
|
|
color: white;
|
|
}
|
|
.energy-title { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: 4px; }
|
|
.energy-sub { font-size: var(--text-sm); opacity: 0.85; }
|
|
|
|
.consumption-card {
|
|
margin: 16px;
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
padding: 18px;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--neutral-100);
|
|
}
|
|
.consumption-value {
|
|
font-size: var(--text-4xl);
|
|
font-weight: var(--weight-bold);
|
|
color: var(--primary-600);
|
|
}
|
|
.consumption-unit { font-size: var(--text-base); color: var(--neutral-500); }
|
|
.consumption-bar {
|
|
height: 8px;
|
|
background: var(--neutral-100);
|
|
border-radius: var(--radius-full);
|
|
margin-top: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.consumption-bar-fill {
|
|
height: 100%;
|
|
border-radius: var(--radius-full);
|
|
background: linear-gradient(90deg, var(--alert-success), var(--alert-warning), var(--alert-danger));
|
|
}
|
|
|
|
.zone-card {
|
|
display: flex; gap: 12px;
|
|
padding: 14px 16px;
|
|
background: white;
|
|
border-bottom: 1px solid var(--neutral-100);
|
|
align-items: center;
|
|
}
|
|
.zone-icon {
|
|
width: 44px; height: 44px;
|
|
border-radius: var(--radius-md);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
.zone-info { flex: 1; }
|
|
.zone-name { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
|
|
.zone-value { font-size: var(--text-xs); color: var(--neutral-500); }
|
|
.zone-status {
|
|
padding: 3px 10px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
}
|
|
.status-normal { background: rgba(46,125,50,0.1); color: var(--alert-success); }
|
|
.status-warn { background: rgba(245,124,0,0.1); color: var(--alert-warning); }
|
|
.status-alert { background: rgba(211,47,47,0.1); color: var(--alert-danger); }
|
|
/* 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>
|
|
|
|
<!-- Header -->
|
|
<div class="energy-header">
|
|
<div class="energy-title">⚡ Monitoring Énergie</div>
|
|
<div class="energy-sub">Consommation en temps réel · Smart Grid Martinique</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content-area" style="top:88px;background:var(--neutral-50);">
|
|
|
|
<!-- Main consumption -->
|
|
<div class="consumption-card">
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
|
<div style="font-size:var(--text-sm);color:var(--neutral-600);">Consommation aujourd'hui</div>
|
|
<div style="background:#E3F2FD;padding:3px 10px;border-radius:var(--radius-full);font-size:10px;font-weight:600;color:#1565C0;">📡 IoT Live</div>
|
|
</div>
|
|
<div style="display:flex;align-items:baseline;gap:6px;">
|
|
<span class="consumption-value">12.4</span>
|
|
<span class="consumption-unit">kWh · -8% vs hier</span>
|
|
</div>
|
|
<div class="consumption-bar">
|
|
<div class="consumption-bar-fill" style="width:62%;"></div>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;margin-top:6px;font-size:10px;color:var(--neutral-400);">
|
|
<span>0 kWh</span>
|
|
<span>Objectif: 20 kWh</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Solar production -->
|
|
<div style="margin:0 16px 16px;background:linear-gradient(135deg,#FFF9C4,#FFF176);border-radius:var(--radius-xl);padding:16px;border:1px solid #FDD835;">
|
|
<div style="display:flex;align-items:center;gap:10px;">
|
|
<div style="font-size:32px;">☀️</div>
|
|
<div>
|
|
<div style="font-weight:700;font-size:var(--text-base);">Production solaire</div>
|
|
<div style="font-size:28px;font-weight:700;color:#F57F17;">3.8 kWh</div>
|
|
<div style="font-size:11px;color:#F9A825;">5 panneaux · 87% efficiency</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bornes -->
|
|
<div style="display:flex;gap:8px;padding:0 16px 12px;">
|
|
<div style="flex:1;background:white;border-radius:var(--radius-lg);padding:12px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--neutral-100);">
|
|
<div style="font-size:22px;margin-bottom:4px;">🔌</div>
|
|
<div style="font-size:var(--text-xl);font-weight:700;color:var(--primary-500);">4</div>
|
|
<div style="font-size:10px;color:var(--neutral-500);">Bornes libres</div>
|
|
</div>
|
|
<div style="flex:1;background:white;border-radius:var(--radius-lg);padding:12px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--neutral-100);">
|
|
<div style="font-size:22px;margin-bottom:4px;">🔋</div>
|
|
<div style="font-size:var(--text-xl);font-weight:700;color:var(--alert-success);">78%</div>
|
|
<div style="font-size:10px;color:var(--neutral-500);">Batterie ville</div>
|
|
</div>
|
|
<div style="flex:1;background:white;border-radius:var(--radius-lg);padding:12px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--neutral-100);">
|
|
<div style="font-size:22px;margin-bottom:4px;">🌡️</div>
|
|
<div style="font-size:var(--text-xl);font-weight:700;color:var(--ocean-500);">24°</div>
|
|
<div style="font-size:10px;color:var(--neutral-500);">Temp. réseau</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Zones -->
|
|
<div style="padding:0 16px 8px;font-size:var(--text-md);font-weight:700;">Par zone</div>
|
|
<div class="zone-card">
|
|
<div class="zone-icon" style="background:#E3F2FD;">🏙️</div>
|
|
<div class="zone-info">
|
|
<div class="zone-name">Fort-de-France Centre</div>
|
|
<div class="zone-value">4.2 kWh · Stable</div>
|
|
</div>
|
|
<div class="zone-status status-normal">Normal</div>
|
|
</div>
|
|
<div class="zone-card">
|
|
<div class="zone-icon" style="background:#FFF3E0;">🏫</div>
|
|
<div class="zone-info">
|
|
<div class="zone-name">Schœlcher — Campus</div>
|
|
<div class="zone-value">3.8 kWh · -12%</div>
|
|
</div>
|
|
<div class="zone-status status-normal">Normal</div>
|
|
</div>
|
|
<div class="zone-card">
|
|
<div class="zone-icon" style="background:#FFF9C4;">🏭</div>
|
|
<div class="zone-info">
|
|
<div class="zone-name">Zone Industrielle Lamentin</div>
|
|
<div class="zone-value">5.1 kWh · +34%</div>
|
|
</div>
|
|
<div class="zone-status status-warn">Élevé</div>
|
|
</div>
|
|
<div class="zone-card">
|
|
<div class="zone-icon" style="background:#FCE4EC;">🏥</div>
|
|
<div class="zone-info">
|
|
<div class="zone-name">CHU — Pothière</div>
|
|
<div class="zone-value">2.9 kWh · Stable</div>
|
|
</div>
|
|
<div class="zone-status status-normal">Normal</div>
|
|
</div>
|
|
|
|
<div style="height:16px;"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Nav -->
|
|
<div class="bottom-nav">
|
|
<div class="bottom-nav-item">
|
|
<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 active">
|
|
<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);">12 — Monitoring Énergie v2 / Blue</div>
|
|
</div>
|
|
</body>
|
|
</html>
|