Paillasse/design/apercu-cockpit.html
2026-10-06 23:28:18 +02:00

185 lines
50 KiB
HTML
Raw Permalink 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 · 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="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="js/paillasse-terminal.js"></script>
<link rel="stylesheet" href="css/syllabus-theme.css">
</head>
<body class="bg-white font-display text-black antialiased">
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
<a href="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="images/logo-syllabus-icone.png" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="apercu-ressource.html?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="apercu-ressource.html?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="apercu-ressource.html?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-ressource.html?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="apercu-ressource.html?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="apercu-ressource.html?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#b06000"></span>Préparer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Prêt à projeter ou imprimer</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=bibliotheque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Bibliothèque du prof</a></li><li><a href="apercu-ressource.html?outil=banque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Banque de sujets</a></li><li><a href="apercu-ressource.html?outil=generateur" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Générateur de TD</a></li><li><a href="apercu-ressource.html?outil=td-imprimable" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TD à imprimer</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#c5221f"></span>Évaluer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Quiz, examens, devoirs</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=quiz" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Créer un sujet</a></li><li><a href="apercu-ressource.html?outil=devoirs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Devoirs maison</a></li><li><a href="apercu-ressource.html?outil=correction" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Corriger les copies</a></li><li><a href="apercu-ressource.html?outil=export" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Export Pronote / ENT</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#8430ce"></span>Établissement</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Vie scolaire, direction, DSI</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="apercu-ressource.html?outil=vie-scolaire" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=cohortes" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Suivi des cohortes</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace établissement</a></li><li><a href="apercu-ressource.html?outil=academie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Académie</a></li><li><a href="apercu-ressource.html?outil=integration" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></div></div>
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="apercu-fonctionnalites.html" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
</div></details></li><li><a href="apercu-cours.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="apercu-tarifs.html" style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
<div style="display:flex;align-items:center;gap:20px">
<a href="apercu-connexion.html" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
<a href="apercu-inscription.html" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
</div>
</nav>
</header>
<main>
<div class="border-b border-[#e3e5e8] bg-[#f8f9fa]">
<div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]">
<aside class="border-b border-[#e3e5e8] 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-[#0b57d0] 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 border-[#dadce0] rounded-lg bg-[#f8f9fa] p-3 text-sm font-semibold"><p class="font-extrabold">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 border-[#dadce0] rounded-lg 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><div class="min-w-0 flex-1"><p data-public="P" 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-[#1d3fa8]">Pour les profs</p>
<h1 class="mt-1 text-4xl font-extrabold tracking-tight">BTS SIO 1 · Groupe A</h1></div><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="apercu-quiz-projection.html" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-4 text-sm font-extrabold hover:bg-[#f8f9fa]"><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="apercu-devoirs.html" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-4 text-sm font-extrabold hover:bg-[#f8f9fa]"><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 border-[#dadce0] rounded-lg bg-[#ec3013] px-4 text-sm font-extrabold text-white 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 border-[#dadce0] rounded-lg 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-[#e6f4ea]"></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 border-[#dadce0] rounded-lg 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-[#fef7e0]"></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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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-[#fce8e6]"></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 border-[#dadce0] rounded-lg 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-[#eef0fd]"></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 border-[#dadce0] rounded-lg 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-extrabold">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 border-[#dadce0] rounded-lg" role="img" aria-label="Répartition des élèves par étape"><div class="flex items-center justify-center border-r border-[#e3e5e8] 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 border-[#e3e5e8] 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 border-[#e3e5e8] 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 border-[#e3e5e8] 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 border-[#e3e5e8] 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 border-[#e3e5e8] 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 border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-eleves">
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4">
<h2 id="t-eleves" class="text-lg font-extrabold">Élèves</h2>
<div class="flex flex-wrap items-center gap-2">
<label class="flex h-10 items-center gap-2 border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg px-3 bg-[#0b57d0] text-white">Tous</button><button type="button" data-f="aider" class="h-10 border border-[#dadce0] rounded-lg px-3 -ml-0.5 bg-white">À accompagner</button><button type="button" data-f="main" class="h-10 border border-[#dadce0] rounded-lg px-3 -ml-0.5 bg-white">Main levée</button><button type="button" data-f="dm" class="h-10 border border-[#dadce0] rounded-lg px-3 -ml-0.5 bg-white">DM manquant</button><button type="button" data-f="exc" class="h-10 border border-[#dadce0] rounded-lg 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 border-[#e3e5e8] bg-[#f8f9fa] 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 border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-exam">
<div class="flex items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-exam" class="flex items-center gap-2 text-lg font-extrabold"><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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-dm">
<div class="flex items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-dm" class="flex items-center gap-2 text-lg font-extrabold"><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="apercu-devoirs.html" class="text-sm font-extrabold underline underline-offset-4">Tout voir</a></div>
<ul class="divide-y divide-[#e3e5e8]"><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 border-[#dadce0] rounded-lg"><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 border-[#dadce0] rounded-lg"><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 border-[#dadce0] rounded-lg"><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 border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-mains">
<div class="flex items-center justify-between border-b border-[#e3e5e8] bg-[#fce8e6] p-4"><h2 id="t-mains" class="flex items-center gap-2 text-lg font-extrabold"><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 divide-[#e3e5e8]"></ol>
</section>
<section class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-alertes">
<div class="flex items-center justify-between border-b border-[#e3e5e8] p-4"><h2 id="t-alertes" class="flex items-center gap-2 text-lg font-extrabold"><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 divide-[#e3e5e8] text-sm"><li class="flex gap-3 p-4"><span class="mt-1 h-3 w-3 shrink-0 border border-[#dadce0] rounded-lg" style="background:#ec3013"></span><div><p class="font-extrabold">Léa M. <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 border-[#dadce0] rounded-lg" style="background:#ec3013"></span><div><p class="font-extrabold">Lucas M. <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 border-[#dadce0] rounded-lg" style="background:#FFD23F"></span><div><p class="font-extrabold">Hugo P. <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 border-[#dadce0] rounded-lg" style="background:#7CF2C0"></span><div><p class="font-extrabold">Inès K. <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 border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-obs">
<div class="border-b border-[#e3e5e8] p-4"><h2 id="t-obs" class="flex items-center gap-2 text-lg font-extrabold"><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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg px-2 py-1 hover:bg-[#f8f9fa]">Progrès</button><button type="button" data-tag="Investi" class="border border-[#dadce0] rounded-lg px-2 py-1 hover:bg-[#f8f9fa]">Investi</button><button type="button" data-tag="Bavardage" class="border border-[#dadce0] rounded-lg px-2 py-1 hover:bg-[#f8f9fa]">Bavardage</button><button type="button" data-tag="Difficulté" class="border border-[#dadce0] rounded-lg px-2 py-1 hover:bg-[#f8f9fa]">Difficulté</button><button type="button" data-tag="Autonome" class="border border-[#dadce0] rounded-lg px-2 py-1 hover:bg-[#f8f9fa]">Autonome</button></div><textarea rows="3" class="border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 M.','aider',2,7.5,[12,10,9,8,7],'oui',3],['Yanis B.','main',4,12,[11,12,12,13,12],'oui',1],['Inès K.','exc',6,19,[17,18,18,19,19],'oui',0],['Tom L.','ok',5,14,[13,13,14,14,14],'oui',1],
['Sarah N.','ok',6,16,[14,15,15,16,16],'oui',0],['Hugo P.','dm',3,11,[12,11,11,11,11],'non',2],['Chloé R.','ok',5,13.5,[12,13,13,14,13],'oui',1],['Adam D.','main',3,12.5,[11,12,12,12,13],'oui',2],
['Emma G.','ok',4,15,[14,14,15,15,15],'oui',0],['Lucas M.','aider',1,8,[11,10,9,9,8],'non',4],['Jade F.','ok',4,14.5,[13,14,14,15,14],'oui',1],['Nathan R.','abs',0,12,[12,12,11,12,12],'non',0],
['Maël G.','ok',3,13,[12,12,13,13,13],'oui',2],['Zoé L.','ok',4,15.5,[14,15,15,15,16],'oui',0],['Rayan H.','main',2,11.5,[10,11,11,12,11],'oui',3],['Camille D.','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 border-[#e3e5e8] last:border-b-0 hover:bg-[#f8f9fa]"><td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg">' + [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="apercu-fiche-eleve.html" class="border border-[#dadce0] rounded-lg px-2 py-1 text-xs font-extrabold hover:bg-[#0b57d0] 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 border-[#dadce0] rounded-lg px-3 ' + (i ? '-ml-0.5 ' : '') + (x === b ? 'bg-[#0b57d0] 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 B.','Lab VLAN · étape 4',190],['Adam D.','Masque /26',75],['Rayan H.','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-extrabold">' + 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 border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg 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 P.','changement d’onglet','3 s'], 9: ['#FF6FB5','Lucas M.','souris hors de la fenêtre','6 s'], 15: ['#FFD23F','Camille D.','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 border-[#dadce0] rounded-lg 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 style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
<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 style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-fonctionnalites.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="apercu-cours.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-lab-essai.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="apercu-tarifs.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-ressource.html?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="apercu-ressource.html?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="apercu-ressource.html?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="apercu-ressource.html?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-etablissements.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="apercu-ressource.html?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="apercu-ressource.html?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="apercu-ressource.html?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="apercu-aide.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="apercu-legal.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
</div>
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
</div>
<div style="border-top:1px solid #e3e5e8">
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="apercu-legal.html#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="apercu-legal.html#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>