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

192 lines
42 KiB
PHP
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>Mon espace élève · 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">
<div class="flex items-center gap-3"><span class="grid h-11 w-11 place-items-center border-2 border-black bg-[#FFD23F] font-mono text-sm font-semibold">SN</span><div><p class="font-black leading-tight">Sarah Nguyen</p><p class="text-sm font-semibold">BTS SIO 1 · Groupe A</p></div></div>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Mon espace</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">Aujourd’hui</span></a></li><li><a href="#calendrier" 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"><rect x="3" y="4" width="18" height="18"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span class="flex-1">Calendrier</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</span></a></li><li><a href="#examens" 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">Examens à venir</span></a></li><li><a href="#entrainement" 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 18 6-6-6-6M8 6l-6 6 6 6"/></svg><span class="flex-1">S’entraîner</span></a></li><li><a href="#progres" 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="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M10 14.7V17c0 .6-.5 1-1 1.2C7.8 18.8 7 20.2 7 22M14 14.7V17c0 .6.5 1 1 1.2 1.2.6 2 2 2 3.8M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg><span class="flex-1">Ma progression</span></a></li></ul>
<button type="button" id="e-main" class="mt-6 flex h-12 w-full items-center justify-center gap-2 border-2 border-black bg-[#FF6FB5] text-sm font-extrabold 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="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><span>Lever la main</span></button>
<p id="e-main-info" class="mt-2 hidden text-center text-xs font-bold" aria-live="polite">Main levée · 2<sup>e</sup> dans la file</p>
</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">Mon espace élève</p><h1 class="mt-1 text-4xl font-black tracking-tight">Bonjour Sarah&nbsp;!</h1><p class="mt-1 font-semibold">Mardi 29 septembre · 2 devoirs cette semaine · 1 examen dans 9 jours</p></div>
<a href="{{ route('labs.essai') }}" class="inline-flex h-11 items-center gap-2 border-2 border-black bg-black px-4 text-sm font-extrabold text-white shadow-[3px_3px_0px_#ec3013] hover:bg-[#13233A]"><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="m6 3 14 9-14 9V3z"/></svg>Reprendre le lab VLAN · étape 6</a>
</div>
<ul class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4" aria-label="Mes 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">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">16,0</p><p class="mt-3 text-xs font-bold">+1,2 sur 4 semaines</p></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">Labs réussis</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">11/14</p><p class="mt-3 text-xs font-bold">dont 3 sans indice</p></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">Devoirs à rendre</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">2</p><p class="mt-3 text-xs font-bold">le prochain vendredi</p></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">Série</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">6 j</p><p class="mt-3 text-xs font-bold">d’entraînement d’affilée</p></li>
</ul>
<div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.4fr)_minmax(0,1fr)]">
<section id="calendrier" class="border-2 border-black bg-white" aria-labelledby="t-cal">
<div class="flex items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-cal" 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"><rect x="3" y="4" width="18" height="18"/><path d="M16 2v4M8 2v4M3 10h18"/></svg><span id="e-mois">Septembre – octobre 2026</span></h2><div class="flex gap-1"><button type="button" id="e-prev" class="grid h-9 w-9 place-items-center border-2 border-black font-black hover:bg-[#FFFBEA]" aria-label="Semaine précédente">←</button><button type="button" id="e-next" class="grid h-9 w-9 place-items-center border-2 border-black font-black hover:bg-[#FFFBEA]" aria-label="Semaine suivante">→</button></div></div>
<div class="grid grid-cols-7 border-b-2 border-black bg-[#F6F5F1] font-mono text-[11px] font-semibold uppercase"><p class="px-2 py-2">Lun</p><p class="px-2 py-2">Mar</p><p class="px-2 py-2">Mer</p><p class="px-2 py-2">Jeu</p><p class="px-2 py-2">Ven</p><p class="px-2 py-2">Sam</p><p class="px-2 py-2">Dim</p></div>
<div id="e-grille" class="grid grid-cols-7"></div>
<div class="flex flex-wrap gap-4 border-t-2 border-black p-3 text-xs font-bold"><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#ec3013"></span>Examen</span><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#C4B5FD"></span>Devoir</span><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#FFD23F"></span>Quiz</span><span class="flex items-center gap-2"><span class="h-3 w-3 border-2 border-black" style="background:#7CF2C0"></span>Cours / TP</span></div>
</section>
<section class="border-2 border-black bg-white" aria-labelledby="t-jour">
<div class="border-b-2 border-black p-4"><h2 id="t-jour" class="text-lg font-black">Au programme</h2><p id="e-jour-titre" class="font-mono text-xs font-semibold">mardi 29/09</p></div>
<ol id="e-jour" class="divide-y-2 divide-black"></ol>
</section>
</div>
<div class="mt-6 grid gap-6 xl:grid-cols-2">
<section id="devoirs" class="border-2 border-black bg-white" aria-labelledby="t-dev">
<div class="flex items-center justify-between border-b-2 border-black bg-[#C4B5FD] p-4"><h2 id="t-dev" 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>Mes devoirs</h2><span class="font-mono text-xs font-semibold">2 à rendre</span></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="text-sm font-semibold">Réseaux · M. Belkacemi · <span class="font-mono">ven. 03/10 · 23 h 59</span></p></div><a href="{{ route('devoirs') }}" class="border-2 border-black px-3 py-1 text-xs font-extrabold bg-white hover:bg-black hover:text-white">À rendre</a><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><div class="h-full bg-black" style="width:60%"></div></div><span class="font-mono text-xs font-semibold">60 %</span></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="text-sm font-semibold">Linux · Mme Roche · <span class="font-mono">lun. 06/10 · 18 h</span></p></div><a href="{{ route('ide') }}" class="border-2 border-black px-3 py-1 text-xs font-extrabold bg-white hover:bg-black hover:text-white">À rendre</a><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><div class="h-full bg-black" style="width:20%"></div></div><span class="font-mono text-xs font-semibold">20 %</span></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="text-sm font-semibold">Réseaux · <span class="font-mono">hier</span></p></div><a href="{{ route('cours.cm') }}" class="border-2 border-black px-3 py-1 text-xs font-extrabold bg-[#7CF2C0]">Rendu · 17/20</a><div class="col-span-2 flex items-center gap-2"><div class="h-2 flex-1 border-2 border-black"><div class="h-full bg-black" style="width:100%"></div></div><span class="font-mono text-xs font-semibold">100 %</span></div></li></ul>
</section>
<section id="examens" class="border-2 border-black bg-white" aria-labelledby="t-exa">
<div class="flex items-center justify-between border-b-2 border-black bg-[#ec3013] p-4 text-white"><h2 id="t-exa" 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>Examens à venir</h2></div>
<ul class="divide-y-2 divide-black"><li class="flex items-center gap-4 p-4"><span class="grid h-12 w-14 shrink-0 place-items-center border-2 border-black bg-[#FFFBEA] font-mono text-sm font-semibold">J-9</span><div class="min-w-0 flex-1"><p class="font-bold">E6 blanc SISR</p><p class="text-sm font-semibold">Administration systèmes et réseaux · <span class="font-mono">jeu. 08/10 · 8 h</span></p></div><a href="{{ route('examen') }}" class="shrink-0 border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Réviser</a></li><li class="flex items-center gap-4 p-4"><span class="grid h-12 w-14 shrink-0 place-items-center border-2 border-black bg-[#FFFBEA] font-mono text-sm font-semibold">J-14</span><div class="min-w-0 flex-1"><p class="font-bold">Contrôle · Adressage IPv4</p><p class="text-sm font-semibold">Réseaux · 1 h · <span class="font-mono">mar. 13/10 · 10 h</span></p></div><a href="{{ route('examen') }}" class="shrink-0 border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Réviser</a></li><li class="flex items-center gap-4 p-4"><span class="grid h-12 w-14 shrink-0 place-items-center border-2 border-black bg-[#FFFBEA] font-mono text-sm font-semibold">—</span><div class="min-w-0 flex-1"><p class="font-bold">QCM flash · Commandes Linux</p><p class="text-sm font-semibold">Début d’heure · 5 min · <span class="font-mono">chaque lundi</span></p></div><a href="{{ route('quiz.eleve') }}" class="shrink-0 border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">Réviser</a></li></ul>
<p class="border-t-2 border-black bg-[#FFFBEA] p-3 text-sm font-semibold">Pendant un examen, reste sur la page : les changements d’onglet et de fenêtre sont signalés au prof.</p>
</section>
</div>
<section id="entrainement" class="mt-6 border-2 border-black bg-white" aria-labelledby="t-ent">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-2 border-black p-4"><h2 id="t-ent" 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="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg>S’entraîner</h2>
<div id="e-niv" class="flex text-sm font-bold"><button type="button" data-n="all" class="h-10 border-2 border-black px-3 bg-black text-white">Tout</button><button type="button" data-n="base" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Revoir les bases</button><button type="button" data-n="prog" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Dans le programme</button><button type="button" data-n="plus" class="h-10 border-2 border-black px-3 -ml-0.5 bg-white">Pour aller plus loin</button></div></div>
<ul id="e-exos" class="grid gap-px bg-black sm:grid-cols-2 xl:grid-cols-4"></ul>
</section>
<section id="progres" 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="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="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M10 14.7V17c0 .6-.5 1-1 1.2C7.8 18.8 7 20.2 7 22M14 14.7V17c0 .6.5 1 1 1.2 1.2.6 2 2 2 3.8M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>Ma progression par compétence</h2><p class="font-mono text-xs font-semibold">référentiel BTS SIO</p></div>
<ul class="mt-4 grid gap-3 md:grid-cols-2"><li><div class="flex justify-between text-sm font-bold"><span>Installer et configurer un poste</span><span class="font-mono">85 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:85%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Adressage IPv4 et sous-réseaux</span><span class="font-mono">72 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:72%;background:#7CF2C0"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>VLAN et commutation</span><span class="font-mono">64 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:64%;background:#FFD23F"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Scripts Bash</span><span class="font-mono">48 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:48%;background:#FF6FB5"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Sécurité des accès</span><span class="font-mono">55 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:55%;background:#FFD23F"></div></div></li><li><div class="flex justify-between text-sm font-bold"><span>Services réseau (DHCP, DNS)</span><span class="font-mono">30 %</span></div><div class="mt-1 h-3 border-2 border-black"><div class="h-full" style="width:30%;background:#FF6FB5"></div></div></li></ul>
</section>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var C = { exam: '#ec3013', dm: '#C4B5FD', quiz: '#FFD23F', cours: '#7CF2C0' };
var EV = {
'2026-09-28': [['quiz','8:00','Quiz flash · Commandes Linux'],['cours','8:05','CM · VLAN et commutation']],
'2026-09-29': [['cours','10:00','TP · Lab VLAN et routage'],['dm','23:59','QCM · Lecture CM VLAN (rendu)']],
'2026-09-30': [['cours','14:00','TD · Découper un réseau IPv4']],
'2026-10-01': [['cours','9:00','CM · Scripts Bash']],
'2026-10-02': [['cours','13:00','TP · Services DHCP']],
'2026-10-03': [['dm','23:59','DM 3 · Plan d’adressage']],
'2026-10-05': [['quiz','8:00','Quiz flash · Réseaux']],
'2026-10-06': [['dm','18:00','TP maison · Scripts Bash']],
'2026-10-08': [['exam','8:00','E6 blanc SISR · 1 h 30']],
'2026-10-13': [['exam','10:00','Contrôle · Adressage IPv4']]
};
var debut = new Date(2026, 8, 28), sel = '2026-09-29';
var MOIS = ['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];
function k(d) { return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); }
function cal() {
var g = document.getElementById('e-grille'), h = '';
for (var i = 0; i < 14; i++) { var d = new Date(debut); d.setDate(d.getDate() + i); var key = k(d), ev = EV[key] || [], today = key === '2026-09-29';
h += '<button type="button" data-d="' + key + '" class="flex min-h-[92px] flex-col items-start gap-1 border-b-2 border-r-2 border-black p-2 text-left [&:nth-child(7n)]:border-r-0 ' + (key === sel ? 'bg-[#FFFBEA] outline outline-4 -outline-offset-4 outline-black' : 'hover:bg-[#FFFBEA]') + (i > 6 ? ' [&]:border-b-0' : '') + '"><span class="font-mono text-sm font-semibold ' + (today ? 'bg-black px-1 text-white' : '') + '">' + d.getDate() + '</span>' + ev.map(function (e) { return '<span class="w-full truncate border-2 border-black px-1 text-[11px] font-bold" style="background:' + C[e[0]] + ';color:' + (e[0] === 'exam' ? '#fff' : '#000') + '">' + e[2] + '</span>'; }).join('') + '</button>'; }
g.innerHTML = h;
var f = new Date(debut); f.setDate(f.getDate() + 13);
document.getElementById('e-mois').textContent = (debut.getMonth() === f.getMonth() ? MOIS[debut.getMonth()] : MOIS[debut.getMonth()] + ' – ' + MOIS[f.getMonth()]) + ' ' + f.getFullYear();
g.querySelectorAll('button').forEach(function (b) { b.addEventListener('click', function () { sel = b.dataset.d; cal(); jour(); }); });
}
function jour() { var ev = EV[sel] || [], p = sel.split('-');
document.getElementById('e-jour-titre').textContent = new Date(+p[0], +p[1] - 1, +p[2]).toLocaleDateString('fr-FR', { weekday: 'long', day: '2-digit', month: '2-digit' });
document.getElementById('e-jour').innerHTML = ev.length ? ev.map(function (e) { return '<li class="flex items-center gap-3 p-4"><span class="w-14 shrink-0 font-mono text-sm font-semibold">' + e[1] + '</span><span class="h-8 w-1.5 shrink-0 border-2 border-black" style="background:' + C[e[0]] + '"></span><span class="font-bold">' + e[2] + '</span></li>'; }).join('') : '<li class="p-6 text-center font-bold">Rien de prévu. Un petit exercice&nbsp;?</li>'; }
document.getElementById('e-prev').addEventListener('click', function () { debut.setDate(debut.getDate() - 7); cal(); });
document.getElementById('e-next').addEventListener('click', function () { debut.setDate(debut.getDate() + 7); cal(); });
cal(); jour();
var X = [
['base','Réseaux','Convertir binaire ↔ décimal','Générateur · 10 questions','5 min','apercu-generateur.html'],
['base','Linux','Les 10 commandes du shell','Quiz d’entraînement','5 min','apercu-quiz-eleve.html'],
['prog','Réseaux','Découper un réseau IPv4','TD à imprimer ou en ligne','30 min','apercu-td-imprimable.html'],
['prog','Linux','Mon premier serveur Apache','Lab web · terminal + navigateur','40 min','apercu-lab-web.html'],
['prog','Programmation','Scripts Bash : boucles','IDE · tests automatiques','20 min','apercu-ide.html'],
['prog','Bases de données','Requêtes SQL SELECT','IDE · SQL','20 min','apercu-ide.html'],
['plus','Programmation','Défis Python','HackerRank · gratuit','libre','https://www.hackerrank.com/domains/python'],
['plus','Data','Introduction à Python pour la data','DataCamp · 1er chapitre gratuit','libre','https://www.datacamp.com/courses/intro-to-python-for-data-science']];
var niv = { base: ['#FFFBEA','Revoir les bases'], prog: ['#7CF2C0','Dans le programme'], plus: ['#C4B5FD','Pour aller plus loin'] };
function exos(f) { document.getElementById('e-exos').innerHTML = X.filter(function (x) { return f === 'all' || x[0] === f; }).map(function (x) { var ext = x[5].indexOf('http') === 0;
return '<li class="flex flex-col bg-white p-4"><span class="self-start border-2 border-black px-1.5 font-mono text-[11px] font-semibold" style="background:' + niv[x[0]][0] + '">' + niv[x[0]][1] + '</span><p class="mt-3 font-mono text-xs font-semibold uppercase">' + x[1] + '</p><p class="mt-1 text-lg font-black leading-tight">' + x[2] + '</p><p class="mt-1 flex-1 text-sm font-semibold">' + x[3] + ' · ' + x[4] + '</p><a href="' + x[5] + '"' + (ext ? ' target="_blank" rel="noopener"' : '') + ' class="mt-4 self-start border-2 border-black px-3 py-1 text-xs font-extrabold hover:bg-black hover:text-white">' + (ext ? 'Ouvrir ↗' : 'Commencer →') + '</a></li>'; }).join(''); }
document.querySelectorAll('#e-niv button').forEach(function (b) { b.addEventListener('click', function () { document.querySelectorAll('#e-niv 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'); }); exos(b.dataset.n); }); });
exos('all');
var mb = document.getElementById('e-main');
mb.addEventListener('click', function () { var on = mb.getAttribute('aria-pressed') === 'true'; mb.setAttribute('aria-pressed', on ? 'false' : 'true'); mb.querySelector('span').textContent = on ? 'Lever la main' : 'Baisser la main'; mb.style.background = on ? '#FF6FB5' : '#000'; mb.style.color = on ? '#000' : '#fff'; document.getElementById('e-main-info').classList.toggle('hidden', on); });
});
</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>