208 lines
48 KiB
PHP
208 lines
48 KiB
PHP
<!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>
|