RELEASE V4.1.0 : Voici les modifications apportées :
-> Refonte complète des afficheurs AFL départ et arrivée (+ Quais) -> EVA DÉPARTS + ARRIVÉES EN COURS DE DÉVELOPPEMENT : -> REFONTE AFFICHEURS CLASSIQUES -> IMPLÉMENTATION DONNÉES GTFS / GTFS-RT / SIRI LTE
This commit is contained in:
mathis committed
1 parent
6dfd798dd2
commit
b1f180508e
23 files changed
+811
-686
No files matched your search
+11
-10
@@ -17,6 +17,7 @@ import AFLArriveesQuais from './pages/afficheurs/afl/AFLArriveesQuais';
|
||||
import EVAArrivees from './pages/afficheurs/eva/EVAArrivees';
|
||||
import EVADeparts from './pages/afficheurs/eva/EVADeparts';
|
||||
import SelectAfficheur from './pages/SelectAfficheur';
|
||||
import AfficheurViewportWrapper from './components/AfficheurViewportWrapper';
|
||||
applyPolyfills().then(() => defineCustomElements(window));
|
||||
|
||||
// Petit routeur client sans dépendances externes
|
||||
@@ -129,34 +130,34 @@ function App() {
|
||||
// Routes pour afficheurs : format /afficheurs/{mode}/{type}?gare=...
|
||||
// route plus spécifique pour l'afficheur "quais"
|
||||
if (route.startsWith('/afficheurs/departs/classiques/quais')) {
|
||||
return <ClassiquesDepartsQuais />;
|
||||
return <AfficheurViewportWrapper><ClassiquesDepartsQuais /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/classiques/quais')) {
|
||||
return <ClassiquesArriveesQuais />;
|
||||
return <AfficheurViewportWrapper><ClassiquesArriveesQuais /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/departs/classiques')) {
|
||||
return <ClassiquesDeparts />;
|
||||
return <AfficheurViewportWrapper><ClassiquesDeparts /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/departs/afl/quais')) {
|
||||
return <AFLDepartsQuais />;
|
||||
return <AfficheurViewportWrapper><AFLDepartsQuais /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/departs/afl')) {
|
||||
return <AFLDeparts />;
|
||||
return <AfficheurViewportWrapper><AFLDeparts /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/departs/eva')) {
|
||||
return <EVADeparts />;
|
||||
return <AfficheurViewportWrapper><EVADeparts /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/afl/quais')) {
|
||||
return <AFLArriveesQuais />;
|
||||
return <AfficheurViewportWrapper><AFLArriveesQuais /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/afl')) {
|
||||
return <AFLArrivees />;
|
||||
return <AfficheurViewportWrapper><AFLArrivees /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/eva')) {
|
||||
return <EVAArrivees />;
|
||||
return <AfficheurViewportWrapper><EVAArrivees /></AfficheurViewportWrapper>;
|
||||
}
|
||||
if (route.startsWith('/afficheurs/arrivees/classiques')) {
|
||||
return <ClassiquesArrivees />;
|
||||
return <AfficheurViewportWrapper><ClassiquesArrivees /></AfficheurViewportWrapper>;
|
||||
}
|
||||
|
||||
let content;
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
/* ==========================================================================
|
||||
AFFICHEUR VIEWPORT WRAPPER (PWA 16:9 LETTERBOXING)
|
||||
========================================================================== */
|
||||
|
||||
/* Conteneur plein écran noir */
|
||||
.afficheur-pwa-screen-wrapper {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
height: 100dvh !important;
|
||||
background-color: #000000 !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
z-index: 99999 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
user-select: none !important;
|
||||
-webkit-user-select: none !important;
|
||||
touch-action: none !important;
|
||||
}
|
||||
|
||||
/* Canvas 16:9 Haute Définition (1920x1080) centré */
|
||||
.afficheur-pwa-canvas {
|
||||
width: 1920px !important;
|
||||
height: 1080px !important;
|
||||
min-width: 1920px !important;
|
||||
min-height: 1080px !important;
|
||||
max-width: 1920px !important;
|
||||
max-height: 1080px !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
transform-origin: center center !important;
|
||||
flex-shrink: 0 !important;
|
||||
background-color: #000000 !important;
|
||||
box-shadow: 0 0 40px rgba(0, 0, 0, 0.9) !important;
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
-webkit-transform-style: preserve-3d !important;
|
||||
transform-style: preserve-3d !important;
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import './AfficheurViewportWrapper.css';
|
||||
|
||||
/**
|
||||
* AfficheurViewportWrapper
|
||||
* Assure un affichage 16:9 strict (1920x1080) sur tous les appareils
|
||||
* (Mobile portrait, Mobile paysage, Tablettes, Ordinateurs, TV).
|
||||
* Ajoute automatiquement des bordures noires (letterboxing / pillarboxing)
|
||||
* pour conserver fidèlement les proportions du design original sans distorsion.
|
||||
*/
|
||||
export default function AfficheurViewportWrapper({ children }) {
|
||||
const [scale, setScale] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
const calculateScale = () => {
|
||||
// Dimensions de la fenêtre d'affichage (support viewport iOS / Android safe area)
|
||||
const w = window.innerWidth || (document.documentElement && document.documentElement.clientWidth) || 1920;
|
||||
const h = window.innerHeight || (document.documentElement && document.documentElement.clientHeight) || 1080;
|
||||
|
||||
// Échelle basée sur la résolution standard 1920x1080 (16:9)
|
||||
const scaleX = w / 1920;
|
||||
const scaleY = h / 1080;
|
||||
const s = Math.min(scaleX, scaleY);
|
||||
setScale(s);
|
||||
};
|
||||
|
||||
calculateScale();
|
||||
window.addEventListener('resize', calculateScale);
|
||||
window.addEventListener('orientationchange', calculateScale);
|
||||
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', calculateScale);
|
||||
}
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', calculateScale);
|
||||
window.removeEventListener('orientationchange', calculateScale);
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.removeEventListener('resize', calculateScale);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="afficheur-pwa-screen-wrapper">
|
||||
<div
|
||||
className="afficheur-pwa-canvas"
|
||||
style={{
|
||||
transform: `scale(${scale})`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,78 +1,76 @@
|
||||
/* ==========================================================================
|
||||
AFL ARRIVEES (GRANDS ARRIVEES SNCF) - CSS
|
||||
========================================================================== */
|
||||
/* AFL ARRIVEES - DESIGN STRICT CONFORME AUX MAQUETTES */
|
||||
|
||||
/* Reset & Global Container */
|
||||
.afl-arr-container {
|
||||
font-family: 'Achemine', 'Segoe UI', Arial, sans-serif !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
font-family: 'Achemine', 'Segoe UI', Roboto, sans-serif !important;
|
||||
background-color: #173e31 !important;
|
||||
color: #ffffff !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background-color: #173e31 !important; /* Vert sombre SNCF Arrivées */
|
||||
overflow: hidden !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
box-sizing: border-box !important;
|
||||
user-select: none !important;
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
.afl-arr-container * {
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
HEADER (10vh)
|
||||
HEADER (108px)
|
||||
========================================================================== */
|
||||
.afl-arr-header {
|
||||
height: 10vh !important;
|
||||
min-height: 10vh !important;
|
||||
max-height: 10vh !important;
|
||||
background-color: #337862 !important; /* Vert moyen SNCF Arrivées */
|
||||
height: 108px !important;
|
||||
min-height: 108px !important;
|
||||
max-height: 108px !important;
|
||||
background-color: #337862 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 2.5vw !important;
|
||||
padding: 0 48px !important;
|
||||
border-bottom: 2px solid #ffffff !important;
|
||||
box-sizing: border-box !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.afl-arr-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.5vw !important;
|
||||
gap: 29px !important;
|
||||
}
|
||||
|
||||
.afl-arr-header-title {
|
||||
font-size: 6.2vh !important;
|
||||
font-size: 54px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: -0.05vw !important;
|
||||
letter-spacing: -0.96px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.afl-arr-header-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.2vw !important;
|
||||
gap: 23px !important;
|
||||
}
|
||||
|
||||
.afl-arr-page-dot {
|
||||
width: 4.5vh !important;
|
||||
height: 4.5vh !important;
|
||||
width: 49px !important;
|
||||
height: 49px !important;
|
||||
border-radius: 50% !important;
|
||||
background-color: rgba(255, 255, 255, 0.3) !important;
|
||||
color: #ffffff !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 3.0vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.afl-arr-page-dot--active {
|
||||
background-color: #3dba8b !important; /* Vert clair émeraude actif */
|
||||
background-color: #3dba8b !important;
|
||||
color: #173e31 !important;
|
||||
}
|
||||
|
||||
@@ -90,9 +88,9 @@
|
||||
}
|
||||
|
||||
.afl-arr-clock-main {
|
||||
font-size: 6.2vh !important;
|
||||
font-size: 56px !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.05vw !important;
|
||||
letter-spacing: -0.96px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -110,21 +108,20 @@
|
||||
|
||||
.afl-arr-row {
|
||||
display: flex !important;
|
||||
width: 100vw !important;
|
||||
width: 100% !important;
|
||||
border-bottom: 2px solid #ffffff !important;
|
||||
padding-left: 2.5vw !important;
|
||||
padding-right: 1.5vw !important;
|
||||
padding-left: 48px !important;
|
||||
padding-right: 29px !important;
|
||||
background-color: #173e31 !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MODE ETENDU (20vh)
|
||||
MODE ETENDU (216px)
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-arr-row--detailed {
|
||||
height: 20vh !important;
|
||||
min-height: 20vh !important;
|
||||
max-height: 20vh !important;
|
||||
height: 216px !important;
|
||||
min-height: 216px !important;
|
||||
max-height: 216px !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
@@ -138,12 +135,12 @@
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MODE REDUIT (10vh) - CENTRAGE PARFAIT DE TOUS LES TEXTES
|
||||
MODE REDUIT (108px) - CENTRAGE PARFAIT DE TOUS LES TEXTES
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-arr-row--compact {
|
||||
height: 10vh !important;
|
||||
min-height: 10vh !important;
|
||||
max-height: 10vh !important;
|
||||
height: 108px !important;
|
||||
min-height: 108px !important;
|
||||
max-height: 108px !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
@@ -157,15 +154,12 @@
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
COLUMNS LAYOUT
|
||||
========================================================================== */
|
||||
/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 13.5vw) */
|
||||
/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 259px) */
|
||||
.afl-arr-col-time {
|
||||
width: 13.5vw !important;
|
||||
min-width: 13.5vw !important;
|
||||
max-width: 13.5vw !important;
|
||||
margin-right: 2.5vw !important;
|
||||
width: 259px !important;
|
||||
min-width: 259px !important;
|
||||
max-width: 259px !important;
|
||||
margin-right: 48px !important;
|
||||
padding: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -195,10 +189,10 @@
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 13.5vw !important;
|
||||
min-width: 13.5vw !important;
|
||||
max-width: 13.5vw !important;
|
||||
margin-right: 2.5vw !important;
|
||||
width: 259px !important;
|
||||
min-width: 259px !important;
|
||||
max-width: 259px !important;
|
||||
margin-right: 48px !important;
|
||||
}
|
||||
|
||||
.afl-arr-row--compact .afl-arr-col-time .afl-arr-text-time {
|
||||
@@ -207,25 +201,25 @@
|
||||
|
||||
/* Colonne 2 : Type de train / Opérateur & Numéro */
|
||||
.afl-arr-col-train {
|
||||
width: 15vw !important;
|
||||
min-width: 15vw !important;
|
||||
max-width: 15vw !important;
|
||||
margin-right: 2.5vw !important;
|
||||
width: 288px !important;
|
||||
min-width: 288px !important;
|
||||
max-width: 288px !important;
|
||||
margin-right: 48px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Colonne 3 : Provenance & Gares desservies */
|
||||
/* Colonne 3 : Destination & Gares desservies */
|
||||
.afl-arr-col-dest {
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
padding-right: 1.5vw !important;
|
||||
padding-right: 29px !important;
|
||||
}
|
||||
|
||||
/* Colonne 4 : Voie */
|
||||
.afl-arr-col-voie {
|
||||
width: 9.5vw !important;
|
||||
min-width: 9.5vw !important;
|
||||
max-width: 9.5vw !important;
|
||||
width: 182px !important;
|
||||
min-width: 182px !important;
|
||||
max-width: 182px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
@@ -235,7 +229,7 @@
|
||||
PARTIE HAUTE (LIGNES ETENDUES)
|
||||
========================================================================== */
|
||||
.afl-arr-top-row {
|
||||
height: 8.5vh !important;
|
||||
height: 86px !important;
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
width: 100% !important;
|
||||
@@ -244,25 +238,25 @@
|
||||
|
||||
/* Heure */
|
||||
.afl-arr-text-time {
|
||||
font-size: 8.0vh !important;
|
||||
font-size: 73px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffff00 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.08vw !important;
|
||||
letter-spacing: -0.96px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.afl-arr-row--compact .afl-arr-text-time {
|
||||
font-size: 8.0vh !important;
|
||||
font-size: 70px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Opérateur */
|
||||
.afl-arr-text-op {
|
||||
font-size: 5.0vh !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
@@ -273,62 +267,62 @@
|
||||
|
||||
/* Destination / Provenance */
|
||||
.afl-arr-text-dest {
|
||||
font-size: 8.0vh !important;
|
||||
font-size: 73px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.05vw !important;
|
||||
letter-spacing: -0.96px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.afl-arr-row--compact .afl-arr-text-dest {
|
||||
font-size: 7.5vh !important;
|
||||
font-size: 70px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
PARTIE BASSE (LIGNES ETENDUES)
|
||||
========================================================================== */
|
||||
.afl-arr-bottom-row {
|
||||
height: 7.5vh !important;
|
||||
height: 76px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
margin-top: 1.0vh !important;
|
||||
margin-top: 8px !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Numéro de train */
|
||||
.afl-arr-text-num {
|
||||
font-size: 4.8vh !important;
|
||||
font-weight: 700 !important;
|
||||
font-size: 39px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.05vw !important;
|
||||
letter-spacing: 0.96px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.afl-arr-row--compact .afl-arr-text-num {
|
||||
font-size: 5.2vh !important;
|
||||
font-size: 45px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
STATUS PILLS (DIMENSIONS EXACTES)
|
||||
STATUS PILLS
|
||||
========================================================================== */
|
||||
.afl-arr-pill {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 0.8vw !important;
|
||||
padding: 0.5vh 1.4vw 0.5vh 0.6vw !important;
|
||||
border-radius: 3.0vh !important;
|
||||
height: 5.8vh !important;
|
||||
gap: 12px !important;
|
||||
padding: 4px 19px 4px 12px !important;
|
||||
border-radius: 25px !important;
|
||||
height: 50px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-arr-pill-text {
|
||||
font-size: 3.6vh !important;
|
||||
font-size: 29px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -350,13 +344,13 @@
|
||||
}
|
||||
|
||||
.afl-arr-icon {
|
||||
width: 4.0vh !important;
|
||||
height: 4.0vh !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
GARES DESSERVIES (VIAS - 'VIA' FIXE VERT & DEFILEMENT DES GARES ULTRA-RAPIDE)
|
||||
GARES DESSERVIES (VIAS)
|
||||
========================================================================== */
|
||||
.afl-arr-vias-container {
|
||||
display: flex !important;
|
||||
@@ -368,10 +362,10 @@
|
||||
}
|
||||
|
||||
.afl-arr-vias-label {
|
||||
font-size: 3.6vh !important;
|
||||
font-weight: 700 !important;
|
||||
color: #3dba8b !important; /* Vert menthe SNCF Arrivées */
|
||||
margin-right: 0.5vw !important;
|
||||
font-size: 39px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #3dba8b !important;
|
||||
margin-right: 10px !important;
|
||||
flex-shrink: 0 !important;
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
@@ -407,7 +401,7 @@
|
||||
}
|
||||
|
||||
.afl-arr-vias-stop {
|
||||
font-size: 5.5vh !important;
|
||||
font-size: 39px !important;
|
||||
font-weight: 400 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -415,42 +409,42 @@
|
||||
}
|
||||
|
||||
.afl-arr-vias-chevron {
|
||||
color: #3dba8b !important; /* Chevrons en vert menthe */
|
||||
font-weight: 800 !important;
|
||||
margin: 0 0.4vw !important;
|
||||
font-size: 5.5vh !important;
|
||||
color: #3dba8b !important;
|
||||
font-weight: 700 !important;
|
||||
margin: 0 8px !important;
|
||||
font-size: 37px !important;
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
VOIE BOX (BLANCHE / PROPORTIONS STRICTES)
|
||||
VOIE BOX
|
||||
========================================================================== */
|
||||
.afl-arr-voie-box {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 1.8vh !important;
|
||||
border-radius: 16px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.2vh !important;
|
||||
width: 8.5vw !important;
|
||||
height: 15.2vh !important;
|
||||
padding: 0.5vh 0 !important;
|
||||
box-shadow: 0 0.4vh 1.0vh rgba(0, 0, 0, 0.25) !important;
|
||||
gap: 2px !important;
|
||||
width: 150px !important;
|
||||
height: 157px !important;
|
||||
padding: 5px 0 !important;
|
||||
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.afl-arr-voie-label {
|
||||
color: #173e31 !important;
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 30px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-arr-voie-value {
|
||||
color: #173e31 !important;
|
||||
font-size: 9.8vh !important;
|
||||
font-size: 93px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 0.9 !important;
|
||||
margin: 0 !important;
|
||||
@@ -467,13 +461,12 @@
|
||||
|
||||
.afl-arr-voie-box-compact {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 1.0vh !important;
|
||||
border-radius: 11px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 6.2vw !important;
|
||||
height: 7.6vh !important;
|
||||
width: 119px !important;
|
||||
height: 82px !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.25) !important;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ const formatTimeNoSeconds = (v) => {
|
||||
return String(v).slice(0,5).replace(':','h');
|
||||
};
|
||||
|
||||
const BusIcon = ({ size = '5.5vh', color = 'white', style = {} }) => (
|
||||
const BusIcon = ({ size = '59px', color = 'white', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -1068,7 +1068,7 @@ export default function AFLArrivees(){
|
||||
{/* HEADER */}
|
||||
<header className="afl-arr-header">
|
||||
<div className="afl-arr-header-left">
|
||||
<svg width="4.5vh" height="4.5vh" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
|
||||
<svg width="49px" height="49px" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
|
||||
{/* Porte de train verticale */}
|
||||
<path d="M5 4v20M5 4h3M5 24h3" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Silhouette tête */}
|
||||
@@ -1253,12 +1253,12 @@ export default function AFLArrivees(){
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ORIGIN & VIAS */}
|
||||
{/* DESTINATION & VIAS */}
|
||||
<div className="afl-arr-col-dest">
|
||||
{isDetailed ? (
|
||||
<>
|
||||
<div className="afl-arr-top-row">
|
||||
{isCarTER && <BusIcon size="5.5vh" color="white" style={{ marginRight: '0.8vw' }} />}
|
||||
{isCarTER && <BusIcon size="52px" color="white" style={{ marginRight: '15px' }} />}
|
||||
<MarqueeText text={origin} className="afl-arr-text-dest" style={{ flex: 'none' }} />
|
||||
</div>
|
||||
<div className="afl-arr-bottom-row">
|
||||
@@ -1267,7 +1267,7 @@ export default function AFLArrivees(){
|
||||
</>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
|
||||
{isCarTER && <BusIcon size="5.0vh" color="white" style={{ marginRight: '0.8vw' }} />}
|
||||
{isCarTER && <BusIcon size="49px" color="white" style={{ marginRight: '15px' }} />}
|
||||
<MarqueeText text={origin} className="afl-arr-text-dest" style={{ flex: 'none' }} />
|
||||
</div>
|
||||
)}
|
||||
@@ -1277,13 +1277,13 @@ export default function AFLArrivees(){
|
||||
<div className="afl-arr-col-voie">
|
||||
{isDetailed ? (
|
||||
isSuppressed ? (
|
||||
<svg viewBox="0 0 24 24" width="8.5vh" height="8.5vh" style={{ flexShrink: 0 }}>
|
||||
<svg viewBox="0 0 24 24" width="81px" height="81px" style={{ flexShrink: 0 }}>
|
||||
<circle cx="12" cy="12" r="11" fill="#ff5c73" />
|
||||
<path d="M8 8l8 8M16 8l-8 8" stroke="#173e31" strokeWidth="3.2" strokeLinecap="round" />
|
||||
</svg>
|
||||
) : isCarTER ? (
|
||||
<div className="afl-arr-voie-box afl-arr-voie-box--bus">
|
||||
<BusIcon size="9.5vh" color="#173e31" />
|
||||
<BusIcon size="86px" color="#173e31" />
|
||||
</div>
|
||||
) : showPlatform ? (
|
||||
<div className="afl-arr-voie-box">
|
||||
@@ -1293,13 +1293,13 @@ export default function AFLArrivees(){
|
||||
) : null
|
||||
) : (
|
||||
isSuppressed ? (
|
||||
<svg viewBox="0 0 24 24" width="6.0vh" height="6.0vh" style={{ flexShrink: 0 }}>
|
||||
<svg viewBox="0 0 24 24" width="59px" height="59px" style={{ flexShrink: 0 }}>
|
||||
<circle cx="12" cy="12" r="11" fill="#ff5c73" />
|
||||
<path d="M8 8l8 8M16 8l-8 8" stroke="#173e31" strokeWidth="3.2" strokeLinecap="round" />
|
||||
</svg>
|
||||
) : isCarTER ? (
|
||||
<div className="afl-arr-voie-box-compact">
|
||||
<BusIcon size="5.2vh" color="#173e31" />
|
||||
<BusIcon size="52px" color="#173e31" />
|
||||
</div>
|
||||
) : null
|
||||
)}
|
||||
|
||||
@@ -2,13 +2,13 @@
|
||||
AFL ARRIVEES QUAIS (AFFICHAGE QUAI ARRIVÉE SNCF) - CSS
|
||||
========================================================================== */
|
||||
|
||||
/* Conteneur principal (100vw x 100vh) */
|
||||
/* Conteneur principal (100% x 100%) */
|
||||
.afl-q-arr-container {
|
||||
font-family: 'Achemine', 'Segoe UI', Roboto, sans-serif !important;
|
||||
background-color: #173e31 !important; /* Vert sombre SNCF Arrivées */
|
||||
background-color: #173e31 !important;
|
||||
color: #ffffff !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -26,17 +26,17 @@
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
HEADER (10.5vh) : BANDEAU VERT MOYEN
|
||||
HEADER (113px) : BANDEAU VERT MOYEN
|
||||
========================================================================== */
|
||||
.afl-q-arr-header {
|
||||
height: 10.5vh !important;
|
||||
min-height: 10.5vh !important;
|
||||
max-height: 10.5vh !important;
|
||||
background-color: #337862 !important; /* Vert moyen SNCF Arrivées */
|
||||
height: 113px !important;
|
||||
min-height: 113px !important;
|
||||
max-height: 113px !important;
|
||||
background-color: #337862 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 2.5vw !important;
|
||||
padding: 0 48px !important;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
@@ -45,7 +45,7 @@
|
||||
.afl-q-arr-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.2vw !important;
|
||||
gap: 23px !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-header-icon {
|
||||
@@ -53,18 +53,18 @@
|
||||
}
|
||||
|
||||
.afl-q-arr-header-title {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: -0.03vw !important;
|
||||
letter-spacing: -0.58px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-header-clock {
|
||||
font-size: 5.8vh !important;
|
||||
font-size: 63px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: -0.04vw !important;
|
||||
letter-spacing: -0.77px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
@@ -74,9 +74,9 @@
|
||||
.afl-q-arr-main {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
align-items: flex-start !important; /* Hauteur dynamique du panneau gauche */
|
||||
padding: 2.5vh 2.5vw 1.5vh 2.5vw !important;
|
||||
gap: 3.5vw !important;
|
||||
align-items: flex-start !important;
|
||||
padding: 27px 48px 16px 48px !important;
|
||||
gap: 67px !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
}
|
||||
@@ -85,18 +85,18 @@
|
||||
COLONNE GAUCHE (CARTE DU TRAIN - HAUTEUR DYNAMIQUE)
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-q-arr-left-card {
|
||||
width: 29.5vw !important;
|
||||
min-width: 29.5vw !important;
|
||||
max-width: 29.5vw !important;
|
||||
height: auto !important; /* Dynamique selon le nombre d'origines */
|
||||
width: 566px !important;
|
||||
min-width: 566px !important;
|
||||
max-width: 566px !important;
|
||||
height: auto !important;
|
||||
background-color: rgba(23, 62, 49, 0.90) !important;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
|
||||
border-radius: 1.4vh !important;
|
||||
padding: 1.8vh 1.6vw !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 19px 31px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1.4vh !important;
|
||||
box-shadow: 0 0.8vh 2.0vh rgba(0, 0, 0, 0.35) !important;
|
||||
gap: 15px !important;
|
||||
box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35) !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
@@ -105,27 +105,27 @@
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding-bottom: 1.4vh !important;
|
||||
padding-bottom: 15px !important;
|
||||
border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-card-time {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffff00 !important; /* Même couleur jaune que sur AFLArrivees.js */
|
||||
color: #ffff00 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.04vw !important;
|
||||
letter-spacing: -0.77px !important;
|
||||
}
|
||||
|
||||
/* Pastille Statut */
|
||||
.afl-q-arr-pill {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.6vw !important;
|
||||
padding: 0.5vh 1.0vw 0.5vh 0.7vw !important;
|
||||
border-radius: 2.5vh !important;
|
||||
gap: 12px !important;
|
||||
padding: 5px 19px 5px 13px !important;
|
||||
border-radius: 27px !important;
|
||||
background-color: #337862 !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -142,37 +142,37 @@
|
||||
}
|
||||
|
||||
.afl-q-arr-pill-icon {
|
||||
width: 2.6vh !important;
|
||||
height: 2.6vh !important;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Provenances & Numéros */
|
||||
.afl-q-arr-dest-block {
|
||||
padding-bottom: 1.4vh !important;
|
||||
padding-bottom: 15px !important;
|
||||
border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.6vh !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-dest-title {
|
||||
font-size: 5.6vh !important; /* Grande police pour la gare de provenance */
|
||||
font-size: 60px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1.05 !important;
|
||||
letter-spacing: -0.03vw !important;
|
||||
letter-spacing: -0.58px !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-dest-sub {
|
||||
font-size: 2.6vh !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #9be0c8 !important;
|
||||
letter-spacing: 0.04vw !important;
|
||||
letter-spacing: 0.77px !important;
|
||||
text-transform: uppercase !important;
|
||||
line-height: 1 !important;
|
||||
margin-top: 0.4vh !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
/* Bas de la carte : Logo du type de train */
|
||||
@@ -180,31 +180,31 @@
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding-top: 0.4vh !important;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-train-logo-box {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
max-height: 4.8vh !important;
|
||||
max-height: 52px !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-train-logo-img {
|
||||
max-height: 4.5vh !important;
|
||||
max-width: 15vw !important;
|
||||
max-height: 49px !important;
|
||||
max-width: 288px !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-train-logo-text {
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
|
||||
border-radius: 0.6vh !important;
|
||||
padding: 0.3vh 0.8vw !important;
|
||||
font-size: 2.5vh !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 3px 15px !important;
|
||||
font-size: 27px !important;
|
||||
font-style: italic !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.06vw !important;
|
||||
letter-spacing: 1.15px !important;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
@@ -227,16 +227,16 @@
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
FOOTER : BOX VOIE EN BAS À DROITE (SANS REPÈRES DE QUAI NI COMPOSITION)
|
||||
FOOTER : BOX VOIE EN BAS À DROITE
|
||||
========================================================================== */
|
||||
.afl-q-arr-footer {
|
||||
height: 14vh !important;
|
||||
min-height: 14vh !important;
|
||||
max-height: 14vh !important;
|
||||
height: 151px !important;
|
||||
min-height: 151px !important;
|
||||
max-height: 151px !important;
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
justify-content: flex-end !important;
|
||||
padding: 0 2.5vw 1.8vh 2.5vw !important;
|
||||
padding: 0 48px 19px 48px !important;
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
@@ -246,31 +246,31 @@
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-q-arr-voie-box {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 1.2vh !important;
|
||||
border-radius: 13px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 7.2vw !important;
|
||||
min-width: 7.2vw !important;
|
||||
height: 12.5vh !important;
|
||||
padding: 0.4vh 0 !important;
|
||||
box-shadow: 0 0.6vh 1.5vh rgba(0, 0, 0, 0.35) !important;
|
||||
width: 138px !important;
|
||||
min-width: 138px !important;
|
||||
height: 135px !important;
|
||||
padding: 4px 0 !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-voie-label {
|
||||
color: #173e31 !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-q-arr-voie-value {
|
||||
color: #173e31 !important;
|
||||
font-size: 6.8vh !important;
|
||||
font-size: 73px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 0.9 !important;
|
||||
margin: 0 !important;
|
||||
|
||||
@@ -630,7 +630,7 @@ const AFLArriveesQuais = () => {
|
||||
<div className="afl-q-arr-container">
|
||||
<header className="afl-q-arr-header">
|
||||
<div className="afl-q-arr-header-left">
|
||||
<svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
|
||||
<svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
|
||||
<path d="M6 6v20M6 6h3M6 26h3" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<circle cx="12" cy="10" r="2.6" fill="white" />
|
||||
<path d="M10 14h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
|
||||
@@ -640,7 +640,7 @@ const AFLArriveesQuais = () => {
|
||||
</div>
|
||||
<div className="afl-q-arr-header-clock">{formatTimeNoSeconds(currentTime)}</div>
|
||||
</header>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '4.0vh', color: '#ffffff', fontWeight: 600 }}>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '43px', color: '#ffffff', fontWeight: 600 }}>
|
||||
Aucune arrivée prévue
|
||||
</div>
|
||||
<footer className="afl-q-arr-footer">
|
||||
@@ -787,7 +787,7 @@ const AFLArriveesQuais = () => {
|
||||
{/* HEADER (10.5vh) */}
|
||||
<header className="afl-q-arr-header">
|
||||
<div className="afl-q-arr-header-left">
|
||||
<svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
|
||||
<svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-arr-header-icon">
|
||||
<path d="M6 6v20M6 6h3M6 26h3" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<circle cx="12" cy="10" r="2.6" fill="white" />
|
||||
<path d="M10 14h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
font-family: 'Achemine', 'Segoe UI', Roboto, sans-serif !important;
|
||||
background-color: #002d62 !important;
|
||||
color: #ffffff !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -14,7 +14,6 @@
|
||||
left: 0 !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
z-index: 9999 !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
@@ -23,50 +22,50 @@
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
HEADER (10vh)
|
||||
HEADER (108px)
|
||||
========================================================================== */
|
||||
.afl-header {
|
||||
height: 10vh !important;
|
||||
min-height: 10vh !important;
|
||||
max-height: 10vh !important;
|
||||
height: 108px !important;
|
||||
min-height: 108px !important;
|
||||
max-height: 108px !important;
|
||||
background-color: #005fa9 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 2.5vw !important;
|
||||
padding: 0 48px !important;
|
||||
border-bottom: 2px solid #ffffff !important;
|
||||
}
|
||||
|
||||
.afl-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.2vw !important;
|
||||
gap: 23px !important;
|
||||
}
|
||||
|
||||
.afl-header-title {
|
||||
font-size: 5.5vh !important;
|
||||
font-size: 54px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.05vw !important;
|
||||
letter-spacing: 0.96px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.afl-header-center {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.8vw !important;
|
||||
gap: 15px !important;
|
||||
}
|
||||
|
||||
.afl-page-dot {
|
||||
width: 3.5vh !important;
|
||||
height: 3.5vh !important;
|
||||
width: 38px !important;
|
||||
height: 38px !important;
|
||||
border-radius: 50% !important;
|
||||
background: rgba(255, 255, 255, 0.3) !important;
|
||||
color: #ffffff !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
font-size: 2.0vh !important;
|
||||
font-size: 22px !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
@@ -89,16 +88,16 @@
|
||||
}
|
||||
|
||||
.afl-clock-main {
|
||||
font-size: 6.0vh !important;
|
||||
font-size: 56px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.05vw !important;
|
||||
letter-spacing: -0.96px !important;
|
||||
}
|
||||
|
||||
.afl-clock-seconds {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 35px !important;
|
||||
font-weight: 700 !important;
|
||||
margin-left: 0.3vw !important;
|
||||
margin-left: 6px !important;
|
||||
opacity: 0.85 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
@@ -118,20 +117,20 @@
|
||||
|
||||
.afl-row {
|
||||
display: flex !important;
|
||||
width: 100vw !important;
|
||||
width: 100% !important;
|
||||
border-bottom: 2px solid #ffffff !important;
|
||||
padding-left: 2.5vw !important;
|
||||
padding-right: 1.5vw !important;
|
||||
padding-left: 48px !important;
|
||||
padding-right: 29px !important;
|
||||
background-color: #002d62 !important;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MODE ETENDU (20vh)
|
||||
MODE ETENDU (216px)
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-row--detailed {
|
||||
height: 20vh !important;
|
||||
min-height: 20vh !important;
|
||||
max-height: 20vh !important;
|
||||
height: 216px !important;
|
||||
min-height: 216px !important;
|
||||
max-height: 216px !important;
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
@@ -145,12 +144,12 @@
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
MODE REDUIT (10vh) - CENTRAGE PARFAIT DE TOUS LES TEXTES
|
||||
MODE REDUIT (108px) - CENTRAGE PARFAIT DE TOUS LES TEXTES
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-row--compact {
|
||||
height: 10vh !important;
|
||||
min-height: 10vh !important;
|
||||
max-height: 10vh !important;
|
||||
height: 108px !important;
|
||||
min-height: 108px !important;
|
||||
max-height: 108px !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
@@ -164,12 +163,12 @@
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 13.5vw) */
|
||||
/* Colonne 1 : Heure & Badge Statut (Centrage synchronisé sur 259px) */
|
||||
.afl-col-time {
|
||||
width: 13.5vw !important;
|
||||
min-width: 13.5vw !important;
|
||||
max-width: 13.5vw !important;
|
||||
margin-right: 2.5vw !important;
|
||||
width: 259px !important;
|
||||
min-width: 259px !important;
|
||||
max-width: 259px !important;
|
||||
margin-right: 48px !important;
|
||||
padding: 0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -199,10 +198,10 @@
|
||||
display: flex !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
width: 13.5vw !important;
|
||||
min-width: 13.5vw !important;
|
||||
max-width: 13.5vw !important;
|
||||
margin-right: 2.5vw !important;
|
||||
width: 259px !important;
|
||||
min-width: 259px !important;
|
||||
max-width: 259px !important;
|
||||
margin-right: 48px !important;
|
||||
}
|
||||
|
||||
.afl-row--compact .afl-col-time .afl-text-time {
|
||||
@@ -211,10 +210,10 @@
|
||||
|
||||
/* Colonne 2 : Type de train / Opérateur & Numéro */
|
||||
.afl-col-train {
|
||||
width: 15vw !important;
|
||||
min-width: 15vw !important;
|
||||
max-width: 15vw !important;
|
||||
margin-right: 2.5vw !important;
|
||||
width: 288px !important;
|
||||
min-width: 288px !important;
|
||||
max-width: 288px !important;
|
||||
margin-right: 48px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
@@ -222,14 +221,14 @@
|
||||
.afl-col-dest {
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
padding-right: 1.5vw !important;
|
||||
padding-right: 29px !important;
|
||||
}
|
||||
|
||||
/* Colonne 4 : Voie */
|
||||
.afl-col-voie {
|
||||
width: 9.5vw !important;
|
||||
min-width: 9.5vw !important;
|
||||
max-width: 9.5vw !important;
|
||||
width: 182px !important;
|
||||
min-width: 182px !important;
|
||||
max-width: 182px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
@@ -239,7 +238,7 @@
|
||||
PARTIE HAUTE (LIGNES ETENDUES)
|
||||
========================================================================== */
|
||||
.afl-top-row {
|
||||
height: 8.5vh !important;
|
||||
height: 86px !important;
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
width: 100% !important;
|
||||
@@ -248,25 +247,25 @@
|
||||
|
||||
/* Heure */
|
||||
.afl-text-time {
|
||||
font-size: 8.0vh !important;
|
||||
font-size: 73px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffff00 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.08vw !important;
|
||||
letter-spacing: -0.96px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.afl-row--compact .afl-text-time {
|
||||
font-size: 8.0vh !important;
|
||||
font-size: 70px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* Opérateur */
|
||||
.afl-text-op {
|
||||
font-size: 5.0vh !important;
|
||||
font-weight: 800 !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
@@ -275,12 +274,12 @@
|
||||
text-overflow: ellipsis !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
padding-bottom: 0.3vh !important;
|
||||
padding-bottom: 3px !important;
|
||||
}
|
||||
|
||||
/* Destination */
|
||||
.afl-text-dest {
|
||||
font-size: 8.0vh !important;
|
||||
font-size: 73px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -290,7 +289,7 @@
|
||||
}
|
||||
|
||||
.afl-row--compact .afl-text-dest {
|
||||
font-size: 7.5vh !important;
|
||||
font-size: 70px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
@@ -299,47 +298,47 @@
|
||||
PARTIE BASSE (LIGNES ETENDUES)
|
||||
========================================================================== */
|
||||
.afl-bottom-row {
|
||||
height: 7.5vh !important;
|
||||
height: 76px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
margin-top: 1.0vh !important;
|
||||
margin-top: 8px !important;
|
||||
width: 100% !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Numéro de train */
|
||||
.afl-text-num {
|
||||
font-size: 4.8vh !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 39px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-row--compact .afl-text-num {
|
||||
font-size: 5.2vh !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 45px !important;
|
||||
font-weight: 500 !important;
|
||||
margin: 0 !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
STATUS PILLS (DIMENSIONS EXACTES SELON L'IMAGE 1)
|
||||
STATUS PILLS
|
||||
========================================================================== */
|
||||
.afl-pill {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 0.8vw !important;
|
||||
padding: 0.5vh 1.4vw 0.5vh 0.6vw !important;
|
||||
border-radius: 3.0vh !important;
|
||||
height: 5.8vh !important;
|
||||
gap: 12px !important;
|
||||
padding: 4px 19px 4px 12px !important;
|
||||
border-radius: 25px !important;
|
||||
height: 50px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-pill-text {
|
||||
font-size: 3.6vh !important;
|
||||
font-size: 29px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -361,13 +360,13 @@
|
||||
}
|
||||
|
||||
.afl-icon {
|
||||
width: 4.0vh !important;
|
||||
height: 4.0vh !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
GARES DESSERVIES (VIAS - 'VIA' FIXE & DEFILEMENT DES GARES ULTRA-ACCELERE)
|
||||
GARES DESSERVIES (VIAS)
|
||||
========================================================================== */
|
||||
.afl-vias-container {
|
||||
display: flex !important;
|
||||
@@ -379,10 +378,10 @@
|
||||
}
|
||||
|
||||
.afl-vias-label {
|
||||
font-size: 3.6vh !important;
|
||||
font-weight: 400 !important;
|
||||
font-size: 39px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #ffffff !important;
|
||||
margin-right: 0.5vw !important;
|
||||
margin-right: 10px !important;
|
||||
flex-shrink: 0 !important;
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
@@ -418,7 +417,7 @@
|
||||
}
|
||||
|
||||
.afl-vias-stop {
|
||||
font-size: 5.5vh !important;
|
||||
font-size: 39px !important;
|
||||
font-weight: 400 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -427,41 +426,41 @@
|
||||
|
||||
.afl-vias-chevron {
|
||||
color: #00c3ff !important;
|
||||
font-weight: 800 !important;
|
||||
margin: 0 0.4vw !important;
|
||||
font-size: 5.5vh !important;
|
||||
font-weight: 700 !important;
|
||||
margin: 0 8px !important;
|
||||
font-size: 37px !important;
|
||||
vertical-align: baseline !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
VOIE BOX (PROPORTIONS ET DESIGN STRICTEMENT CONFORMES A L'IMAGE)
|
||||
VOIE BOX
|
||||
========================================================================== */
|
||||
.afl-voie-box {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 1.8vh !important;
|
||||
border-radius: 16px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.2vh !important;
|
||||
width: 8.5vw !important;
|
||||
height: 15.2vh !important;
|
||||
padding: 0.5vh 0 !important;
|
||||
box-shadow: 0 0.4vh 1.0vh rgba(0, 0, 0, 0.25) !important;
|
||||
gap: 2px !important;
|
||||
width: 150px !important;
|
||||
height: 157px !important;
|
||||
padding: 5px 0 !important;
|
||||
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
.afl-voie-label {
|
||||
color: #002d62 !important;
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 30px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-voie-value {
|
||||
color: #002d62 !important;
|
||||
font-size: 9.8vh !important;
|
||||
font-size: 93px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 0.9 !important;
|
||||
margin: 0 !important;
|
||||
@@ -478,12 +477,12 @@
|
||||
|
||||
.afl-voie-box-compact {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 1.0vh !important;
|
||||
border-radius: 11px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 6.2vw !important;
|
||||
height: 7.6vh !important;
|
||||
width: 119px !important;
|
||||
height: 82px !important;
|
||||
padding: 0 !important;
|
||||
box-shadow: 0 0.2vh 0.5vh rgba(0, 0, 0, 0.25) !important;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
@@ -25,7 +25,7 @@ const formatTimeNoSeconds = (v) => {
|
||||
return String(v).slice(0,5).replace(':','h');
|
||||
};
|
||||
|
||||
const BusIcon = ({ size = '5.5vh', color = 'white', style = {} }) => (
|
||||
const BusIcon = ({ size = '59px', color = 'white', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -1095,7 +1095,7 @@ export default function AFLDeparts(){
|
||||
{/* HEADER */}
|
||||
<header className="afl-header">
|
||||
<div className="afl-header-left">
|
||||
<svg width="4.5vh" height="4.5vh" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
|
||||
<svg width="49px" height="49px" viewBox="0 0 28 28" fill="none" style={{ flexShrink: 0 }}>
|
||||
{/* Chevrons >> */}
|
||||
<path d="M3 8l4 6-4 6M8 8l4 6-4 6" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{/* Silhouette tête */}
|
||||
@@ -1293,7 +1293,7 @@ export default function AFLDeparts(){
|
||||
{isDetailed ? (
|
||||
<>
|
||||
<div className="afl-top-row">
|
||||
{isCarTER && <BusIcon size="5.5vh" color="white" style={{ marginRight: '0.8vw' }} />}
|
||||
{isCarTER && <BusIcon size="52px" color="white" style={{ marginRight: '15px' }} />}
|
||||
<MarqueeText text={destination} className="afl-text-dest" style={{ flex: 'none' }} />
|
||||
</div>
|
||||
<div className="afl-bottom-row">
|
||||
@@ -1302,7 +1302,7 @@ export default function AFLDeparts(){
|
||||
</>
|
||||
) : (
|
||||
<div style={{ display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
|
||||
{isCarTER && <BusIcon size="5.0vh" color="white" style={{ marginRight: '0.8vw' }} />}
|
||||
{isCarTER && <BusIcon size="49px" color="white" style={{ marginRight: '15px' }} />}
|
||||
<MarqueeText text={destination} className="afl-text-dest" style={{ flex: 'none' }} />
|
||||
</div>
|
||||
)}
|
||||
@@ -1312,13 +1312,13 @@ export default function AFLDeparts(){
|
||||
<div className="afl-col-voie">
|
||||
{isDetailed ? (
|
||||
isSuppressed ? (
|
||||
<svg viewBox="0 0 24 24" width="8.5vh" height="8.5vh" style={{ flexShrink: 0 }}>
|
||||
<svg viewBox="0 0 24 24" width="81px" height="81px" style={{ flexShrink: 0 }}>
|
||||
<circle cx="12" cy="12" r="11" fill="#ff5c73" />
|
||||
<path d="M8 8l8 8M16 8l-8 8" stroke="#002d62" strokeWidth="3.2" strokeLinecap="round" />
|
||||
</svg>
|
||||
) : isCarTER ? (
|
||||
<div className="afl-voie-box afl-voie-box--bus">
|
||||
<BusIcon size="9.5vh" color="#002d62" />
|
||||
<BusIcon size="86px" color="#002d62" />
|
||||
</div>
|
||||
) : showPlatform ? (
|
||||
<div className="afl-voie-box">
|
||||
@@ -1328,13 +1328,13 @@ export default function AFLDeparts(){
|
||||
) : null
|
||||
) : (
|
||||
isSuppressed ? (
|
||||
<svg viewBox="0 0 24 24" width="6.0vh" height="6.0vh" style={{ flexShrink: 0 }}>
|
||||
<svg viewBox="0 0 24 24" width="59px" height="59px" style={{ flexShrink: 0 }}>
|
||||
<circle cx="12" cy="12" r="11" fill="#ff5c73" />
|
||||
<path d="M8 8l8 8M16 8l-8 8" stroke="#002d62" strokeWidth="3.2" strokeLinecap="round" />
|
||||
</svg>
|
||||
) : isCarTER ? (
|
||||
<div className="afl-voie-box-compact">
|
||||
<BusIcon size="5.2vh" color="#002d62" />
|
||||
<BusIcon size="52px" color="#002d62" />
|
||||
</div>
|
||||
) : null
|
||||
)}
|
||||
|
||||
@@ -8,8 +8,8 @@
|
||||
background: radial-gradient(circle at 60% 35%, #151a4a 0%, #0c0f2e 100%) !important;
|
||||
background-color: #0c0f2e !important;
|
||||
color: #ffffff !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
overflow: hidden !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -28,17 +28,17 @@
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
HEADER (10.5vh)
|
||||
HEADER (113px)
|
||||
========================================================================== */
|
||||
.afl-q-header {
|
||||
height: 10.5vh !important;
|
||||
min-height: 10.5vh !important;
|
||||
max-height: 10.5vh !important;
|
||||
background-color: #38466e !important; /* Couleur bleu ardoise exacte */
|
||||
height: 113px !important;
|
||||
min-height: 113px !important;
|
||||
max-height: 113px !important;
|
||||
background-color: #38466e !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 2.5vw !important;
|
||||
padding: 0 48px !important;
|
||||
border-bottom: 1.5px solid rgba(255, 255, 255, 0.12) !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
@@ -46,53 +46,40 @@
|
||||
.afl-q-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.2vw !important;
|
||||
gap: 23px !important;
|
||||
}
|
||||
|
||||
.afl-q-header-icon {
|
||||
width: 5.2vh !important;
|
||||
height: 5.2vh !important;
|
||||
width: 56px !important;
|
||||
height: 56px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.afl-q-header-title {
|
||||
font-size: 5.0vh !important;
|
||||
font-size: 54px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: -0.03vw !important;
|
||||
letter-spacing: -0.58px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.afl-q-header-clock {
|
||||
font-size: 5.0vh !important;
|
||||
font-size: 54px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: -0.03vw !important;
|
||||
letter-spacing: -0.58px !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CORPS PRINCIPAL (75vh)
|
||||
CORPS PRINCIPAL
|
||||
========================================================================== */
|
||||
.afl-q-main {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
padding: 2.0vh 2.5vw 0.5vh 2.5vw !important;
|
||||
gap: 3.5vw !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
CORPS PRINCIPAL (MAIN)
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-q-main {
|
||||
flex: 1 !important;
|
||||
display: flex !important;
|
||||
align-items: flex-start !important; /* Hauteur dynamique du panneau gauche */
|
||||
padding: 2.5vh 2.5vw 1.5vh 2.5vw !important;
|
||||
gap: 3.5vw !important;
|
||||
align-items: flex-start !important;
|
||||
padding: 27px 48px 16px 48px !important;
|
||||
gap: 67px !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
}
|
||||
@@ -101,18 +88,18 @@
|
||||
COLONNE GAUCHE (CARTE DU TRAIN - HAUTEUR DYNAMIQUE)
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-q-left-card {
|
||||
width: 29.5vw !important;
|
||||
min-width: 29.5vw !important;
|
||||
max-width: 29.5vw !important;
|
||||
height: auto !important; /* Dynamique selon le nombre de destinations */
|
||||
width: 566px !important;
|
||||
min-width: 566px !important;
|
||||
max-width: 566px !important;
|
||||
height: auto !important;
|
||||
background-color: rgba(32, 42, 78, 0.90) !important;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
|
||||
border-radius: 1.4vh !important;
|
||||
padding: 1.8vh 1.6vw !important;
|
||||
border-radius: 15px !important;
|
||||
padding: 19px 31px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 1.4vh !important;
|
||||
box-shadow: 0 0.8vh 2.0vh rgba(0, 0, 0, 0.35) !important;
|
||||
gap: 15px !important;
|
||||
box-shadow: 0 9px 22px rgba(0, 0, 0, 0.35) !important;
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
@@ -121,27 +108,27 @@
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding-bottom: 1.4vh !important;
|
||||
padding-bottom: 15px !important;
|
||||
border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
|
||||
}
|
||||
|
||||
.afl-q-card-time {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffff00 !important; /* Même couleur jaune que sur AFLDeparts.js */
|
||||
color: #ffff00 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.04vw !important;
|
||||
letter-spacing: -0.77px !important;
|
||||
}
|
||||
|
||||
/* Pastille Statut */
|
||||
.afl-q-pill {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.6vw !important;
|
||||
padding: 0.5vh 1.0vw 0.5vh 0.7vw !important;
|
||||
border-radius: 2.5vh !important;
|
||||
gap: 12px !important;
|
||||
padding: 5px 19px 5px 13px !important;
|
||||
border-radius: 27px !important;
|
||||
background-color: #45527a !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -158,37 +145,37 @@
|
||||
}
|
||||
|
||||
.afl-q-pill-icon {
|
||||
width: 2.6vh !important;
|
||||
height: 2.6vh !important;
|
||||
width: 28px !important;
|
||||
height: 28px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
/* Destinations & Numéros */
|
||||
.afl-q-dest-block {
|
||||
padding-bottom: 1.4vh !important;
|
||||
padding-bottom: 15px !important;
|
||||
border-bottom: 1.5px solid rgba(255, 255, 255, 0.14) !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
gap: 0.6vh !important;
|
||||
gap: 6px !important;
|
||||
}
|
||||
|
||||
.afl-q-dest-title {
|
||||
font-size: 5.6vh !important; /* Grande police pour la gare de destination */
|
||||
font-size: 60px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1.05 !important;
|
||||
letter-spacing: -0.03vw !important;
|
||||
letter-spacing: -0.58px !important;
|
||||
word-break: break-word !important;
|
||||
}
|
||||
|
||||
.afl-q-dest-sub {
|
||||
font-size: 2.6vh !important;
|
||||
font-size: 28px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #9bb0d8 !important;
|
||||
letter-spacing: 0.04vw !important;
|
||||
letter-spacing: 0.77px !important;
|
||||
text-transform: uppercase !important;
|
||||
line-height: 1 !important;
|
||||
margin-top: 0.4vh !important;
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
/* Bas de la carte : Logo du type de train */
|
||||
@@ -196,31 +183,31 @@
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
padding-top: 0.4vh !important;
|
||||
padding-top: 4px !important;
|
||||
}
|
||||
|
||||
.afl-q-train-logo-box {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: flex-start !important;
|
||||
max-height: 4.8vh !important;
|
||||
max-height: 52px !important;
|
||||
}
|
||||
|
||||
.afl-q-train-logo-img {
|
||||
max-height: 4.5vh !important;
|
||||
max-width: 15vw !important;
|
||||
max-height: 49px !important;
|
||||
max-width: 288px !important;
|
||||
object-fit: contain !important;
|
||||
}
|
||||
|
||||
.afl-q-train-logo-text {
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
|
||||
border-radius: 0.6vh !important;
|
||||
padding: 0.3vh 0.8vw !important;
|
||||
font-size: 2.5vh !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 3px 15px !important;
|
||||
font-size: 27px !important;
|
||||
font-style: italic !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.06vw !important;
|
||||
letter-spacing: 1.15px !important;
|
||||
}
|
||||
|
||||
/* --------------------------------------------------------------------------
|
||||
@@ -243,16 +230,16 @@
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
FOOTER : BOX VOIE EN BAS À DROITE (SANS REPÈRES DE QUAI NI COMPOSITION)
|
||||
FOOTER : BOX VOIE EN BAS À DROITE
|
||||
========================================================================== */
|
||||
.afl-q-footer {
|
||||
height: 14vh !important;
|
||||
min-height: 14vh !important;
|
||||
max-height: 14vh !important;
|
||||
height: 151px !important;
|
||||
min-height: 151px !important;
|
||||
max-height: 151px !important;
|
||||
display: flex !important;
|
||||
align-items: flex-end !important;
|
||||
justify-content: flex-end !important;
|
||||
padding: 0 2.5vw 1.8vh 2.5vw !important;
|
||||
padding: 0 48px 19px 48px !important;
|
||||
position: relative !important;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
@@ -262,31 +249,31 @@
|
||||
-------------------------------------------------------------------------- */
|
||||
.afl-q-voie-box {
|
||||
background-color: #ffffff !important;
|
||||
border-radius: 1.2vh !important;
|
||||
border-radius: 13px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
width: 7.2vw !important;
|
||||
min-width: 7.2vw !important;
|
||||
height: 12.5vh !important;
|
||||
padding: 0.4vh 0 !important;
|
||||
box-shadow: 0 0.6vh 1.5vh rgba(0, 0, 0, 0.35) !important;
|
||||
width: 138px !important;
|
||||
min-width: 138px !important;
|
||||
height: 135px !important;
|
||||
padding: 4px 0 !important;
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.afl-q-voie-label {
|
||||
color: #002447 !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.afl-q-voie-value {
|
||||
color: #002447 !important;
|
||||
font-size: 6.8vh !important;
|
||||
font-size: 73px !important;
|
||||
font-weight: 800 !important;
|
||||
line-height: 0.9 !important;
|
||||
margin: 0 !important;
|
||||
@@ -294,6 +281,3 @@
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -704,7 +704,7 @@ const AFLDepartsQuais = () => {
|
||||
<div className="afl-q-container">
|
||||
<header className="afl-q-header">
|
||||
<div className="afl-q-header-left">
|
||||
<svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
|
||||
<svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
|
||||
<path d="M4 8l5 5-5 5M11 8l5 5-5 5" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<circle cx="21" cy="11" r="2.6" fill="white" />
|
||||
<path d="M19 15h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
|
||||
@@ -714,7 +714,7 @@ const AFLDepartsQuais = () => {
|
||||
</div>
|
||||
<div className="afl-q-header-clock">{formatTimeNoSeconds(currentTime)}</div>
|
||||
</header>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '4.0vh', color: '#ffffff', fontWeight: 600 }}>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '43px', color: '#ffffff', fontWeight: 600 }}>
|
||||
Aucun départ prévu
|
||||
</div>
|
||||
<footer className="afl-q-footer">
|
||||
@@ -868,7 +868,7 @@ const AFLDepartsQuais = () => {
|
||||
{/* HEADER (10.5vh) */}
|
||||
<header className="afl-q-header">
|
||||
<div className="afl-q-header-left">
|
||||
<svg width="5.2vh" height="5.2vh" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
|
||||
<svg width="56px" height="56px" viewBox="0 0 32 32" fill="none" className="afl-q-header-icon">
|
||||
<path d="M4 8l5 5-5 5M11 8l5 5-5 5" stroke="white" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<circle cx="21" cy="11" r="2.6" fill="white" />
|
||||
<path d="M19 15h4.5l1.6 5.8-2 1-1-3.6-1 5.8-3-1 1.6-8z" fill="white" />
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
/* Info cause perturbation — slide-in de droite vers la gauche */
|
||||
@keyframes infoWrapperGrow {
|
||||
from { max-width: 0; }
|
||||
to { max-width: 30vw; }
|
||||
to { max-width: 576px; }
|
||||
}
|
||||
|
||||
@keyframes infoSlideIn {
|
||||
@@ -52,8 +52,8 @@
|
||||
--text-muted: #7EE0A0;
|
||||
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--blue-bg);
|
||||
font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
|
||||
@@ -64,12 +64,12 @@
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__watermark {
|
||||
position: absolute;
|
||||
right: -9vh;
|
||||
right: -97px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: center;
|
||||
/* Taille géante, très visible comme dans l'image */
|
||||
font-size: 23vh;
|
||||
font-size: 248px;
|
||||
color: #216b3e;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -81,13 +81,13 @@
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
LISTE STATIQUE — 10 lignes sur exactement 100vh
|
||||
LISTE STATIQUE — 10 lignes sur exactement 1080px
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -98,7 +98,7 @@
|
||||
MODE DÉFILEMENT — conteneur + track animé
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__scroll-container {
|
||||
height: 100vh;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -114,13 +114,13 @@
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
ROW — chaque ligne occupe 1/10 de 100vh
|
||||
ROW — chaque ligne occupe 1/10 de 1080px
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 calc(100vh / 10);
|
||||
height: calc(100vh / 10);
|
||||
flex: 0 0 108px;
|
||||
height: 108px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
@@ -136,7 +136,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--text-white);
|
||||
font-size: 3vh;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -144,20 +144,20 @@
|
||||
COL 1 — Logo opérateur (~9 % largeur)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__col-logo {
|
||||
width: 9vw;
|
||||
width: 173px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 0.4vw;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aff-classiques-arrivees__logo-box {
|
||||
width: 100%;
|
||||
/* Logo prend ~65% de la hauteur de la ligne */
|
||||
height: 6vh;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -172,7 +172,7 @@
|
||||
.aff-classiques-arrivees__logo-text {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 2vh;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
line-height: 1.1;
|
||||
@@ -183,23 +183,23 @@
|
||||
Alterne toutes les 4 secondes
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__col-meta {
|
||||
width: 11vw;
|
||||
width: 211px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 0.5vw 0 0;
|
||||
padding: 0 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
gap: 0.05vh;
|
||||
gap: 1px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Vue normale — type (ex: "MOBIGO") */
|
||||
.aff-classiques-arrivees__train-type {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
@@ -211,7 +211,7 @@
|
||||
|
||||
/* Vue normale — numéro de sillon (ex: "894251") */
|
||||
.aff-classiques-arrivees__train-number {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@@ -220,7 +220,7 @@
|
||||
|
||||
/* Vue statut — à l'heure */
|
||||
.aff-classiques-arrivees__status-ontime {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@@ -236,14 +236,14 @@
|
||||
}
|
||||
|
||||
.aff-classiques-arrivees__status-label {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aff-classiques-arrivees__status-value {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -251,7 +251,7 @@
|
||||
|
||||
/* Vue statut — supprimé */
|
||||
.aff-classiques-arrivees__status-suppressed {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -262,13 +262,13 @@
|
||||
Grande, jaune vif (#FFCC00), bold — comme dans l'image
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__col-time {
|
||||
width: 15vw;
|
||||
width: 288px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
padding: 0 0.3vw 0 0;
|
||||
padding: 0 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -277,13 +277,13 @@
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
/* Grande taille — occupe ~65% de la hauteur de ligne */
|
||||
font-size: 6.5vh;
|
||||
font-size: 70px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 4 — Destination + Info cause (flex:1 — prend tout le reste)
|
||||
COL 4 — Origine + Info cause (flex:1 — prend tout le reste)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__col-origin {
|
||||
flex: 1 1 0;
|
||||
@@ -292,14 +292,14 @@
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
padding-right: 0.5vw;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Texte destination — blanc, bold, très grand */
|
||||
.aff-classiques-arrivees__destination {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 6.5vh;
|
||||
font-size: 70px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -326,41 +326,41 @@
|
||||
|
||||
.aff-classiques-arrivees__separator {
|
||||
color: var(--text-white);
|
||||
font-size: 4.5vh;
|
||||
font-size: 49px;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.9vw;
|
||||
padding: 0 17px;
|
||||
}
|
||||
|
||||
.aff-classiques-arrivees__info-text {
|
||||
color: var(--text-white);
|
||||
font-size: 1.9vh;
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
max-width: 22vw;
|
||||
max-width: 422px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 5 — Quai OU icône bus (~6.5 % largeur)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__col-platform {
|
||||
width: 6.5vw;
|
||||
width: 125px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5vh 0.4vw;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
/* Boîte quai — bordure blanche */
|
||||
.aff-classiques-arrivees__platform-box {
|
||||
width: 6vh;
|
||||
height: 6vh;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.88);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -373,7 +373,7 @@
|
||||
.aff-classiques-arrivees__platform-text {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 4.5vh;
|
||||
font-size: 49px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -382,8 +382,8 @@
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-arrivees__footer {
|
||||
position: absolute;
|
||||
right: 1.2vw;
|
||||
bottom: 0.8vh;
|
||||
right: 23px;
|
||||
bottom: 9px;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -397,24 +397,24 @@
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.88);
|
||||
background: rgba(0, 51, 102, 0.93);
|
||||
border-radius: 8px;
|
||||
padding: 0.4vh 1.1vw;
|
||||
padding: 4px 21px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5vw;
|
||||
gap: 10px;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.aff-classiques-arrivees__clock-main {
|
||||
color: var(--text-white);
|
||||
font-weight: 800;
|
||||
font-size: 4.4vh;
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aff-classiques-arrivees__clock-seconds {
|
||||
color: var(--yellow);
|
||||
font-weight: 800;
|
||||
font-size: 2.7vh;
|
||||
font-size: 29px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1172,7 +1172,7 @@ export default function ClassiquesArrivees(){
|
||||
{/* COL 5 : Quai OU icône bus */}
|
||||
<div className="aff-classiques-arrivees__col-platform">
|
||||
{isSub || isCarTER ? (
|
||||
<img src="/type/track-car.svg" alt="Car" style={{ width: '6.5vh', height: '6.5vh' }} />
|
||||
<img src="/type/track-car.svg" alt="Car" style={{ width: '70px', height: '70px' }} />
|
||||
) : showPlatform ? (
|
||||
<div className="aff-classiques-arrivees__platform-box">
|
||||
<div className="aff-classiques-arrivees__platform-text">{platform}</div>
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
/* Info cause perturbation — slide-in de droite vers la gauche */
|
||||
@keyframes infoWrapperGrow {
|
||||
from { max-width: 0; }
|
||||
to { max-width: 30vw; }
|
||||
to { max-width: 576px; }
|
||||
}
|
||||
|
||||
@keyframes infoSlideIn {
|
||||
@@ -52,8 +52,8 @@
|
||||
--text-muted: #7EB8E0;
|
||||
|
||||
position: relative;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: var(--blue-bg);
|
||||
font-family: "Achemine", "Arial Narrow", Arial, sans-serif;
|
||||
@@ -64,12 +64,12 @@
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__watermark {
|
||||
position: absolute;
|
||||
right: -9vh;
|
||||
right: -97px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) rotate(-90deg);
|
||||
transform-origin: center;
|
||||
/* Taille géante, très visible comme dans l'image */
|
||||
font-size: 23vh;
|
||||
font-size: 248px;
|
||||
color: #1389D2;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.05em;
|
||||
@@ -81,13 +81,13 @@
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
LISTE STATIQUE — 10 lignes sur exactement 100vh
|
||||
LISTE STATIQUE — 10 lignes sur exactement 1080px
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100vh;
|
||||
height: 1080px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
@@ -98,7 +98,7 @@
|
||||
MODE DÉFILEMENT — conteneur + track animé
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__scroll-container {
|
||||
height: 100vh;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -114,13 +114,13 @@
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
ROW — chaque ligne occupe 1/10 de 100vh
|
||||
ROW — chaque ligne occupe 1/10 de 1080px
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 calc(100vh / 10);
|
||||
height: calc(100vh / 10);
|
||||
flex: 0 0 108px;
|
||||
height: 108px;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
@@ -136,7 +136,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--text-white);
|
||||
font-size: 3vh;
|
||||
font-size: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -144,20 +144,20 @@
|
||||
COL 1 — Logo opérateur (~9 % largeur)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__col-logo {
|
||||
width: 9vw;
|
||||
width: 173px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 0.4vw;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__logo-box {
|
||||
width: 100%;
|
||||
/* Logo prend ~65% de la hauteur de la ligne */
|
||||
height: 6vh;
|
||||
height: 65px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -172,7 +172,7 @@
|
||||
.aff-classiques-departs__logo-text {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 2vh;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
line-height: 1.1;
|
||||
@@ -183,23 +183,23 @@
|
||||
Alterne toutes les 4 secondes
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__col-meta {
|
||||
width: 11vw;
|
||||
width: 211px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 0 0.5vw 0 0;
|
||||
padding: 0 10px 0 0;
|
||||
box-sizing: border-box;
|
||||
gap: 0.05vh;
|
||||
gap: 1px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Vue normale — type (ex: "MOBIGO") */
|
||||
.aff-classiques-departs__train-type {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
@@ -211,7 +211,7 @@
|
||||
|
||||
/* Vue normale — numéro de sillon (ex: "894251") */
|
||||
.aff-classiques-departs__train-number {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@@ -220,7 +220,7 @@
|
||||
|
||||
/* Vue statut — à l'heure */
|
||||
.aff-classiques-departs__status-ontime {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--text-white);
|
||||
font-weight: 400;
|
||||
line-height: 1.3;
|
||||
@@ -236,14 +236,14 @@
|
||||
}
|
||||
|
||||
.aff-classiques-departs__status-label {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__status-value {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -251,7 +251,7 @@
|
||||
|
||||
/* Vue statut — supprimé */
|
||||
.aff-classiques-departs__status-suppressed {
|
||||
font-size: 2.2vh;
|
||||
font-size: 24px;
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
@@ -262,13 +262,13 @@
|
||||
Grande, jaune vif (#FFCC00), bold — comme dans l'image
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__col-time {
|
||||
width: 15vw;
|
||||
width: 288px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
height: 100%;
|
||||
padding: 0 0.3vw 0 0;
|
||||
padding: 0 6px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -277,7 +277,7 @@
|
||||
color: var(--yellow);
|
||||
font-weight: 700;
|
||||
/* Grande taille — occupe ~65% de la hauteur de ligne */
|
||||
font-size: 6.5vh;
|
||||
font-size: 70px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -292,14 +292,14 @@
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
padding-right: 0.5vw;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* Texte destination — blanc, bold, très grand */
|
||||
.aff-classiques-departs__destination {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 6.5vh;
|
||||
font-size: 70px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@@ -326,41 +326,41 @@
|
||||
|
||||
.aff-classiques-departs__separator {
|
||||
color: var(--text-white);
|
||||
font-size: 4.5vh;
|
||||
font-size: 49px;
|
||||
font-weight: 200;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
padding: 0 0.9vw;
|
||||
padding: 0 17px;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__info-text {
|
||||
color: var(--text-white);
|
||||
font-size: 1.9vh;
|
||||
font-size: 21px;
|
||||
font-weight: 400;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
line-height: 1.25;
|
||||
max-width: 22vw;
|
||||
max-width: 422px;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════════
|
||||
COL 5 — Quai OU icône bus (~6.5 % largeur)
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__col-platform {
|
||||
width: 6.5vw;
|
||||
width: 125px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5vh 0.4vw;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
/* Boîte quai — bordure blanche */
|
||||
.aff-classiques-departs__platform-box {
|
||||
width: 6vh;
|
||||
height: 6vh;
|
||||
width: 65px;
|
||||
height: 65px;
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.88);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -373,7 +373,7 @@
|
||||
.aff-classiques-departs__platform-text {
|
||||
color: var(--text-white);
|
||||
font-weight: 700;
|
||||
font-size: 4.5vh;
|
||||
font-size: 49px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@@ -382,8 +382,8 @@
|
||||
══════════════════════════════════════════════════════════════════ */
|
||||
.aff-classiques-departs__footer {
|
||||
position: absolute;
|
||||
right: 1.2vw;
|
||||
bottom: 0.8vh;
|
||||
right: 23px;
|
||||
bottom: 9px;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -397,24 +397,24 @@
|
||||
border: 2.5px solid rgba(255, 255, 255, 0.88);
|
||||
background: rgba(0, 51, 102, 0.93);
|
||||
border-radius: 8px;
|
||||
padding: 0.4vh 1.1vw;
|
||||
padding: 4px 21px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.5vw;
|
||||
gap: 10px;
|
||||
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.aff-classiques-departs__clock-main {
|
||||
color: var(--text-white);
|
||||
font-weight: 800;
|
||||
font-size: 4.4vh;
|
||||
font-size: 48px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.aff-classiques-departs__clock-seconds {
|
||||
color: var(--yellow);
|
||||
font-weight: 800;
|
||||
font-size: 2.7vh;
|
||||
font-size: 29px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1172,7 +1172,7 @@ export default function ClassiquesDeparts(){
|
||||
{/* COL 5 : Quai OU icône bus */}
|
||||
<div className="aff-classiques-departs__col-platform">
|
||||
{isSub || isCarTER ? (
|
||||
<img src="/type/track-car.svg" alt="Car" style={{ width: '6.5vh', height: '6.5vh' }} />
|
||||
<img src="/type/track-car.svg" alt="Car" style={{ width: '70px', height: '70px' }} />
|
||||
) : showPlatform ? (
|
||||
<div className="aff-classiques-departs__platform-box">
|
||||
<div className="aff-classiques-departs__platform-text">{platform}</div>
|
||||
|
||||
@@ -23,8 +23,8 @@ body, html {
|
||||
.aff-quais-arrivees-redesign__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #006330;
|
||||
|
||||
@@ -23,8 +23,8 @@ body, html {
|
||||
.aff-quais-departs-redesign__container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
font-family: 'Achemine', 'Helvetica Neue', Arial, sans-serif;
|
||||
background-color: #0b376d;
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
/* Container Principal */
|
||||
.eva-arr-container {
|
||||
font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background-color: #000824 !important; /* Bleu nuit très profond EVA */
|
||||
overflow: hidden !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 1.2vh 1.8vw !important;
|
||||
padding: 13px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
user-select: none !important;
|
||||
position: absolute !important;
|
||||
@@ -25,26 +25,26 @@
|
||||
HEADER (En-tête EVA)
|
||||
========================================================================== */
|
||||
.eva-arr-header {
|
||||
height: 9.5vh !important;
|
||||
min-height: 9.5vh !important;
|
||||
max-height: 9.5vh !important;
|
||||
height: 103px !important;
|
||||
min-height: 103px !important;
|
||||
max-height: 103px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 0.5vw !important;
|
||||
margin-bottom: 1.0vh !important;
|
||||
padding: 0 10px !important;
|
||||
margin-bottom: 11px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.0vw !important;
|
||||
gap: 19px !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-icon {
|
||||
width: 5.5vh !important;
|
||||
height: 5.5vh !important;
|
||||
width: 59px !important;
|
||||
height: 59px !important;
|
||||
flex-shrink: 0 !important;
|
||||
color: #00d68f !important;
|
||||
}
|
||||
@@ -52,31 +52,31 @@
|
||||
.eva-arr-header-titles {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.6vw !important;
|
||||
gap: 12px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-title-main {
|
||||
font-size: 5.2vh !important;
|
||||
font-size: 56px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.04vw !important;
|
||||
letter-spacing: 0.77px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-slash {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #00d68f !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.eva-arr-header-title-sub {
|
||||
font-size: 3.2vh !important;
|
||||
font-size: 35px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #00d68f !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
@@ -91,23 +91,23 @@
|
||||
border: 2.2px solid #00d68f !important;
|
||||
background-color: #000824 !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5vh 1.0vw !important;
|
||||
padding: 5px 19px !important;
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.5vw !important;
|
||||
gap: 10px !important;
|
||||
box-shadow: 0 0 10px rgba(0, 214, 143, 0.15) !important;
|
||||
}
|
||||
|
||||
.eva-arr-clock-main {
|
||||
font-size: 4.8vh !important;
|
||||
font-size: 52px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
.eva-arr-clock-seconds {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #00d68f !important;
|
||||
line-height: 1 !important;
|
||||
@@ -121,7 +121,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 1.2vh !important;
|
||||
gap: 13px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
@@ -133,8 +133,8 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
height: calc((100% - 3.6vh) / 4) !important;
|
||||
min-height: 12vh !important;
|
||||
height: calc((100% - 39px) / 4) !important;
|
||||
min-height: 130px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
|
||||
@@ -144,27 +144,27 @@
|
||||
COLONNE GAUCHE : HEURE & STATUT
|
||||
-------------------------------------------------------------------------- */
|
||||
.eva-arr-col-time {
|
||||
width: 14.5vw !important;
|
||||
min-width: 14.5vw !important;
|
||||
max-width: 14.5vw !important;
|
||||
width: 278px !important;
|
||||
min-width: 278px !important;
|
||||
max-width: 278px !important;
|
||||
background-color: #d7e1f0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 0.6vw !important;
|
||||
padding: 9px 12px !important;
|
||||
box-sizing: border-box !important;
|
||||
border-top-left-radius: 10px !important;
|
||||
border-bottom-left-radius: 10px !important;
|
||||
}
|
||||
|
||||
.eva-arr-time-value {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.6vh !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
margin-bottom: 6px !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
}
|
||||
|
||||
/* Pastilles de statut */
|
||||
@@ -172,11 +172,11 @@
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.4vw !important;
|
||||
padding: 0.3vh 0.9vw !important;
|
||||
gap: 8px !important;
|
||||
padding: 3px 17px !important;
|
||||
border-radius: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
height: 3.8vh !important;
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.eva-arr-status-pill--ontime {
|
||||
@@ -196,13 +196,13 @@
|
||||
}
|
||||
|
||||
.eva-arr-status-icon {
|
||||
width: 2.5vh !important;
|
||||
height: 2.5vh !important;
|
||||
width: 27px !important;
|
||||
height: 27px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-arr-status-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -216,7 +216,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
padding: 0.6vh 1.8vw !important;
|
||||
padding: 6px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
min-width: 0 !important;
|
||||
@@ -225,18 +225,18 @@
|
||||
.eva-arr-origin-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.8vw !important;
|
||||
gap: 15px !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
margin-bottom: 0.4vh !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.eva-arr-origin-name {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1.1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
@@ -246,24 +246,24 @@
|
||||
.eva-arr-perturb-badge {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.4vw !important;
|
||||
gap: 8px !important;
|
||||
background-color: #ffa74f !important;
|
||||
color: #000c2f !important;
|
||||
padding: 0.4vh 0.8vw !important;
|
||||
padding: 4px 15px !important;
|
||||
border-radius: 6px !important;
|
||||
height: 3.4vh !important;
|
||||
height: 37px !important;
|
||||
box-sizing: border-box !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-arr-perturb-badge-icon {
|
||||
width: 2.4vh !important;
|
||||
height: 2.4vh !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-arr-perturb-badge-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -279,10 +279,10 @@
|
||||
}
|
||||
|
||||
.eva-arr-vias-label {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #00c284 !important; /* Vert menthe SNCF */
|
||||
margin-right: 0.5vw !important;
|
||||
color: #00c284 !important;
|
||||
margin-right: 10px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
@@ -318,7 +318,7 @@
|
||||
}
|
||||
|
||||
.eva-arr-vias-stop {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #2c3b57 !important;
|
||||
line-height: 1 !important;
|
||||
@@ -327,8 +327,8 @@
|
||||
.eva-arr-vias-bullet {
|
||||
color: #00c284 !important;
|
||||
font-weight: 800 !important;
|
||||
margin: 0 0.5vw !important;
|
||||
font-size: 2.8vh !important;
|
||||
margin: 0 10px !important;
|
||||
font-size: 30px !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
@@ -347,18 +347,18 @@
|
||||
.eva-arr-bus-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.eva-arr-bus-icon {
|
||||
width: 6.0vh !important;
|
||||
height: 6.0vh !important;
|
||||
width: 65px !important;
|
||||
height: 65px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@@ -366,25 +366,25 @@
|
||||
.eva-arr-voie-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.eva-arr-voie-label {
|
||||
font-size: 1.8vh !important;
|
||||
font-size: 19px !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
.eva-arr-voie-val {
|
||||
font-size: 4.5vh !important;
|
||||
font-size: 49px !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
@@ -392,8 +392,8 @@
|
||||
/* Bloc Opérateur & Numéro Vert Émeraude */
|
||||
.eva-arr-train-block {
|
||||
background-color: #00d68f !important;
|
||||
width: 10.0vw !important;
|
||||
min-width: 10.0vw !important;
|
||||
width: 192px !important;
|
||||
min-width: 192px !important;
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -401,25 +401,25 @@
|
||||
justify-content: center !important;
|
||||
border-top-right-radius: 10px !important;
|
||||
border-bottom-right-radius: 10px !important;
|
||||
padding: 0 0.5vw !important;
|
||||
padding: 0 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-arr-train-op {
|
||||
font-size: 2.8vh !important;
|
||||
font-size: 30px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.3vh !important;
|
||||
margin-bottom: 3px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-arr-train-num {
|
||||
font-size: 4.2vh !important;
|
||||
font-size: 45px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -430,15 +430,15 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 1.8vw !important;
|
||||
margin-top: 1.0vh !important;
|
||||
gap: 1.4vw !important;
|
||||
padding: 9px 35px !important;
|
||||
margin-top: 11px !important;
|
||||
gap: 27px !important;
|
||||
box-sizing: border-box !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
flex-shrink: 0 !important;
|
||||
height: 10.8vh !important;
|
||||
min-height: 10.8vh !important;
|
||||
max-height: 10.8vh !important;
|
||||
height: 117px !important;
|
||||
min-height: 117px !important;
|
||||
max-height: 117px !important;
|
||||
}
|
||||
|
||||
.eva-arr-bottom-alert-icon-wrapper {
|
||||
@@ -449,8 +449,8 @@
|
||||
}
|
||||
|
||||
.eva-arr-bottom-alert-icon {
|
||||
width: 5.8vh !important;
|
||||
height: 5.8vh !important;
|
||||
width: 63px !important;
|
||||
height: 63px !important;
|
||||
color: #000c2f !important;
|
||||
}
|
||||
|
||||
@@ -458,8 +458,8 @@
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
height: 9.0vh !important;
|
||||
max-height: 9.0vh !important;
|
||||
height: 97px !important;
|
||||
max-height: 97px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
@@ -467,7 +467,7 @@
|
||||
|
||||
.eva-arr-bottom-alert-content {
|
||||
color: #000c2f !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
white-space: normal !important;
|
||||
|
||||
@@ -26,7 +26,7 @@ const formatTimeWithColon = (v) => {
|
||||
};
|
||||
|
||||
// Icône Passager avec valise à roulettes + Face avant de train (Logo En-tête EVA Arrivées)
|
||||
const EVAArrivalsHeaderIcon = ({ size = '5.5vh', color = '#00d68f', style = {} }) => (
|
||||
const EVAArrivalsHeaderIcon = ({ size = '59px', color = '#00d68f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 64 64"
|
||||
width={size}
|
||||
@@ -72,7 +72,7 @@ const EVAArrivalsHeaderIcon = ({ size = '5.5vh', color = '#00d68f', style = {} }
|
||||
);
|
||||
|
||||
// Icône de Bus / Autocar SNCF
|
||||
const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
const EVABusIcon = ({ size = '65px', color = '#ffffff', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -85,7 +85,7 @@ const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information (Badge motif perturbation)
|
||||
const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
const EVAInfoIcon = ({ size = '26px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -104,7 +104,7 @@ const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information Grande (Bandeau Travaux inférieur)
|
||||
const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
const EVABigAlertIcon = ({ size = '63px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
width={size}
|
||||
@@ -129,7 +129,7 @@ const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Horloge pour les pastilles de statut
|
||||
const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVAClockIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -147,7 +147,7 @@ const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) =>
|
||||
);
|
||||
|
||||
// Icône Suppression (Croix)
|
||||
const EVACrossIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVACrossIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -441,7 +441,6 @@ export default function EVAArrivees() {
|
||||
|
||||
const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
|
||||
useAnnonceSonoreRealtime(resolvedGareId, 'EVAArrivees');
|
||||
useAutoAnnonce(horaires, currentTime, true);
|
||||
|
||||
// Récupération type de gare
|
||||
useEffect(() => {
|
||||
@@ -1068,7 +1067,7 @@ export default function EVAArrivees() {
|
||||
if (h._date && h._date !== todayStr) return false;
|
||||
if (!circulatesOn(h, today)) return false;
|
||||
if (typeof h._depHM !== 'number') return false;
|
||||
if (h._depHM < todayHM - 1) return false;
|
||||
if (h._depHM < todayHM) return false;
|
||||
if (h._travauxAppliesToday) return false;
|
||||
return true;
|
||||
});
|
||||
@@ -1112,8 +1111,9 @@ export default function EVAArrivees() {
|
||||
});
|
||||
|
||||
const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);
|
||||
const withServiceDate = (annotated || []).map(a => ({ ...a, _serviceDate: serviceDateStr }));
|
||||
|
||||
setHoraires(annotated || []);
|
||||
setHoraires(withServiceDate || []);
|
||||
setPerturbations(filteredPerturb || []);
|
||||
setTravaux(travauxData || []);
|
||||
setTravauxSubstitutions(travauxSubstData || []);
|
||||
@@ -1140,9 +1140,30 @@ export default function EVAArrivees() {
|
||||
return () => clearInterval(delayTimer);
|
||||
}, []);
|
||||
|
||||
// Filtrage en temps réel : ne plus afficher les horaires dont l'heure est dépassée
|
||||
const currentHM = currentTime.getHours() * 60 + currentTime.getMinutes();
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
const todayDateStr = `${currentTime.getFullYear()}-${pad(currentTime.getMonth() + 1)}-${pad(currentTime.getDate())}`;
|
||||
|
||||
const activeHoraires = (horaires || []).filter(h => {
|
||||
const sDate = h._serviceDate || h._date;
|
||||
if (!sDate || sDate === todayDateStr) {
|
||||
if (typeof h._depHM === 'number') {
|
||||
const delay = (h._status && typeof h._status.delayMinutes === 'number') ? h._status.delayMinutes : 0;
|
||||
const effectiveHM = h._depHM + delay;
|
||||
if (effectiveHM < currentHM) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
useAutoAnnonce(activeHoraires, currentTime, true);
|
||||
|
||||
// Pagination : 4 trains par page sur les écrans EVA
|
||||
const ITEMS_PER_PAGE = 4;
|
||||
const totalPages = Math.max(1, Math.ceil(horaires.length / ITEMS_PER_PAGE));
|
||||
const totalPages = Math.max(1, Math.ceil(activeHoraires.length / ITEMS_PER_PAGE));
|
||||
const [pageIndex, setPageIndex] = useState(lockedPageIndex !== null ? lockedPageIndex : 0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1159,7 +1180,8 @@ export default function EVAArrivees() {
|
||||
return () => clearInterval(pageInterval);
|
||||
}, [lockedPageIndex, totalPages]);
|
||||
|
||||
const displayedHoraires = horaires.slice(pageIndex * ITEMS_PER_PAGE, (pageIndex + 1) * ITEMS_PER_PAGE);
|
||||
const safePageIndex = Math.min(pageIndex, Math.max(0, totalPages - 1));
|
||||
const displayedHoraires = activeHoraires.slice(safePageIndex * ITEMS_PER_PAGE, (safePageIndex + 1) * ITEMS_PER_PAGE);
|
||||
|
||||
// Recherche d'un message de travaux ou d'alerte pour le bandeau bas
|
||||
const activeTravauxMessage = (() => {
|
||||
@@ -1208,7 +1230,7 @@ export default function EVAArrivees() {
|
||||
<ul className={`eva-arr-list ${activeTravauxMessage ? 'eva-arr-list--with-alert' : ''}`}>
|
||||
{displayedHoraires.length === 0 ? (
|
||||
<li className="eva-arr-row" key="empty">
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '2.8vh', fontWeight: 'bold' }}>
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '30px', fontWeight: 'bold' }}>
|
||||
Aucune arrivée prévue pour le moment.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -5,15 +5,15 @@
|
||||
/* Container Principal */
|
||||
.eva-dep-container {
|
||||
font-family: 'Avenir', 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
|
||||
height: 100vh !important;
|
||||
width: 100vw !important;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
background-color: #000824 !important; /* Bleu nuit très profond EVA */
|
||||
overflow: hidden !important;
|
||||
color: #ffffff !important;
|
||||
margin: 0 !important;
|
||||
padding: 1.2vh 1.8vw !important;
|
||||
padding: 13px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
user-select: none !important;
|
||||
position: absolute !important;
|
||||
@@ -25,26 +25,26 @@
|
||||
HEADER (En-tête EVA Départs)
|
||||
========================================================================== */
|
||||
.eva-dep-header {
|
||||
height: 9.5vh !important;
|
||||
min-height: 9.5vh !important;
|
||||
max-height: 9.5vh !important;
|
||||
height: 103px !important;
|
||||
min-height: 103px !important;
|
||||
max-height: 103px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
padding: 0 0.5vw !important;
|
||||
margin-bottom: 1.0vh !important;
|
||||
padding: 0 10px !important;
|
||||
margin-bottom: 11px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-left {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 1.0vw !important;
|
||||
gap: 19px !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-icon {
|
||||
width: 5.5vh !important;
|
||||
height: 5.5vh !important;
|
||||
width: 59px !important;
|
||||
height: 59px !important;
|
||||
flex-shrink: 0 !important;
|
||||
color: #03c5ff !important; /* Bleu cyan/azur vif EVA Départs (#03c5ff) */
|
||||
}
|
||||
@@ -52,31 +52,31 @@
|
||||
.eva-dep-header-titles {
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.6vw !important;
|
||||
gap: 12px !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-title-main {
|
||||
font-size: 5.2vh !important;
|
||||
font-size: 56px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #ffffff !important;
|
||||
letter-spacing: 0.04vw !important;
|
||||
letter-spacing: 0.77px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-slash {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #03c5ff !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.eva-dep-header-title-sub {
|
||||
font-size: 3.2vh !important;
|
||||
font-size: 35px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #03c5ff !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
line-height: 1 !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
@@ -91,23 +91,23 @@
|
||||
border: 2.2px solid #03c5ff !important;
|
||||
background-color: #000824 !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0.5vh 1.0vw !important;
|
||||
padding: 5px 19px !important;
|
||||
display: flex !important;
|
||||
align-items: baseline !important;
|
||||
gap: 0.5vw !important;
|
||||
gap: 10px !important;
|
||||
box-shadow: 0 0 12px rgba(3, 197, 255, 0.25) !important;
|
||||
}
|
||||
|
||||
.eva-dep-clock-main {
|
||||
font-size: 4.8vh !important;
|
||||
font-size: 52px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #ffffff !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
.eva-dep-clock-seconds {
|
||||
font-size: 3.8vh !important;
|
||||
font-size: 41px !important;
|
||||
font-weight: 800 !important;
|
||||
color: #03c5ff !important;
|
||||
line-height: 1 !important;
|
||||
@@ -121,7 +121,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
gap: 1.2vh !important;
|
||||
gap: 13px !important;
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
list-style: none !important;
|
||||
@@ -133,8 +133,8 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: stretch !important;
|
||||
height: calc((100% - 3.6vh) / 4) !important;
|
||||
min-height: 12vh !important;
|
||||
height: calc((100% - 39px) / 4) !important;
|
||||
min-height: 130px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
|
||||
@@ -144,27 +144,27 @@
|
||||
COLONNE GAUCHE : HEURE & STATUT
|
||||
-------------------------------------------------------------------------- */
|
||||
.eva-dep-col-time {
|
||||
width: 14.5vw !important;
|
||||
min-width: 14.5vw !important;
|
||||
max-width: 14.5vw !important;
|
||||
width: 278px !important;
|
||||
min-width: 278px !important;
|
||||
max-width: 278px !important;
|
||||
background-color: #d7e1f0 !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 0.6vw !important;
|
||||
padding: 9px 12px !important;
|
||||
box-sizing: border-box !important;
|
||||
border-top-left-radius: 10px !important;
|
||||
border-bottom-left-radius: 10px !important;
|
||||
}
|
||||
|
||||
.eva-dep-time-value {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.6vh !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
margin-bottom: 6px !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
}
|
||||
|
||||
/* Pastilles de statut */
|
||||
@@ -172,11 +172,11 @@
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 0.4vw !important;
|
||||
padding: 0.3vh 0.9vw !important;
|
||||
gap: 8px !important;
|
||||
padding: 3px 17px !important;
|
||||
border-radius: 20px !important;
|
||||
box-sizing: border-box !important;
|
||||
height: 3.8vh !important;
|
||||
height: 41px !important;
|
||||
}
|
||||
|
||||
.eva-dep-status-pill--ontime {
|
||||
@@ -196,13 +196,13 @@
|
||||
}
|
||||
|
||||
.eva-dep-status-icon {
|
||||
width: 2.5vh !important;
|
||||
height: 2.5vh !important;
|
||||
width: 27px !important;
|
||||
height: 27px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-dep-status-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -216,7 +216,7 @@
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: center !important;
|
||||
padding: 0.6vh 1.8vw !important;
|
||||
padding: 6px 35px !important;
|
||||
box-sizing: border-box !important;
|
||||
overflow: hidden !important;
|
||||
min-width: 0 !important;
|
||||
@@ -225,18 +225,18 @@
|
||||
.eva-dep-origin-row {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.8vw !important;
|
||||
gap: 15px !important;
|
||||
overflow: hidden !important;
|
||||
white-space: nowrap !important;
|
||||
margin-bottom: 0.4vh !important;
|
||||
margin-bottom: 4px !important;
|
||||
}
|
||||
|
||||
.eva-dep-origin-name {
|
||||
font-size: 5.6vh !important;
|
||||
font-size: 60px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1.1 !important;
|
||||
letter-spacing: -0.02vw !important;
|
||||
letter-spacing: -0.38px !important;
|
||||
white-space: nowrap !important;
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
@@ -246,24 +246,24 @@
|
||||
.eva-dep-perturb-badge {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
gap: 0.4vw !important;
|
||||
gap: 8px !important;
|
||||
background-color: #ffa74f !important;
|
||||
color: #000c2f !important;
|
||||
padding: 0.4vh 0.8vw !important;
|
||||
padding: 4px 15px !important;
|
||||
border-radius: 6px !important;
|
||||
height: 3.4vh !important;
|
||||
height: 37px !important;
|
||||
box-sizing: border-box !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-dep-perturb-badge-icon {
|
||||
width: 2.4vh !important;
|
||||
height: 2.4vh !important;
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.eva-dep-perturb-badge-text {
|
||||
font-size: 2.2vh !important;
|
||||
font-size: 24px !important;
|
||||
font-weight: 700 !important;
|
||||
line-height: 1 !important;
|
||||
white-space: nowrap !important;
|
||||
@@ -279,10 +279,10 @@
|
||||
}
|
||||
|
||||
.eva-dep-vias-label {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #03c5ff !important; /* Bleu azur EVA Départs (#03c5ff) */
|
||||
margin-right: 0.5vw !important;
|
||||
margin-right: 10px !important;
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
@@ -318,7 +318,7 @@
|
||||
}
|
||||
|
||||
.eva-dep-vias-stop {
|
||||
font-size: 3.5vh !important;
|
||||
font-size: 38px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #2c3b57 !important;
|
||||
line-height: 1 !important;
|
||||
@@ -327,8 +327,8 @@
|
||||
.eva-dep-vias-bullet {
|
||||
color: #03c5ff !important;
|
||||
font-weight: 800 !important;
|
||||
margin: 0 0.5vw !important;
|
||||
font-size: 2.8vh !important;
|
||||
margin: 0 10px !important;
|
||||
font-size: 30px !important;
|
||||
display: inline-block !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
@@ -347,18 +347,18 @@
|
||||
.eva-dep-bus-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
.eva-dep-bus-icon {
|
||||
width: 6.0vh !important;
|
||||
height: 6.0vh !important;
|
||||
width: 65px !important;
|
||||
height: 65px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@@ -366,25 +366,25 @@
|
||||
.eva-dep-voie-box {
|
||||
background-color: #000c2f !important;
|
||||
border-radius: 8px !important;
|
||||
width: 7.0vw !important;
|
||||
width: 134px !important;
|
||||
height: 80% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
margin-right: 0.8vw !important;
|
||||
margin-right: 15px !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.eva-dep-voie-label {
|
||||
font-size: 1.8vh !important;
|
||||
font-size: 19px !important;
|
||||
font-weight: 600 !important;
|
||||
text-transform: uppercase !important;
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
.eva-dep-voie-val {
|
||||
font-size: 4.5vh !important;
|
||||
font-size: 49px !important;
|
||||
font-weight: 900 !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
@@ -392,8 +392,8 @@
|
||||
/* Bloc Opérateur & Numéro Bleu Azur Départs */
|
||||
.eva-dep-train-block {
|
||||
background-color: #03c5ff !important; /* Bleu cyan/azur #03c5ff */
|
||||
width: 10.0vw !important;
|
||||
min-width: 10.0vw !important;
|
||||
width: 192px !important;
|
||||
min-width: 192px !important;
|
||||
height: 100% !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
@@ -401,25 +401,25 @@
|
||||
justify-content: center !important;
|
||||
border-top-right-radius: 10px !important;
|
||||
border-bottom-right-radius: 10px !important;
|
||||
padding: 0 0.5vw !important;
|
||||
padding: 0 10px !important;
|
||||
box-sizing: border-box !important;
|
||||
}
|
||||
|
||||
.eva-dep-train-op {
|
||||
font-size: 2.8vh !important;
|
||||
font-size: 30px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
margin-bottom: 0.3vh !important;
|
||||
margin-bottom: 3px !important;
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
.eva-dep-train-num {
|
||||
font-size: 4.2vh !important;
|
||||
font-size: 45px !important;
|
||||
font-weight: 900 !important;
|
||||
color: #000c2f !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: 0.02vw !important;
|
||||
letter-spacing: 0.38px !important;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
@@ -430,15 +430,15 @@
|
||||
border-radius: 10px !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
padding: 0.8vh 1.8vw !important;
|
||||
margin-top: 1.0vh !important;
|
||||
gap: 1.4vw !important;
|
||||
padding: 9px 35px !important;
|
||||
margin-top: 11px !important;
|
||||
gap: 27px !important;
|
||||
box-sizing: border-box !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
|
||||
flex-shrink: 0 !important;
|
||||
height: 10.8vh !important;
|
||||
min-height: 10.8vh !important;
|
||||
max-height: 10.8vh !important;
|
||||
height: 117px !important;
|
||||
min-height: 117px !important;
|
||||
max-height: 117px !important;
|
||||
}
|
||||
|
||||
.eva-dep-bottom-alert-icon-wrapper {
|
||||
@@ -449,8 +449,8 @@
|
||||
}
|
||||
|
||||
.eva-dep-bottom-alert-icon {
|
||||
width: 5.8vh !important;
|
||||
height: 5.8vh !important;
|
||||
width: 63px !important;
|
||||
height: 63px !important;
|
||||
color: #000c2f !important;
|
||||
}
|
||||
|
||||
@@ -458,8 +458,8 @@
|
||||
flex: 1 !important;
|
||||
overflow: hidden !important;
|
||||
position: relative !important;
|
||||
height: 9.0vh !important;
|
||||
max-height: 9.0vh !important;
|
||||
height: 97px !important;
|
||||
max-height: 97px !important;
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
justify-content: flex-start !important;
|
||||
@@ -467,7 +467,7 @@
|
||||
|
||||
.eva-dep-bottom-alert-content {
|
||||
color: #000c2f !important;
|
||||
font-size: 2.4vh !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 600 !important;
|
||||
line-height: 1.25 !important;
|
||||
white-space: normal !important;
|
||||
|
||||
@@ -26,7 +26,7 @@ const formatTimeWithColon = (v) => {
|
||||
};
|
||||
|
||||
// Icône Passager + Face avant de train (Logo En-tête EVA Départs)
|
||||
const EVADeparturesHeaderIcon = ({ size = '5.5vh', color = '#03c5ff', style = {} }) => (
|
||||
const EVADeparturesHeaderIcon = ({ size = '59px', color = '#03c5ff', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 64 64"
|
||||
width={size}
|
||||
@@ -72,7 +72,7 @@ const EVADeparturesHeaderIcon = ({ size = '5.5vh', color = '#03c5ff', style = {}
|
||||
);
|
||||
|
||||
// Icône de Bus / Autocar SNCF
|
||||
const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
const EVABusIcon = ({ size = '65px', color = '#ffffff', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -85,7 +85,7 @@ const EVABusIcon = ({ size = '6.0vh', color = '#ffffff', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information (Badge motif perturbation)
|
||||
const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
const EVAInfoIcon = ({ size = '26px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -104,7 +104,7 @@ const EVAInfoIcon = ({ size = '2.4vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Information Grande (Bandeau Travaux inférieur)
|
||||
const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
const EVABigAlertIcon = ({ size = '63px', color = '#000c2f', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 48 48"
|
||||
width={size}
|
||||
@@ -125,7 +125,7 @@ const EVABigAlertIcon = ({ size = '5.8vh', color = '#000c2f', style = {} }) => (
|
||||
);
|
||||
|
||||
// Icône Horloge pour les pastilles de statut
|
||||
const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVAClockIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -143,7 +143,7 @@ const EVAClockIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) =>
|
||||
);
|
||||
|
||||
// Icône Suppression (Croix)
|
||||
const EVACrossIcon = ({ size = '2.5vh', color = 'currentColor', style = {} }) => (
|
||||
const EVACrossIcon = ({ size = '27px', color = 'currentColor', style = {} }) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={size}
|
||||
@@ -437,7 +437,6 @@ export default function EVADeparts() {
|
||||
|
||||
const [resolvedGareId, setResolvedGareId] = useState(gareIdParam || null);
|
||||
useAnnonceSonoreRealtime(resolvedGareId, 'EVADeparts');
|
||||
useAutoAnnonce(horaires, currentTime, false);
|
||||
|
||||
// Récupération type de gare
|
||||
useEffect(() => {
|
||||
@@ -1084,7 +1083,7 @@ export default function EVADeparts() {
|
||||
if (h._date && h._date !== todayStr) return false;
|
||||
if (!circulatesOn(h, today)) return false;
|
||||
if (typeof h._depHM !== 'number') return false;
|
||||
if (h._depHM < todayHM - 1) return false;
|
||||
if (h._depHM < todayHM) return false;
|
||||
if (h._travauxAppliesToday) return false;
|
||||
return true;
|
||||
});
|
||||
@@ -1128,8 +1127,9 @@ export default function EVADeparts() {
|
||||
});
|
||||
|
||||
const annotated = applyPerturbationsToHoraires(finalList, filteredPerturb || [], null, null, serviceDateStr);
|
||||
const withServiceDate = (annotated || []).map(a => ({ ...a, _serviceDate: serviceDateStr }));
|
||||
|
||||
setHoraires(annotated || []);
|
||||
setHoraires(withServiceDate || []);
|
||||
setPerturbations(filteredPerturb || []);
|
||||
setTravaux(travauxData || []);
|
||||
setTravauxSubstitutions(travauxSubstData || []);
|
||||
@@ -1156,9 +1156,30 @@ export default function EVADeparts() {
|
||||
return () => clearInterval(delayTimer);
|
||||
}, []);
|
||||
|
||||
// Filtrage en temps réel : ne plus afficher les horaires dont l'heure est dépassée
|
||||
const currentHM = currentTime.getHours() * 60 + currentTime.getMinutes();
|
||||
const pad = (n) => String(n).padStart(2, '0');
|
||||
const todayDateStr = `${currentTime.getFullYear()}-${pad(currentTime.getMonth() + 1)}-${pad(currentTime.getDate())}`;
|
||||
|
||||
const activeHoraires = (horaires || []).filter(h => {
|
||||
const sDate = h._serviceDate || h._date;
|
||||
if (!sDate || sDate === todayDateStr) {
|
||||
if (typeof h._depHM === 'number') {
|
||||
const delay = (h._status && typeof h._status.delayMinutes === 'number') ? h._status.delayMinutes : 0;
|
||||
const effectiveHM = h._depHM + delay;
|
||||
if (effectiveHM < currentHM) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
useAutoAnnonce(activeHoraires, currentTime, false);
|
||||
|
||||
// Pagination : 4 trains par page sur les écrans EVA
|
||||
const ITEMS_PER_PAGE = 4;
|
||||
const totalPages = Math.max(1, Math.ceil(horaires.length / ITEMS_PER_PAGE));
|
||||
const totalPages = Math.max(1, Math.ceil(activeHoraires.length / ITEMS_PER_PAGE));
|
||||
const [pageIndex, setPageIndex] = useState(lockedPageIndex !== null ? lockedPageIndex : 0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -1175,7 +1196,8 @@ export default function EVADeparts() {
|
||||
return () => clearInterval(pageInterval);
|
||||
}, [lockedPageIndex, totalPages]);
|
||||
|
||||
const displayedHoraires = horaires.slice(pageIndex * ITEMS_PER_PAGE, (pageIndex + 1) * ITEMS_PER_PAGE);
|
||||
const safePageIndex = Math.min(pageIndex, Math.max(0, totalPages - 1));
|
||||
const displayedHoraires = activeHoraires.slice(safePageIndex * ITEMS_PER_PAGE, (safePageIndex + 1) * ITEMS_PER_PAGE);
|
||||
|
||||
// Recherche d'un message de travaux ou d'alerte pour le bandeau bas
|
||||
const activeTravauxMessage = (() => {
|
||||
@@ -1222,7 +1244,7 @@ export default function EVADeparts() {
|
||||
<ul className={`eva-dep-list ${activeTravauxMessage ? 'eva-dep-list--with-alert' : ''}`}>
|
||||
{displayedHoraires.length === 0 ? (
|
||||
<li className="eva-dep-row" key="empty">
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '2.8vh', fontWeight: 'bold' }}>
|
||||
<div style={{ color: '#000c2f', padding: '24px', fontSize: '30px', fontWeight: 'bold' }}>
|
||||
Aucun départ prévu pour le moment.
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in new issue
Block a user