Skip to content

README.md

Latest commit

 

History

History
84 lines (63 loc) · 3.1 KB

README.md

File metadata and controls

84 lines (63 loc) · 3.1 KB
Raw

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">.