Paillasse/design/_backup-ludique/resources/views/cockpit.blade.php
2026-10-06 23:28:18 +02:00

208 lines
48 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cockpit prof · 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">
<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="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0.10.0/lib/addon-fit.min.js"></script>
<script defer src="{{ asset('js/paillasse-terminal.js') }}"></script>
</head>
<body class="bg-white font-display text-black antialiased">
<header class="border-b-4 border-black">
<nav class="relative mx-auto flex max-w-[1600px] flex-wrap items-center justify-between gap-x-6 gap-y-4 px-5 py-5 lg:px-8 2xl:flex-nowrap" aria-label="Navigation principale">
<a href="{{ route('accueil') }}" class="flex items-center gap-3 text-2xl font-black tracking-tight">
<span class="relative inline-flex h-10 w-12 items-end" aria-hidden="true"><span class="absolute left-2 top-0 h-6 w-4 -rotate-6 border-2 border-black bg-[#7CF2C0]"></span><span class="absolute right-1 top-1 h-5 w-5 rounded-full border-2 border-black bg-[#FF6FB5]"></span><span class="relative h-3 w-full border-2 border-black bg-[#FFD23F] shadow-[3px_3px_0px_#000000]"></span></span>
Paillasse
</a>
<ul class="order-last flex w-full flex-wrap items-center gap-x-6 gap-y-2 whitespace-nowrap text-base font-bold md:flex-nowrap md:gap-x-8 2xl:order-none 2xl:w-auto 2xl:flex-1 2xl:justify-center">
<li><a href="{{ route('fonctionnalites') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Fonctionnalités</a></li>
<li>
<details class="group">
<summary class="flex cursor-pointer list-none items-center gap-1 border-2 border-transparent px-1 hover:underline group-open:border-black group-open:bg-[#FFD23F] [&::-webkit-details-marker]:hidden">Ressources <span aria-hidden="true" class="transition-transform group-open:rotate-180">▾</span></summary>
<div class="absolute inset-x-5 top-full z-50 mx-auto max-h-[80vh] max-w-[880px] overflow-y-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:inset-x-8">
<div class="grid gap-x-4 gap-y-6 p-5 sm:grid-cols-2 lg:grid-cols-4">
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Espaces</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cockpit') }}" @if(request()->routeIs('cockpit')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" @if(request()->routeIs('espace.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Espace élève</a></li><li><a href="{{ route('vie.scolaire') }}" @if(request()->routeIs('vie.scolaire')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Vie scolaire</a></li><li><a href="{{ route('academie') }}" @if(request()->routeIs('academie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Académie</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Apprendre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Cours gratuits</a></li><li><a href="{{ route('labs.index') }}" @if(request()->routeIs('labs.index')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Labs sur VM</a></li><li><a href="{{ route('labs.web') }}" @if(request()->routeIs('labs.web')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Lab web</a></li><li><a href="{{ route('ide') }}" @if(request()->routeIs('ide')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">IDE en ligne</a></li><li><a href="{{ route('maison') }}" @if(request()->routeIs('maison')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Ressources à la maison</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Préparer</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('bibliotheque') }}" @if(request()->routeIs('bibliotheque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Bibliothèque du prof</a></li><li><a href="{{ route('banque') }}" @if(request()->routeIs('banque')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Banque de sujets</a></li><li><a href="{{ route('generateur') }}" @if(request()->routeIs('generateur')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Générateur de TD</a></li><li><a href="{{ route('td.imprimable') }}" @if(request()->routeIs('td.imprimable')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">TD à imprimer</a></li><li><a href="{{ route('quiz.projection') }}" @if(request()->routeIs('quiz.projection')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Quiz flash</a></li></ul></div>
<div><p class="flex items-center gap-2 border-b-2 border-black pb-2 font-mono text-xs font-semibold uppercase tracking-wider"><span class="h-3 w-3 border-2 border-black" style="background:#FF6FB5"></span>Évaluer et suivre</p><ul class="mt-2 grid gap-0.5"><li><a href="{{ route('sujet.creer') }}" @if(request()->routeIs('sujet.creer')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Créer un sujet</a></li><li><a href="{{ route('devoirs') }}" @if(request()->routeIs('devoirs')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Devoirs maison</a></li><li><a href="{{ route('correction') }}" @if(request()->routeIs('correction')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Correction assistée</a></li><li><a href="{{ route('fiche.eleve') }}" @if(request()->routeIs('fiche.eleve')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Fiche élève</a></li><li><a href="{{ route('messagerie') }}" @if(request()->routeIs('messagerie')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Messagerie</a></li><li><a href="{{ route('export.ent') }}" @if(request()->routeIs('export.ent')) aria-current="page" @endif class="block border-2 border-transparent px-2 py-1.5 text-[15px] font-bold hover:border-black aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F]">Export Pronote / ENT</a></li></ul></div>
</div>
<div class="flex flex-wrap items-center justify-between gap-3 border-t-4 border-black bg-[#FFFBEA] px-5 py-3"><p class="text-sm font-semibold">Vous débutez ? Tout est expliqué en vidéo.</p><a href="{{ route('aide') }}" class="border-2 border-black bg-white px-3 py-1 text-sm font-extrabold hover:bg-black hover:text-white">Aide et tutoriels →</a></div>
</div>
</details>
</li>
<li><a href="{{ route('etablissements') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Établissements</a></li>
<li><a href="{{ route('tarifs') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Tarifs</a></li>
<li><a href="{{ route('pourquoi') }}" class="border-2 border-transparent px-1 underline-offset-4 hover:underline aria-[current=page]:border-black aria-[current=page]:bg-[#FFD23F] aria-[current=page]:no-underline">Pourquoi ce projet ?</a></li>
</ul>
<div class="mr-4 flex shrink-0 items-center gap-8">
<a href="{{ route('login') }}" class="inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-white px-6 font-bold shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none">Se connecter</a>
<a href="{{ route('register') }}" class="relative inline-flex h-12 min-w-[12rem] items-center border-2 border-black bg-[#ec3013] px-6 font-bold text-white shadow-[4px_4px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><span>Créer une classe</span><span class="pointer-events-none absolute -left-6 -top-4 -rotate-12" aria-hidden="true"><svg viewBox="0 0 44 30" class="h-7 w-10"><rect x="2" y="2" width="40" height="26" fill="#C4B5FD" stroke="#000" stroke-width="3"/><rect x="2" y="8" width="40" height="5" fill="#000"/><rect x="7" y="17" width="9" height="6" fill="#FFD23F" stroke="#000" stroke-width="2"/><path d="M4 28 L40 2" stroke="#ec3013" stroke-width="7" stroke-linecap="round"/><path d="M4 28 L40 2" stroke="#000" stroke-width="2" stroke-linecap="round"/></svg></span><span class="pointer-events-none absolute -bottom-4 -right-5 grid h-9 w-9 rotate-12 place-items-center rounded-full border-2 border-black bg-[#FFD23F] font-mono text-[11px] font-semibold leading-none text-black shadow-[2px_2px_0px_#000000] outline outline-1 outline-offset-[-5px] outline-black" aria-hidden="true">0€</span></a>
</div>
</nav>
</header>
<main>
<div class="border-b-2 border-black bg-[#F6F5F1]">
<div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]">
<aside class="border-b-2 border-black bg-white p-5 lg:border-b-0 lg:border-r-2">
<p class="font-mono text-[11px] font-semibold uppercase tracking-wider">Mes classes</p>
<label class="mt-2 block"><span class="sr-only">Classe</span><select class="h-11 w-full border-2 border-black bg-white px-2 font-bold"><option>BTS SIO 1 · Groupe A</option><option>BTS SIO 1 · Groupe B</option><option>BTS SIO 2 · SISR</option><option>Terminale NSI</option></select></label>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Cockpit</p>
<ul class="mt-2 grid gap-1"><li><a href="#vue" class="flex items-center gap-3 border-2 border-black bg-black text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg><span class="flex-1">Vue d’ensemble</span></a></li><li><a href="#eleves" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg><span class="flex-1">Élèves</span></a></li><li><a href="#examen" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span class="flex-1">Examen</span></a></li><li><a href="#devoirs" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg><span class="flex-1">Devoirs maison</span></a></li><li><a href="#quiz" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg><span class="flex-1">Quiz flash</span></a></li><li><a href="#obs" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="flex-1">Observations</span></a></li></ul>
<div class="mt-6 border-2 border-black bg-[#FFFBEA] p-3 text-sm font-semibold"><p class="font-black">Séance en cours</p><p class="mt-1">VLAN et routage inter-VLAN</p><p class="mt-2 font-mono text-xs">10:00 → 12:00</p><div class="mt-2 h-2 border-2 border-black bg-white"><div class="h-full w-[18%] bg-black"></div></div></div>
</aside>
<div class="min-w-0 p-5 lg:p-8">
<div id="vue" class="flex flex-wrap items-end justify-between gap-4">
<div><p class="font-mono text-xs font-semibold">Cockpit prof</p><h1 class="mt-1 text-4xl font-black tracking-tight">BTS SIO 1 · Groupe A</h1><p class="mt-1 font-semibold">16 élèves · mardi 29 septembre · <span id="c-heure" class="font-mono">10:22</span></p></div>
<div class="flex flex-wrap gap-3">
<a href="{{ route('quiz.projection') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-white px-4 text-sm font-extrabold hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>Quiz flash</a>
<a href="{{ route('devoirs') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-white px-4 text-sm font-extrabold hover:bg-[#FFFBEA]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg>Programmer un DM</a>
<button type="button" id="c-exam" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-[#ec3013] px-4 text-sm font-extrabold text-white shadow-[3px_3px_0px_#000000] active:translate-x-0.5 active:translate-y-0.5 active:shadow-none"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg><span>Lancer l’examen</span></button>
</div>
</div>
<ul class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5" aria-label="Indicateurs">
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Présents</p><span class="h-2.5 w-2.5 bg-[#7CF2C0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">15/16</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-black">1 absent signalé</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,12 16,10 32,12 48,8 64,10 80,6" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Moyenne QCM</p><span class="h-2.5 w-2.5 bg-[#FFD23F]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">13,4</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-[#0a7a4b]">+0,8 sur 4 semaines</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,18 16,16 32,17 48,12 64,10 80,8" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">À accompagner</p><span class="h-2.5 w-2.5 bg-[#ec3013]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">3</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-[#b3001b]">+1 cette semaine</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,20 16,18 32,18 48,14 64,12 80,10" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Mains levées</p><span class="h-2.5 w-2.5 bg-[#FF6FB5]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none"><span id="c-nb-mains">3</span></p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-black">attente moy. 2 min</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,20 16,14 32,18 48,10 64,16 80,12" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
<li class="flex flex-col border-2 border-black bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">DM rendus</p><span class="h-2.5 w-2.5 bg-[#C4B5FD]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">13/16</p><div class="mt-3 flex items-end justify-between gap-2"><p class="text-xs font-bold text-black">échéance vendredi</p><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline points="0,22 16,20 32,14 48,12 64,8 80,6" fill="none" stroke="#000" stroke-width="2" stroke-linejoin="round"/></svg></div></li>
</ul>
<section class="mt-6 border-2 border-black bg-white p-5" aria-labelledby="t-prog">
<div class="flex flex-wrap items-baseline justify-between gap-2"><h2 id="t-prog" class="text-lg font-black">Avancement du lab « VLAN »</h2><p class="font-mono text-xs font-semibold">6 étapes · médiane : étape 3</p></div>
<div class="mt-4 flex h-10 border-2 border-black" role="img" aria-label="Répartition des élèves par étape"><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:6.666666666666667%;background:#fff;color:#000">É1 · 1</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:13.333333333333334%;background:#FFFBEA;color:#000">É2 · 2</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:26.666666666666668%;background:#FFD23F;color:#000">É3 · 4</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:20%;background:#7CF2C0;color:#000">É4 · 3</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:20%;background:#35E0E8;color:#000">É5 · 3</div><div class="flex items-center justify-center border-r-2 border-black font-mono text-xs font-semibold last:border-r-0" style="width:13.333333333333334%;background:#000;color:#fff">É6 · 2</div></div>
<p class="mt-2 text-xs font-semibold">Largeur = nombre d’élèves à chaque étape. 2 élèves ont terminé.</p>
</section>
<section id="eleves" class="mt-6 border-2 border-black bg-white" aria-labelledby="t-eleves">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4">
<h2 id="t-eleves" class="text-lg font-black">Élèves</h2>
<div class="flex flex-wrap items-center gap-2">
<label class="flex h-10 items-center gap-2 border-2 border-black px-2"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg><span class="sr-only">Rechercher</span><input id="c-q" type="search" placeholder="Rechercher un élève" class="w-40 bg-transparent text-sm font-semibold outline-none"></label>
<div id="c-filtres" class="flex flex-wrap text-sm font-bold"><button type="button" data-f="all" class="h-10 border-2 border-black px-3 bg-black text-white">Tous</button><button type="button" data-f="aider" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">À accompagner</button><button type="button" data-f="main" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Main levée</button><button type="button" data-f="dm" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">DM manquant</button><button type="button" data-f="exc" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Excellence</button></div>
</div>
</div>
<div class="overflow-x-auto"><table class="w-full min-w-[860px] border-collapse text-left text-sm">
<thead class="border-b-2 border-black bg-[#F6F5F1] font-mono text-[11px] uppercase tracking-wider"><tr><th class="px-4 py-3 font-semibold"><button type="button" data-sort="nom" class="inline-flex items-center gap-1 hover:underline">Élève <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="statut" class="inline-flex items-center gap-1 hover:underline">Statut <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="etape" class="inline-flex items-center gap-1 hover:underline">Lab <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="qcm" class="inline-flex items-center gap-1 hover:underline">QCM moy. <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold">Tendance</th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="dm" class="inline-flex items-center gap-1 hover:underline">DM <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"><button type="button" data-sort="ind" class="inline-flex items-center gap-1 hover:underline">Indices <span aria-hidden="true">↕</span></button></th><th class="px-4 py-3 font-semibold"></th></tr></thead>
<tbody id="c-rows"></tbody>
</table></div>
</section>
<div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="examen" class="border-2 border-black bg-white" aria-labelledby="t-exam">
<div class="flex items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-exam" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>Surveillance d’examen</h2><span id="c-exam-etat" class="border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold">Inactif</span></div>
<div class="p-4"><div class="flex items-baseline justify-between"><p class="font-semibold">E6 blanc SISR · 1 h 30</p><p id="c-chrono" class="font-mono text-2xl font-semibold">00:00</p></div><ol id="c-sorties" class="mt-3 grid gap-2 font-mono text-xs font-semibold"><li class="border-2 border-dashed border-black p-3 text-center">Lancez l’examen pour suivre les sorties d’onglet et de fenêtre.</li></ol></div>
</section>
<section id="devoirs" class="border-2 border-black bg-white" aria-labelledby="t-dm">
<div class="flex items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-dm" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/><path d="M6.5 17H20v5H6.5A2.5 2.5 0 0 1 4 19.5"/></svg>Devoirs maison</h2><a href="{{ route('devoirs') }}" class="text-sm font-extrabold underline underline-offset-4">Tout voir</a></div>
<ul class="divide-y-2 divide-black"><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">DM 3 · Plan d’adressage</p><p class="font-mono text-xs">Rendu ven. 03/10</p></div><p class="font-mono text-sm font-semibold">13/16</p><div class="col-span-2 h-2 border-2 border-black"><div class="h-full bg-black" style="width:81%"></div></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">TP maison · Scripts Bash</p><p class="font-mono text-xs">Rendu lun. 06/10</p></div><p class="font-mono text-sm font-semibold">6/16</p><div class="col-span-2 h-2 border-2 border-black"><div class="h-full bg-black" style="width:38%"></div></div></li><li class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-4 gap-y-2 p-4"><div><p class="font-bold">QCM · Lecture CM VLAN</p><p class="font-mono text-xs">Rendu ce soir</p></div><p class="font-mono text-sm font-semibold">15/16</p><div class="col-span-2 h-2 border-2 border-black"><div class="h-full bg-black" style="width:94%"></div></div></li></ul>
</section>
</div>
</div>
</div>
</div>
<div class="mx-auto grid max-w-[1600px] gap-6 px-5 py-8 lg:grid-cols-3 lg:px-8">
<section class="border-2 border-black bg-white" aria-labelledby="t-mains">
<div class="flex items-center justify-between border-b-2 border-black bg-[#FF6FB5] p-4"><h2 id="t-mains" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.4l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15"/></svg>Mains levées</h2><span class="font-mono text-xs font-semibold">ordre d’arrivée</span></div>
<ol id="c-mains" class="divide-y-2 divide-black"></ol>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-alertes">
<div class="flex items-center justify-between border-b-2 border-black p-4"><h2 id="t-alertes" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0zM12 9v4M12 17h.01"/></svg>Priorités du jour</h2></div>
<ul class="divide-y-2 divide-black text-sm"><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#ec3013"></span><div><p class="font-black">Léa Martin <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Accompagner</span></p><p class="mt-0.5 font-medium">3 QCM sous 8/20. Proposer le premier rang et réexpliquer les VLAN.</p></div></li><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#ec3013"></span><div><p class="font-black">Lucas Moreau <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Accompagner</span></p><p class="mt-0.5 font-medium">Cours lu en 2 min au lieu de 15. QCM de lecture à refaire.</p></div></li><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#FFD23F"></span><div><p class="font-black">Hugo Petit <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Relancer</span></p><p class="mt-0.5 font-medium">DM 3 non rendu. Relance automatique jeudi 18 h.</p></div></li><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border-2 border-black" style="background:#7CF2C0"></span><div><p class="font-black">Inès Kaci <span class="ml-1 font-mono text-[11px] font-semibold uppercase">Stimuler</span></p><p class="mt-0.5 font-medium">Tous les labs réussis. Défi connexe proposé : QoS et priorisation.</p></div></li></ul>
</section>
<section id="obs" class="border-2 border-black bg-white" aria-labelledby="t-obs">
<div class="border-b-2 border-black p-4"><h2 id="t-obs" class="flex items-center gap-2 text-lg font-black"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Observation rapide</h2><p class="mt-0.5 text-sm font-semibold">Classée par élève pour le conseil de classe.</p></div>
<form id="c-obs" class="grid gap-3 p-4"><select id="c-obs-eleve" class="h-11 border-2 border-black bg-white px-2 font-bold"></select><div class="flex flex-wrap gap-2 text-xs font-extrabold"><button type="button" data-tag="Progrès" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Progrès</button><button type="button" data-tag="Investi" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Investi</button><button type="button" data-tag="Bavardage" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Bavardage</button><button type="button" data-tag="Difficulté" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Difficulté</button><button type="button" data-tag="Autonome" class="border-2 border-black px-2 py-1 hover:bg-[#FFFBEA]">Autonome</button></div><textarea rows="3" class="border-2 border-black bg-white p-2 text-sm font-medium" placeholder="Ex. : a aidé son voisin sur l’étape 4"></textarea><button type="submit" class="h-11 border-2 border-black bg-black text-sm font-extrabold text-white">Enregistrer l’observation</button><p id="c-obs-ok" class="hidden text-sm font-extrabold" aria-live="polite">Observation enregistrée ✓</p></form>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var E = [
['Léa Martin','aider',2,7.5,[12,10,9,8,7],'oui',3],['Yanis Benali','main',4,12,[11,12,12,13,12],'oui',1],['Inès Kaci','exc',6,19,[17,18,18,19,19],'oui',0],['Tom Leroy','ok',5,14,[13,13,14,14,14],'oui',1],
['Sarah Nguyen','ok',6,16,[14,15,15,16,16],'oui',0],['Hugo Petit','dm',3,11,[12,11,11,11,11],'non',2],['Chloé Robert','ok',5,13.5,[12,13,13,14,13],'oui',1],['Adam Diallo','main',3,12.5,[11,12,12,12,13],'oui',2],
['Emma Garnier','ok',4,15,[14,14,15,15,15],'oui',0],['Lucas Moreau','aider',1,8,[11,10,9,9,8],'non',4],['Jade Fontaine','ok',4,14.5,[13,14,14,15,14],'oui',1],['Nathan Roux','abs',0,12,[12,12,11,12,12],'non',0],
['Maël Girard','ok',3,13,[12,12,13,13,13],'oui',2],['Zoé Lambert','ok',4,15.5,[14,15,15,15,16],'oui',0],['Rayan Haddad','main',2,11.5,[10,11,11,12,11],'oui',3],['Camille Dubois','aider',2,9,[12,11,10,10,9],'oui',3]];
var LAB = { aider:['#ec3013','#fff','À accompagner'], main:['#FF6FB5','#000','Main levée'], exc:['#7CF2C0','#000','Excellence'], ok:['#fff','#000','En cours'], dm:['#FFD23F','#000','DM manquant'], abs:['#e5e5e5','#000','Absent'] };
var filtre = 'all', q = '', tri = null, sens = 1;
function spark(v) { var mn = 6, mx = 20; return '<svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="' + (v[4] < v[0] ? '#b3001b' : '#000') + '" stroke-width="2" points="' + v.map(function (x, i) { return (i * 20) + ',' + (22 - (x - mn) / (mx - mn) * 20).toFixed(1); }).join(' ') + '"/></svg>'; }
function ini(n) { return n.split(' ').map(function (p) { return p[0]; }).join(''); }
function rendre() {
var rows = E.filter(function (e) { return (filtre === 'all' || e[1] === filtre || (filtre === 'dm' && e[5] === 'non')) && e[0].toLowerCase().indexOf(q) > -1; });
if (tri !== null) rows.sort(function (a, b) { return (a[tri] > b[tri] ? 1 : a[tri] < b[tri] ? -1 : 0) * sens; });
document.getElementById('c-rows').innerHTML = rows.map(function (e) { var l = LAB[e[1]];
return '<tr class="border-b-2 border-black last:border-b-0 hover:bg-[#FFFBEA]"><td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-mono text-xs font-semibold">' + ini(e[0]) + '</span><span class="font-bold">' + e[0] + '</span></span></td>' +
'<td class="px-4 py-3"><span class="inline-block border-2 border-black px-2 py-0.5 text-xs font-extrabold" style="background:' + l[0] + ';color:' + l[1] + '">' + l[2] + '</span></td>' +
'<td class="px-4 py-3"><span class="flex items-center gap-2"><span class="flex h-2.5 w-24 border-2 border-black">' + [1,2,3,4,5,6].map(function (s) { return '<span class="flex-1 ' + (s <= e[2] ? 'bg-black' : '') + '"></span>'; }).join('') + '</span><span class="font-mono text-xs font-semibold">' + (e[2] === 6 ? 'fini' : e[2] ? 'É' + e[2] : '—') + '</span></span></td>' +
'<td class="px-4 py-3 font-mono font-semibold ' + (e[3] < 10 ? 'text-[#b3001b]' : '') + '">' + String(e[3]).replace('.', ',') + '</td><td class="px-4 py-3">' + spark(e[4]) + '</td>' +
'<td class="px-4 py-3 font-bold">' + (e[5] === 'oui' ? '✓ rendu' : '<span class="text-[#b3001b]">✕ manquant</span>') + '</td><td class="px-4 py-3 font-mono font-semibold">' + e[6] + '</td>' +
'<td class="px-4 py-3 text-right"><a href="{{ route('suivi') }}" class="border-2 border-black px-2 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Fiche</a></td></tr>'; }).join('') || '<tr><td colspan="8" class="p-6 text-center font-bold">Aucun élève.</td></tr>';
}
document.querySelectorAll('#c-filtres button').forEach(function (b) { b.addEventListener('click', function () { filtre = b.dataset.f; document.querySelectorAll('#c-filtres button').forEach(function (x, i) { x.className = 'h-10 border-2 border-black px-3 ' + (i ? '-ml-0.5 ' : '') + (x === b ? 'bg-black text-white' : 'bg-white'); }); rendre(); }); });
document.getElementById('c-q').addEventListener('input', function (e) { q = e.target.value.toLowerCase(); rendre(); });
var COL = { nom: 0, statut: 1, etape: 2, qcm: 3, dm: 5, ind: 6 };
document.querySelectorAll('[data-sort]').forEach(function (b) { b.addEventListener('click', function () { var c = COL[b.dataset.sort]; sens = tri === c ? -sens : 1; tri = c; rendre(); }); });
rendre();
document.getElementById('c-obs-eleve').innerHTML = E.map(function (e) { return '<option>' + e[0] + '</option>'; }).join('');
document.querySelectorAll('[data-tag]').forEach(function (b) { b.addEventListener('click', function () { var t = document.querySelector('#c-obs textarea'); t.value = (t.value ? t.value + ' · ' : '') + b.dataset.tag; }); });
document.getElementById('c-obs').addEventListener('submit', function (e) { e.preventDefault(); var ok = document.getElementById('c-obs-ok'); ok.classList.remove('hidden'); e.target.querySelector('textarea').value = ''; setTimeout(function () { ok.classList.add('hidden'); }, 2500); });
var M = [['Yanis Benali','Lab VLAN · étape 4',190],['Adam Diallo','Masque /26',75],['Rayan Haddad','Lab VLAN · étape 2',20]];
function mains() { var ol = document.getElementById('c-mains'); document.getElementById('c-nb-mains').textContent = M.length;
ol.innerHTML = M.length ? M.map(function (m, i) { return '<li class="flex items-center justify-between gap-3 p-4"><span class="flex items-center gap-3"><span class="font-mono text-sm font-semibold">' + (i + 1) + '</span><span><span class="block font-black">' + m[0] + '</span><span class="text-sm font-semibold">' + m[1] + ' · <span class="font-mono">' + Math.floor(m[2] / 60) + ' min ' + String(m[2] % 60).padStart(2, '0') + '</span></span></span></span><button type="button" data-i="' + i + '" class="h-9 border-2 border-black bg-black px-3 text-xs font-extrabold text-white hover:bg-[#ec3013]">J’arrive</button></li>'; }).join('') : '<li class="p-6 text-center font-bold">Aucune main levée. Silence royal.</li>';
ol.querySelectorAll('button').forEach(function (b) { b.addEventListener('click', function () { M.splice(+b.dataset.i, 1); mains(); }); }); }
mains(); setInterval(function () { M.forEach(function (m) { m[2]++; }); mains(); }, 1000);
var t = null, s = 0, btn = document.getElementById('c-exam'), et = document.getElementById('c-exam-etat'), so = document.getElementById('c-sorties');
btn.addEventListener('click', function () {
if (t) { clearInterval(t); t = null; btn.querySelector('span').textContent = 'Lancer l’examen'; et.textContent = 'Terminé'; et.style.background = '#fff'; return; }
s = 0; btn.querySelector('span').textContent = 'Arrêter l’examen'; et.textContent = 'En cours · 16/16 connectés'; et.style.background = '#7CF2C0';
so.innerHTML = '<li class="border-2 border-black p-3">Aucune sortie détectée.</li>';
window.scrollTo({ top: document.getElementById('examen').getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
t = setInterval(function () { s++; document.getElementById('c-chrono').textContent = String(Math.floor(s / 60)).padStart(2, '0') + ':' + String(s % 60).padStart(2, '0');
var ev = { 4: ['#FFD23F','Hugo Petit','changement d’onglet','3 s'], 9: ['#FF6FB5','Lucas Moreau','souris hors de la fenêtre','6 s'], 15: ['#FFD23F','Camille Dubois','fenêtre réduite','2 s'] }[s];
if (ev) { if (so.children[0] && so.children[0].textContent.indexOf('Aucune') === 0) so.innerHTML = ''; so.insertAdjacentHTML('afterbegin', '<li class="flex items-center justify-between gap-3 border-2 border-black p-2" style="background:' + ev[0] + '"><span>' + document.getElementById('c-chrono').textContent + ' · ' + ev[1] + ' · ' + ev[2] + '</span><span>' + ev[3] + '</span></li>'); }
}, 1000);
});
function h() { var d = new Date(); document.getElementById('c-heure').textContent = String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0'); } h(); setInterval(h, 30000);
});
</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>