61 lines
5.3 KiB
PHP
61 lines
5.3 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Quiz flash · Paillasse</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">
|
||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||
<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>
|
||
</head>
|
||
|
||
<body class="min-h-screen bg-[#C4B5FD] 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-2 border-black 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-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
|
||
<h1 class="text-4xl font-black leading-none tracking-tighter">Quiz flash</h1>
|
||
<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-4 border-black px-4 py-3 font-mono text-3xl font-semibold uppercase tracking-widest focus:bg-[#FFFBEA] 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-4 border-black px-4 py-3 font-mono text-lg font-semibold focus:bg-[#FFFBEA] 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-4 border-black px-4 py-3 font-mono text-lg font-semibold focus:bg-[#FFFBEA] focus:outline-none"></label>
|
||
<button type="submit" class="min-h-[56px] border-4 border-black bg-black px-6 py-4 text-left text-xl font-extrabold text-white shadow-[6px_6px_0px_#FFD23F]">Rejoindre →</button>
|
||
</form>
|
||
</section>
|
||
<section id="e-attente" hidden class="border-4 border-black bg-[#7CF2C0] p-6 text-center shadow-[8px_8px_0px_#000000]">
|
||
<p class="text-3xl font-black">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-2 border-black 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-4 border-black bg-[#FF6FB5] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">A</button>
|
||
<button type="button" data-choix="1" class="grid aspect-square place-items-center border-4 border-black bg-[#7CF2C0] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">B</button>
|
||
<button type="button" data-choix="2" class="grid aspect-square place-items-center border-4 border-black bg-[#FFD23F] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">C</button>
|
||
<button type="button" data-choix="3" class="grid aspect-square place-items-center border-4 border-black bg-[#C4B5FD] font-mono text-6xl font-semibold shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">D</button>
|
||
</div>
|
||
</section>
|
||
<section id="e-envoye" hidden class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]">
|
||
<p class="text-3xl font-black">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>
|