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
185 lines
8.4 KiB
HTML
185 lines
8.4 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 — 13 Événements & Culture (Blue v2)</title>
|
|
<link rel="stylesheet" href="shared-blue.css">
|
|
<style>
|
|
.event-header {
|
|
background: linear-gradient(135deg, #3949AB, #1565C0);
|
|
padding: 16px; color: white;
|
|
}
|
|
.event-title { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
|
|
.event-sub { font-size: 13px; opacity: 0.8; }
|
|
|
|
.event-filters {
|
|
display: flex; gap: 8px; padding: 12px 16px;
|
|
overflow-x: auto; scrollbar-width: none;
|
|
}
|
|
.event-filters::-webkit-scrollbar { display: none; }
|
|
.event-filter {
|
|
flex-shrink: 0; padding: 8px 16px; border-radius: 20px;
|
|
font-size: 13px; font-weight: 500;
|
|
background: var(--neutral-100); color: var(--neutral-600);
|
|
cursor: pointer; white-space: nowrap;
|
|
}
|
|
.event-filter.active { background: var(--primary-500); color: white; }
|
|
|
|
.featured-event {
|
|
margin: 0 16px 16px;
|
|
border-radius: 16px; overflow: hidden;
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
|
|
}
|
|
.featured-img {
|
|
height: 160px;
|
|
background: linear-gradient(135deg, #1565C0, #00ACC1);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 64px; position: relative;
|
|
}
|
|
.featured-badge {
|
|
position: absolute; top: 12px; left: 12px;
|
|
background: rgba(255,255,255,0.9); color: var(--primary-600);
|
|
padding: 4px 12px; border-radius: 20px;
|
|
font-size: 11px; font-weight: 700;
|
|
}
|
|
.featured-info { background: white; padding: 16px; }
|
|
.featured-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
|
|
.featured-meta { font-size: 12px; color: var(--neutral-500); margin-bottom: 8px; }
|
|
.featured-desc { font-size: 13px; color: var(--neutral-600); }
|
|
|
|
.event-item {
|
|
display: flex; gap: 12px; padding: 12px 16px;
|
|
background: white; margin: 0 16px 8px;
|
|
border-radius: 12px; border: 1px solid var(--neutral-100);
|
|
}
|
|
.event-date-box {
|
|
width: 52px; height: 52px; border-radius: 12px;
|
|
background: linear-gradient(135deg, var(--primary-500), var(--primary-400));
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
color: white; flex-shrink: 0;
|
|
}
|
|
.event-date-day { font-size: 20px; font-weight: 700; line-height: 1; }
|
|
.event-date-month { font-size: 10px; text-transform: uppercase; opacity: 0.8; }
|
|
.event-info { flex: 1; }
|
|
.event-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
|
|
.event-details { font-size: 11px; color: var(--neutral-500); }
|
|
.event-tag {
|
|
display: inline-block; padding: 2px 8px; border-radius: 6px;
|
|
font-size: 9px; font-weight: 600; margin-top: 4px;
|
|
}
|
|
.tag-music { background: #E8EAF6; color: #3949AB; }
|
|
.tag-sport { background: #E0F7FA; color: #00838F; }
|
|
.tag-culture { background: #FFF3E0; color: #E65100; }
|
|
.tag-food { background: #FCE4EC; color: #C62828; }
|
|
/* 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="status-bar"><span>9:41</span></div>
|
|
|
|
<div class="event-header">
|
|
<div class="event-title">🎉 Événements & Culture</div>
|
|
<div class="event-sub">Martinique · Agenda culturel</div>
|
|
</div>
|
|
|
|
<div class="content-area" style="top:80px;background:var(--neutral-50);">
|
|
|
|
<!-- Filters -->
|
|
<div class="event-filters">
|
|
<div class="event-filter active">Tous</div>
|
|
<div class="event-filter">🎵 Musique</div>
|
|
<div class="event-filter">⚽ Sport</div>
|
|
<div class="event-filter">🎭 Culture</div>
|
|
<div class="event-filter">🍽️ Gastronomie</div>
|
|
<div class="event-filter">🎓 Conférence</div>
|
|
</div>
|
|
|
|
<!-- Featured -->
|
|
<div class="featured-event">
|
|
<div class="featured-img">
|
|
<div class="featured-badge">⭐ À la une</div>
|
|
🎶
|
|
</div>
|
|
<div class="featured-info">
|
|
<div class="featured-name">Festival de Jazz de Martinique</div>
|
|
<div class="featured-meta">📅 15-17 juin 2026 · 📍 Fort-de-France, Savane</div>
|
|
<div class="featured-desc">3 jours de jazz avec des artistes internationaux et locaux. Entrée libre.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Events list -->
|
|
<div style="padding:0 16px 8px; font-size:16px; font-weight:700;">Prochains événements</div>
|
|
|
|
<div class="event-item">
|
|
<div class="event-date-box"><div class="event-date-day">30</div><div class="event-date-month">Mai</div></div>
|
|
<div class="event-info">
|
|
<div class="event-name">Marché aux épices — Sainte-Marie</div>
|
|
<div class="event-details">🕐 8h-14h · 📍 Bourg de Sainte-Marie</div>
|
|
<span class="event-tag tag-food">🍽️ Gastronomie</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-item">
|
|
<div class="event-date-box"><div class="event-date-day">02</div><div class="event-date-month">Juin</div></div>
|
|
<div class="event-info">
|
|
<div class="event-name">Course de Yoles — FDF</div>
|
|
<div class="event-details">🕐 10h-18h · 📍 Baie de Fort-de-France</div>
|
|
<span class="event-tag tag-sport">⚽ Sport</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-item">
|
|
<div class="event-date-box"><div class="event-date-day">05</div><div class="event-date-month">Juin</div></div>
|
|
<div class="event-info">
|
|
<div class="event-name">Exposition Art Contemporain</div>
|
|
<div class="event-details">🕐 10h-19h · 📍 Fondation Clément, Le François</div>
|
|
<span class="event-tag tag-culture">🎭 Culture</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-item">
|
|
<div class="event-date-box"><div class="event-date-day">08</div><div class="event-date-month">Juin</div></div>
|
|
<div class="event-info">
|
|
<div class="event-name">Concert Zouk — Stade Dillon</div>
|
|
<div class="event-details">🕐 20h-00h · 📍 Stade Pierre-Aliker</div>
|
|
<span class="event-tag tag-music">🎵 Musique</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-item">
|
|
<div class="event-date-box"><div class="event-date-day">12</div><div class="event-date-month">Juin</div></div>
|
|
<div class="event-info">
|
|
<div class="event-name">Conférence Smart City & Climat</div>
|
|
<div class="event-details">🕐 14h-17h · 📍 Université des Antilles</div>
|
|
<span class="event-tag tag-culture">🎓 Conférence</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="event-item">
|
|
<div class="event-date-box"><div class="event-date-day">15</div><div class="event-date-month">Juin</div></div>
|
|
<div class="event-info">
|
|
<div class="event-name">Fête de la Musique</div>
|
|
<div class="event-details">🕐 16h-02h · 📍 Toute la Martinique</div>
|
|
<span class="event-tag tag-music">🎵 Musique</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="height:16px;"></div>
|
|
</div>
|
|
|
|
<!-- Bottom Nav -->
|
|
<div class="bottom-nav">
|
|
<div class="bottom-nav-item active"><svg viewBox="0 0 24 24" fill="currentColor"><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" fill="none" stroke="currentColor" stroke-width="2"/></svg><span>Accueil</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg><span>Carte</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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><span>AI Chat</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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><span>Marché</span></div>
|
|
<div class="bottom-nav-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg><span>Profil</span></div>
|
|
</div>
|
|
<div style="position:absolute;bottom:88px;left:0;right:0;text-align:center;font-size:10px;color:var(--neutral-400);">13 — Événements & Culture · Blue v2</div>
|
|
</div>
|
|
</body>
|
|
</html>
|