feat: add interactive introduction slide and update layout styles
This commit is contained in:
sebvtl728
parent
ed42a24afe
commit
8133bddf7b
224
index.html
224
index.html
@ -216,7 +216,7 @@ h3.sub{font-family:var(--serif);font-size:20px;font-weight:700;margin:26px 0 12p
|
||||
.toast small{display:block;font-weight:400;font-size:12px;color:#BBBBD4}
|
||||
|
||||
/* ============ SLIDE 0 : COVER ============ */
|
||||
.cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:62vh}
|
||||
.cover{display:grid;grid-template-columns:1.25fr .9fr;gap:40px;align-items:center;min-height:90vh}
|
||||
@media(max-width:860px){.cover{grid-template-columns:1fr}}
|
||||
.cover-stats{display:flex;gap:22px;margin:26px 0;flex-wrap:wrap}
|
||||
.cstat{border-left:3px solid var(--amber);padding-left:14px}
|
||||
@ -495,6 +495,110 @@ body.formateur .formateur-flag{display:block}
|
||||
/* confetti */
|
||||
.cf{position:fixed;top:-12px;z-index:999;width:9px;height:14px;pointer-events:none;animation:fall linear forwards}
|
||||
@keyframes fall{to{transform:translateY(105vh) rotate(660deg);opacity:.7}}
|
||||
|
||||
/* ============ SLIDE INTRO ============ */
|
||||
.intro-wrap{
|
||||
display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
|
||||
min-height:80vh;
|
||||
}
|
||||
@media(max-width:860px){.intro-wrap{grid-template-columns:1fr}}
|
||||
|
||||
.intro-left{max-width:580px}
|
||||
.intro-step{animation:slideIn .5s cubic-bezier(.22,1,.36,1)}
|
||||
.intro-eyebrow{
|
||||
display:block;font-size:12px;font-weight:700;letter-spacing:2px;
|
||||
text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
|
||||
}
|
||||
.intro-big{
|
||||
font-family:var(--serif);font-size:clamp(22px,3.2vw,32px);font-weight:700;
|
||||
line-height:1.25;color:var(--ink);margin-bottom:26px;
|
||||
}
|
||||
.intro-big em{font-style:italic;color:var(--amber)}
|
||||
|
||||
.intro-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
|
||||
.ichip{
|
||||
border:1.5px solid var(--line-2);background:var(--card);border-radius:10px;
|
||||
padding:12px 18px;font-size:14.5px;font-weight:700;cursor:pointer;
|
||||
font-family:var(--sans);color:var(--ink-2);
|
||||
transition:all .2s cubic-bezier(.34,1.56,.64,1);
|
||||
}
|
||||
.ichip:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--sh-sm)}
|
||||
.ichip.picked{
|
||||
background:var(--amber-bg);border-color:var(--amber);color:var(--amber-dark);
|
||||
transform:scale(1.04);
|
||||
}
|
||||
|
||||
.intro-promise{display:grid;gap:12px;margin-bottom:28px}
|
||||
.ip-row{
|
||||
display:flex;gap:12px;align-items:flex-start;
|
||||
background:var(--card);border:1px solid var(--line);border-radius:10px;
|
||||
padding:12px 16px;font-size:14.5px;color:var(--ink-2);
|
||||
animation:slideIn .45s cubic-bezier(.22,1,.36,1) both;
|
||||
}
|
||||
.ip-row:nth-child(1){animation-delay:.08s}
|
||||
.ip-row:nth-child(2){animation-delay:.18s}
|
||||
.ip-row:nth-child(3){animation-delay:.28s}
|
||||
.ip-ico{font-size:16px;flex-shrink:0;margin-top:1px}
|
||||
.intro-btns{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
|
||||
.intro-skip{font-size:13px;opacity:.65}
|
||||
.intro-skip:hover{opacity:1}
|
||||
|
||||
/* Illustration droite */
|
||||
.intro-right{display:flex;flex-direction:column;align-items:center;gap:12px}
|
||||
@media(max-width:860px){.intro-right{display:none}}
|
||||
.intro-scene{
|
||||
display:flex;align-items:center;gap:14px;width:100%;
|
||||
}
|
||||
.is-card{
|
||||
flex:1;background:var(--card);border:1px solid var(--line);
|
||||
border-radius:14px;padding:18px 16px;box-shadow:var(--sh-sm);
|
||||
}
|
||||
.is-card-2{
|
||||
border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-bg),var(--sh-md);
|
||||
}
|
||||
.is-label{
|
||||
display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
|
||||
text-transform:uppercase;color:var(--ink-3);margin-bottom:12px;
|
||||
}
|
||||
.is-card-2 .is-label{color:var(--amber-dark)}
|
||||
.is-line{
|
||||
height:8px;background:var(--paper-3);border-radius:4px;margin-bottom:8px;
|
||||
}
|
||||
.is-line.long{width:90%}
|
||||
.is-line.med{width:70%}
|
||||
.is-line.short{width:50%}
|
||||
.is-timer{
|
||||
font-family:var(--mono);font-size:13px;font-weight:600;
|
||||
color:var(--ink-3);margin-top:14px;
|
||||
background:var(--paper-2);border-radius:7px;padding:4px 10px;display:inline-block;
|
||||
}
|
||||
.is-timer.green{
|
||||
color:var(--green);background:var(--green-bg);
|
||||
border:1px solid var(--green-line);
|
||||
}
|
||||
.is-arrow{
|
||||
font-size:22px;color:var(--amber);font-weight:700;flex-shrink:0;
|
||||
animation:arrowPulse 1.8s ease-in-out infinite;
|
||||
}
|
||||
@keyframes arrowPulse{0%,100%{transform:translateX(0);opacity:1}50%{transform:translateX(5px);opacity:.6}}
|
||||
.is-ai-line{
|
||||
display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
|
||||
color:var(--ink-2);margin-bottom:7px;
|
||||
opacity:0;transform:translateX(-6px);
|
||||
animation:lineIn .4s cubic-bezier(.22,1,.36,1) both;
|
||||
}
|
||||
.is-ai-line:nth-child(2){animation-delay:.3s}
|
||||
.is-ai-line:nth-child(3){animation-delay:.55s}
|
||||
.is-ai-line:nth-child(4){animation-delay:.8s}
|
||||
.is-ai-line:nth-child(5){animation-delay:1.05s}
|
||||
@keyframes lineIn{to{opacity:1;transform:none}}
|
||||
.is-ai-dot{
|
||||
width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;
|
||||
}
|
||||
.intro-caption{
|
||||
font-size:12.5px;color:var(--ink-3);text-align:center;font-style:italic;
|
||||
max-width:340px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -529,8 +633,70 @@ body.formateur .formateur-flag{display:block}
|
||||
|
||||
<main class="stage">
|
||||
|
||||
<!-- ════════ SLIDE 0 : INTRODUCTION ════════ -->
|
||||
<section class="slide active" data-title="Introduction" id="slideIntro">
|
||||
<div class="intro-wrap">
|
||||
<div class="intro-left">
|
||||
<div class="intro-step" data-step="0">
|
||||
<span class="intro-eyebrow">Avant de commencer…</span>
|
||||
<p class="intro-big">Combien de temps avez-vous passé à rédiger des comptes-rendus<br>la semaine dernière ?</p>
|
||||
<div class="intro-chips" id="introCrChips">
|
||||
<button class="ichip" data-v="Moins de 30 min">Moins de 30 min</button>
|
||||
<button class="ichip" data-v="Entre 30 min et 1 h">Entre 30 min et 1 h</button>
|
||||
<button class="ichip" data-v="Entre 1 h et 2 h">Entre 1 h et 2 h</button>
|
||||
<button class="ichip" data-v="Plus de 2 h">Plus de 2 h 😅</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-step" data-step="1" style="display:none">
|
||||
<span class="intro-eyebrow">Et si c'était <em>optionnel</em> ?</span>
|
||||
<p class="intro-big">Cette heure, vous apprenez à confier ce travail à une IA —<br>pendant que vous vous concentrez sur ce qui compte vraiment.</p>
|
||||
<div class="intro-promise">
|
||||
<div class="ip-row"><span class="ip-ico">✅</span><span>Aucun prérequis technique — si vous savez écrire un e-mail, vous saurez prompter.</span></div>
|
||||
<div class="ip-row"><span class="ip-ico">✅</span><span>Pas de jargon — chaque concept atterrit dans un cas concret de votre quotidien.</span></div>
|
||||
<div class="ip-row"><span class="ip-ico">✅</span><span>Repartez avec <b>un outil prêt à l'emploi</b>, pas avec des slides à relire un jour.</span></div>
|
||||
</div>
|
||||
<div class="intro-btns">
|
||||
<button class="btn btn-primary" id="introNext">Je suis prêt·e — allons-y →</button>
|
||||
<button class="btn btn-ghost intro-skip" onclick="go(1)">Passer l'intro</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="intro-right">
|
||||
<div class="intro-scene">
|
||||
<div class="is-card is-card-1">
|
||||
<span class="is-label">Avant l'IA</span>
|
||||
<div class="is-line long"></div>
|
||||
<div class="is-line med"></div>
|
||||
<div class="is-line short"></div>
|
||||
<div class="is-line med"></div>
|
||||
<div class="is-timer">⏱ 35 min</div>
|
||||
</div>
|
||||
<div class="is-arrow">→</div>
|
||||
<div class="is-card is-card-2">
|
||||
<span class="is-label">Avec l'IA</span>
|
||||
<div class="is-ai-line"><span class="is-ai-dot"></span>Résumé exécutif</div>
|
||||
<div class="is-ai-line"><span class="is-ai-dot"></span>Décisions</div>
|
||||
<div class="is-ai-line"><span class="is-ai-dot"></span>Plan d'action</div>
|
||||
<div class="is-ai-line"><span class="is-ai-dot"></span>Risques</div>
|
||||
<div class="is-timer green">⚡ 30 sec</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="intro-caption">Même réunion. Mêmes notes. Résultat structuré en 30 secondes.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fnotes">
|
||||
<h5>🎓 Notes formateur — Introduction <span class="chrono">−3:00 → 0:00</span></h5>
|
||||
<ul>
|
||||
<li>S'affiche <b>avant</b> le démarrage du chrono — idéale pendant l'installation du groupe.</li>
|
||||
<li>La question CR crée un ancrage émotionnel immédiat. Laissez 20 secondes de silence après le clic.</li>
|
||||
<li>Si "Moins de 30 min" : « Parfait, on va faire encore mieux. » Si "Plus de 2 h" : « C'est exactement pour ça qu'on est là. »</li>
|
||||
<li>Les trois promesses désarment les sceptiques avant même le démarrage.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ════════ SLIDE 0 : COUVERTURE ════════ -->
|
||||
<section class="slide active" data-title="Accueil">
|
||||
<section class="slide" data-title="Accueil">
|
||||
<div class="cover">
|
||||
<div>
|
||||
<span class="kicker">Cours interactif <span class="min">⏱ 60 min</span></span>
|
||||
@ -541,19 +707,19 @@ body.formateur .formateur-flag{display:block}
|
||||
<div class="cstat"><b>4</b><span>ateliers pratiques</span></div>
|
||||
<div class="cstat"><b>1</b><span>méthode : RCTF</span></div>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="go(1)">Commencer le parcours →</button>
|
||||
<button class="btn btn-primary" onclick="go(2)">Commencer le parcours →</button>
|
||||
<p style="font-size:12.5px;color:var(--ink-3);margin-top:12px">💡 Naviguez avec les flèches ← → du clavier. Gagnez des XP en participant aux activités.</p>
|
||||
</div>
|
||||
<div class="agenda">
|
||||
<div class="agenda-head">Programme de la séance <span>60 min</span></div>
|
||||
<div class="agenda-row" onclick="go(1)"><span class="num">01</span><span class="t">Quiz d'échauffement</span><span class="act-tag">Quiz</span><span class="dur">5'</span></div>
|
||||
<div class="agenda-row" onclick="go(2)"><span class="num">02</span><span class="t">Choisir le bon outil IA</span><span class="act-tag">Inter.</span><span class="dur">8'</span></div>
|
||||
<div class="agenda-row" onclick="go(3)"><span class="num">03</span><span class="t">La méthode RCTF</span><span class="act-tag">Atelier</span><span class="dur">12'</span></div>
|
||||
<div class="agenda-row" onclick="go(4)"><span class="num">04</span><span class="t">Kanban analysé par l'IA</span><span class="act-tag">Démo</span><span class="dur">8'</span></div>
|
||||
<div class="agenda-row" onclick="go(5)"><span class="num">05</span><span class="t">Le CR en 30 secondes</span><span class="act-tag">Démo</span><span class="dur">10'</span></div>
|
||||
<div class="agenda-row" onclick="go(6)"><span class="num">06</span><span class="t">Automatiser la chaîne</span><span class="act-tag">Inter.</span><span class="dur">8'</span></div>
|
||||
<div class="agenda-row" onclick="go(7)"><span class="num">07</span><span class="t">Quiz final certifiant</span><span class="act-tag">Quiz</span><span class="dur">6'</span></div>
|
||||
<div class="agenda-row" onclick="go(8)"><span class="num">08</span><span class="t">Bilan & plan d'action</span><span class="dur">3'</span></div>
|
||||
<div class="agenda-row" onclick="go(2)"><span class="num">01</span><span class="t">Quiz d'échauffement</span><span class="act-tag">Quiz</span><span class="dur">5'</span></div>
|
||||
<div class="agenda-row" onclick="go(3)"><span class="num">02</span><span class="t">Choisir le bon outil IA</span><span class="act-tag">Inter.</span><span class="dur">8'</span></div>
|
||||
<div class="agenda-row" onclick="go(4)"><span class="num">03</span><span class="t">La méthode RCTF</span><span class="act-tag">Atelier</span><span class="dur">12'</span></div>
|
||||
<div class="agenda-row" onclick="go(5)"><span class="num">04</span><span class="t">Kanban analysé par l'IA</span><span class="act-tag">Démo</span><span class="dur">8'</span></div>
|
||||
<div class="agenda-row" onclick="go(6)"><span class="num">05</span><span class="t">Le CR en 30 secondes</span><span class="act-tag">Démo</span><span class="dur">10'</span></div>
|
||||
<div class="agenda-row" onclick="go(7)"><span class="num">06</span><span class="t">Automatiser la chaîne</span><span class="act-tag">Inter.</span><span class="dur">8'</span></div>
|
||||
<div class="agenda-row" onclick="go(8)"><span class="num">07</span><span class="t">Quiz final certifiant</span><span class="act-tag">Quiz</span><span class="dur">6'</span></div>
|
||||
<div class="agenda-row" onclick="go(9)"><span class="num">08</span><span class="t">Bilan & plan d'action</span><span class="dur">3'</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fnotes">
|
||||
@ -582,7 +748,7 @@ body.formateur .formateur-flag{display:block}
|
||||
<div class="qz-score-wrap" id="warmDone">
|
||||
<div class="qz-big" id="warmScore">0/4</div>
|
||||
<p style="color:var(--ink-2);margin:6px 0 18px" id="warmMsg"></p>
|
||||
<button class="btn btn-amber" onclick="go(2)">Passons aux outils →</button>
|
||||
<button class="btn btn-amber" onclick="go(3)">Passons aux outils →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -883,7 +1049,7 @@ body.formateur .formateur-flag{display:block}
|
||||
<div class="qz-big" id="finScore">0/5</div>
|
||||
<p style="color:var(--ink-2);margin:6px 0 18px" id="finMsg"></p>
|
||||
<button class="btn btn-ghost" id="finRetry">↺ Retenter le quiz</button>
|
||||
<button class="btn btn-amber" onclick="go(8)">Voir mon bilan →</button>
|
||||
<button class="btn btn-amber" onclick="go(9)">Voir mon bilan →</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1011,6 +1177,34 @@ document.addEventListener('keydown',e=>{
|
||||
});
|
||||
go(0);
|
||||
|
||||
|
||||
/* ═══════════ INTRO SLIDE ═══════════ */
|
||||
(function(){
|
||||
const chips = document.querySelectorAll('.ichip');
|
||||
chips.forEach(c => {
|
||||
c.addEventListener('click', function(){
|
||||
chips.forEach(x => x.classList.remove('picked'));
|
||||
this.classList.add('picked');
|
||||
// Transition vers step 1 après 600 ms
|
||||
setTimeout(() => {
|
||||
const s0 = document.querySelector('.intro-step[data-step="0"]');
|
||||
const s1 = document.querySelector('.intro-step[data-step="1"]');
|
||||
if(!s0 || !s1) return;
|
||||
s0.style.animation = 'none';
|
||||
s0.style.opacity = '0';
|
||||
s0.style.transform = 'translateY(-12px)';
|
||||
s0.style.transition = 'opacity .3s, transform .3s';
|
||||
setTimeout(() => {
|
||||
s0.style.display = 'none';
|
||||
s1.style.display = 'block';
|
||||
}, 300);
|
||||
}, 600);
|
||||
});
|
||||
});
|
||||
const introNext = document.getElementById('introNext');
|
||||
if(introNext) introNext.addEventListener('click', () => go(1));
|
||||
})();
|
||||
|
||||
/* ═══════════ CHRONO SÉANCE ═══════════ */
|
||||
let chrono={left:3600, on:false, h:null};
|
||||
const tChip=document.getElementById('timerChip'), tTxt=document.getElementById('timerTxt');
|
||||
@ -1081,7 +1275,7 @@ function makeQuiz(cfg){
|
||||
|
||||
/* Quiz échauffement */
|
||||
makeQuiz({
|
||||
slideIdx:1, prog:'warmProg', q:'warmQ', opts:'warmOpts', exp:'warmExp', next:'warmNext', done:'warmDone', xp:10,
|
||||
slideIdx:2, prog:'warmProg', q:'warmQ', opts:'warmOpts', exp:'warmExp', next:'warmNext', done:'warmDone', xp:10,
|
||||
questions:[
|
||||
{q:"« L'IA va remplacer les chefs de projet d'ici 5 ans. »",a:["Vrai","Faux"],ok:1,e:"Faux. L'IA automatise des tâches (CR, reporting, relances) mais pas le métier : arbitrer, négocier, motiver une équipe restent profondément humains. Elle remplace des heures, pas des rôles."},
|
||||
{q:"« Une IA peut affirmer avec aplomb quelque chose de complètement faux. »",a:["Vrai","Faux"],ok:0,e:"Vrai ! C'est ce qu'on appelle une « hallucination ». Règle d'or absolue : toute donnée chiffrée, date ou nom produit par l'IA se vérifie avant diffusion."},
|
||||
@ -1096,7 +1290,7 @@ makeQuiz({
|
||||
|
||||
/* Quiz final */
|
||||
const finQuiz=makeQuiz({
|
||||
slideIdx:7, prog:'finProg', q:'finQ', opts:'finOpts', exp:'finExp', next:'finNext', done:'finDone', xp:20,
|
||||
slideIdx:8, prog:'finProg', q:'finQ', opts:'finOpts', exp:'finExp', next:'finNext', done:'finDone', xp:20,
|
||||
questions:[
|
||||
{q:"Que signifie le sigle RCTF ?",a:["Rôle, Contexte, Tâche, Format","Règles, Cadre, Temps, Finalité","Rédiger, Corriger, Tester, Finaliser"],ok:0,e:"Rôle, Contexte, Tâche, Format : les 4 briques d'un prompt qui donne une réponse exploitable du premier coup."},
|
||||
{q:"Votre équipe perd du temps en réunions de suivi. Quel duo d'outils attaquer en premier ?",a:["Power BI + Tableau","Transcription (Otter/Fireflies) + assistant IA pour le CR","Un nouveau logiciel de visioconférence"],ok:1,e:"Le combo transcription + CR automatique attaque la racine : capter ce qui se dit et le transformer en décisions/actions sans ressaisie."},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user