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
408 lines
22 KiB
HTML
408 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Smart App City v2 — UI/UX Blue Palette</title>
|
||
<style>
|
||
@page { size: A4 landscape; margin: 8mm; }
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 11px; color: #212121; background: #fff; }
|
||
.page { page-break-after: always; padding: 12px; min-height: 100%; }
|
||
.page:last-child { page-break-after: auto; }
|
||
|
||
/* Cover */
|
||
.cover { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; text-align: center; background: linear-gradient(160deg, #051C38 0%, #0D47A1 40%, #00838F 100%); color: white; border-radius: 12px; padding: 30px; }
|
||
.cover h1 { font-size: 36px; font-weight: 700; margin-bottom: 6px; }
|
||
.cover h2 { font-size: 16px; font-weight: 400; opacity: 0.85; margin-bottom: 8px; }
|
||
.cover-tagline { font-size: 12px; opacity: 0.6; margin-bottom: 24px; }
|
||
.cover-feats { display: flex; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; justify-content: center; }
|
||
.cover-feat { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; }
|
||
.cover-feat-icon { width: 44px; height: 44px; background: rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
|
||
.cover-meta { font-size: 11px; opacity: 0.5; }
|
||
|
||
/* Screen grid for PDF */
|
||
.screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
||
.phone-canvas { width: 100%; }
|
||
.phone-frame-pdf {
|
||
width: 100%; aspect-ratio: 390/844;
|
||
border-radius: 16px; border: 2px solid #424242;
|
||
overflow: hidden; position: relative;
|
||
background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
}
|
||
.phone-frame-pdf img {
|
||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||
}
|
||
.screen-label {
|
||
text-align: center; margin-top: 6px;
|
||
font-size: 10px; font-weight: 600; color: #555;
|
||
}
|
||
.screen-page-label {
|
||
text-align: center; font-size: 8px; color: #999; margin-top: 2px;
|
||
}
|
||
|
||
/* Section title */
|
||
.section-title-pdf {
|
||
font-size: 18px; font-weight: 700; margin-bottom: 12px;
|
||
padding-bottom: 6px; border-bottom: 2px solid #1565C0;
|
||
color: #1565C0;
|
||
}
|
||
|
||
/* Color palette */
|
||
.palette-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
|
||
.palette-item { text-align: center; }
|
||
.palette-swatch { width: 100%; height: 40px; border-radius: 6px; margin-bottom: 4px; border: 1px solid rgba(0,0,0,0.08); }
|
||
.palette-label { font-size: 8px; color: #666; font-weight: 500; }
|
||
|
||
/* Component library */
|
||
.comp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
||
.comp-card {
|
||
background: #f8f9fa; border-radius: 10px;
|
||
padding: 14px; border: 1px solid #e0e0e0;
|
||
}
|
||
.comp-title { font-size: 11px; font-weight: 700; margin-bottom: 8px; color: #333; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="page">
|
||
<div class="cover">
|
||
<h1>🏙️ Smart App City</h1>
|
||
<h2>UI/UX Design System v2 — Blue Ocean Palette</h2>
|
||
<div class="cover-tagline">Martinique Digital Twin · React Native · DPI/OTN</div>
|
||
<div class="cover-feats">
|
||
<div class="cover-feat"><div class="cover-feat-icon">🗺️</div><span>Carte Live</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">🏛️</div><span>Services Ville</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">💳</div><span>Wallet DPI</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">🚌</div><span>Transport</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">⚡</div><span>Énergie</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">🏥</div><span>Santé</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">🤖</div><span>AI Chat</span></div>
|
||
<div class="cover-feat"><div class="cover-feat-icon">📸</div><span>Signalements</span></div>
|
||
</div>
|
||
<div class="cover-meta">v2.0 Blue · 16 écrans · FR/EN/ES/DE · OpenSource</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">🎨 Charte Graphique v2 — Blue Ocean</div>
|
||
<div style="margin-top:12px;font-size:11px;color:#555;margin-bottom:10px;">Palette principale: bleu océan (#1565C0) indigo (#3949AB) cyan (#00ACC1) — inspirée de la mer et du ciel de Martinique.</div>
|
||
|
||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#1565C0;">Primary (Blue Ocean)</div>
|
||
<div class="palette-grid">
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#E3F2FD;"></div><div class="palette-label">50</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#BBDEFB;"></div><div class="palette-label">100</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#90CAF9;"></div><div class="palette-label">200</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#64B5F6;"></div><div class="palette-label">300</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#42A5F5;"></div><div class="palette-label">400</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#1565C0;"></div><div class="palette-label">500</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#0D47A1;"></div><div class="palette-label">600</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#0A3470;"></div><div class="palette-label">700</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#082854;"></div><div class="palette-label">800</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#051C38;"></div><div class="palette-label">900</div></div>
|
||
</div>
|
||
|
||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#00ACC1;margin-top:12px;">Ocean / Cyan</div>
|
||
<div class="palette-grid">
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#E0F7FA;"></div><div class="palette-label">50</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#B2EBF2;"></div><div class="palette-label">100</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#80DEEA;"></div><div class="palette-label">200</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#4DD0E1;"></div><div class="palette-label">300</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#26C6DA;"></div><div class="palette-label">400</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#00ACC1;"></div><div class="palette-label">500</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#00838F;"></div><div class="palette-label">600</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#006064;"></div><div class="palette-label">700</div></div>
|
||
</div>
|
||
|
||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#3949AB;margin-top:12px;">Indigo Accent</div>
|
||
<div class="palette-grid">
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#E8EAF6;"></div><div class="palette-label">50</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#C5CAE9;"></div><div class="palette-label">100</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#9FA8DA;"></div><div class="palette-label">200</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#7986CB;"></div><div class="palette-label">300</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#5C6BC0;"></div><div class="palette-label">400</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#3949AB;"></div><div class="palette-label">500</div></div>
|
||
</div>
|
||
|
||
<div style="font-weight:700;font-size:12px;margin-bottom:8px;color:#D32F2F;margin-top:12px;">Alerts</div>
|
||
<div class="palette-grid">
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#D32F2F;"></div><div class="palette-label">Danger</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#F57C00;"></div><div class="palette-label">Warning</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#2E7D32;"></div><div class="palette-label">Success</div></div>
|
||
<div class="palette-item"><div class="palette-swatch" style="background:#0288D1;"></div><div class="palette-label">Info</div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">📱 Écrans — Navigation principale</div>
|
||
<div class="screen-grid" style="margin-top:12px;">
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/01-onboarding-v2.png" alt="01 Onboarding v2" />
|
||
</div>
|
||
<div class="screen-label">01 Onboarding</div>
|
||
<div class="screen-page-label">Splash / Langue</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/02-home-dashboard-v2.png" alt="02 Home Dashboard v2" />
|
||
</div>
|
||
<div class="screen-label">02 Home Dashboard</div>
|
||
<div class="screen-page-label">IoT + Services</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/09-services-hub-v2.png" alt="09 Services Hub v2" />
|
||
</div>
|
||
<div class="screen-label">09 Services Hub</div>
|
||
<div class="screen-page-label">8 services villes</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/06-profil-blue.png" alt="06 Profil Blue" />
|
||
</div>
|
||
<div class="screen-label">06 Profil</div>
|
||
<div class="screen-page-label">Compte · i18n · DID</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">💳 Écrans — Wallet & Transport</div>
|
||
<div class="screen-grid" style="margin-top:12px;">
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/10-wallet-v2.png" alt="10 Wallet v2" />
|
||
</div>
|
||
<div class="screen-label">10 Wallet DPI</div>
|
||
<div class="screen-page-label">DPI / OTN / DID</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/11-bus-tracker-v2.png" alt="11 Bus Tracker v2" />
|
||
</div>
|
||
<div class="screen-label">11 Bus Tracker</div>
|
||
<div class="screen-page-label">Temps réel / Lignes</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/12-energy-v2.png" alt="12 Énergie v2" />
|
||
</div>
|
||
<div class="screen-label">12 Énergie</div>
|
||
<div class="screen-page-label">Smart Grid / IoT</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/13-health-v2.png" alt="13 Santé v2" />
|
||
</div>
|
||
<div class="screen-label">13 Santé</div>
|
||
<div class="screen-page-label">Pharmacies / RDV</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
<div class="section-title-pfd">🗺️ Écrans — Carte, AI, Marché, Signalements</div>
|
||
<div class="screen-grid" style="margin-top:12px;">
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/03-carte-interactive-blue.png" alt="03 Carte Blue" />
|
||
</div>
|
||
<div class="screen-label">03 Carte Interactive</div>
|
||
<div class="screen-page-label">IoT / Filtres</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/05-ai-chat-blue.png" alt="05 AI Chat Blue" />
|
||
</div>
|
||
<div class="screen-label">05 AI Chat</div>
|
||
<div class="screen-page-label">RAG Assistant</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/04-marketplace-blue.png" alt="04 Marketplace Blue" />
|
||
</div>
|
||
<div class="screen-label">04 Marketplace</div>
|
||
<div class="screen-page-label">DPI</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/08-signalements-blue.png" alt="08 Signalements Blue" />
|
||
</div>
|
||
<div class="screen-label">08 Signalements</div>
|
||
<div class="screen-page-label">ODK / Citoyen</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">🌤️ Écrans — Météo, Notifications, Transport</div>
|
||
<div class="screen-grid" style="margin-top:12px;">
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/09-meteo-blue.png" alt="09 Météo Blue" />
|
||
</div>
|
||
<div class="screen-label">09 Météo</div>
|
||
<div class="screen-page-label">Prévisions · Alertes</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/07-notifications-blue.png" alt="07 Notifications Blue" />
|
||
</div>
|
||
<div class="screen-label">07 Notifications</div>
|
||
<div class="screen-page-label">Alertes · IoT · Marché</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/10-transport-blue.png" alt="10 Transport Blue" />
|
||
</div>
|
||
<div class="screen-label">10 Transport</div>
|
||
<div class="screen-page-label">Réseau · Horaires</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/11-energie-blue.png" alt="11 Énergie Blue" />
|
||
</div>
|
||
<div class="screen-label">11 Énergie</div>
|
||
<div class="screen-page-label">Conso · Solaire</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">🏥 Écrans — Santé & Événements</div>
|
||
<div class="screen-grid" style="margin-top:12px;">
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/12-sante-blue.png" alt="12 Santé Blue" />
|
||
</div>
|
||
<div class="screen-label">12 Santé</div>
|
||
<div class="screen-page-label">Pharmacies · RDV</div>
|
||
</div>
|
||
<div class="phone-canvas">
|
||
<div class="phone-frame-pdf">
|
||
<img src="screenshots/13-evenements-blue.png" alt="13 Événements Blue" />
|
||
</div>
|
||
<div class="screen-label">13 Événements</div>
|
||
<div class="screen-page-label">Agenda · Culture</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">🧩 Bibliothèque de composants</div>
|
||
<div class="comp-grid" style="margin-top:12px;">
|
||
<div class="comp-card">
|
||
<div class="comp-title">Bottom Navigation</div>
|
||
<div style="height:50px;background:#fff;border-top:1px solid #eee;display:flex;justify-content:space-around;align-items:center;border-radius:8px;">
|
||
<div style="text-align:center;font-size:8px;color:#1565C0;">🏠<br>Accueil</div>
|
||
<div style="text-align:center;font-size:8px;color:#999;">🗺️<br>Carte</div>
|
||
<div style="text-align:center;font-size:8px;color:#999;">🤖<br>Chat</div>
|
||
<div style="text-align:center;font-size:8px;color:#999;">🏪<br>Marché</div>
|
||
<div style="text-align:center;font-size:8px;color:#999;">👤<br>Profil</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-card">
|
||
<div class="comp-title">Buttons</div>
|
||
<div style="display:flex;flex-direction:column;gap:6px;">
|
||
<div style="background:#1565C0;color:white;padding:8px 16px;border-radius:20px;text-align:center;font-size:11px;font-weight:600;">Primary</div>
|
||
<div style="background:#EEEEEE;color:#424242;padding:8px 16px;border-radius:20px;text-align:center;font-size:11px;font-weight:600;">Secondary</div>
|
||
<div style="background:transparent;color:#1565C0;padding:8px 16px;border-radius:20px;text-align:center;font-size:11px;font-weight:600;border:1px solid #1565C0;">Ghost</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-card">
|
||
<div class="comp-title">Chips / Badges</div>
|
||
<div style="display:flex;flex-wrap:wrap;gap:6px;">
|
||
<span style="background:#E3F2FD;color:#1565C0;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;">Marché</span>
|
||
<span style="background:#E0F7FA;color:#00838F;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;">DPI</span>
|
||
<span style="background:#E8EAF6;color:#3949AB;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;">OTN</span>
|
||
<span style="background:#E8F5E9;color:#2E7D32;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;">IoT</span>
|
||
<span style="background:#FFF3E0;color:#E65100;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;">RAG</span>
|
||
</div>
|
||
</div>
|
||
<div class="comp-card">
|
||
<div class="comp-title">Metric Card</div>
|
||
<div style="background:#fff;border-radius:10px;padding:10px;text-align:center;border:1px solid #e0e0e0;">
|
||
<div style="font-size:22px;font-weight:700;color:#1565C0;">60</div>
|
||
<div style="font-size:9px;color:#999;">Capteurs actifs</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-card">
|
||
<div class="comp-title">Toggle Switch</div>
|
||
<div style="display:flex;align-items:center;gap:10px;">
|
||
<div style="width:36px;height:20px;border-radius:10px;background:#1565C0;position:relative;">
|
||
<div style="width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;right:2px;"></div>
|
||
</div>
|
||
<div style="width:36px;height:20px;border-radius:10px;background:#BDBDBD;position:relative;">
|
||
<div style="width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="comp-card">
|
||
<div class="comp-title">Avatar</div>
|
||
<div style="display:flex;gap:8px;align-items:center;">
|
||
<div style="width:36px;height:36px;border-radius:50%;background:#BBDEFB;display:flex;align-items:center;justify-content:center;font-size:16px;">👤</div>
|
||
<div style="width:28px;height:28px;border-radius:50%;background:#C5CAE9;display:flex;align-items:center;justify-content:center;font-size:13px;">🤖</div>
|
||
<div style="width:44px;height:44px;border-radius:50%;background:#E0F7FA;display:flex;align-items:center;justify-content:center;font-size:20px;">🏙️</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page">
|
||
<div class="section-title-pdf">🔄 Parcours utilisateur principal</div>
|
||
<div style="margin-top:16px;">
|
||
<div style="display:flex;align-items:center;gap:0;flex-wrap:nowrap;overflow-x:auto;">
|
||
<div style="flex-shrink:0;text-align:center;padding:8px 12px;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#051C38,#1565C0);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 6px;">📱</div>
|
||
<div style="font-size:10px;font-weight:600;">Onboarding</div>
|
||
<div style="font-size:9px;color:#999;">Langue / Login</div>
|
||
</div>
|
||
<div style="font-size:20px;color:#1565C0;flex-shrink:0;">→</div>
|
||
<div style="flex-shrink:0;text-align:center;padding:8px 12px;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#1565C0,#0D47A1);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 6px;">🏠</div>
|
||
<div style="font-size:10px;font-weight:600;">Dashboard</div>
|
||
<div style="font-size:9px;color:#999;">IoT / Services</div>
|
||
</div>
|
||
<div style="font-size:20px;color:#1565C0;flex-shrink:0;">→</div>
|
||
<div style="flex-shrink:0;text-align:center;padding:8px 12px;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#00ACC1,#00838F);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 6px;">🏛️</div>
|
||
<div style="font-size:10px;font-weight:600;">Services</div>
|
||
<div style="font-size:9px;color:#999;">Choix service</div>
|
||
</div>
|
||
<div style="font-size:20px;color:#1565C0;flex-shrink:0;">→</div>
|
||
<div style="flex-shrink:0;text-align:center;padding:8px 12px;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#3949AB,#1565C0);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 6px;">🤖</div>
|
||
<div style="font-size:10px;font-weight:600;">AI Chat</div>
|
||
<div style="font-size:9px;color:#999;">RAG / Data</div>
|
||
</div>
|
||
<div style="font-size:20px;color:#1565C0;flex-shrink:0;">→</div>
|
||
<div style="flex-shrink:0;text-align:center;padding:8px 12px;">
|
||
<div style="width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#1565C0,#3949AB);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 6px;">💳</div>
|
||
<div style="font-size:10px;font-weight:600;">Wallet</div>
|
||
<div style="font-size:9px;color:#999;">Paiement DPI</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top:24px;padding:16px;background:#E3F2FD;border-radius:12px;border-left:4px solid #1565C0;">
|
||
<div style="font-weight:700;font-size:13px;color:#0D47A1;margin-bottom:6px;">📋 Spécifications techniques</div>
|
||
<div style="font-size:11px;color:#333;line-height:1.8;">
|
||
<strong>Platform:</strong> React Native (iOS + Android)<br>
|
||
<strong>Backend:</strong> NestJS + FastAPI + RAG (MindsDB/LocalAI)<br>
|
||
<strong>Protocol:</strong> DPI/OTN (paiements)<br>
|
||
<strong>IoT:</strong> MQTT (EMQX/Mosquitto) → Telegraf → InfluxDB → Grafana<br>
|
||
<strong>Identity:</strong> DID / Verifiable Credentials<br>
|
||
<strong>Data:</strong> NGSI-LD (Orion-LD/Stellio) + QuantumLeap + CrateDB<br>
|
||
<strong>Mobile Data:</strong> ODK Central<br>
|
||
<strong>i18n:</strong> FR / EN / ES / DE<br>
|
||
<strong>Design:</strong> Inter + SF Pro · 390×844pt · 16 screens v2
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|