Trombinoscope dynamique

Description

Application front-end permettant de consulter les apprenants d'une promotion en mode liste ou carte, avec carte interactive Leaflet et page de préférences personnalisables. Conçu pour être responsive et accessible.

Presentation detaillee

PromoENI est une application front-end permettant de consulter les profils d'une promotion selon deux modes : liste ou cartes. Les données (nom, prénom, ville, avatar, coordonnées GPS) sont chargées depuis un fichier JSON local et rendues dynamiquement via JavaScript.

Chaque profil ouvre une modale de détail adaptée à la taille d'écran — comportement et présentation s'ajustent automatiquement pour rester lisibles sur mobile comme sur desktop.

Une page dédiée permet de choisir le thème (clair/sombre) et le format d'affichage (liste/cartes). Ces choix sont persistés via localStorage et appliqués dès le rechargement. La page Carte intègre Leaflet.js : un marqueur est positionné pour chaque apprenant à partir de ses coordonnées GPS. Chaque marqueur ouvre une popup avec avatar, nom et ville.

Style centralisé via CSS, breakpoints mobile/tablette/desktop, navigation claire entre les pages.

Points forts

• Rendu dynamique de données JSON via JavaScript natif
• Switch liste/cartes mémorisé avec localStorage
• Thème clair/sombre géré par variables CSS
• Modales de détails adaptées mobile/desktop
• Carte interactive Leaflet avec marqueurs GPS et popups
• Interface responsive
• Une base front-end maintenable

GitHub