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
279 lines
12 KiB
HTML
279 lines
12 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 — 07 Notifications (Blue v2)</title>
|
||
<link rel="stylesheet" href="shared-blue.css">
|
||
<style>
|
||
.notif-header {
|
||
background: linear-gradient(135deg, var(--primary-500), var(--ocean-500));
|
||
padding: 16px; color: white;
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.notif-title { font-size: 20px; font-weight: 700; }
|
||
.notif-sub { font-size: 12px; opacity: 0.8; }
|
||
.mark-read-btn {
|
||
background: rgba(255,255,255,0.2); color: white;
|
||
border: none; padding: 6px 14px; border-radius: var(--radius-full);
|
||
font-size: 12px; font-weight: 500; cursor: pointer;
|
||
}
|
||
|
||
.notif-tabs {
|
||
display: flex; gap: 0;
|
||
background: white;
|
||
border-bottom: 1px solid var(--neutral-200);
|
||
}
|
||
.notif-tab {
|
||
flex: 1; text-align: center;
|
||
padding: 12px 4px; font-size: 11px; font-weight: 600;
|
||
color: var(--neutral-500); cursor: pointer;
|
||
border-bottom: 3px solid transparent;
|
||
transition: all 0.2s;
|
||
position: relative;
|
||
}
|
||
.notif-tab.active {
|
||
color: var(--primary-500);
|
||
border-bottom-color: var(--primary-500);
|
||
}
|
||
.notif-tab .tab-badge {
|
||
position: absolute; top: 6px; right: 50%; transform:translate(12px,0);
|
||
background: var(--alert-danger); color: white;
|
||
font-size: 9px; min-width: 16px; height: 16px;
|
||
border-radius: var(--radius-full);
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.notif-list { padding: 12px 0; }
|
||
.notif-date-group {
|
||
padding: 8px 16px 4px;
|
||
font-size: 11px; font-weight: 600;
|
||
color: var(--primary-500);
|
||
text-transform: uppercase; letter-spacing: 0.5px;
|
||
}
|
||
|
||
.notif-item {
|
||
display: flex; gap: 12px; padding: 12px 16px;
|
||
border-bottom: 1px solid var(--neutral-100);
|
||
transition: background 0.15s; cursor: pointer;
|
||
}
|
||
.notif-item:hover { background: var(--neutral-50); }
|
||
.notif-item.unread { background: var(--primary-50); }
|
||
.notif-item.unread:hover { background: var(--primary-100); }
|
||
|
||
.notif-icon-wrap {
|
||
width: 42px; height: 42px; border-radius: var(--radius-md);
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 18px; flex-shrink: 0;
|
||
}
|
||
.notif-content { flex: 1; min-width: 0; }
|
||
.notif-text { font-size: var(--text-sm); font-weight: 500; line-height: 1.35; }
|
||
.notif-text strong { font-weight: 700; }
|
||
.notif-meta { font-size: 11px; color: var(--neutral-500); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
|
||
.notif-dot { width: 6px; height: 6px; border-radius: 50%; }
|
||
|
||
.notif-chevron {
|
||
color: var(--neutral-300); font-size: 16px; align-self: center;
|
||
}
|
||
/* 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">
|
||
<!-- Status Bar -->
|
||
<div class="status-bar">
|
||
<span>9:41</span>
|
||
<div style="display:flex;gap:4px;align-items:center;">
|
||
<svg width="16" height="12" viewBox="0 0 16 12"><rect x="0" y="4" width="3" height="8" rx="1" fill="#333"/><rect x="4.5" y="2.5" width="3" height="9.5" rx="1" fill="#333"/><rect x="9" y="0" width="3" height="12" rx="1" fill="#333"/><rect x="13.5" y="0" width="2.5" height="12" rx="1" fill="#ccc"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Header -->
|
||
<div class="notif-header">
|
||
<div>
|
||
<div class="notif-title">Notifications</div>
|
||
<div class="notif-sub">12 non lues</div>
|
||
</div>
|
||
<button class="mark-read-btn">Tout marquer lu</button>
|
||
</div>
|
||
|
||
<!-- Tabs -->
|
||
<div class="content-area" style="background:var(--neutral-50);">
|
||
<div class="notif-tabs">
|
||
<div class="notif-tab active">
|
||
Tout
|
||
<div class="tab-badge">12</div>
|
||
</div>
|
||
<div class="notif-tab">
|
||
Alertes
|
||
<div class="tab-badge">5</div>
|
||
</div>
|
||
<div class="notif-tab">
|
||
Données
|
||
<div class="tab-badge">3</div>
|
||
</div>
|
||
<div class="notif-tab">
|
||
Marché
|
||
<div class="tab-badge">2</div>
|
||
</div>
|
||
<div class="notif-tab">
|
||
Système
|
||
<div class="tab-badge" style="display:none;">2</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notif-list" style="padding-top:4px;">
|
||
|
||
<!-- Aujourd'hui -->
|
||
<div class="notif-date-group">Aujourd'hui — 27 mai</div>
|
||
|
||
<div class="notif-item unread">
|
||
<div class="notif-icon-wrap" style="background:#FFEBEE;">🚨</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text"><strong>Alerte inondation</strong> détectée dans votre secteur (Le Lamentin). Veuillez suivre les consignes de sécurité.</div>
|
||
<div class="notif-meta"><span class="notif-dot" style="background:var(--alert-danger);"></span> Il y a 12 min · Alerte</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item unread">
|
||
<div class="notif-icon-wrap" style="background:#FFF3E0;">⚡</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Pic de <strong>consommation électrique</strong> détecté · Secteur Schœlcher. Réduisez vos usages non essentiels.</div>
|
||
<div class="notif-meta"><span class="notif-dot" style="background:var(--alert-warning);"></span> Il y a 34 min · Données</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item unread">
|
||
<div class="notif-icon-wrap" style="background:#E8EAF6;">🏪</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Nouveau <strong>producteur disponible</strong> sur le marché : Coopérative Bio Le Vauclin — 12 produits frais.</div>
|
||
<div class="notif-meta"><span class="notif-dot" style="background:var(--primary-500);"></span> Il y a 1h · Marché Local</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#E0F7FA;">🌊</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Niveau de <strong>qualité de l'eau</strong> mis à jour · Pointe des Nègres : Bon état confirmé.</div>
|
||
<div class="notif-meta"><span class="notif-dot" style="background:var(--ocean-500);"></span> Il y a 2h · Données IoT</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item unread">
|
||
<div class="notif-icon-wrap" style="background:#E8F5E9;">🎉</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text"><strong>Fort-de-France</strong> vient d'être ajouté à vos favoris événements. 3 événements cette semaine.</div>
|
||
<div class="notif-meta"><span class="notif-dot" style="background:var(--alert-success);"></span> Il y a 3h · Système</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<!-- Hier -->
|
||
<div class="notif-date-group">Hier — 26 mai</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#E3F2FD;">🔧</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Votre <strong>signalement #1047</strong> (Éclairage public — Rue Case) est passé en statut "En cours".</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--alert-warning);display:inline-block;"></span> Il y a 18h · Signalement ODK</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#FFF3E0;">💰</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Commande <strong>#BKN-2045</strong> confirmée sur le marché local. Livraison prévue demain matin.</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--primary-500);display:inline-block;"></span> Hier 16h · Marché</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item unread">
|
||
<div class="notif-icon-wrap" style="background:#E8EAF6;">📡</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text"><strong>Capteur AirQ-012</strong> hors ligne depuis 2h. Intervention technique en cours.</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--alert-danger);display:inline-block;"></span> Hier 14h · Données IoT</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<!-- Plus ancien -->
|
||
<div class="notif-date-group">Cette semaine</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#E0F7FA;">🌡️</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Seuil <strong>température</strong> franchi à 32°C. Activation du plan canicule sur Fort-de-France.</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--alert-warning);display:inline-block;"></span> Il y a 3 jours · Alerte</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#E8F5E9;">✅</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Signalement <strong>#1042</strong> (Nid de poules — Pointe des Nègres) <strong>résolu</strong> par les services techniques.</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--alert-success);display:inline-block;"></span> Il y a 4 jours · ODK</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#E3F2FD;">🔔</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Mise à jour système <strong>v2.3.1</strong> installée. Nouvelles fonctionnalités : AI Chat amélioré, carte 3D.</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--neutral-400);display:inline-block;"></span> Il y a 5 jours · Système</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
<div class="notif-item">
|
||
<div class="notif-icon-wrap" style="background:#FCE4EC;">🌺</div>
|
||
<div class="notif-content">
|
||
<div class="notif-text">Fêtes de Fort : <strong>programme 2026</strong> disponible. Inscription ouverte aux événements culturels.</div>
|
||
<div class="notif-meta"><span style="width:6px;height:6px;border-radius:50%;background:var(--indigo-500);display:inline-block;"></span> Il y a 5 jours · Culture</div>
|
||
</div>
|
||
<div class="notif-chevron">›</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="height:16px;"></div>
|
||
</div>
|
||
|
||
<!-- Bottom Nav -->
|
||
<div class="bottom-nav">
|
||
<div class="bottom-nav-item">
|
||
<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 class="page-label" style="position:absolute;bottom:88px;left:0;right:0;text-align:center;font-size:10px;color:var(--neutral-400);">07 — Notifications · Blue v2</div>
|
||
</div>
|
||
</body>
|
||
</html>
|