Démo portail CSE avec tutoriels Driver.js

Démonstration d'un portail interne de Comité social et économique (CSE), entièrement statique et en français, avec des parcours guidés interactifs réalisés avec Driver.js.

Site en ligne : https://vincentguyader.github.io/demo-cse-driverjs/

Ce portail est fictif. Aucune donnée n'est enregistrée ni transmise : toutes les commandes, réservations et dépôts sont simulés dans le navigateur.

Rubriques

Rubrique	Contenu
Accueil	Solde de subvention, cartes de services, actualités, prochaines activités
Billetterie	Offres à tarif négocié (parcs, spectacles, culture, sport) avec filtres
Tickets de cinéma	Formulaire de commande en 5 étapes avec récapitulatif en direct
Réserver une activité	Catalogue d'activités, formulaire de réservation, liste d'attente
Déposer un justificatif	Demande de remboursement avec dépôt de fichier et estimation
Suivre mes demandes	Tableau filtrable, recherche, détail chronologique de chaque dossier
Contacter le CSE	Formulaire de contact, permanence, élus
Aide / FAQ	Relance des tutoriels et questions fréquentes

Tutoriels interactifs

Accessibles depuis le bouton « Voir le guide » de l'en-tête, la rubrique Aide / FAQ, les boutons « Voir le guide » de chaque page et le lien « Rejouer la visite guidée » du pied de page.

1. Découvrir le portail (lancé automatiquement à la première visite)
2. Commander mes tickets de cinéma
3. Réserver une activité
4. Déposer un justificatif
5. Suivre mes demandes

Les boutons Driver.js sont en français (Suivant, Précédent, Terminer). Chaque étape ouvre automatiquement la rubrique concernée, ce qui rend les parcours relançables depuis n'importe quelle page, y compris sur mobile ou lorsque la page est déjà scrollée.

Structure

index.html                    page unique, toutes les rubriques
assets/css/styles.css         styles du portail et habillage Driver.js
assets/js/app.js              navigation, formulaires, simulations
assets/js/tours.js            définition et lancement des tutoriels
.github/workflows/deploy.yml  déploiement GitHub Pages

Pile technique

• HTML, CSS et JavaScript vanilla, sans build ni dépendance npm.
• Driver.js 1.3.1 chargé via CDN (CSS + script IIFE).
• Déploiement sur GitHub Pages par GitHub Actions (actions/configure-pages, actions/upload-pages-artifact, actions/deploy-pages), déclenché à chaque push sur main ou manuellement (workflow_dispatch).

Lancer en local

Ouvrez simplement index.html dans un navigateur, ou servez le dossier :

python3 -m http.server 8000

puis rendez-vous sur http://localhost:8000/.

Ajouter un tutoriel

Dans assets/js/tours.js, ajoutez une entrée dans l'objet TOURS :

maVisite: {
  pageInitiale: "billetterie",
  steps: [
    { element: "#offres-billetterie", page: "billetterie",
      title: "Titre", description: "Texte de l'étape." }
  ]
}

puis un déclencheur n'importe où dans la page : <button data-tour="maVisite">.