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
207 lines
7.0 KiB
HTML
207 lines
7.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 — 01 Onboarding (Blue v2)</title>
|
|
<link rel="stylesheet" href="shared-blue.css">
|
|
<style>
|
|
.onboarding-bg {
|
|
width: 100%; height: 100%;
|
|
background: linear-gradient(160deg, #0D47A1 0%, #00838F 50%, #00ACC1 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.05);
|
|
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;
|
|
}
|
|
.onboarding-logo {
|
|
width: 100px; height: 100px;
|
|
background: rgba(255,255,255,0.15);
|
|
border-radius: 24px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 24px;
|
|
backdrop-filter: blur(10px);
|
|
position: relative; z-index: 1;
|
|
}
|
|
.onboarding-title {
|
|
font-size: var(--text-3xl);
|
|
font-weight: var(--weight-bold);
|
|
color: white;
|
|
margin-bottom: 8px;
|
|
position: relative; z-index: 1;
|
|
}
|
|
.onboarding-subtitle {
|
|
font-size: var(--text-base);
|
|
color: rgba(255,255,255,0.8);
|
|
margin-bottom: 48px;
|
|
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);
|
|
}
|
|
.btn-white:hover { background: var(--neutral-100); }
|
|
.btn-ghost-white {
|
|
background: rgba(255,255,255,0.15);
|
|
color: white;
|
|
border: 2px solid rgba(255,255,255,0.3);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.btn-ghost-white:hover { background: rgba(255,255,255,0.25); }
|
|
.lang-selector {
|
|
display: flex; gap: 8px; margin-bottom: 32px;
|
|
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.2);
|
|
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;
|
|
}
|
|
.page-label {
|
|
position: absolute; bottom: 20px;
|
|
left: 0; right: 0;
|
|
text-align: center;
|
|
font-size: var(--text-xs);
|
|
color: rgba(255,255,255,0.4);
|
|
}
|
|
.feature-icons {
|
|
display: flex; gap: 16px; margin-bottom: 40px;
|
|
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.15);
|
|
display: flex; align-items: center; justify-content: center;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.feat-icon-label {
|
|
font-size: var(--text-xs);
|
|
color: rgba(255,255,255,0.7);
|
|
}
|
|
.version-tag {
|
|
position: absolute; top: 50px;
|
|
right: 16px;
|
|
background: rgba(255,255,255,0.2);
|
|
color: white;
|
|
font-size: 10px;
|
|
padding: 4px 10px;
|
|
border-radius: var(--radius-full);
|
|
font-weight: 600;
|
|
}
|
|
/* 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-tag">v2.0 — Blue</div>
|
|
<div class="onboarding-bg">
|
|
<div class="onboarding-logo">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none">
|
|
<rect x="8" y="20" width="8" height="22" rx="2" fill="white" opacity="0.9"/>
|
|
<rect x="21" y="14" width="8" height="28" rx="2" fill="white" opacity="0.7"/>
|
|
<rect x="34" y="8" width="8" height="34" rx="2" fill="white" opacity="0.85"/>
|
|
<circle cx="25" cy="6" r="4" fill="white"/>
|
|
</svg>
|
|
</div>
|
|
<div class="onboarding-title">Smart App City</div>
|
|
<div class="onboarding-subtitle">Martinique Digital Twin</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">Market</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
|
|
</div>
|
|
<span class="feat-icon-label">ODK</span>
|
|
</div>
|
|
<div class="feat-icon">
|
|
<div class="feat-icon-circle">
|
|
<svg class="icon" viewBox="0 0 24 24" stroke="white"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg>
|
|
</div>
|
|
<span class="feat-icon-label">Alertes</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 / Splash · Blue v2</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|