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
187 lines
10 KiB
XML
187 lines
10 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2400" height="3600" viewBox="0 0 2400 3600">
|
|
<defs>
|
|
|
|
<linearGradient id="deepBlue" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#051C38"/>
|
|
<stop offset="40%" style="stop-color:#0D47A1"/>
|
|
<stop offset="100%" style="stop-color:#00838F"/>
|
|
</linearGradient>
|
|
<linearGradient id="blueHeader" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#0D47A1"/>
|
|
<stop offset="100%" style="stop-color:#00ACC1"/>
|
|
</linearGradient>
|
|
<linearGradient id="indigoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3949AB"/>
|
|
<stop offset="100%" style="stop-color:#1565C0"/>
|
|
</linearGradient>
|
|
<linearGradient id="oceanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#00838F"/>
|
|
<stop offset="100%" style="stop-color:#00ACC1"/>
|
|
</linearGradient>
|
|
<linearGradient id="darkMode" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0D1B2A"/>
|
|
<stop offset="100%" style="stop-color:#1B2838"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
|
|
<rect width="2400" height="3600" fill="#F5F7FA"/>
|
|
|
|
|
|
<rect x="0" y="0" width="2400" height="80" fill="url(#deepBlue)"/>
|
|
<text x="40" y="52" font-family="Inter, sans-serif" font-size="28" font-weight="700" fill="white">Smart App City — UI/UX v2 Blue · Penpot Design System</text>
|
|
|
|
|
|
<text x="40" y="130" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="#212121">Color Palette — Blue Ocean</text>
|
|
|
|
|
|
<rect x="40" y="150" width="120" height="80" rx="8" fill="#E3F2FD" stroke="#BBDEFB"/>
|
|
<rect x="40" y="150" width="120" height="40" rx="8" fill="#1565C0"/>
|
|
<text x="52" y="250" font-family="monospace" font-size="11" fill="#666">primary-500</text>
|
|
<text x="52" y="266" font-family="monospace" font-size="10" fill="#999">#1565C0</text>
|
|
|
|
|
|
<rect x="180" y="150" width="120" height="80" rx="8" fill="#0D47A1" stroke="#1565C0"/>
|
|
<text x="192" y="250" font-family="monospace" font-size="11" fill="#666">primary-600</text>
|
|
<text x="192" y="266" font-family="monospace" font-size="10" fill="#999">#0D47A1</text>
|
|
|
|
|
|
<rect x="320" y="150" width="120" height="80" rx="8" fill="#00ACC1" stroke="#26C6DA"/>
|
|
<text x="332" y="250" font-family="monospace" font-size="11" fill="#666">ocean-500</text>
|
|
<text x="332" y="266" font-family="monospace" font-size="10" fill="#999">#00ACC1</text>
|
|
|
|
|
|
<rect x="460" y="150" width="120" height="80" rx="8" fill="#3949AB" stroke="#5C6BC0"/>
|
|
<text x="472" y="250" font-family="monospace" font-size="11" fill="#666">indigo-500</text>
|
|
<text x="472" y="266" font-family="monospace" font-size="10" fill="#999">#3949AB</text>
|
|
|
|
|
|
<rect x="620" y="150" width="100" height="60" rx="8" fill="#D32F2F"/>
|
|
<text x="630" y="230" font-family="monospace" font-size="10" fill="#666">Danger</text>
|
|
<rect x="740" y="150" width="100" height="60" rx="8" fill="#F57C00"/>
|
|
<text x="750" y="230" font-family="monospace" font-size="10" fill="#666">Warning</text>
|
|
<rect x="860" y="150" width="100" height="60" rx="8" fill="#2E7D32"/>
|
|
<text x="875" y="230" font-family="monospace" font-size="10" fill="#666">Success</text>
|
|
<rect x="980" y="150" width="100" height="60" rx="8" fill="#0288D1"/>
|
|
<text x="1000" y="230" font-family="monospace" font-size="10" fill="#666">Info</text>
|
|
|
|
|
|
<text x="40" y="310" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="#212121">Dark Mode</text>
|
|
<rect x="40" y="330" width="120" height="60" rx="8" fill="#0D1B2A"/>
|
|
<text x="52" y="410" font-family="monospace" font-size="11" fill="#666">bg-primary</text>
|
|
<rect x="180" y="330" width="120" height="60" rx="8" fill="#1B2838"/>
|
|
<text x="192" y="410" font-family="monospace" font-size="11" fill="#666">bg-secondary</text>
|
|
<rect x="320" y="330" width="120" height="60" rx="8" fill="#1E3350"/>
|
|
<text x="332" y="410" font-family="monospace" font-size="11" fill="#666">bg-card</text>
|
|
|
|
|
|
<text x="40" y="470" font-family="Inter, sans-serif" font-size="18" font-weight="700" fill="#212121">Screen Wireframes — 13 ecrans</text>
|
|
|
|
|
|
<g transform="translate(40, 490)">
|
|
|
|
<g transform="translate(0,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#deepBlue)" stroke="#424242" stroke-width="2"/>
|
|
<rect x="55" y="120" width="60" height="60" rx="12" fill="rgba(255,255,255,0.15)"/>
|
|
<text x="85" y="220" text-anchor="middle" font-size="14" font-weight="700" fill="white">Smart App City</text>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">01 Onboarding</text>
|
|
</g>
|
|
|
|
<g transform="translate(190,0)">
|
|
<rect width="170" height="360" rx="16" fill="white" stroke="#424242" stroke-width="2"/>
|
|
<rect width="170" height="60" rx="16" fill="url(#blueHeader)"/>
|
|
<rect x="10" y="80" width="46" height="50" rx="8" fill="white" stroke="#E0E0E0"/>
|
|
<rect x="62" y="80" width="46" height="50" rx="8" fill="white" stroke="#E0E0E0"/>
|
|
<rect x="114" y="80" width="46" height="50" rx="8" fill="white" stroke="#E0E0E0"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">02 Home Dashboard</text>
|
|
</g>
|
|
|
|
<g transform="translate(380,0)">
|
|
<rect width="170" height="360" rx="16" fill="#D4EEF7" stroke="#424242" stroke-width="2"/>
|
|
<ellipse cx="85" cy="180" rx="60" ry="100" fill="#BBDEFB" stroke="#64B5F6"/>
|
|
<circle cx="70" cy="140" r="5" fill="#1565C0"/>
|
|
<circle cx="110" cy="160" r="5" fill="#00ACC1"/>
|
|
<circle cx="60" cy="200" r="4" fill="#D32F2F"/>
|
|
<circle cx="85" cy="175" r="8" fill="#1565C0" stroke="white" stroke-width="2"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">03 Carte Interactive</text>
|
|
</g>
|
|
|
|
<g transform="translate(570,0)">
|
|
<rect width="170" height="360" rx="16" fill="#1565C0" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="60" width="150" height="80" rx="12" fill="url(#oceanGrad)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">04 Marketplace</text>
|
|
</g>
|
|
|
|
<g transform="translate(760,0)">
|
|
<rect width="170" height="360" rx="16" fill="white" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="10" width="30" height="30" rx="15" fill="url(#indigoGrad)"/>
|
|
<rect x="50" y="60" width="100" height="40" rx="12" fill="#F5F5F5"/>
|
|
<rect x="30" y="110" width="100" height="40" rx="12" fill="url(#blueHeader)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">05 AI Chat</text>
|
|
</g>
|
|
|
|
<g transform="translate(950,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#deepBlue)" stroke="#424242" stroke-width="2"/>
|
|
<circle cx="85" cy="80" r="30" fill="rgba(255,255,255,0.2)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">06 Profil</text>
|
|
</g>
|
|
|
|
<g transform="translate(1140,0)">
|
|
<rect width="170" height="360" rx="16" fill="#1565C0" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="60" width="150" height="50" rx="8" fill="rgba(255,255,255,0.1)"/>
|
|
<rect x="10" y="120" width="150" height="50" rx="8" fill="rgba(255,255,255,0.05)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">07 Notifications</text>
|
|
</g>
|
|
|
|
<g transform="translate(1330,0)">
|
|
<rect width="170" height="360" rx="16" fill="#1565C0" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="60" width="70" height="60" rx="8" fill="rgba(255,255,255,0.1)"/>
|
|
<rect x="90" y="60" width="70" height="60" rx="8" fill="rgba(255,255,255,0.1)"/>
|
|
<circle cx="140" cy="330" r="20" fill="url(#blueHeader)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">08 Signalements</text>
|
|
</g>
|
|
</g>
|
|
|
|
|
|
<g transform="translate(40, 900)">
|
|
|
|
<g transform="translate(0,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#deepBlue)" stroke="#424242" stroke-width="2"/>
|
|
<text x="85" y="100" text-anchor="middle" font-size="36" font-weight="200" fill="white">28°</text>
|
|
<text x="85" y="160" text-anchor="middle" font-size="12" fill="rgba(255,255,255,0.7)">Partiellement nuageux</text>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">09 Meteo</text>
|
|
</g>
|
|
|
|
<g transform="translate(190,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#blueHeader)" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="60" width="150" height="70" rx="12" fill="white" stroke="#E0E0E0"/>
|
|
<rect x="20" y="70" width="30" height="30" rx="8" fill="#1565C0"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">10 Transport</text>
|
|
</g>
|
|
|
|
<g transform="translate(380,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#blueHeader)" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="60" width="70" height="60" rx="8" fill="white" stroke="#E0E0E0"/>
|
|
<rect x="90" y="60" width="70" height="60" rx="8" fill="white" stroke="#E0E0E0"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">11 Energie</text>
|
|
</g>
|
|
|
|
<g transform="translate(570,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#oceanGrad)" stroke="#424242" stroke-width="2"/>
|
|
<circle cx="85" cy="100" r="35" fill="rgba(255,255,255,0.15)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">12 Sante</text>
|
|
</g>
|
|
|
|
<g transform="translate(760,0)">
|
|
<rect width="170" height="360" rx="16" fill="url(#indigoGrad)" stroke="#424242" stroke-width="2"/>
|
|
<rect x="10" y="60" width="150" height="70" rx="12" fill="rgba(255,255,255,0.1)"/>
|
|
<text x="85" y="400" text-anchor="middle" font-size="8" fill="#999">13 Evenements</text>
|
|
</g>
|
|
</g>
|
|
|
|
|
|
<text x="40" y="1350" font-family="Inter, sans-serif" font-size="12" fill="#999">Smart App City v2 Blue — Design System for Figma & Penpot · 13 screens · React Native · Martinique Digital Twin</text>
|
|
</svg>
|
