UNOV/DOCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
DOCS/claude design/MyInfoMate - Parcours/MyInfoMate - Parcours.dc.html
Thomas Fransolet a5a8ecdb20 Documentation interne MyInfoMate / Unov 
Import initial de la documentation : statut, roadmap, plans V1/V2,
specs verticales (creche, sport), audits securite, plan de test,
analyse concurrentielle et maquettes de design.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-11 11:17:01 +02:00

193 lines
17 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap" rel="stylesheet">
<style>
* { box-sizing:border-box; }
body { margin:0; }
</style>
</helmet>
<div style="background:#E9E6E0;min-height:100vh;font-family:'Hanken Grotesk',-apple-system,sans-serif;color:#1E2A33;padding:0 0 80px">
<!-- ===== HEADER ===== -->
<div style="max-width:1120px;margin:0 auto;padding:54px 40px 8px">
<div style="color:#9C8F7E;font-size:13px;font-weight:700;letter-spacing:3px">MYINFOMATE · MODULE SECTIONPARCOURS</div>
<div style="font-family:'Newsreader',serif;font-size:52px;font-weight:500;letter-spacing:-1px;margin-top:12px;line-height:1.02">Parcours guidés &amp; Escape game</div>
<div style="max-width:680px;color:#5A6670;font-size:17px;line-height:1.6;margin-top:16px">Une direction repensée pour SectionParcours : plus éditoriale, plus immersive, tout en gardant la mécanique de votre app (couleur primaire dynamique, contraste WCAG auto, états d'étapes, bottom sheets). Le <b>mode Game</b> bascule dans une ambiance sombre et dorée, nettement distincte du mode normal.</div>
<!-- system legend -->
<div style="display:flex;flex-wrap:wrap;gap:14px;margin-top:30px">
<div style="background:#fff;border:1px solid #DBD5CC;border-radius:18px;padding:16px 20px;min-width:210px">
<div style="font-size:11px;font-weight:700;letter-spacing:1px;color:#9C8F7E">TYPOGRAPHIE</div>
<div style="font-family:'Newsreader',serif;font-size:25px;margin-top:8px">Newsreader</div>
<div style="font-size:14px;color:#7A848C;margin-top:1px">Titres &amp; récit · serif éditorial</div>
<div style="font-size:18px;font-weight:700;margin-top:9px">Hanken Grotesk</div>
<div style="font-size:14px;color:#7A848C;margin-top:1px">Interface · sans-serif</div>
</div>
<div style="background:#fff;border:1px solid #DBD5CC;border-radius:18px;padding:16px 20px">
<div style="font-size:11px;font-weight:700;letter-spacing:1px;color:#9C8F7E">COULEUR PRIMAIRE · DYNAMIQUE</div>
<div style="display:flex;gap:10px;margin-top:12px">
<div style="text-align:center"><div style="width:46px;height:46px;border-radius:13px;background:#264863"></div><div style="font-size:11px;color:#7A848C;margin-top:5px">Ardoise</div></div>
<div style="text-align:center"><div style="width:46px;height:46px;border-radius:13px;background:#3B6B4A"></div><div style="font-size:11px;color:#7A848C;margin-top:5px">Garrigue</div></div>
<div style="text-align:center"><div style="width:46px;height:46px;border-radius:13px;background:#B5562E"></div><div style="font-size:11px;color:#7A848C;margin-top:5px">Terracotta</div></div>
<div style="width:1px;background:#E7E1D8;margin:0 4px"></div>
<div style="text-align:center"><div style="width:46px;height:46px;border-radius:13px;background:#0B1018;border:1px solid #D4AF37"></div><div style="font-size:11px;color:#7A848C;margin-top:5px">Game</div></div>
</div>
</div>
<div style="background:#fff;border:1px solid #DBD5CC;border-radius:18px;padding:16px 20px">
<div style="font-size:11px;font-weight:700;letter-spacing:1px;color:#9C8F7E">ÉTATS D'ÉTAPE</div>
<div style="display:flex;gap:18px;margin-top:14px">
<div style="display:flex;align-items:center;gap:8px"><div style="width:30px;height:30px;border-radius:50%;background:#2E9E6B;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3"><path d="M5 13l4 4L19 7"/></svg></div><span style="font-size:13px;color:#5A6670;font-weight:600">Complétée</span></div>
<div style="display:flex;align-items:center;gap:8px"><div style="width:30px;height:30px;border-radius:50%;background:#264863;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:13px">3</div><span style="font-size:13px;color:#5A6670;font-weight:600">Courante</span></div>
<div style="display:flex;align-items:center;gap:8px"><div style="width:30px;height:30px;border-radius:50%;background:#D8D2C8;border:2.5px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:#9AA0A4"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></div><span style="font-size:13px;color:#5A6670;font-weight:600">Verrouillée</span></div>
</div>
</div>
</div>
</div>
<!-- ===== SECTION: INTERACTIVE PROTOTYPE ===== -->
<div style="max-width:1120px;margin:0 auto;padding:48px 40px 0">
<div style="display:flex;align-items:baseline;gap:14px;border-bottom:1px solid #D6CFC4;padding-bottom:14px">
<div style="font-family:'Newsreader',serif;font-size:30px;font-weight:500">Prototype interactif</div>
<div style="color:#7A848C;font-size:15px">Cliquez pour parcourir le flux complet · changez la couleur et basculez en mode Game</div>
</div>
</div>
<div style="display:flex;justify-content:center;padding:40px 20px 10px">
<dc-import name="ParcoursApp" controls="true" start-screen="home" primary-color="#264863" hint-size="430px,1000px"></dc-import>
</div>
<!-- ===== SECTION: ALL SCREENS (normal flow) ===== -->
<div style="max-width:1120px;margin:0 auto;padding:56px 40px 0">
<div style="display:flex;align-items:baseline;gap:14px;border-bottom:1px solid #D6CFC4;padding-bottom:14px">
<div style="font-family:'Newsreader',serif;font-size:30px;font-weight:500">Le parcours, écran par écran</div>
<div style="color:#7A848C;font-size:15px">Mode normal</div>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:46px 36px;justify-content:center;padding:42px 30px 0">
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 9px">1</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Carte de section · Home</span></div>
<dc-import name="ParcoursApp" start-screen="home" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 9px">2</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Liste des parcours · Bottom sheet</span></div>
<dc-import name="ParcoursApp" start-screen="pathList" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 9px">3a</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Démarrage · mode normal</span></div>
<dc-import name="ParcoursApp" start-screen="start" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 9px">4b</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Progression sans carte</span></div>
<dc-import name="ParcoursApp" start-screen="seq" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#fff;background:#2E9E6B;border-radius:7px;padding:4px 9px">NEW</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Détail d'étape · contenu riche</span></div>
<dc-import name="ParcoursApp" start-screen="detail" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#fff;background:#1E2A33;border-radius:7px;padding:4px 9px">6a</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Fin · mode normal</span></div>
<dc-import name="ParcoursApp" start-screen="endNormal" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
</div>
<!-- ===== SECTION: DYNAMIC COLOR ===== -->
<div style="max-width:1120px;margin:0 auto;padding:64px 40px 0">
<div style="display:flex;align-items:baseline;gap:14px;border-bottom:1px solid #D6CFC4;padding-bottom:14px">
<div style="font-family:'Newsreader',serif;font-size:30px;font-weight:500">Couleur primaire dynamique</div>
<div style="color:#7A848C;font-size:15px">Même écran 4a · la couleur de chaque instance pilote accents, pins &amp; boutons (texte auto-contrasté)</div>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:40px 36px;justify-content:center;padding:42px 30px 0">
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;border-radius:5px;background:#264863"></span><span style="font-weight:700;font-size:14.5px;color:#46555F">Ardoise · #264863</span></div>
<dc-import name="ParcoursApp" start-screen="map" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;border-radius:5px;background:#3B6B4A"></span><span style="font-weight:700;font-size:14.5px;color:#46555F">Garrigue · #3B6B4A</span></div>
<dc-import name="ParcoursApp" start-screen="map" primary-color="#3B6B4A" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;border-radius:5px;background:#B5562E"></span><span style="font-weight:700;font-size:14.5px;color:#46555F">Terracotta · #B5562E</span></div>
<dc-import name="ParcoursApp" start-screen="map" primary-color="#B5562E" hint-size="430px,880px"></dc-import>
</div>
</div>
<!-- ===== SECTION: GAME MODE ===== -->
<div style="max-width:1120px;margin:64px auto 0;padding:0 40px">
<div style="background:#0B1018;border-radius:26px;padding:34px 40px;position:relative;overflow:hidden">
<div style="position:absolute;inset:0;background:radial-gradient(50% 80% at 80% 0%,rgba(212,175,55,.14),transparent 60%)"></div>
<div style="color:#D4AF37;font-size:12px;font-weight:700;letter-spacing:3px;position:relative">MODE GAME · AMBIANCE IMMERSIVE</div>
<div style="font-family:'Newsreader',serif;font-size:32px;color:#F4ECD8;margin-top:10px;position:relative">Quand le parcours devient une énigme</div>
<div style="max-width:640px;color:#9a937f;font-size:16px;line-height:1.6;margin-top:10px;position:relative">Fond sombre, sceau doré, voix narrative en italique : le mode Game rompt volontairement avec le mode normal, tout en réutilisant les mêmes briques (bottom sheet, défis, états). La transition reste cohérente.</div>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:40px 36px;justify-content:center;padding:42px 30px 0">
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#1a1305;background:#D4AF37;border-radius:7px;padding:4px 9px">3b</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Démarrage immersif</span></div>
<dc-import name="ParcoursApp" start-screen="gameStart" mode="game" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#1a1305;background:#D4AF37;border-radius:7px;padding:4px 9px">5</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Énigme · digicode</span></div>
<dc-import name="ParcoursApp" start-screen="challenge" mode="game" challenge-type="pin" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="display:flex;align-items:center;gap:8px"><span style="font-size:12px;font-weight:800;color:#1a1305;background:#D4AF37;border-radius:7px;padding:4px 9px">6b</span><span style="font-weight:700;font-size:14.5px;color:#46555F">Victoire</span></div>
<dc-import name="ParcoursApp" start-screen="endGame" mode="game" hint-size="430px,880px"></dc-import>
</div>
</div>
<!-- ===== SECTION: CHALLENGE VARIANTS ===== -->
<div style="max-width:1120px;margin:0 auto;padding:64px 40px 0">
<div style="display:flex;align-items:baseline;gap:14px;border-bottom:1px solid #D6CFC4;padding-bottom:14px">
<div style="font-family:'Newsreader',serif;font-size:30px;font-weight:500">Les quatre types de défi</div>
<div style="color:#7A848C;font-size:15px">Overlay sur l'étape · feedback succès (vert) / échec (rouge)</div>
</div>
</div>
<div style="display:flex;flex-wrap:wrap;gap:40px 36px;justify-content:center;padding:42px 30px 0">
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="font-weight:700;font-size:14.5px;color:#46555F">QCM · choix multiple</div>
<dc-import name="ParcoursApp" start-screen="challenge" challenge-type="qcm" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="font-weight:700;font-size:14.5px;color:#46555F">Texte libre · clavier</div>
<dc-import name="ParcoursApp" start-screen="challenge" challenge-type="text" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="font-weight:700;font-size:14.5px;color:#46555F">Digicode · pavé numérique</div>
<dc-import name="ParcoursApp" start-screen="challenge" challenge-type="pin" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="font-weight:700;font-size:14.5px;color:#46555F">Puzzle image · grille</div>
<dc-import name="ParcoursApp" start-screen="challenge" challenge-type="puzzle" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="font-weight:700;font-size:14.5px;color:#46555F">Feedback · succès</div>
<dc-import name="ParcoursApp" start-screen="challenge" challenge-type="qcm" challenge-state="success" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
<div style="display:flex;flex-direction:column;align-items:center;gap:15px">
<div style="font-weight:700;font-size:14.5px;color:#46555F">Feedback · échec</div>
<dc-import name="ParcoursApp" start-screen="challenge" challenge-type="qcm" challenge-state="fail" primary-color="#264863" hint-size="430px,880px"></dc-import>
</div>
</div>
<div style="max-width:1120px;margin:64px auto 0;padding:0 40px">
<div style="border-top:1px solid #D6CFC4;padding-top:22px;color:#9C8F7E;font-size:14px;line-height:1.6">
<b style="color:#5A6670">Prochaines étapes possibles :</b> brancher de vraies photos de couverture &amp; vignettes d'étapes · intégrer la vraie carte (les pins/route suivent déjà la couleur primaire) · ajouter les micro-transitions entre étapes · décliner le digicode / puzzle avec vos contenus réels.
</div>
</div>
</div>
</x-dc>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink