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

61
design/_backup-ludique/resources/views/quiz/eleve.blade.php Normal file
View file

@ -0,0 +1,61 @@
<!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&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-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>