adam/Paillasse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Maquettes Claude Design avec visio de classe

Browse source
This commit is contained in:
Adam Belkacemi 2026-10-06 23:28:18 +02:00
parent 238070ae54
commit 236d2d3567
243 changed files with 27992 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

64
design/apercu-quiz-eleve.html Normal file
View file

@ -0,0 +1,64 @@
<!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&nbsp;!</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>