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
316 lines
22 KiB
HTML
316 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Smart App City — UI/UX Maquettes</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, #1B5E20, #00838F, #00ACC1); 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: 24px; }
|
|
.cover-feats { display: flex; gap: 24px; margin-bottom: 24px; }
|
|
.cover-feat { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; }
|
|
.cover-feat-icon { width: 48px; height: 48px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; }
|
|
.cover-meta { font-size: 11px; opacity: 0.6; }
|
|
|
|
/* Screen grid for PDF */
|
|
.screen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
|
|
.phone-canvas { width: 100%; }
|
|
.phone-frame-pdf {
|
|
width: 100%; aspect-ratio: 390/844;
|
|
border-radius: 20px; border: 2.5px solid #424242;
|
|
overflow: hidden; position: relative;
|
|
background: white; box-shadow: 0 3px 12px rgba(0,0,0,0.1);
|
|
}
|
|
.phone-notch-pdf {
|
|
width: 30%; height: 16px; background: #424242;
|
|
border-radius: 0 0 10px 10px;
|
|
position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 5;
|
|
}
|
|
.phone-label { font-size: 10px; font-weight: 600; color: #424242; text-align: center; margin-top: 6px; }
|
|
.phone-desc { font-size: 9px; color: #9E9E9E; text-align: center; max-width: 180px; margin: 2px auto 0; }
|
|
.phone-frame-pdf img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
|
|
/* Inline phone screens - simplified for PDF */
|
|
.screen-onboard { background: linear-gradient(160deg, #1B5E20, #00838F, #00ACC1); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 16px; text-align: center; color: white; }
|
|
.screen-onboard .logo { width: 50px; height: 50px; background: rgba(255,255,255,0.15); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 12px; }
|
|
.screen-onboard .title { font-size: 18px; font-weight: 700; margin-bottom: 3px; }
|
|
.screen-onboard .subtitle { font-size: 10px; opacity: 0.7; margin-bottom: 14px; }
|
|
.screen-onboard .langs { display: flex; gap: 5px; margin-bottom: 14px; }
|
|
.screen-onboard .lang-pill { padding: 3px 10px; border-radius: 10px; background: rgba(255,255,255,0.2); font-size: 9px; font-weight: 600; }
|
|
.screen-onboard .lang-pill.active { background: white; color: #1B5E20; }
|
|
.screen-onboard .feats { display: flex; gap: 10px; margin-bottom: 18px; }
|
|
.screen-onboard .feat { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; opacity: 0.7; }
|
|
.screen-onboard .feat-icon { width: 30px; height: 30px; background: rgba(255,255,255,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
|
|
.screen-onboard .btns { width: 100%; max-width: 180px; display: flex; flex-direction: column; gap: 6px; }
|
|
.screen-onboard .btn-main { background: white; color: #2B6B2E; padding: 8px; border-radius: 16px; font-weight: 700; font-size: 10px; }
|
|
.screen-onboard .btn-ghost { background: rgba(255,255,255,0.15); color: white; padding: 8px; border-radius: 16px; font-weight: 600; font-size: 10px; border: 1.5px solid rgba(255,255,255,0.3); }
|
|
|
|
.screen-home { background: linear-gradient(135deg,#2E7D32,#00ACC1); height: 100%; display: flex; flex-direction: column; }
|
|
.screen-home .header { padding: 10px 12px 8px; color: white; }
|
|
.screen-home .greet { font-size: 9px; opacity: 0.8; }
|
|
.screen-home .name { font-size: 12px; font-weight: 700; }
|
|
.screen-home .live { font-size: 8px; display: flex; align-items: center; gap: 3px; }
|
|
.screen-home .live-dot { width: 5px; height: 5px; background: #66BB6A; border-radius: 50%; }
|
|
.screen-home .search { background: rgba(255,255,255,0.2); border-radius: 16px; padding: 6px 10px; font-size: 9px; color: rgba(255,255,255,0.7); margin-top: 6px; }
|
|
.screen-home .body { flex: 1; background: #FAFAFA; border-radius: 12px 12px 0 0; padding: 8px; }
|
|
.screen-home .metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin-bottom: 6px; }
|
|
.screen-home .metric { background: white; border-radius: 8px; padding: 7px; text-align: center; border: 1px solid #E0E0E0; }
|
|
.screen-home .metric-val { font-size: 13px; font-weight: 700; color: #2E7D32; }
|
|
.screen-home .metric-lbl { font-size: 7px; color: #9E9E9E; }
|
|
.screen-home .alert { background: rgba(211,47,47,0.08); border: 1px solid rgba(211,47,47,0.2); border-radius: 8px; padding: 6px 8px; margin-bottom: 6px; font-size: 8px; color: #D32F2F; font-weight: 600; }
|
|
.screen-home .qactions { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-bottom: 8px; }
|
|
.screen-home .qa { text-align: center; }
|
|
.screen-home .qa-icon { width: 32px; height: 32px; border-radius: 8px; margin: 0 auto 3px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: white; }
|
|
.screen-home .qa-lbl { font-size: 7px; color: #757575; }
|
|
.screen-home .section-title { font-size: 10px; font-weight: 700; margin-bottom: 5px; }
|
|
.screen-home .sensors { display: flex; gap: 6px; overflow: hidden; }
|
|
.screen-home .sensor { flex-shrink: 0; width: 90px; background: white; border-radius: 8px; padding: 7px; border: 1px solid #E0E0E0; }
|
|
.screen-home .sensor-icon { font-size: 14px; margin-bottom: 3px; }
|
|
.screen-home .sensor-val { font-size: 12px; font-weight: 700; }
|
|
.screen-home .sensor-name { font-size: 7px; color: #9E9E9E; }
|
|
.screen-home .nav { background: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-around; padding: 5px 0 10px; }
|
|
.screen-home .nav-item { text-align: center; font-size: 8px; color: #9E9E9E; }
|
|
.screen-home .nav-item.active { color: #2E7D32; font-weight: 600; }
|
|
|
|
.screen-map { background: #D4EEF7; height: 100%; position: relative; }
|
|
.screen-map .island { position: absolute; bottom: 15%; left: 10%; width: 80%; height: 50%; }
|
|
.screen-map .toolbar { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; gap: 4px; }
|
|
.screen-map .search-box { flex: 1; background: white; border-radius: 16px; padding: 6px 10px; font-size: 9px; color: #9E9E9E; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
|
|
.screen-map .fab { width: 28px; height: 28px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
|
|
.screen-map .legend { position: absolute; top: 46px; right: 6px; background: white; border-radius: 8px; padding: 6px; font-size: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
|
|
.screen-map .legend-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; margin-right: 3px; }
|
|
.screen-map .bottom-card { position: absolute; bottom: 6px; left: 6px; right: 6px; background: white; border-radius: 10px; padding: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
|
|
.screen-map .bc-title { font-weight: 700; font-size: 10px; }
|
|
.screen-map .bc-sub { font-size: 8px; color: #9E9E9E; }
|
|
.screen-map .bc-val { font-size: 14px; font-weight: 700; color: #2E7D32; }
|
|
.screen-map .bc-meta { display: flex; gap: 4px; margin-top: 5px; }
|
|
.screen-map .bc-m { flex: 1; background: #F5F5F5; border-radius: 4px; padding: 4px; text-align: center; }
|
|
.screen-map .bc-m-val { font-size: 9px; font-weight: 700; }
|
|
.screen-map .bc-m-lbl { font-size: 6px; color: #9E9E9E; }
|
|
|
|
.screen-market { background: white; height: 100%; display: flex; flex-direction: column; }
|
|
.screen-market .header { padding: 8px 10px; border-bottom: 1px solid #E0E0E0; }
|
|
.screen-market .title { font-size: 12px; font-weight: 700; }
|
|
.screen-market .search { background: #F5F5F5; border-radius: 16px; padding: 5px 10px; font-size: 9px; color: #9E9E9E; margin: 5px 0; }
|
|
.screen-market .cats { display: flex; gap: 4px; }
|
|
.screen-market .cat { padding: 3px 8px; border-radius: 10px; font-size: 8px; font-weight: 600; background: #F5F5F5; color: #757575; }
|
|
.screen-market .cat.active { background: #2E7D32; color: white; }
|
|
.screen-market .body { flex: 1; overflow: hidden; padding: 8px; background: #FAFAFA; }
|
|
.screen-market .featured { background: linear-gradient(135deg,#1B5E20,#00838F); border-radius: 10px; padding: 10px; color: white; margin-bottom: 8px; }
|
|
.screen-market .ft-tag { background: rgba(255,255,255,0.2); border-radius: 8px; padding: 2px 6px; font-size: 7px; font-weight: 600; display: inline-block; margin-bottom: 4px; }
|
|
.screen-market .ft-title { font-weight: 700; font-size: 11px; }
|
|
.screen-market .ft-desc { font-size: 8px; opacity: 0.8; }
|
|
.screen-market .products { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
|
|
.screen-market .product { background: white; border-radius: 8px; overflow: hidden; border: 1px solid #E0E0E0; }
|
|
.screen-market .p-img { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
|
|
.screen-market .p-info { padding: 6px; }
|
|
.screen-market .p-name { font-size: 9px; font-weight: 600; }
|
|
.screen-market .p-shop { font-size: 7px; color: #9E9E9E; }
|
|
.screen-market .p-price { font-size: 10px; font-weight: 700; color: #2E7D32; }
|
|
.screen-market .nav { background: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-around; padding: 4px 0 8px; }
|
|
.screen-market .nav-item { text-align: center; font-size: 8px; color: #9E9E9E; }
|
|
.screen-market .nav-item.active { color: #2E7D32; font-weight: 600; }
|
|
|
|
.screen-chat { background: #FAFAFA; height: 100%; display: flex; flex-direction: column; }
|
|
.screen-chat .header { background: white; border-bottom: 1px solid #E0E0E0; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
|
|
.screen-chat .avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#7C4DFF,#B388FF); display: flex; align-items: center; justify-content: center; font-size: 13px; position: relative; }
|
|
.screen-chat .online { position: absolute; bottom: 0; right: 0; width: 7px; height: 7px; background: #2E7D32; border-radius: 50%; border: 1.5px solid white; }
|
|
.screen-chat .name { font-weight: 700; font-size: 10px; }
|
|
.screen-chat .status { font-size: 8px; color: #2E7D32; }
|
|
.screen-chat .msgs { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
|
|
.screen-chat .msg { display: flex; gap: 5px; align-items: flex-end; }
|
|
.screen-chat .msg.user { flex-direction: row-reverse; }
|
|
.screen-chat .msg-avatar { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg,#7C4DFF,#B388FF); display: flex; align-items: center; justify-content: center; font-size: 9px; flex-shrink: 0; }
|
|
.screen-chat .bubble { max-width: 78%; padding: 6px 8px; border-radius: 10px; font-size: 8px; line-height: 1.4; }
|
|
.screen-chat .msg:not(.user) .bubble { background: #F5F5F5; border-bottom-left-radius: 3px; }
|
|
.screen-chat .msg.user .bubble { background: linear-gradient(135deg,#2E7D32,#1B5E20); color: white; border-bottom-right-radius: 3px; }
|
|
.screen-chat .time { font-size: 7px; color: #BDBDBD; margin-top: 2px; }
|
|
.screen-chat .msg.user .time { text-align: right; }
|
|
.screen-chat .quick { display: flex; gap: 4px; padding: 0 8px 6px; }
|
|
.screen-chat .qr { padding: 4px 8px; border-radius: 10px; background: #E8F5E9; color: #2E7D32; font-size: 8px; font-weight: 600; }
|
|
.screen-chat .input { background: white; border-top: 1px solid #E0E0E0; padding: 6px 8px; display: flex; gap: 5px; align-items: center; }
|
|
.screen-chat .input-box { flex: 1; border: 1.5px solid #E0E0E0; border-radius: 16px; padding: 6px 10px; font-size: 9px; color: #9E9E9E; }
|
|
.screen-chat .send { width: 28px; height: 28px; border-radius: 50%; background: #2E7D32; display: flex; align-items: center; justify-content: center; color: white; font-size: 11px; }
|
|
.screen-chat .nav { background: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-around; padding: 3px 0 6px; }
|
|
.screen-chat .nav-item { text-align: center; font-size: 8px; color: #9E9E9E; }
|
|
.screen-chat .nav-item.active { color: #2E7D32; font-weight: 600; }
|
|
|
|
.screen-profile { background: linear-gradient(135deg,#2E7D32,#00ACC1); height: 100%; display: flex; flex-direction: column; }
|
|
.screen-profile .header { padding: 14px; text-align: center; color: white; }
|
|
.screen-profile .avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.2); margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-size: 22px; border: 2px solid rgba(255,255,255,0.3); }
|
|
.screen-profile .name { font-weight: 700; font-size: 12px; }
|
|
.screen-profile .email { font-size: 8px; opacity: 0.7; }
|
|
.screen-profile .badge { display: inline-block; background: rgba(255,255,255,0.2); border-radius: 8px; padding: 2px 8px; font-size: 7px; font-weight: 600; margin-top: 4px; }
|
|
.screen-profile .stats { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
|
|
.screen-profile .stat { text-align: center; }
|
|
.screen-profile .stat-val { font-weight: 700; font-size: 12px; }
|
|
.screen-profile .stat-lbl { font-size: 7px; opacity: 0.6; }
|
|
.screen-profile .body { flex: 1; background: #FAFAFA; border-radius: 12px 12px 0 0; padding: 8px; overflow: hidden; }
|
|
.screen-profile .section { font-size: 8px; font-weight: 700; color: #9E9E9E; text-transform: uppercase; margin-bottom: 4px; }
|
|
.screen-profile .menu-card { background: white; border-radius: 8px; overflow: hidden; border: 1px solid #E0E0E0; margin-bottom: 6px; }
|
|
.screen-profile .menu-item { padding: 7px 8px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #F5F5F5; }
|
|
.screen-profile .menu-icon { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; }
|
|
.screen-profile .menu-label { font-size: 9px; font-weight: 500; flex: 1; }
|
|
.screen-profile .menu-val { font-size: 8px; color: #9E9E9E; }
|
|
.screen-profile .flags { display: flex; gap: 3px; }
|
|
.screen-profile .flag { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; opacity: 0.4; }
|
|
.screen-profile .flag.active { opacity: 1; box-shadow: 0 0 0 1.5px #2E7D32; }
|
|
.screen-profile .nav { background: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-around; padding: 4px 0 8px; }
|
|
.screen-profile .nav-item { text-align: center; font-size: 8px; color: #9E9E9E; }
|
|
.screen-profile .nav-item.active { color: #2E7D32; font-weight: 600; }
|
|
|
|
.screen-notif { background: white; height: 100%; display: flex; flex-direction: column; }
|
|
.screen-notif .header { padding: 8px 10px; border-bottom: 1px solid #E0E0E0; }
|
|
.screen-notif .title { font-size: 12px; font-weight: 700; }
|
|
.screen-notif .sub { font-size: 8px; color: #9E9E9E; }
|
|
.screen-notif .tabs { display: flex; gap: 4px; padding: 6px 10px; border-bottom: 1px solid #E0E0E0; }
|
|
.screen-notif .tab { padding: 3px 8px; border-radius: 10px; font-size: 8px; font-weight: 600; background: #F5F5F5; color: #757575; }
|
|
.screen-notif .tab.active { background: #2E7D32; color: white; }
|
|
.screen-notif .body { flex: 1; overflow: hidden; background: #FAFAFA; }
|
|
.screen-notif .divider { padding: 5px 10px; font-size: 8px; font-weight: 700; color: #9E9E9E; text-transform: uppercase; background: #FAFAFA; }
|
|
.screen-notif .item { padding: 8px 10px; border-bottom: 1px solid #F5F5F5; display: flex; gap: 8px; }
|
|
.screen-notif .item.unread { background: rgba(2,136,209,0.03); }
|
|
.screen-notif .icon { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
|
|
.screen-notif .text { flex: 1; font-size: 8px; line-height: 1.4; }
|
|
.screen-notif .time { font-size: 7px; color: #BDBDBD; margin-top: 2px; }
|
|
.screen-notif .dot { width: 5px; height: 5px; border-radius: 50%; background: #0288D1; margin-top: 3px; flex-shrink: 0; }
|
|
.screen-notif .nav { background: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-around; padding: 4px 0 8px; }
|
|
.screen-notif .nav-item { text-align: center; font-size: 8px; color: #9E9E9E; }
|
|
.screen-notif .nav-item.active { color: #2E7D32; font-weight: 600; }
|
|
|
|
.screen-report { background: white; height: 100%; display: flex; flex-direction: column; }
|
|
.screen-report .header { padding: 8px 10px; border-bottom: 1px solid #E0E0E0; }
|
|
.screen-report .title { font-size: 12px; font-weight: 700; }
|
|
.screen-report .sub { font-size: 8px; color: #9E9E9E; }
|
|
.screen-report .body { flex: 1; overflow: hidden; background: #FAFAFA; padding: 8px; }
|
|
.screen-report .section { font-size: 10px; font-weight: 700; margin-bottom: 6px; }
|
|
.screen-report .cats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-bottom: 10px; }
|
|
.screen-report .cat { background: white; border-radius: 8px; padding: 8px; text-align: center; border: 1px solid #E0E0E0; }
|
|
.screen-report .cat-icon { font-size: 16px; margin-bottom: 3px; }
|
|
.screen-report .cat-name { font-size: 8px; font-weight: 600; }
|
|
.screen-report .cat-count { font-size: 7px; color: #9E9E9E; }
|
|
.screen-report .item { background: white; border-radius: 8px; padding: 8px; margin-bottom: 5px; border: 1px solid #E0E0E0; display: flex; gap: 6px; }
|
|
.screen-report .item-icon { font-size: 14px; flex-shrink: 0; }
|
|
.screen-report .item-title { font-size: 9px; font-weight: 600; }
|
|
.screen-report .item-desc { font-size: 7px; color: #9E9E9E; }
|
|
.screen-report .status { font-size: 7px; font-weight: 700; padding: 1px 6px; border-radius: 6px; display: inline-block; margin-top: 3px; }
|
|
.screen-report .s-progress { background: rgba(2,136,209,0.1); color: #0288D1; }
|
|
.screen-report .s-done { background: rgba(46,125,50,0.1); color: #2E7D32; }
|
|
.screen-report .form-card { background: white; border-radius: 10px; padding: 8px; border: 1px solid #E0E0E0; margin-top: 6px; }
|
|
.screen-report .form-title { font-weight: 700; font-size: 9px; }
|
|
.screen-report .form-sub { font-size: 7px; color: #9E9E9E; }
|
|
.screen-report .form-btns { display: flex; gap: 4px; margin-top: 6px; }
|
|
.screen-report .form-btn { flex: 1; padding: 6px; border-radius: 12px; font-size: 8px; font-weight: 600; text-align: center; }
|
|
.screen-report .nav { background: white; border-top: 1px solid #E0E0E0; display: flex; justify-content: space-around; padding: 4px 0 8px; }
|
|
.screen-report .nav-item { text-align: center; font-size: 8px; color: #9E9E9E; }
|
|
.screen-report .nav-item.active { color: #2E7D32; font-weight: 600; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="page">
|
|
<div class="cover">
|
|
<div style="font-size:50px;margin-bottom:16px;">🏙️</div>
|
|
<h1>Smart App City</h1>
|
|
<h2>Martinique Digital Twin · Maquettes UI/UX</h2>
|
|
<div class="cover-feats">
|
|
<div class="cover-feat"><div class="cover-feat-icon">🏠</div>Dashboard</div>
|
|
<div class="cover-feat"><div class="cover-feat-icon">🗺️</div>Carte Live</div>
|
|
<div class="cover-feat"><div class="cover-feat-icon">🤖</div>AI Chat RAG</div>
|
|
<div class="cover-feat"><div class="cover-feat-icon">🏪</div>Marketplace</div>
|
|
<div class="cover-feat"><div class="cover-feat-icon">📸</div>Signalements</div>
|
|
</div>
|
|
<div class="cover-meta">React Native · NestJS · FastAI · RAG · Beckn/DPI/OTN · i18n FR/EN/ES/DE · 2026</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<div class="screen-grid">
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/01-onboarding.png" alt="01 Onboarding" />
|
|
</div>
|
|
<div class="phone-label">01 — Onboarding</div>
|
|
<div class="phone-desc">Splash + sélection langue i18n</div>
|
|
</div>
|
|
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/02-home-dashboard.png" alt="02 Home" />
|
|
</div>
|
|
<div class="phone-label">02 — Home Dashboard</div>
|
|
<div class="phone-desc">Vue d'ensemble temps réel</div>
|
|
</div>
|
|
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/03-carte-interactive.png" alt="03 Carte" />
|
|
</div>
|
|
<div class="phone-label">03 — Carte Interactive</div>
|
|
<div class="phone-desc">IoT géolocalisé · Martinique</div>
|
|
</div>
|
|
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/04-marketplace.png" alt="04 Marketplace" />
|
|
</div>
|
|
<div class="phone-label">04 — Marketplace Beckn/DPI</div>
|
|
<div class="phone-desc">Commerce décentralisé local</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page">
|
|
<div class="screen-grid">
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/05-ai-chat.png" alt="05 AI Chat" />
|
|
</div>
|
|
<div class="phone-label">05 — AI Chat (RAG)</div>
|
|
<div class="phone-desc">Assistant IA · Données temps réel</div>
|
|
</div>
|
|
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/06-profil.png" alt="06 Profil" />
|
|
</div>
|
|
<div class="phone-label">06 — Profil & Paramètres</div>
|
|
<div class="phone-desc">i18n · Beckn · DID · Préférences</div>
|
|
</div>
|
|
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/07-notifications.png" alt="07 Notifications" />
|
|
</div>
|
|
<div class="phone-label">07 — Notifications</div>
|
|
<div class="phone-desc">Alertes IoT · Marché · ODK</div>
|
|
</div>
|
|
|
|
|
|
<div class="phone-canvas">
|
|
<div class="phone-frame-pdf">
|
|
<img src="screenshots/08-signalements.png" alt="08 Signalements" />
|
|
</div>
|
|
<div class="phone-label">08 — Signalements (ODK)</div>
|
|
<div class="phone-desc">Rapports citoyens · GPS · Photo</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|