4rd commite

static/styles.css

@@ -44,15 +44,19 @@ header h1 {
     display: flex;
     gap: 20px;
     margin: 20px 0;
+    height: calc(100vh - 250px);
 }
 
 /* Section Trafic */
 .traffic-info {
     flex: 1;
+    min-width: 300px;
+    max-width: 400px;
     background: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow-y: auto;
 }
 
 .traffic-info h2 {
@@ -111,12 +115,25 @@ header h1 {
 /* Section Carte */
 .map-section {
     flex: 2;
-}
-
-#map {
-    height: 600px;
+    background: #d8d8d8;  /* Couleur de fond grise de Sytadin */
     border-radius: 8px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow: hidden;
+    min-width: 0;
+    position: relative;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#sytadin-frame {
+    width: 100%;
+    height: 100%;
+    border: none;
+    transform: scale(1.2);
+    margin-top: 350px;
+    transform-origin: center center;
 }
 
 /* Filtres */
@@ -207,18 +224,48 @@ tr.highlighted {
     }
 }
 
+/* Styles pour les popups d'incidents */
+.incident-popup {
+    padding: 10px;
+    max-width: 300px;
+}
+
+.incident-description {
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #E30613;
+}
+
+.lanes-info {
+    margin: 5px 0;
+    padding: 5px;
+    background-color: #f8f8f8;
+    border-radius: 4px;
+}
+
+.incident-time {
+    font-size: 0.9em;
+    color: #666;
+    margin-top: 8px;
+    border-top: 1px solid #eee;
+    padding-top: 5px;
+}
+
 /* Responsive Design */
 @media (max-width: 1024px) {
     .traffic-map-container {
         flex-direction: column;
+        height: auto;
     }
-    
-    .map-section {
-        order: -1;
+
+    .traffic-info {
+        max-width: none;
+        width: 100%;
     }
-    
-    #map {
-        height: 400px;
+
+    .map-section {
+        width: 100%;
+        height: 600px;
     }
 }
 
@@ -226,15 +273,15 @@ tr.highlighted {
     .container {
         padding: 10px;
     }
-    
+
     header h1 {
         font-size: 1.8em;
     }
-    
+
     .filter ul {
         flex-direction: column;
     }
-    
+
     .filter li {
         width: 100%;
         text-align: center;

static/sytadin.css

@@ -0,0 +1,184 @@
+/* Style général */
+:root {
+    --primary-color: #004494;
+    --secondary-color: #e3051b;
+    --background-color: #f5f5f5;
+    --text-color: #333;
+    --border-color: #ddd;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+}
+
+/* Header */
+.header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem;
+    text-align: center;
+}
+
+.header h1 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.header .last-update {
+    font-size: 0.9rem;
+    color: #e0e0e0;
+}
+
+/* Container principal */
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1rem;
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 1rem;
+}
+
+/* Panneau de gauche */
+.left-panel {
+    background: white;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.traffic-section {
+    margin-bottom: 2rem;
+}
+
+.traffic-section h2 {
+    color: var(--primary-color);
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--primary-color);
+}
+
+/* Alertes */
+.alerts {
+    margin-bottom: 1.5rem;
+}
+
+.alert-item {
+    background: #fff8f8;
+    border-left: 4px solid var(--secondary-color);
+    padding: 0.8rem;
+    margin-bottom: 0.8rem;
+}
+
+.alert-title {
+    font-weight: 600;
+    color: var(--secondary-color);
+    margin-bottom: 0.3rem;
+}
+
+.alert-time {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+/* Statistiques de trafic */
+.traffic-stats {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-box {
+    background: white;
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.stat-label {
+    font-size: 0.9rem;
+    color: #666;
+}
+
+/* Carte */
+.map-container {
+    background: white;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.map-controls {
+    margin-bottom: 1rem;
+    display: flex;
+    gap: 0.5rem;
+}
+
+.map-button {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: all 0.2s;
+}
+
+.map-button:hover {
+    background: #f0f0f0;
+}
+
+.map-button.active {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+}
+
+#map {
+    height: calc(100vh - 200px);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+/* Responsive */
+@media (max-width: 1024px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+    
+    .left-panel {
+        order: 2;
+    }
+    
+    .map-container {
+        order: 1;
+    }
+    
+    #map {
+        height: 500px;
+    }
+}
+
+@media (max-width: 768px) {
+    .traffic-stats {
+        grid-template-columns: 1fr;
+    }
+}

templates/index.html

@@ -25,6 +25,7 @@
                 <!-- Section Gauche : Trafic -->
                 <section class="traffic-info">
                     <h2>État du trafic</h2>
+                    <p>Sources : RATP - API</p>
                     <div class="traffic-items">
                         <div class="icon-item">
                             <div class="transport-icon">
@@ -38,12 +39,6 @@
                             </div>
                             <div class="impacted-lines" data-category="Métro"></div>
                         </div>
-                        <div class="icon-item">
-                            <div class="transport-icon">
-                                <img src="{{ url_for('static', filename='icons/Bus.svg') }}" alt="Bus" class="icon-img"> Bus
-                            </div>
-                            <div class="impacted-lines" data-category="Bus"></div>
-                        </div>
                         <div class="icon-item">
                             <div class="transport-icon">
                                 <img src="{{ url_for('static', filename='icons/Transilien.png') }}" alt="Transilien" class="icon-img"> Transilien
@@ -56,12 +51,18 @@
                             </div>
                             <div class="impacted-lines" data-category="Tram"></div>
                         </div>
+                        <div class="icon-item">
+                            <div class="transport-icon">
+                                <img src="{{ url_for('static', filename='icons/Bus.svg') }}" alt="Bus" class="icon-img"> Bus
+                            </div>
+                            <div class="impacted-lines" data-category="Bus"></div>
+                        </div>
                     </div>
                 </section>
 
                 <!-- Section Droite : Carte -->
                 <section class="map-section">
-                    <div id="map"></div>
+                    <iframe src="https://www.sytadin.fr/frame/cartographie.jsp.html?largeur=2000&hauteur=1200" frameborder="0" id="sytadin-frame" scrolling="no"></iframe>
                 </section>
             </section>
 
@@ -73,9 +74,9 @@
                         <li data-category="all">Tous</li>
                         <li data-category="RER">RER</li>
                         <li data-category="Métro">Métro</li>
-                        <li data-category="Bus">Bus</li>
                         <li data-category="Transilien">Transilien</li>
                         <li data-category="Tram">Tramway</li>
+                        <li data-category="Bus">Bus</li>
                     </ul>
                 </div>
 
@@ -102,67 +103,6 @@
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
     <script src="{{ url_for('static', filename='js/traffic.js') }}"></script>
     <script>
-        // Initialiser la carte
-        const map = L.map('map').setView([48.8566, 2.3522], 12);
-
-        // Ajouter une couche de tuiles
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '© Contributeurs OpenStreetMap'
-        }).addTo(map);
-
-        // Récupérer les incidents depuis l'API TomTom
-        fetch('/api/incidents')
-            .then(response => response.json())
-            .then(data => {
-                if (data.status === "success") {
-                    const incidents = data.data;
-
-                    incidents.forEach(incident => {
-                        const coordinates = incident.geometry.coordinates;
-                        const type = incident.geometry.type;
-
-                        if (type === "LineString") {
-                            // Ajouter une polyligne rouge pour les incidents de type LineString
-                            const latlngs = coordinates.map(coord => [coord[1], coord[0]]);
-                            L.polyline(latlngs, { 
-                                color: '#E30613',
-                                weight: 4,
-                                opacity: 0.8
-                            }).addTo(map);
-                        } else if (type === "Point") {
-                            const [lon, lat] = coordinates;
-                            const iconCategory = incident.properties.iconCategory;
-
-                            const customIcon = L.icon({
-                                iconUrl: `/static/icons/${iconCategory}.svg`,
-                                iconSize: [72, 72]
-                            });
-
-                            const categoryDescriptions = {
-                                1: "Accident",
-                                2: "Brouillard",
-                                3: "Conditions dangereuses",
-                                4: "Pluie",
-                                5: "Verglas",
-                                6: "Embouteillage",
-                                7: "Voie fermée",
-                                8: "Route fermée",
-                                9: "Travaux routiers",
-                                10: "Vent",
-                                11: "Inondation",
-                                14: "Véhicule en panne"
-                            };
-
-                            const description = categoryDescriptions[iconCategory] || "Incident inconnu";
-
-                            L.marker([lat, lon], { icon: customIcon })
-                                .addTo(map)
-                                .bindPopup(`<b>Incident</b><br>${description}`);
-                        }
-                    });
-                }
-            });
-
         // Mettre à jour l'heure de génération
         document.getElementById('pageLoadTime').textContent = new Date().toLocaleString('fr-FR', {
             hour: '2-digit',

templates/sytadin.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trafic en Île-de-France - Style Sytadin</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='sytadin.css') }}">
+</head>
+<body>
+    <div class="header">
+        <h1>Trafic en Île-de-France</h1>
+        <div class="last-update">Dernière mise à jour : <span id="pageLoadTime"></span></div>
+    </div>
+
+    <div class="container">
+        <div class="left-panel">
+            <!-- Alertes -->
+            <div class="traffic-section">
+                <h2>Alertes Réseau</h2>
+                <div class="alerts" id="alerts-container">
+                    <!-- Les alertes seront injectées ici -->
+                </div>
+            </div>
+
+            <!-- Statistiques -->
+            <div class="traffic-section">
+                <h2>État du trafic</h2>
+                <div class="traffic-stats">
+                    <div class="stat-box">
+                        <div class="stat-value" id="bouchons-km">-- km</div>
+                        <div class="stat-label">de bouchons</div>
+                    </div>
+                    <div class="stat-box">
+                        <div class="stat-value" id="vitesse-moyenne">-- km/h</div>
+                        <div class="stat-label">vitesse moyenne</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Transport en commun -->
+            <div class="traffic-section">
+                <h2>Transport en commun</h2>
+                <div class="traffic-items">
+                    <div class="icon-item">
+                        <div class="transport-icon">
+                            <img src="{{ url_for('static', filename='icons/RER.svg') }}" alt="RER" class="icon-img"> RER
+                        </div>
+                        <div class="impacted-lines" data-category="RER"></div>
+                    </div>
+                    <div class="icon-item">
+                        <div class="transport-icon">
+                            <img src="{{ url_for('static', filename='icons/Metro.png') }}" alt="Métro" class="icon-img"> Métro
+                        </div>
+                        <div class="impacted-lines" data-category="Métro"></div>
+                    </div>
+                    <div class="icon-item">
+                        <div class="transport-icon">
+                            <img src="{{ url_for('static', filename='icons/Bus.svg') }}" alt="Bus" class="icon-img"> Bus
+                        </div>
+                        <div class="impacted-lines" data-category="Bus"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="map-container">
+            <div class="map-controls">
+                <button class="map-button active" onclick="switchMapLayer('traffic')">Trafic</button>
+                <button class="map-button" onclick="switchMapLayer('speed')">Vitesses</button>
+                <button class="map-button" onclick="switchMapLayer('incidents')">Incidents</button>
+            </div>
+            <div id="map"></div>
+        </div>
+    </div>
+
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+    <script>
+        // Initialisation de la carte
+        const map = L.map('map').setView([48.8566, 2.3522], 11);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '© OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Mise à jour de l'heure
+        function updateLastUpdateTime() {
+            const now = new Date();
+            const options = { 
+                hour: '2-digit', 
+                minute: '2-digit',
+                day: '2-digit',
+                month: '2-digit',
+                year: '2-digit'
+            };
+            document.getElementById('pageLoadTime').textContent = now.toLocaleString('fr-FR', options);
+        }
+
+        // Fonction pour changer la couche de la carte
+        function switchMapLayer(layer) {
+            // Mettre à jour les boutons
+            document.querySelectorAll('.map-button').forEach(btn => {
+                btn.classList.remove('active');
+            });
+            event.target.classList.add('active');
+
+            // Ici, vous pouvez ajouter la logique pour changer la couche de la carte
+            switch(layer) {
+                case 'traffic':
+                    // Afficher la couche de trafic
+                    break;
+                case 'speed':
+                    // Afficher la couche des vitesses
+                    break;
+                case 'incidents':
+                    // Afficher la couche des incidents
+                    break;
+            }
+        }
+
+        // Fonction pour mettre à jour les alertes
+        function updateAlerts() {
+            fetch('/api/alerts')
+                .then(response => response.json())
+                .then(data => {
+                    const container = document.getElementById('alerts-container');
+                    container.innerHTML = '';
+                    
+                    data.forEach(alert => {
+                        const alertElement = document.createElement('div');
+                        alertElement.className = 'alert-item';
+                        alertElement.innerHTML = `
+                            <div class="alert-title">${alert.title}</div>
+                            <div class="alert-time">${alert.time}</div>
+                        `;
+                        container.appendChild(alertElement);
+                    });
+                })
+                .catch(error => console.error('Erreur:', error));
+        }
+
+        // Fonction pour mettre à jour les statistiques
+        function updateStats() {
+            fetch('/api/traffic-stats')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('bouchons-km').textContent = data.bouchons_km + ' km';
+                    document.getElementById('vitesse-moyenne').textContent = data.vitesse_moyenne + ' km/h';
+                })
+                .catch(error => console.error('Erreur:', error));
+        }
+
+        // Initialisation
+        document.addEventListener('DOMContentLoaded', function() {
+            updateLastUpdateTime();
+            setInterval(updateLastUpdateTime, 60000);
+            
+            updateAlerts();
+            updateStats();
+            setInterval(updateAlerts, 300000);  // Mise à jour toutes les 5 minutes
+            setInterval(updateStats, 180000);   // Mise à jour toutes les 3 minutes
+        });
+    </script>
+</body>
+</html>