e4a6aaebb1
Pages /legal et /confidentialite réécrites d'après le système réel, purge des classes archivées depuis 90 jours (prouvée par Pest), archivage côté prof. Polices, xterm.js et CodeMirror ne sont plus chargés depuis Google ni jsDelivr. Pages d'aperçu signalées, sans vrais établissements ni faux chiffres. Journaux Laravel gardés 14 jours. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
63 lines
5.2 KiB
PHP
63 lines
5.2 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 · Syllabus</title>
|
||
{{ Vite::fonts() }}
|
||
@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>
|
||
<link rel="stylesheet" href="{{ asset('css/syllabus-theme.css') }}">
|
||
</head>
|
||
|
||
<body class="min-h-screen bg-[#eef0fd] font-display text-black antialiased">
|
||
@include('partials.apercu')
|
||
<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>
|