Initial deployment 4

static/styles.css

@@ -1,157 +1,172 @@
-/* Styles globaux */
+:root {
+    --france-bleu: #004C93;
+    --france-bleu-light: #0066CC;
+    --france-red: #E30613;
+    --france-gray: #F5F5F5;
+}
+
 body {
-    background-color: #1e1e1e; /* Fond noir */
-    color: #333; /* Texte principal */
+    font-family: 'Open Sans', Arial, sans-serif;
     margin: 0;
-    font-family: Arial, sans-serif;
+    padding: 0;
+    background-color: var(--france-gray);
 }
 
-/* Conteneur principal */
 .container {
-    background-color: #dcdcdc;
-    margin: 20px auto; /* Réduit l'espace en haut et en bas */
+    max-width: 1400px;
+    margin: 0 auto;
     padding: 20px;
-    max-width: 90%; /* Utiliser toute la largeur de l'écran */
-    border-radius: 8px;
 }
 
-/* Titre */
 header {
+    background-color: var(--france-bleu);
+    color: white;
+    padding: 20px;
     text-align: center;
-    margin-bottom: 20px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 header h1 {
-    font-size: 28px;
-    color: black;
+    margin: 0;
+    font-size: 2.5em;
+    font-weight: bold;
 }
 
-header .generated-time {
-    font-size: 14px;
-    color: gray;
+.generated-time {
+    color: #ffffff;
+    opacity: 0.9;
+    font-size: 1.1em;
+    margin-top: 10px;
 }
 
-/* Section principale */
-main {
+/* Section Trafic + Map */
+.traffic-map-container {
     display: flex;
-    flex-direction: column;
     gap: 20px;
-    margin: 20px auto;
-}
-
-/* Conteneur pour Trafic + MAP */
-.traffic-map-container {
-    display: flex; /* Aligne Trafic + MAP horizontalement */
-    gap: 20px; /* Espacement entre les deux sections */
-    margin-bottom: 20px;
+    margin: 20px 0;
 }
 
-/* Section Gauche : Trafic */
+/* Section Trafic */
 .traffic-info {
-    flex: 1; /* Prend 1 portion de l'espace */
+    flex: 1;
     background: white;
     padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .traffic-info h2 {
-    font-size: 18px;
-    margin-bottom: 10px;
+    color: var(--france-bleu);
+    margin-top: 0;
+    padding-bottom: 10px;
+    border-bottom: 2px solid var(--france-bleu);
 }
 
 .traffic-items {
     display: flex;
     flex-direction: column;
     gap: 15px;
-    margin-top: 20px;
 }
 
 .icon-item {
+    background: var(--france-gray);
+    padding: 15px;
+    border-radius: 6px;
+}
+
+.transport-icon {
     display: flex;
-    flex-direction: row;
     align-items: center;
-    gap: 20px;
-    padding: 10px;
-    background-color: #f5f5f5;
-    border-radius: 8px;
+    gap: 10px;
+    color: var(--france-bleu);
+    font-weight: bold;
 }
 
 .icon-img {
-    width: 32px; /* Ajuste la taille de l'icône */
-    height: 32px;
+    width: 24px;
+    height: 24px;
 }
 
-.transport-icon {
+.impacted-lines {
     display: flex;
-    align-items: center;
-    gap: 10px;
-    min-width: 120px;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 10px;
 }
 
-/* Styles pour la carte */
-#map {
-    width: 100%;
-    height: 400px; /* Taille de la carte */
-    border-radius: 8px;
+.impacted-line {
+    background-color: var(--france-red);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 15px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.impacted-line:hover {
+    transform: scale(1.05);
 }
 
+/* Section Carte */
 .map-section {
-    flex: 1;
-    padding: 0;
+    flex: 2;
 }
 
-/* Section Filtres et Tableau */
-.filter-table {
-    display: flex;
-    gap: 20px;
-    background-color: #f0f0f0;
-    padding: 20px;
+#map {
+    height: 600px;
     border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 /* Filtres */
 .filter {
-    flex: 1;
-    background-color: #dcdcdc;
-    padding: 10px 20px;
+    background: white;
+    padding: 20px;
     border-radius: 8px;
+    margin: 20px 0;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 }
 
 .filter h3 {
-    font-size: 18px;
-    margin-bottom: 10px;
+    color: var(--france-bleu);
+    margin-top: 0;
 }
 
 .filter ul {
-    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    list-style: none;
     padding: 0;
+    margin: 0;
 }
 
 .filter li {
     cursor: pointer;
-    padding: 5px 10px;
-    margin: 2px 0;
-    border-radius: 4px;
-    transition: background-color 0.2s;
+    padding: 8px 16px;
+    border-radius: 20px;
+    background-color: var(--france-gray);
+    transition: all 0.2s;
 }
 
 .filter li:hover {
-    background-color: #f0f0f0;
+    background-color: var(--france-bleu-light);
+    color: white;
 }
 
 .filter li.active {
-    background-color: #007bff;
+    background-color: var(--france-bleu);
     color: white;
 }
 
 /* Tableau des incidents */
 .incident-table {
-    flex: 3;
-    background-color: white;
-    padding: 10px;
+    background: white;
+    padding: 20px;
     border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow-x: auto;
 }
 
 table {
@@ -159,157 +174,69 @@ table {
     border-collapse: collapse;
 }
 
-th, td {
-    border: 1px solid #ccc;
-    padding: 10px;
-    text-align: left;
-}
-
 th {
-    background-color: #e0e0e0;
-    font-weight: bold;
-}
-
-/* Style pour la ligne sélectionnée dans le tableau */
-tr.highlighted {
-    background-color: #fff3cd !important;
-    transition: background-color 0.3s ease;
-}
-
-tr.highlighted td {
-    animation: highlight-pulse 2s infinite;
-}
-
-@keyframes highlight-pulse {
-    0% { background-color: #fff3cd; }
-    50% { background-color: #ffe69c; }
-    100% { background-color: #fff3cd; }
-}
-
-/* Styles for impacted lines display */
-.impacted-lines {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 5px;
-    align-items: center;
-    margin-top: 5px;
-    font-size: 0.9em;
-    min-height: 20px;
-}
-
-.impacted-line {
-    display: inline-block;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background-color: #ff4444;
-    color: white;
-    font-weight: bold;
-    font-size: 0.9em;
-    cursor: help;
-    position: relative;
-}
-
-.impacted-line[data-tooltip] {
-    position: relative;
-}
-
-.impacted-line[data-tooltip]::after {
-    content: attr(data-tooltip);
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 8px 12px;
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: var(--france-bleu);
     color: white;
-    border-radius: 4px;
-    font-size: 14px;
-    white-space: nowrap;
-    z-index: 1000;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-    margin-bottom: 5px;
-    max-width: 300px;
-    white-space: normal;
-    text-align: center;
-}
-
-.impacted-line[data-tooltip]:hover::after {
-    visibility: visible;
-    opacity: 1;
-}
-
-.impacted-line[data-tooltip]::before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 6px solid transparent;
-    border-top-color: rgba(0, 0, 0, 0.8);
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-    margin-bottom: -6px;
-}
-
-.impacted-line[data-tooltip]:hover::before {
-    visibility: visible;
-    opacity: 1;
-}
-
-.impacted-line:hover {
-    background-color: #ff6666;
-}
-
-/* Styles pour la modale */
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1000;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-}
-
-.modal-content {
-    background-color: #fefefe;
-    margin: 15% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    max-width: 600px;
-    border-radius: 8px;
-    position: relative;
-}
-
-.close-modal {
-    position: absolute;
-    right: 20px;
-    top: 10px;
-    color: #aaa;
-    font-size: 28px;
-    font-weight: bold;
-    cursor: pointer;
+    padding: 12px;
+    text-align: left;
 }
 
-.close-modal:hover {
-    color: #555;
+td {
+    padding: 12px;
+    border-bottom: 1px solid #eee;
 }
 
-.modal h3 {
-    margin-top: 0;
-    color: #333;
-    margin-bottom: 20px;
+tr:hover {
+    background-color: var(--france-gray);
 }
 
-.modal-line-info,
-.modal-cause,
-.modal-message,
-.modal-severity {
-    margin-bottom: 15px;
-    line-height: 1.4;
+tr.highlighted {
+    background-color: #FFF3F3;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        background-color: #FFF3F3;
+    }
+    50% {
+        background-color: #FFE6E6;
+    }
+    100% {
+        background-color: #FFF3F3;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .traffic-map-container {
+        flex-direction: column;
+    }
+    
+    .map-section {
+        order: -1;
+    }
+    
+    #map {
+        height: 400px;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    
+    header h1 {
+        font-size: 1.8em;
+    }
+    
+    .filter ul {
+        flex-direction: column;
+    }
+    
+    .filter li {
+        width: 100%;
+        text-align: center;
+    }
 }

templates/index.html

@@ -3,7 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Carte des Incidents à Paris</title>
+    <title>Trafic en Île-de-France</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
@@ -11,8 +14,8 @@
     <div class="container">
         <!-- Titre -->
         <header>
-            <h1>Carte des Incidents à Paris</h1>
-            <p class="generated-time">Cette page a été générée à : <span id="pageLoadTime"></span></p>
+            <h1>Trafic en Île-de-France</h1>
+            <p class="generated-time">Dernière mise à jour : <span id="pageLoadTime"></span></p>
         </header>
 
         <!-- Contenu principal -->
@@ -21,7 +24,7 @@
             <section class="traffic-map-container">
                 <!-- Section Gauche : Trafic -->
                 <section class="traffic-info">
-                    <h2>Un oeil sur le trafic</h2>
+                    <h2>État du trafic</h2>
                     <div class="traffic-items">
                         <div class="icon-item">
                             <div class="transport-icon">
@@ -65,7 +68,7 @@
             <!-- Section Filtres et Tableau -->
             <section class="filter-table">
                 <div class="filter">
-                    <h3>Filtre</h3>
+                    <h3>Filtrer par mode de transport</h3>
                     <ul>
                         <li data-category="all">Tous</li>
                         <li data-category="RER">RER</li>
@@ -122,7 +125,7 @@
                             // Ajouter une polyligne rouge pour les incidents de type LineString
                             const latlngs = coordinates.map(coord => [coord[1], coord[0]]);
                             L.polyline(latlngs, { 
-                                color: 'red',
+                                color: '#E30613',
                                 weight: 4,
                                 opacity: 0.8
                             }).addTo(map);
@@ -153,7 +156,11 @@
             });
 
         // Mettre à jour l'heure de génération
-        document.getElementById('pageLoadTime').textContent = new Date().toLocaleString();
+        document.getElementById('pageLoadTime').textContent = new Date().toLocaleString('fr-FR', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
     </script>
 </body>
 </html>