Commit
feat(doc): page documentation /doc (guide + captures) + lien footer + PDF téléchargeable
added
frontend/doc/img/etape1.png
+0 −0
Binary file not shown.
added
frontend/doc/img/etape2.png
+0 −0
Binary file not shown.
added
frontend/doc/img/etape3.png
+0 −0
Binary file not shown.
added
frontend/doc/img/etape4.png
+0 −0
Binary file not shown.
added
frontend/doc/index.html
+188 −0
@@ -0,0 +1,188 @@ | |||
| 1 | +<!DOCTYPE html> | ||
| 2 | +<!-- Page /doc de Sorti·Ka — générée depuis le gabarit commun Groupe KA (2026-08-24). --> | ||
| 3 | +<html lang="fr"> | ||
| 4 | +<head> | ||
| 5 | +<meta charset="utf-8"> | ||
| 6 | +<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> | ||
| 7 | +<title>Documentation — Sorti·Ka</title> | ||
| 8 | +<meta name="description" content="Comment fonctionne Sorti·Ka : guide pas à pas, données, architecture."> | ||
| 9 | +<style> | ||
| 10 | + :root{ --ink:#101014; --paper:#faf9f6; --accent:#d6336c; --muted:#6b6b70; --line:#e6e4de; } | ||
| 11 | + *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--paper);color:var(--ink); | ||
| 12 | + font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%} | ||
| 13 | + .container{max-width:960px;margin:0 auto;padding:0 20px} | ||
| 14 | + header.doc{background:var(--ink);color:var(--paper);padding:20px 0} | ||
| 15 | + header.doc .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} | ||
| 16 | + header.doc a{color:var(--paper);text-decoration:none} | ||
| 17 | + .wordmark{font-weight:800;font-size:20px;letter-spacing:.02em} | ||
| 18 | + .wordmark .ka{color:var(--accent)} | ||
| 19 | + .btn-pdf{display:inline-block;background:var(--accent);color:#fff;font-weight:700; | ||
| 20 | + padding:10px 18px;border-radius:999px;text-decoration:none;font-size:15px} | ||
| 21 | + .hero{padding:48px 0 8px} | ||
| 22 | + .hero h1{font-size:clamp(28px,5vw,44px);line-height:1.1;margin:0 0 12px} | ||
| 23 | + .hero h1 mark{background:var(--accent);color:#fff;padding:2px 8px} | ||
| 24 | + .hero p.lead{font-size:18px;color:var(--muted);max-width:640px} | ||
| 25 | + .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); | ||
| 26 | + border-left:3px solid var(--accent);padding-left:10px;margin:40px 0 8px;font-weight:700} | ||
| 27 | + section{padding:8px 0 16px} | ||
| 28 | + h2{font-size:26px;margin:6px 0 12px} | ||
| 29 | + .step{display:grid;grid-template-columns:56px 1fr;gap:16px;margin:26px 0;align-items:start} | ||
| 30 | + .step .num{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--accent); | ||
| 31 | + display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px} | ||
| 32 | + .step h3{margin:6px 0 6px;font-size:19px} | ||
| 33 | + .step p{margin:0 0 12px;color:#3a3a40} | ||
| 34 | + .shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(16,16,20,.08)} | ||
| 35 | + .shot img{display:block;width:100%;height:auto} | ||
| 36 | + .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:16px 0} | ||
| 37 | + .card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff} | ||
| 38 | + .card b{display:block;margin-bottom:6px} | ||
| 39 | + table{border-collapse:collapse;width:100%;font-size:15px} | ||
| 40 | + th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top} | ||
| 41 | + th{background:var(--ink);color:var(--paper)} | ||
| 42 | + footer.doc{margin-top:56px;background:var(--ink);color:var(--paper);padding:28px 0;font-size:14px} | ||
| 43 | + footer.doc a{color:var(--accent);text-decoration:none} | ||
| 44 | + @media print{ | ||
| 45 | + header.doc .btn-pdf{display:none} | ||
| 46 | + .shot{box-shadow:none;break-inside:avoid} | ||
| 47 | + .step{break-inside:avoid} | ||
| 48 | + a{color:inherit;text-decoration:none} | ||
| 49 | + } | ||
| 50 | + @media(max-width:640px){ .step{grid-template-columns:40px 1fr} .step .num{width:34px;height:34px;font-size:15px} } | ||
| 51 | +</style> | ||
| 52 | +</head> | ||
| 53 | +<body> | ||
| 54 | +<header class="doc"> | ||
| 55 | + <div class="container"> | ||
| 56 | + <a class="wordmark" href="/">Sorti<span class="ka">·Ka</span></a> | ||
| 57 | + <nav style="display:flex;gap:14px;align-items:center"> | ||
| 58 | + <a href="/">← Retour au site</a> | ||
| 59 | + <a class="btn-pdf" href="./sorti-ka-documentation.pdf" download>Télécharger le PDF</a> | ||
| 60 | + </nav> | ||
| 61 | + </div> | ||
| 62 | +</header> | ||
| 63 | + | ||
| 64 | +<div class="container"> | ||
| 65 | + <div class="hero"> | ||
| 66 | + <p class="kicker">Documentation · mise à jour 2026-08-24</p> | ||
| 67 | + <h1>Comment fonctionne <mark>Sorti·Ka</mark></h1> | ||
| 68 | + <p class="lead">Toutes les sorties et tous les événements du Québec — concerts, festivals, spectacles, expos, sport, famille — au même endroit.</p> | ||
| 69 | + </div> | ||
| 70 | + | ||
| 71 | + <section> | ||
| 72 | + <p class="kicker">Vue d'ensemble</p> | ||
| 73 | + <h2>À quoi sert le site</h2> | ||
| 74 | + <p>Trouver quoi faire au Québec, c'est normalement ouvrir dix sites : les billetteries ne montrent que leurs | ||
| 75 | + propres spectacles, les calendriers municipaux que leur ville, les sites touristiques que leurs membres. | ||
| 76 | + Sorti·Ka retourne le problème : un agrégateur indépendant qui couvre les 17 régions administratives, avec | ||
| 77 | + dates, lieux, gratuité, fiche par événement et <b>lien direct vers la billetterie ou la source originale</b>. | ||
| 78 | + Sorti·Ka n'est pas une billetterie : c'est un index fidèle — aucun prix inventé, aucune date devinée, chaque | ||
| 79 | + fiche est attribuée à sa source. Mise à jour horaire, automatiquement.</p> | ||
| 80 | + <div class="cards"> | ||
| 81 | + <div class="card"><b>18 000+ événements actifs</b>Dans environ 330 villes des 17 régions administratives — | ||
| 82 | + dont plus de 3 600 événements gratuits à venir.</div> | ||
| 83 | + <div class="card"><b>~30 connecteurs actifs</b>Billetteries, données ouvertes officielles, diffuseurs et | ||
| 84 | + salles, portails régionaux — 44 sources au registre.</div> | ||
| 85 | + <div class="card"><b>Mise à jour horaire</b>Un watcher resynchronise toutes les sources chaque heure, | ||
| 86 | + détecte les changements et retire les événements disparus.</div> | ||
| 87 | + <div class="card"><b>14 catégories canoniques</b>Concerts, festivals, arts de la scène, expos, cinéma, | ||
| 88 | + sport, plein air, famille, gastronomie… avec filtre gratuité.</div> | ||
| 89 | + </div> | ||
| 90 | + </section> | ||
| 91 | + | ||
| 92 | + <section> | ||
| 93 | + <p class="kicker">Guide pas à pas</p> | ||
| 94 | + <h2>Utiliser le site en 4 étapes</h2> | ||
| 95 | + | ||
| 96 | + <div class="step"> | ||
| 97 | + <div class="num">1</div> | ||
| 98 | + <div> | ||
| 99 | + <h3>Arriver sur l'accueil</h3> | ||
| 100 | + <p>L'accueil affiche le décompte en direct (événements à venir, gratuits, régions, villes) et le bloc de | ||
| 101 | + recherche : texte libre, région, période, puis les 14 catégories et le filtre « ✦ Gratuit ». Les cartes | ||
| 102 | + d'événements défilent dessous, les plus proches dans le temps d'abord.</p> | ||
| 103 | + <div class="shot"><img src="./img/etape1.png" alt="Étape 1 — accueil de Sorti·Ka"></div> | ||
| 104 | + </div> | ||
| 105 | + </div> | ||
| 106 | + | ||
| 107 | + <div class="step"> | ||
| 108 | + <div class="num">2</div> | ||
| 109 | + <div> | ||
| 110 | + <h3>Filtrer la liste</h3> | ||
| 111 | + <p>Tapez un mot-clé (ici « festival »), choisissez une région ou une période, ou activez un filtre de | ||
| 112 | + catégorie ou de gratuité : le compteur et la liste se mettent à jour instantanément. Les filtres se | ||
| 113 | + combinent — par exemple « Musique » + « Gratuit » + votre région.</p> | ||
| 114 | + <div class="shot"><img src="./img/etape2.png" alt="Étape 2 — recherche filtrée d'événements"></div> | ||
| 115 | + </div> | ||
| 116 | + </div> | ||
| 117 | + | ||
| 118 | + <div class="step"> | ||
| 119 | + <div class="num">3</div> | ||
| 120 | + <div> | ||
| 121 | + <h3>Ouvrir la fiche d'un événement</h3> | ||
| 122 | + <p>La fiche donne les dates, la ville et la région, l'organisateur, le lieu sur la carte, la source avec sa | ||
| 123 | + date de captation, et des événements similaires. Le bouton « Billets · fiche originale » mène directement | ||
| 124 | + à la billetterie ou au site officiel — Sorti·Ka ne vend rien.</p> | ||
| 125 | + <div class="shot"><img src="./img/etape3.png" alt="Étape 3 — fiche d'événement avec lien billetterie"></div> | ||
| 126 | + </div> | ||
| 127 | + </div> | ||
| 128 | + | ||
| 129 | + <div class="step"> | ||
| 130 | + <div class="num">4</div> | ||
| 131 | + <div> | ||
| 132 | + <h3>Consulter les statistiques</h3> | ||
| 133 | + <p>La page « Stats » expose le tableau de bord en temps réel : volumes, gratuité, villes couvertes, sources | ||
| 134 | + branchées, prix moyen des billets, événements ajoutés par jour — avec rapports PDF complets ou | ||
| 135 | + personnalisés à télécharger.</p> | ||
| 136 | + <div class="shot"><img src="./img/etape4.png" alt="Étape 4 — tableau de bord statistiques"></div> | ||
| 137 | + </div> | ||
| 138 | + </div> | ||
| 139 | + </section> | ||
| 140 | + | ||
| 141 | + <section> | ||
| 142 | + <p class="kicker">Sous le capot</p> | ||
| 143 | + <h2>D'où viennent les données</h2> | ||
| 144 | + <p>Chaque source a son <b>connecteur dédié</b> (~30 actifs, 44 au registre) : billetteries (Le point de vente, | ||
| 145 | + evenko, Ticketpro, Ticket Accès, Tuxedo Billet, Ovation, Eventbrite), données ouvertes officielles | ||
| 146 | + (SIT Québec/Tourinsoft, Ville de Montréal, Laval, Sherbrooke, Brossard, Longueuil), diffuseurs et salles | ||
| 147 | + (La Vitrine, Place des Arts…), portails régionaux (Montérégie, Outaouais, Lanaudière, Cantons-de-l'Est, | ||
| 148 | + Chaudière-Appalaches, Bas-Saint-Laurent, Gaspésie, Centre-du-Québec, Saguenay…), Atuvu.ca, Bandsintown, | ||
| 149 | + LHJMQ, Québec animée. Un watcher <b>resynchronise chaque heure</b> : chaque événement est normalisé vers un | ||
| 150 | + schéma unique, rattaché à sa ville et sa région via le répertoire des municipalités MAMH (1 250 villes et | ||
| 151 | + alias), puis <b>dédupliqué entre les sources</b> (empreinte titre + ville + date : un même concert publié par | ||
| 152 | + 3 sources = une seule carte, la fiche la plus riche gagne). Un événement disparu de sa source bénéficie d'un | ||
| 153 | + délai de grâce de 2 synchronisations avant retrait, et une alerte de dérive se déclenche quand une source | ||
| 154 | + casse — rien n'est inventé, tout est attribué.</p> | ||
| 155 | + </section> | ||
| 156 | + | ||
| 157 | + <section> | ||
| 158 | + <p class="kicker">Questions fréquentes</p> | ||
| 159 | + <h2>FAQ</h2> | ||
| 160 | + <div class="cards"> | ||
| 161 | + <div class="card"><b>Peut-on acheter des billets sur Sorti·Ka ?</b> | ||
| 162 | + Non. Sorti·Ka est un index, pas une billetterie : chaque fiche renvoie par lien direct vers la billetterie | ||
| 163 | + ou la source originale, où se fait l'achat.</div> | ||
| 164 | + <div class="card"><b>À quelle fréquence les événements sont-ils mis à jour ?</b> | ||
| 165 | + Toutes les heures, automatiquement. Les changements (dates, prix, annulations) sont détectés en continu et | ||
| 166 | + un événement retiré de sa source disparaît après un court délai de grâce.</div> | ||
| 167 | + <div class="card"><b>Pourquoi certains événements n'ont-ils pas de prix ?</b> | ||
| 168 | + Parce que la source ne l'affiche pas — Sorti·Ka n'invente aucun prix. Quand il existe, le libellé de prix | ||
| 169 | + original est conservé, et plus de 3 600 événements gratuits sont identifiés comme tels.</div> | ||
| 170 | + <div class="card"><b>Un même spectacle apparaît-il en double ?</b> | ||
| 171 | + Normalement non : la déduplication inter-sources fusionne les doublons (même titre, même ville, même date) | ||
| 172 | + en une seule carte, en gardant la fiche la plus complète.</div> | ||
| 173 | + <div class="card"><b>Couvrez-vous ma région ?</b> | ||
| 174 | + Oui — les 17 régions administratives du Québec sont couvertes, environ 330 villes, grâce aux portails | ||
| 175 | + régionaux et aux données ouvertes municipales en plus des billetteries.</div> | ||
| 176 | + </div> | ||
| 177 | + </section> | ||
| 178 | +</div> | ||
| 179 | + | ||
| 180 | +<footer class="doc"> | ||
| 181 | + <div class="container"> | ||
| 182 | + <p><b>Sorti·Ka</b> — un service <a href="https://www.groupe-ka.com">Groupe KA</a>. | ||
| 183 | + Écosystème : les 13 plateformes sont liées au pied de chaque site.</p> | ||
| 184 | + <p>© 2026 Groupe KA — Simon-Pierre Boucher · <a href="mailto:contact@spboucher.ai">contact@spboucher.ai</a></p> | ||
| 185 | + </div> | ||
| 186 | +</footer> | ||
| 187 | +</body> | ||
| 188 | +</html> | ||
added
frontend/doc/sorti-ka-documentation.pdf
+0 −0
Binary file not shown.
modified
frontend/index.html
+1 −0
@@ -675,6 +675,7 @@ button{font-family:inherit} | |||
| 675 | lieux : © contributeurs OpenStreetMap (ODbL).</p> | 675 | lieux : © contributeurs OpenStreetMap (ODbL).</p> |
| 676 | <p class="legal">© 2026 Groupe KA — Simon-Pierre Boucher | 676 | <p class="legal">© 2026 Groupe KA — Simon-Pierre Boucher |
| 677 | · <a data-nav href="/contact">Contact</a> | 677 | · <a data-nav href="/contact">Contact</a> |
| 678 | + · <a href="/doc/">Documentation</a> | ||
| 678 | · <a href="https://www.groupe-ka.com/conditions" target="_blank" rel="noopener noreferrer">Conditions d'utilisation</a> | 679 | · <a href="https://www.groupe-ka.com/conditions" target="_blank" rel="noopener noreferrer">Conditions d'utilisation</a> |
| 679 | · <a href="https://www.groupe-ka.com/confidentialite" target="_blank" rel="noopener noreferrer">Politique de confidentialité</a> | 680 | · <a href="https://www.groupe-ka.com/confidentialite" target="_blank" rel="noopener noreferrer">Politique de confidentialité</a> |
| 680 | · <a href="https://www.groupe-ka.com/loi-25" target="_blank" rel="noopener noreferrer">Protection des renseignements personnels (Loi 25)</a> | 681 | · <a href="https://www.groupe-ka.com/loi-25" target="_blank" rel="noopener noreferrer">Protection des renseignements personnels (Loi 25)</a> |
| 681 | 682 | ||