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
233 lines
7.8 KiB
HTML
233 lines
7.8 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 — 01 Onboarding</title>
|
|
<link rel="stylesheet" href="shared-blue.css">
|
|
<style>
|
|
.onboarding-bg {
|
|
width: 100%; height: 100%;
|
|
background: linear-gradient(160deg, #051C38 0%, #0D47A1 40%, #00838F 100%);
|
|
display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center;
|
|
padding: 32px; text-align: center;
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.onboarding-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 400px; height: 400px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.04);
|
|
top: -100px; right: -100px;
|
|
}
|
|
.onboarding-bg::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 300px; height: 300px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.03);
|
|
bottom: -50px; left: -80px;
|
|
}
|
|
.wave-decoration {
|
|
position: absolute; bottom: 0; left: 0; right: 0;
|
|
height: 120px;
|
|
overflow: hidden;
|
|
}
|
|
.wave-decoration svg {
|
|
width: 100%; height: 100%;
|
|
}
|
|
.onboarding-logo {
|
|
width: 100px; height: 100px;
|
|
background: rgba(255,255,255,0.12);
|
|
border-radius: 28px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 24px;
|
|
backdrop-filter: blur(12px);
|
|
position: relative; z-index: 1;
|
|
border: 1px solid rgba(255,255,255,0.15);
|
|
}
|
|
.onboarding-title {
|
|
font-size: var(--text-3xl);
|
|
font-weight: var(--weight-bold);
|
|
color: white;
|
|
margin-bottom: 6px;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.onboarding-subtitle {
|
|
font-size: var(--text-base);
|
|
color: rgba(255,255,255,0.7);
|
|
margin-bottom: 8px;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.onboarding-tagline {
|
|
font-size: var(--text-sm);
|
|
color: rgba(255,255,255,0.5);
|
|
margin-bottom: 32px;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.onboarding-actions {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
display: flex; flex-direction: column;
|
|
gap: 12px; position: relative; z-index: 1;
|
|
}
|
|
.onboarding-actions .btn { width: 100%; }
|
|
.btn-white {
|
|
background: white;
|
|
color: var(--primary-600);
|
|
font-weight: 700;
|
|
}
|
|
.btn-white:hover { background: var(--primary-50); }
|
|
.btn-ghost-white {
|
|
background: rgba(255,255,255,0.1);
|
|
color: white;
|
|
border: 2px solid rgba(255,255,255,0.25);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.btn-ghost-white:hover { background: rgba(255,255,255,0.2); }
|
|
.lang-selector {
|
|
display: flex; gap: 8px; margin-bottom: 28px;
|
|
position: relative; z-index: 1;
|
|
flex-wrap: wrap; justify-content: center;
|
|
}
|
|
.lang-pill {
|
|
padding: 6px 16px;
|
|
border-radius: var(--radius-full);
|
|
background: rgba(255,255,255,0.15);
|
|
color: white;
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--weight-medium);
|
|
cursor: pointer;
|
|
border: 2px solid transparent;
|
|
transition: all 0.2s;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.lang-pill.active {
|
|
background: white;
|
|
color: var(--primary-600);
|
|
border-color: white;
|
|
}
|
|
.feature-icons {
|
|
display: flex; gap: 16px; margin-bottom: 32px;
|
|
position: relative; z-index: 1;
|
|
flex-wrap: wrap; justify-content: center;
|
|
}
|
|
.feat-icon {
|
|
display: flex; flex-direction: column;
|
|
align-items: center; gap: 6px;
|
|
}
|
|
.feat-icon-circle {
|
|
width: 48px; height: 48px;
|
|
border-radius: var(--radius-full);
|
|
background: rgba(255,255,255,0.12);
|
|
display: flex; align-items: center; justify-content: center;
|
|
backdrop-filter: blur(4px);
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.feat-icon-label {
|
|
font-size: 10px;
|
|
color: rgba(255,255,255,0.6);
|
|
}
|
|
.page-label {
|
|
position: absolute; bottom: 20px;
|
|
left: 0; right: 0;
|
|
text-align: center;
|
|
font-size: var(--text-xs);
|
|
color: rgba(255,255,255,0.3);
|
|
}
|
|
.version-badge {
|
|
position: absolute; top: 50px; right: 16px;
|
|
background: rgba(255,255,255,0.15);
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 10px;
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-full);
|
|
font-weight: 600;
|
|
z-index: 2;
|
|
}
|
|
/* 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="version-badge">v2.0</div>
|
|
<div class="onboarding-bg">
|
|
<div class="onboarding-logo">
|
|
<svg width="52" height="52" viewBox="0 0 52 52" fill="none">
|
|
<rect x="8" y="22" width="9" height="22" rx="3" fill="white" opacity="0.9"/>
|
|
<rect x="21.5" y="15" width="9" height="29" rx="3" fill="white" opacity="0.7"/>
|
|
<rect x="35" y="8" width="9" height="36" rx="3" fill="white" opacity="0.85"/>
|
|
<circle cx="26" cy="5" r="4.5" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div class="onboarding-title">Smart App City</div>
|
|
<div class="onboarding-subtitle">Martinique Digital Twin</div>
|
|
<div class="onboarding-tagline">Votre ville intelligente · Connectée · Durable</div>
|
|
|
|
<div class="lang-selector">
|
|
<div class="lang-pill active">🇫🇷 FR</div>
|
|
<div class="lang-pill">🇬🇧 EN</div>
|
|
<div class="lang-pill">🇪🇸 ES</div>
|
|
<div class="lang-pill">🇩🇪 DE</div>
|
|
</div>
|
|
|
|
<div class="feature-icons">
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><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"/></svg>
|
|
</div>
|
|
<span class="feat-icon-label">City</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><circle cx="12" cy="12" r="3"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
|
|
</div>
|
|
<span class="feat-icon-label">IoT</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><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>
|
|
</div>
|
|
<span class="feat-icon-label">AI Chat</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><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>
|
|
</div>
|
|
<span class="feat-icon-label">Marché</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><rect x="1" y="4" width="22" height="16" rx="3"/><path d="M1 10h22"/><circle cx="12" cy="15" r="1.5"/></svg>
|
|
</div>
|
|
<span class="feat-icon-label">Wallet</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
|
|
</div>
|
|
<span class="feat-icon-label">Services</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="onboarding-actions">
|
|
<button class="btn btn-white">Commencer</button>
|
|
<button class="btn btn-ghost-white">Se connecter</button>
|
|
</div>
|
|
<div class="page-label">01 — Onboarding v2 / Blue</div>
|
|
|
|
<!-- Wave decoration -->
|
|
<div class="wave-decoration">
|
|
<svg viewBox="0 0 390 120" preserveAspectRatio="none">
|
|
<path d="M0 60 Q60 20 130 50 Q200 80 260 40 Q320 10 390 50 L390 120 L0 120Z" fill="rgba(255,255,255,0.04)"/>
|
|
<path d="M0 80 Q80 50 150 70 Q220 90 300 60 Q350 45 390 65 L390 120 L0 120Z" fill="rgba(255,255,255,0.03)"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|