64 lines
5.5 KiB
HTML
64 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Quiz flash · Syllabus</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
|
||
<style>
|
||
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
|
||
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
|
||
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
|
||
.flotte { animation: flotte 6s ease-in-out infinite; }
|
||
@keyframes clignote { 50% { opacity: 0; } }
|
||
.curseur { animation: clignote 1s steps(1) infinite; }
|
||
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
|
||
</style>
|
||
<link rel="stylesheet" href="css/syllabus-theme.css">
|
||
</head>
|
||
|
||
<body class="min-h-screen bg-[#eef0fd] font-display text-black antialiased">
|
||
<main class="mx-auto flex min-h-screen max-w-md flex-col gap-6 px-5 py-8">
|
||
<p class="self-start border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">Vue élève · téléphone ou PC</p>
|
||
<section id="e-login" class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
|
||
<div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
|
||
<h1 class="text-4xl font-extrabold leading-none tracking-tight">Quiz flash</h1></div>
|
||
<form id="f-login" class="mt-6 grid gap-4">
|
||
<label class="grid gap-2 font-extrabold">Code du quiz<input required value="K7Q4" maxlength="4" class="w-full border border-[#e3e5e8] rounded-2xl px-4 py-3 font-mono text-3xl font-semibold uppercase tracking-widest focus:bg-[#f8f9fa] focus:outline-none"></label>
|
||
<label class="grid gap-2 font-extrabold">Identifiant<input required value="lea.m.sio1-a" autocomplete="username" class="w-full border border-[#e3e5e8] rounded-2xl px-4 py-3 font-mono text-lg font-semibold focus:bg-[#f8f9fa] focus:outline-none"></label>
|
||
<label class="grid gap-2 font-extrabold">Code secret<input required type="password" value="••••••" autocomplete="current-password" class="w-full border border-[#e3e5e8] rounded-2xl px-4 py-3 font-mono text-lg font-semibold focus:bg-[#f8f9fa] focus:outline-none"></label>
|
||
<button type="submit" class="min-h-[56px] border border-[#e3e5e8] rounded-2xl bg-black px-6 py-4 text-left text-xl font-extrabold text-white">Rejoindre →</button>
|
||
</form>
|
||
</section>
|
||
<section id="e-attente" hidden class="border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-6 text-center">
|
||
<p class="text-3xl font-extrabold">Tu es connectée, Léa !</p>
|
||
<p class="mt-3 text-lg font-bold">Regarde l’écran. La question arrive…</p>
|
||
<button type="button" id="e-go" class="mt-6 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-bold underline">Aperçu : afficher la question</button>
|
||
</section>
|
||
<section id="e-question" hidden>
|
||
<p class="font-mono font-semibold">Question 3 / 5 · la question est affichée au tableau</p>
|
||
<div class="mt-4 grid grid-cols-2 gap-4">
|
||
<button type="button" data-choix="0" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] font-mono text-6xl font-semibold active:shadow-none">A</button>
|
||
<button type="button" data-choix="1" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] font-mono text-6xl font-semibold active:shadow-none">B</button>
|
||
<button type="button" data-choix="2" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] font-mono text-6xl font-semibold active:shadow-none">C</button>
|
||
<button type="button" data-choix="3" class="grid aspect-square place-items-center border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] font-mono text-6xl font-semibold active:shadow-none">D</button>
|
||
</div>
|
||
</section>
|
||
<section id="e-envoye" hidden class="border border-[#e3e5e8] rounded-2xl bg-white p-6">
|
||
<p class="text-3xl font-extrabold">Réponse <span id="e-lettre"></span> envoyée ✓</p>
|
||
<p class="mt-2 text-lg font-bold">Attends la correction au tableau.</p>
|
||
</section>
|
||
</main>
|
||
<script>
|
||
(function () {
|
||
var $ = function (id) { return document.getElementById(id); };
|
||
$('f-login').addEventListener('submit', function (e) { e.preventDefault(); $('e-login').hidden = true; $('e-attente').hidden = false; });
|
||
$('e-go').addEventListener('click', function () { $('e-attente').hidden = true; $('e-question').hidden = false; });
|
||
document.querySelectorAll('[data-choix]').forEach(function (b) { b.addEventListener('click', function () { $('e-lettre').textContent = b.textContent.trim(); $('e-question').hidden = true; $('e-envoye').hidden = false; }); });
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|