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

370 lines
53 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.

{{-- resources/views/accueil.blade.php --}}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Paillasse — Une vraie machine Linux pour chaque élève</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
.etoile { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.zigzag { background: linear-gradient(135deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px, linear-gradient(45deg, transparent 50%, #000 50% 62%, transparent 62%) 0 0 / 16px 16px; }
@keyframes flotte { 0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-10px) rotate(var(--r, 0deg)); } }
.flotte { animation: flotte 6s ease-in-out infinite; }
@keyframes clignote { 50% { opacity: 0; } }
.curseur { animation: clignote 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .flotte, .curseur { animation: none; } }
</style>
<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') }}" @if(request()->routeIs('fonctionnalites')) aria-current="page" @endif 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') }}" @if(request()->routeIs('etablissements')) aria-current="page" @endif 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') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif 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') }}" @if(request()->routeIs('pourquoi')) aria-current="page" @endif 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>
{{-- HERO --}}
<section class="relative overflow-hidden">
{{-- décor flottant --}}
<div aria-hidden="true" class="pointer-events-none absolute inset-0">
<span class="etoile flotte absolute left-[46%] top-10 h-12 w-12 bg-[#FFD23F] [--r:14deg]"></span>
<span class="flotte absolute right-[6%] top-[46%] h-7 w-7 rotate-12 border-4 border-black bg-[#FF6FB5] [--r:12deg] [animation-delay:1s]"></span>
<span class="flotte absolute bottom-16 left-[38%] h-9 w-9 rounded-full border-4 border-black bg-[#7CF2C0] [animation-delay:2s]"></span>
<span class="zigzag absolute bottom-10 left-5 h-4 w-40 lg:left-10"></span>
<span class="absolute right-[40%] top-[62%] hidden h-5 w-5 border-4 border-black lg:block"></span>
</div>
<div class="relative mx-auto grid max-w-7xl gap-14 px-5 pb-24 pt-14 lg:grid-cols-12 lg:px-10 lg:pt-20">
<div class="lg:col-span-7">
<p class="inline-block -rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Du lycée au master · rien à installer</p>
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-[7.5rem]">
Une vraie<br>
machine Linux<br>
pour <span class="relative inline-block -rotate-1 border-4 border-black bg-[#C4B5FD] px-3 shadow-[6px_6px_0px_#000000]">chaque</span><br>
élève.
</h1>
<p class="mt-10 max-w-xl text-xl font-medium leading-relaxed text-black">
Debian ou l’IDE s’ouvre dans le navigateur en moins de 5&nbsp;secondes. Les labs se corrigent tout seuls, et vous voyez qui avance, qui bloque, qui lève la main.
</p>
<div class="mt-10 flex flex-wrap items-center gap-4">
<a href="{{ route('labs.essai') }}" class="group flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">
Lancer un lab d'essai
<span class="font-mono transition-transform group-hover:translate-x-1" aria-hidden="true">→</span>
</a>
<a href="{{ route('labs.index') }}" class="border-4 border-black bg-white px-6 py-4 text-lg font-extrabold hover:bg-[#7CF2C0]">Voir les labs</a>
</div>
</div>
{{-- collage de droite --}}
<div class="relative min-h-[560px] lg:col-span-5">
<div class="absolute left-0 top-4 h-[360px] w-[88%] translate-x-4 translate-y-4 border-4 border-black bg-[#FF6FB5]" aria-hidden="true"></div>
<figure class="absolute left-0 top-4 h-[360px] w-[88%] overflow-hidden border-4 border-black bg-white">
<div class="flex h-full flex-col" aria-label="Classe en direct : 12 élèves, leur étape et leurs alertes">
<div class="flex items-center justify-between gap-3 border-b-4 border-black bg-[#FFD23F] px-4 py-2"><span class="font-black">2nde NSI · en direct</span><span class="font-mono text-xs font-semibold">24 élèves connectés</span></div>
<ul class="grid flex-1 grid-cols-3 gap-2 p-3 sm:grid-cols-4">
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#FFD23F] text-sm font-black">L</span><span class="text-sm font-extrabold leading-none">Léa</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#C4B5FD] text-sm font-black">Y</span><span class="text-sm font-extrabold leading-none">Yanis</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#FF6FB5] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rotate-12 bg-white text-sm font-black">N</span><span class="text-sm font-extrabold leading-none">Nora</span><span class="font-mono text-[11px] font-semibold leading-none">main levée</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#7CF2C0] text-sm font-black">T</span><span class="text-sm font-extrabold leading-none">Tom</span><span class="font-mono text-[11px] font-semibold leading-none">étape 4</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#C4B5FD] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FFD23F] text-sm font-black">I</span><span class="text-sm font-extrabold leading-none">Inès</span><span class="font-mono text-[11px] font-semibold leading-none">étape 2</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#ec3013] text-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-white text-black text-sm font-black">S</span><span class="text-sm font-extrabold leading-none">Sami</span><span class="font-mono text-[11px] font-semibold leading-none">bloqué 9 min</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black -rotate-6 bg-[#FF6FB5] text-sm font-black">C</span><span class="text-sm font-extrabold leading-none">Chloé</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] text-sm font-black">A</span><span class="text-sm font-extrabold leading-none">Adam</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#FFD23F] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-white text-sm font-black">M</span><span class="text-sm font-extrabold leading-none">Maël</span><span class="font-mono text-[11px] font-semibold leading-none">étape 4</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rotate-6 bg-[#FF6FB5] text-sm font-black">J</span><span class="text-sm font-extrabold leading-none">Jade</span><span class="font-mono text-[11px] font-semibold leading-none">étape 1</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-white p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FFD23F] text-sm font-black">H</span><span class="text-sm font-extrabold leading-none">Hugo</span><span class="font-mono text-[11px] font-semibold leading-none">étape 3</span></li>
<li class="flex flex-col justify-between gap-1 border-2 border-black bg-[#7CF2C0] p-2"><span class="grid h-8 w-8 place-items-center border-2 border-black rounded-full bg-[#C4B5FD] text-sm font-black">L</span><span class="text-sm font-extrabold leading-none">Lina</span><span class="font-mono text-[11px] font-semibold leading-none">5/5 ✓</span></li>
</ul>
</div>
</figure>
<span class="absolute -right-2 top-0 rotate-6 border-2 border-black bg-[#7CF2C0] px-3 py-1 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">&lt; 5 s</span>
<div class="absolute bottom-0 right-0 w-[92%] -rotate-2 border-4 border-black bg-[#13233A] font-mono text-sm text-white shadow-[8px_8px_0px_#FFD23F]" aria-label="Terminal élève, démonstration xterm.js">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#0d192b] px-4 py-2">
<span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#FFD23F]"></span><span class="h-3 w-3 bg-[#7CF2C0]"></span>
<span class="ml-2 text-xs text-white">lea@debian · xterm.js</span>
</div>
<div id="xterm-hero" class="h-[170px] bg-[#13233A] p-2"></div>
</div>
<div class="absolute left-0 bottom-48 rotate-3 border-4 border-black bg-[#FFD23F] px-4 py-3 shadow-[5px_5px_0px_#000000] lg:-left-8">
<p class="font-extrabold">Nora lève la main</p>
<p class="text-sm font-medium">bloquée depuis 8 min</p>
</div>
</div>
</div>
</section>
{{-- BANDEAU FORMATIONS --}}
<div class="grid grid-cols-2 border-y-4 border-black text-lg font-extrabold sm:grid-cols-3 lg:grid-cols-5">
<p class="border-b-4 border-r-4 border-black bg-[#FFD23F] px-6 py-5 lg:border-b-0">Lycée NSI</p>
<p class="border-b-4 border-black bg-white px-6 py-5 sm:border-r-4 lg:border-b-0">BTS SIO · SISR et SLAM</p>
<p class="border-b-4 border-r-4 border-black bg-[#7CF2C0] px-6 py-5 sm:border-r-0 lg:border-b-0 lg:border-r-4">BTS CIEL</p>
<p class="border-b-4 border-black bg-white px-6 py-5 sm:border-b-0 sm:border-r-4">BUT · Licence pro</p>
<p class="col-span-2 border-black bg-[#C4B5FD] px-6 py-5 sm:col-span-1">Master · École d’ingé</p>
</div>
{{-- PRÉSENTATION --}}
<section class="relative overflow-hidden bg-white" aria-labelledby="titre-presentation">
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute right-[8%] top-16 h-16 w-16 bg-[#FF6FB5] [--r:-10deg]"></span>
<span aria-hidden="true" class="zigzag pointer-events-none absolute bottom-6 left-10 h-4 w-48"></span>
<div class="relative mx-auto max-w-7xl px-5 pb-32 pt-24 lg:px-10">
<div class="grid gap-8 lg:grid-cols-12">
<h2 id="titre-presentation" class="text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl lg:col-span-8 xl:text-7xl">
Trois choses que votre salle info ne fait pas.
</h2>
<p class="self-end text-lg font-medium lg:col-span-4">
Chaque élève a sa propre VM Debian, sur un cloud hébergé en France. Rien ne s'installe sur les postes du lycée.
</p>
</div>
<ul class="mt-20 grid gap-12 lg:grid-cols-3 lg:gap-8">
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:-rotate-1">
<span class="absolute -right-4 -top-4 rotate-6 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Élève</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="font-mono text-5xl font-semibold xl:text-6xl">01</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Un terminal en moins de 5&nbsp;secondes</h3>
<p class="mt-3 text-base font-medium">Des VM déjà démarrées attendent en réserve. L'élève clique, la console s'ouvre, même sur un vieux PC ou un Chromebook.</p>
</div>
</div>
</li>
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:translate-y-12">
<span class="absolute -left-4 -top-4 -rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Correction</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="self-end font-mono text-5xl font-semibold xl:text-6xl">02</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Les labs se corrigent tout seuls</h3>
<p class="mt-3 text-base font-medium">Chaque étape est vérifiée directement dans la VM. L'élève sait tout de suite s'il a réussi, avec un indice s'il bloque.</p>
</div>
</div>
</li>
<li class="relative min-h-[340px] xl:aspect-square border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] transition-transform hover:-translate-y-1 lg:rotate-1">
<span class="absolute -bottom-4 right-6 rotate-2 border-2 border-black bg-[#FFD23F] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Enseignant</span>
<div class="flex h-full flex-col justify-between gap-8 pb-4">
<span class="font-mono text-5xl font-semibold xl:text-6xl">03</span>
<div>
<h3 class="text-2xl font-black leading-tight tracking-tight xl:text-3xl">Toute la classe sur un écran</h3>
<p class="mt-3 text-base font-medium">Une tuile par élève : son étape, sa main levée, son blocage. Vous ouvrez sa console pour l'aider sans vous déplacer.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
{{-- SÉANCE EN DIRECT --}}
<section class="border-t-4 border-black bg-[#FFD23F]" aria-labelledby="titre-seance">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-12 lg:px-10">
<div class="lg:col-span-5">
<p class="inline-block rotate-2 border-2 border-black bg-white px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Séance en direct</p>
<h2 id="titre-seance" class="mt-8 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Vous voyez qui bloque avant qu'il abandonne.</h2>
<p class="mt-8 max-w-md text-lg font-medium">Une tuile par élève : son étape, sa main levée, le temps passé sans avancer. Un clic ouvre sa console en lecture, un second vous donne la main.</p>
<ul class="mt-8 flex flex-wrap gap-3 text-sm font-extrabold">
<li class="border-2 border-black bg-white px-3 py-1">Lecture de la console</li>
<li class="border-2 border-black bg-[#7CF2C0] px-3 py-1">Prise de main</li>
<li class="border-2 border-black bg-[#ec3013] px-3 py-1 text-white">Mode examen</li>
</ul>
<div class="mt-8 flex flex-wrap gap-4">
<a href="{{ route('suivi') }}" class="inline-flex items-center gap-3 border-4 border-black bg-black px-5 py-3 font-extrabold text-white shadow-[4px_4px_0px_#ec3013] hover:bg-[#ec3013]">Voir le suivi d’une classe <span class="font-mono" aria-hidden="true">→</span></a>
<a href="{{ route('examen') }}" class="inline-flex items-center border-4 border-black bg-white px-5 py-3 font-extrabold hover:bg-[#FF6FB5]">Essayer le mode examen</a>
</div>
</div>
<div class="relative lg:col-span-7">
<div class="border-4 border-black bg-white p-5 shadow-[10px_10px_0px_#000000]">
<div class="flex flex-wrap items-center justify-between gap-3 border-b-4 border-black pb-4">
<p class="text-xl font-black">2nde NSI · Groupe B</p>
<p class="font-mono text-sm font-semibold">Premiers pas dans le shell · 24 élèves</p>
</div>
<ul class="mt-5 grid grid-cols-2 gap-3 sm:grid-cols-4">
<li class="border-2 border-black bg-[#7CF2C0] p-3"><p class="font-extrabold">Léa M.</p><p class="font-mono text-sm">étape 5/5 ✓</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Yanis B.</p><p class="font-mono text-sm">étape 3/5</p></li>
<li class="-rotate-2 border-4 border-black bg-[#FF6FB5] p-3 shadow-[4px_4px_0px_#000000]"><p class="font-extrabold">Nora K.</p><p class="font-mono text-sm">main levée</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Tom R.</p><p class="font-mono text-sm">étape 4/5</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Inès D.</p><p class="font-mono text-sm">étape 2/5</p></li>
<li class="border-2 border-black bg-[#ec3013] p-3 text-white"><p class="font-extrabold">Sami L.</p><p class="font-mono text-sm">bloqué 9 min</p></li>
<li class="border-2 border-black bg-[#7CF2C0] p-3"><p class="font-extrabold">Chloé P.</p><p class="font-mono text-sm">étape 5/5 ✓</p></li>
<li class="border-2 border-black bg-white p-3"><p class="font-extrabold">Adam F.</p><p class="font-mono text-sm">étape 3/5</p></li>
</ul>
</div>
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute -right-3 -top-6 h-14 w-14 bg-[#C4B5FD] [--r:20deg]"></span>
</div>
</div>
</section>
{{-- AJOUTER LES ÉLÈVES --}}
<section class="relative overflow-hidden border-t-4 border-black bg-white" aria-labelledby="titre-eleves">
<span aria-hidden="true" class="flotte pointer-events-none absolute left-[55%] top-12 h-8 w-8 rounded-full border-4 border-black bg-[#FFD23F]"></span>
<div class="relative mx-auto max-w-7xl px-5 py-24 lg:px-10">
<h2 id="titre-eleves" class="max-w-3xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Toute la classe connectée en un quart d'heure.</h2>
<ol class="mt-16 grid border-4 border-black md:grid-cols-2 lg:grid-cols-5">
<li class="border-b-4 border-black bg-[#C4B5FD] p-6 lg:border-b-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">01</span><p class="mt-10 text-xl font-black leading-tight">Code ou QR de classe</p><p class="mt-2 font-medium">Vous validez chaque demande.</p></li>
<li class="border-b-4 border-black bg-white p-6 md:border-l-4 lg:border-b-0 lg:border-l-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">02</span><p class="mt-10 text-xl font-black leading-tight">Import CSV</p><p class="mt-2 font-medium">Nom, prénom, groupe. Rien de plus.</p></li>
<li class="border-b-4 border-black bg-[#7CF2C0] p-6 lg:border-b-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">03</span><p class="mt-10 text-xl font-black leading-tight">Saisie rapide</p><p class="mt-2 font-medium">Une ligne par élève.</p></li>
<li class="border-b-4 border-black bg-white p-6 md:border-l-4 lg:border-b-0 lg:border-l-0 lg:border-r-4"><span class="font-mono text-sm font-semibold">04</span><p class="mt-10 text-xl font-black leading-tight">Fiche de connexion</p><p class="mt-2 font-medium">Identifiant et QR imprimés, sans e-mail pour les mineurs.</p></li>
<li class="relative bg-[#FF6FB5] p-6 md:col-span-2 lg:col-span-1"><span class="absolute -top-4 right-4 rotate-3 border-2 border-black bg-white px-2 py-0.5 text-xs font-extrabold shadow-[3px_3px_0px_#000000]">Bientôt</span><span class="font-mono text-sm font-semibold">05</span><p class="mt-10 text-xl font-black leading-tight">Moodle LTI 1.3</p><p class="mt-2 font-medium">Les élèves arrivent depuis votre ENT.</p></li>
</ol>
</div>
</section>
{{-- ÉTABLISSEMENTS --}}
<section class="border-t-4 border-black bg-[#13233A] text-white" aria-labelledby="titre-etab">
<div class="mx-auto grid max-w-7xl gap-12 px-5 py-24 lg:grid-cols-12 lg:px-10">
<h2 id="titre-etab" class="text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl lg:col-span-5">Ça passe le filtrage du lycée.</h2>
<ul class="grid gap-6 sm:grid-cols-2 lg:col-span-7">
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FFD23F]"><p class="font-mono text-3xl font-semibold text-[#FFD23F]">443</p><p class="mt-3 text-lg font-bold">Tout passe par HTTPS. Aucun port à ouvrir sur le réseau de l'établissement.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#7CF2C0] sm:translate-y-8"><p class="font-mono text-3xl font-semibold text-[#7CF2C0]">FR</p><p class="mt-3 text-lg font-bold">Hébergé en France. Données d'élèves minimales, supprimées 90 jours après l'archivage.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#FF6FB5]"><p class="font-mono text-3xl font-semibold text-[#FF6FB5]">0 install</p><p class="mt-3 text-lg font-bold">Vieux PC, Chromebook, connexion lente : un navigateur suffit.</p></li>
<li class="border-4 border-white p-6 shadow-[6px_6px_0px_#C4B5FD] sm:translate-y-8"><p class="font-mono text-3xl font-semibold text-[#C4B5FD]">NAT</p><p class="mt-3 text-lg font-bold">Les VM ne sortent pas sur Internet. Seuls les miroirs de paquets répondent.</p></li>
</ul>
</div>
</section>
{{-- APPEL FINAL --}}
<section class="relative overflow-hidden border-t-4 border-black bg-[#ec3013]" aria-labelledby="titre-cta">
<span aria-hidden="true" class="zigzag pointer-events-none absolute right-10 top-10 h-4 w-48"></span>
<span aria-hidden="true" class="etoile flotte pointer-events-none absolute bottom-10 right-[30%] h-12 w-12 bg-[#FFD23F] [--r:-8deg]"></span>
<div class="relative mx-auto flex max-w-7xl flex-col items-start gap-10 px-5 py-24 lg:px-10">
<h2 id="titre-cta" class="max-w-4xl text-6xl font-black leading-[0.9] tracking-tighter text-white sm:text-7xl xl:text-8xl">Votre prochain TP commence dans 5&nbsp;secondes.</h2>
<div class="flex flex-wrap gap-4">
<a href="{{ route('labs.essai') }}" class="flex items-center gap-4 border-4 border-black bg-white px-6 py-4 text-lg font-extrabold shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#FFD23F] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Lancer un lab d'essai <span class="font-mono" aria-hidden="true">→</span></a>
<a href="{{ route('etablissements') }}" class="border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white hover:bg-[#13233A]">Équiper mon établissement</a>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-espaces">
<div class="mx-auto max-w-7xl px-5 py-20 lg:px-10">
<p class="inline-block -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Un espace pour chacun</p>
<h2 id="t-espaces" class="mt-6 max-w-4xl text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Prof, élève, vie scolaire, académie.</h2>
<ul class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
<li><a href="{{ route('cockpit') }}" class="group flex h-full flex-col border-4 border-black bg-[#13233A] text-white p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Prof</span><span class="mt-4 text-2xl font-black leading-tight">Cockpit prof</span><span class="mt-2 flex-1 font-semibold">Alertes, mains levées, examen, DM : tout se pilote sur un écran.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="{{ route('espace.eleve') }}" class="group flex h-full flex-col border-4 border-black bg-[#7CF2C0] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Élève</span><span class="mt-4 text-2xl font-black leading-tight">Espace élève</span><span class="mt-2 flex-1 font-semibold">Calendrier, devoirs, examens à venir et exercices pour s’entraîner.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="{{ route('vie.scolaire') }}" class="group flex h-full flex-col border-4 border-black bg-[#C4B5FD] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">CPE · intendance</span><span class="mt-4 text-2xl font-black leading-tight">Vie scolaire</span><span class="mt-2 flex-1 font-semibold">Alertes toutes classes, conseils de classe, licences et factures.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
<li><a href="{{ route('academie') }}" class="group flex h-full flex-col border-4 border-black bg-[#FFD23F] p-6 shadow-[6px_6px_0px_#000000] transition-transform hover:-translate-y-1"><span class="self-start border-2 border-black bg-white px-2 py-0.5 font-mono text-xs font-semibold text-black">Académie</span><span class="mt-4 text-2xl font-black leading-tight">Multi-établissements</span><span class="mt-2 flex-1 font-semibold">Usage et compétences agrégés, sans donnée nominative.</span><span class="mt-5 font-extrabold underline underline-offset-4 group-hover:no-underline">Découvrir →</span></a></li>
</ul>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-label="Lever la main">
<div class="mx-auto max-w-7xl px-5 py-16 lg:px-10">
<div class="relative grid items-center gap-10 border-4 border-black bg-black p-8 text-white shadow-[10px_10px_0px_#FF6FB5] sm:p-12 md:grid-cols-[auto_1fr]">
<div class="grid h-40 w-40 -rotate-6 place-items-center rounded-full border-4 border-white bg-[#E6FF3F] text-black shadow-[6px_6px_0px_#FFFFFF]" role="img" aria-label="Moins 40 décibels"><span class="flex flex-col items-center gap-1 text-center"><span class="font-mono text-5xl font-semibold leading-none">−40</span><span class="text-2xl font-black leading-none">dB</span></span></div>
<div>
<p class="text-4xl font-black leading-tight tracking-tight sm:text-5xl">Vous devenez le roi du silence grâce à la fonction <span class="bg-[#E6FF3F] px-2 text-black">« Lever la main »</span>.</p>
<p class="mt-6 text-2xl font-bold">Vos élèves n’auront plus que le droit de tousser ou de respirer&nbsp;!</p>
</div>
</div>
</div>
</section>
<section class="border-t-4 border-black bg-white" aria-labelledby="t-pdf">
<div class="mx-auto grid max-w-7xl items-center gap-10 px-5 py-16 lg:grid-cols-12 lg:px-10">
<div class="border-4 border-black bg-white shadow-[10px_10px_0px_#000000] lg:col-span-6"><div class="aspect-[10/7]"><svg viewBox="0 0 600 420" class="h-full w-full" role="img" aria-label="Un smiley qui sourit à côté des cours à télécharger">
<defs><pattern id="pts" width="24" height="24" patternUnits="userSpaceOnUse"><circle cx="6" cy="6" r="3" fill="#000"/></pattern></defs>
<rect x="330" y="0" width="270" height="420" fill="url(#pts)"/>
<path d="M0 50 C150 20 270 80 320 170 L310 250 C230 215 120 240 0 285 Z" fill="#FF3E9A"/>
<path d="M190 262 C225 160 350 80 470 76 C575 72 606 170 566 262 C526 352 404 400 292 380 C210 364 172 318 190 262 Z" fill="#35E0E8"/>
<g transform="translate(486 104) rotate(14)"><path d="M-20 -26 H10 L22 -14 V28 H-20 Z" fill="#fff" stroke="#000" stroke-width="5" stroke-linejoin="round"/><path d="M10 -26 V-14 H22" fill="#FFD23F" stroke="#000" stroke-width="5" stroke-linejoin="round"/><rect x="-26" y="-2" width="38" height="16" fill="#ec3013" stroke="#000" stroke-width="5"/><text x="-7" y="11" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="12" fill="#fff">PDF</text></g>
<path d="M540 190 l7 15 16 2 -12 11 3 16 -14 -8 -14 8 3 -16 -12 -11 16 -2 z" fill="#FFD23F" stroke="#000" stroke-width="4" stroke-linejoin="round"/>
<g transform="rotate(-10 200 170)">
<circle cx="208" cy="178" r="112" fill="#000"/>
<circle cx="200" cy="170" r="112" fill="#FFDD57" stroke="#000" stroke-width="8"/>
<ellipse cx="160" cy="140" rx="13" ry="20" fill="#000"/>
<ellipse cx="240" cy="140" rx="13" ry="20" fill="#000"/>
<path d="M128 192 C150 250 250 250 272 192 Z" fill="#000" stroke="#000" stroke-width="8" stroke-linejoin="round"/>
<path d="M142 198 H258 C254 212 248 218 244 222 H156 C150 216 146 210 142 198 Z" fill="#fff"/>
</g>
<g font-family="Archivo, sans-serif" font-weight="900" transform="rotate(-8 400 350)">
<text x="208" y="352" font-size="40" fill="#FF3E9A" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<text x="205" y="349" font-size="40" fill="#000" letter-spacing="1">SERVEZ-VOUS&#160;!</text>
<rect x="204" y="362" width="340" height="26" fill="#fff" stroke="#000" stroke-width="3"/><text x="214" y="381" font-size="15" fill="#000" letter-spacing="1">COURS · TD · CORRECTIONS EN PDF</text>
</g>
</svg></div></div>
<div class="lg:col-span-6">
<p class="inline-block -rotate-2 border-2 border-black bg-[#35E0E8] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Gratuit · à télécharger</p>
<h2 id="t-pdf" class="mt-6 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">Tous les cours se téléchargent en PDF.</h2>
<p class="mt-5 text-xl font-medium leading-relaxed">CM complet, TD prêt à imprimer avec ses cases à remplir, correction à part, QCM papier. Pour la classe, pour réviser chez soi ou pour un jour sans réseau.</p>
<ul class="mt-8 grid gap-3 sm:grid-cols-2">
<li><a href="{{ route('cours.cm') }}" class="flex items-center gap-4 border-4 border-black bg-[#FFD23F] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>CM complet<span class="block font-mono text-xs font-semibold">Adressage IPv4 · 12 pages</span></span></a></li>
<li><a href="{{ route('td.imprimable') }}" class="flex items-center gap-4 border-4 border-black bg-[#7CF2C0] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>TD à imprimer<span class="block font-mono text-xs font-semibold">Étapes + cases à remplir</span></span></a></li>
<li><a href="apercu-td-imprimable.html#correction" class="flex items-center gap-4 border-4 border-black bg-[#FF6FB5] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Correction<span class="block font-mono text-xs font-semibold">Réservée au prof</span></span></a></li>
<li><a href="{{ route('cours.index') }}" class="flex items-center gap-4 border-4 border-black bg-[#C4B5FD] p-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:-translate-y-0.5"><svg viewBox="0 0 40 48" class="h-12 w-10 shrink-0" role="img" aria-label="PDF"><path d="M3 3 H27 L37 13 V45 H3 Z" fill="#fff" stroke="#000" stroke-width="3" stroke-linejoin="round"/><path d="M27 3 V13 H37" fill="#FFD23F" stroke="#000" stroke-width="3" stroke-linejoin="round"/><rect x="0" y="22" width="32" height="14" fill="#ec3013" stroke="#000" stroke-width="3"/><text x="16" y="33" text-anchor="middle" font-family="Archivo,sans-serif" font-weight="900" font-size="11" fill="#fff">PDF</text></svg><span>Tous les cours<span class="block font-mono text-xs font-semibold">Par cursus, du SNT au master</span></span></a></li>
</ul>
</div>
</div>
</section>
</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>
<script>
document.addEventListener('DOMContentLoaded', function () {
PaillasseTerminal.mount(document.getElementById('xterm-hero'), {
user: 'lea', host: 'debian', fontSize: 13,
demo: ['mkdir projets && cd projets', 'echo "Léa" > notes.txt', 'ls -la', 'cat notes.txt']
});
});
</script>
</body>
</html>