mathis
9c6ac798f1
-> REFONTE TOTALE DE TOUS LES AFFICHEURS CLASSIQUES + QUAIS FONCTIONNALITÉS EN COURS DE DÉVELOPPEMENT : -> ADAPTABILITÉ EN FONCTION DES SITUATIONS
64 lines
2.7 KiB
JavaScript
64 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import './DepartEnCoursAFL.css';
|
|
|
|
export default function DepartEnCoursAFL() {
|
|
return (
|
|
<div className="aff-dep-afl__container">
|
|
{/* RUBAN SUPÉRIEUR RAYÉ BLANC ET ROUGE */}
|
|
<div className="aff-dep-afl__hazard-stripes" />
|
|
|
|
{/* CONTENU PRINCIPAL */}
|
|
<div className="aff-dep-afl__content">
|
|
{/* Panneau d'interdiction blanc à gauche */}
|
|
<div className="aff-dep-afl__icon-col">
|
|
<svg
|
|
viewBox="0 0 240 240"
|
|
className="aff-dep-afl__no-entry-svg"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
{/* Cercle blanc extérieur */}
|
|
<circle cx="120" cy="120" r="105" stroke="#ffffff" strokeWidth="18" />
|
|
|
|
{/* Silhouette du piéton marchant avec valise */}
|
|
<g fill="#ffffff">
|
|
{/* Tête */}
|
|
<circle cx="126" cy="62" r="15" />
|
|
{/* Corps marchant */}
|
|
<path d="M116 84 C116 84, 134 84, 138 98 L152 144 L140 148 L128 110 L118 132 L112 186 L98 184 L106 126 L96 112 Z" />
|
|
{/* Jambe droite enjambant */}
|
|
<path d="M122 134 L138 180 C138 180, 146 186, 140 190 C134 194, 126 188, 126 188 L114 148 Z" />
|
|
{/* Bras gauche */}
|
|
<path d="M128 88 L146 114 L138 120 L122 96 Z" />
|
|
{/* Bras droit tenant la valise */}
|
|
<path d="M116 86 L98 116 L88 110" stroke="#ffffff" strokeWidth="8" strokeLinecap="round" strokeLinejoin="round" fill="none" />
|
|
{/* Valise inclinée */}
|
|
<g transform="rotate(-15, 80, 140)">
|
|
<rect x="58" y="122" width="38" height="52" rx="7" fill="#ffffff" />
|
|
<path d="M70 122 V112 H84 V122" stroke="#ffffff" strokeWidth="6" fill="none" />
|
|
</g>
|
|
</g>
|
|
|
|
{/* Barre diagonale blanche d'interdiction */}
|
|
<line x1="46" y1="46" x2="194" y2="194" stroke="#ffffff" strokeWidth="18" strokeLinecap="round" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Textes d'alerte et de consigne à droite */}
|
|
<div className="aff-dep-afl__text-col">
|
|
<div className="aff-dep-afl__heading-group">
|
|
<div className="aff-dep-afl__title-main">DÉPARTS</div>
|
|
<div className="aff-dep-afl__title-sub">EN COURS</div>
|
|
</div>
|
|
|
|
<div className="aff-dep-afl__instructions">
|
|
<p className="aff-dep-afl__instruction-line">Pour votre sécurité</p>
|
|
<p className="aff-dep-afl__instruction-line">merci de vous éloigner</p>
|
|
<p className="aff-dep-afl__instruction-line">de la bordure du quai.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|