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
219 lines
9.0 KiB
HTML
219 lines
9.0 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 — 09 Services Hub</title>
|
|
<link rel="stylesheet" href="shared-blue.css">
|
|
<style>
|
|
.services-header {
|
|
padding: 16px;
|
|
background: linear-gradient(135deg, var(--primary-600), var(--indigo-500));
|
|
color: white;
|
|
}
|
|
.services-title { font-size: var(--text-xl); font-weight: var(--weight-bold); margin-bottom: 4px; }
|
|
.services-sub { font-size: var(--text-sm); opacity: 0.8; }
|
|
|
|
.category-grid {
|
|
display: grid; grid-template-columns: 1fr 1fr;
|
|
gap: 12px; padding: 16px;
|
|
}
|
|
.category-card {
|
|
background: white;
|
|
border-radius: var(--radius-xl);
|
|
padding: 18px 14px;
|
|
text-align: center;
|
|
box-shadow: var(--shadow-sm);
|
|
border: 1px solid var(--neutral-100);
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.category-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
.category-card::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
height: 3px;
|
|
}
|
|
.cat-icon {
|
|
width: 52px; height: 52px;
|
|
border-radius: var(--radius-lg);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 26px;
|
|
margin: 0 auto 10px;
|
|
}
|
|
.cat-name {
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-bold);
|
|
margin-bottom: 3px;
|
|
}
|
|
.cat-desc {
|
|
font-size: 10px;
|
|
color: var(--neutral-500);
|
|
line-height: 1.3;
|
|
}
|
|
.cat-badge {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
padding: 2px 8px;
|
|
border-radius: var(--radius-full);
|
|
font-size: 9px;
|
|
font-weight: 600;
|
|
}
|
|
.section-heading {
|
|
padding: 8px 16px 10px;
|
|
font-size: var(--text-md);
|
|
font-weight: var(--weight-bold);
|
|
}
|
|
/* 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">
|
|
<!-- Status Bar -->
|
|
<div class="status-bar">
|
|
<span>9:41</span>
|
|
<div style="display:flex;gap:4px;align-items:center;">
|
|
<svg width="16" height="12" viewBox="0 0 16 12"><rect x="0" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" fill="#333"/><rect x="9" y="0" width="3" height="12" rx="1" fill="#333"/><rect x="13.5" y="0" width="2.5" height="12" rx="1" fill="#ccc"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<div class="services-header">
|
|
<div class="services-title">🏛️ Services de la Ville</div>
|
|
<div class="services-sub">Tous les services publics et privés au même endroit</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="content-area" style="top:88px;background:var(--neutral-50);">
|
|
|
|
<div class="section-heading">Services principaux</div>
|
|
<div class="category-grid">
|
|
<!-- Transport -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E3F2FD,#BBDEFB);">🚌</div>
|
|
<div class="cat-name">Transport</div>
|
|
<div class="cat-desc">Bus, TCSP, temps réel</div>
|
|
<span class="cat-badge" style="background:#E3F2FD;color:#1565C0;">3 lignes</span>
|
|
</div>
|
|
<!-- Énergie -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#FFF3E0,#FFE0B2);">⚡</div>
|
|
<div class="cat-name">Énergie</div>
|
|
<div class="cat-desc">Conso, bornes, solaire</div>
|
|
<span class="cat-badge" style="background:#FFF3E0;color:#E65100;">IoT Live</span>
|
|
</div>
|
|
<!-- Santé -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#FCE4EC,#F8BBD0);">🏥</div>
|
|
<div class="cat-name">Santé</div>
|
|
<div class="cat-desc">Pharmacies, urgences, RDV</div>
|
|
<span class="cat-badge" style="background:#FCE4EC;color:#C62828;">24h/24</span>
|
|
</div>
|
|
<!-- Marché -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E0F7FA,#B2EBF2);">🏪</div>
|
|
<div class="cat-name">Marché Local</div>
|
|
<div class="cat-desc">Producteurs, livraison</div>
|
|
<span class="cat-badge" style="background:#E0F7FA;color:#00838F;">Marché</span>
|
|
</div>
|
|
<!-- Wallet -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E8EAF6,#C5CAE9);">💳</div>
|
|
<div class="cat-name">Wallet DPI</div>
|
|
<div class="cat-desc">Paiements, identité</div>
|
|
<span class="cat-badge" style="background:#E8EAF6;color:#3949AB;">OTN</span>
|
|
</div>
|
|
<!-- Signalements -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#FFF9C4,#FFF59D);">📸</div>
|
|
<div class="cat-name">Signalements</div>
|
|
<div class="cat-desc">ODK, voirie, propreté</div>
|
|
<span class="cat-badge" style="background:#FFF9C4;color:#F57F17;">12 actifs</span>
|
|
</div>
|
|
<!-- Culture -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#F3E5F5,#E1BEE7);">🎭</div>
|
|
<div class="cat-name">Culture</div>
|
|
<div class="cat-desc">Événements, musées, agenda</div>
|
|
<span class="cat-badge" style="background:#F3E5F5;color:#7B1FA2;">5 ce week-end</span>
|
|
</div>
|
|
<!-- Environnement -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E8F5E9,#C8E6C9);">🌿</div>
|
|
<div class="cat-name">Environnement</div>
|
|
<div class="cat-desc">Air, eau, déchets, météo</div>
|
|
<span class="cat-badge" style="background:#E8F5E9;color:#2E7D32;">60 capteurs</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-heading">Services numériques</div>
|
|
<div class="category-grid">
|
|
<!-- AI Chat -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E8EAF6,#9FA8DA);">🤖</div>
|
|
<div class="cat-name">AI Assistant</div>
|
|
<div class="cat-desc">RAG, données temps réel</div>
|
|
<span class="cat-badge" style="background:#E8EAF6;color:#3949AB;">RAG</span>
|
|
</div>
|
|
<!-- Carte -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E0F7FA,#80DEEA);">🗺️</div>
|
|
<div class="cat-name">Carte Interactive</div>
|
|
<div class="cat-desc">IoT, zones, itinéraires</div>
|
|
<span class="cat-badge" style="background:#E0F7FA;color:#00838F;">Live</span>
|
|
</div>
|
|
<!-- Notifications -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E3F2FD,#90CAF9);">🔔</div>
|
|
<div class="cat-name">Alertes</div>
|
|
<div class="cat-desc">Push, SMS, email</div>
|
|
<span class="cat-badge" style="background:#E3F2FD;color:#1565C0;">3 non lues</span>
|
|
</div>
|
|
<!-- ODK -->
|
|
<div class="category-card">
|
|
<div class="cat-icon" style="background:linear-gradient(135deg,#E8F5E9,#A5D6A7);">📋</div>
|
|
<div class="cat-name">Formulaires</div>
|
|
<div class="cat-desc">Enquêtes, collecte data</div>
|
|
<span class="cat-badge" style="background:#E8F5E9;color:#2E7D32;">ODK</span>
|
|
</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);">09 — Services Hub v2 / Blue</div>
|
|
</div>
|
|
</body>
|
|
</html>
|