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

189 lines
40 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

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

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TD à imprimer · 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; } }
@media print { header, footer, .print\:hidden { display: none !important; } body:not(.avec-corr) .corr { display: none; } .corr { break-before: page; } @page { size: A4; margin: 12mm; } }
</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>
<section class="border-b-4 border-black bg-white print:hidden">
<div class="mx-auto flex max-w-5xl flex-wrap items-end gap-6 px-5 py-12 lg:px-10">
<div class="flex-1">
<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]">TD prêt à imprimer</p>
<h1 class="mt-6 text-6xl font-black leading-[0.9] tracking-tighter">Découper un réseau IPv4.</h1>
<p class="mt-4 max-w-2xl text-xl font-medium">Étapes numérotées, cases à remplir, auto-évaluation. La correction s’imprime à part, pour le prof.</p>
</div>
<div class="grid gap-3">
<button type="button" onclick="document.body.classList.remove('avec-corr');window.print()" class="flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-4 py-3 text-left font-extrabold shadow-[5px_5px_0px_#000000] hover:bg-[#FFE680] active:translate-x-1 active:translate-y-1 active:shadow-none"><svg viewBox="0 0 40 48" class="h-10 w-8 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>Télécharger le TD<span class="block font-mono text-xs font-semibold">PDF · 2 pages A4</span></span></button>
<button type="button" onclick="document.body.classList.add('avec-corr');window.print()" class="flex items-center gap-3 border-4 border-black bg-[#FF6FB5] px-4 py-3 text-left font-extrabold shadow-[5px_5px_0px_#000000] active:translate-x-1 active:translate-y-1 active:shadow-none"><svg viewBox="0 0 40 48" class="h-10 w-8 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 + correction<span class="block font-mono text-xs font-semibold">PDF · version prof</span></span></button>
</div>
</div>
</section>
<div class="mx-auto max-w-5xl px-5 py-12 lg:px-10 print:max-w-none print:p-0">
<article class="border-4 border-black p-6 print:border-2" aria-label="Sujet">
<header class="flex flex-wrap items-start justify-between gap-4 border-b-4 border-black pb-4">
<div><p class="font-mono text-sm font-semibold">BTS SIO · BTS CIEL · BUT R&amp;T 1re année</p><h2 class="text-3xl font-black">TD · Découper un réseau IPv4</h2><p class="font-semibold">Durée : 1 h · Calculatrice interdite</p></div>
<div class="grid gap-2 font-bold"><p>Nom : <span class="inline-block h-9 w-48 border-2 border-black bg-white align-middle print:bg-white"></span></p><p>Classe : <span class="inline-block h-9 w-40 border-2 border-black bg-white align-middle print:bg-white"></span></p><p>Date : <span class="inline-block h-9 w-40 border-2 border-black bg-white align-middle print:bg-white"></span></p></div>
</header>
<p class="mt-4 border-2 border-black bg-[#FFFBEA] p-3 font-semibold">Rappel : un masque /n laisse 32 − n bits pour les hôtes. Nombre d’hôtes utilisables = 2<sup>(32 − n)</sup> − 2.</p>
<div class="mt-6 grid gap-6">
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">1</span><div><h3 class="text-2xl font-black">Lire l’adresse</h3><p class="mt-1 text-lg font-medium">L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.</p></div></div>
<div class="mt-5"><div class="grid gap-3 sm:grid-cols-2"><label class="grid gap-1 font-bold">Classe de l’adresse<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label><label class="grid gap-1 font-bold">Partie réseau (bits)<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label><label class="grid gap-1 font-bold">Partie hôte (bits)<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label><label class="grid gap-1 font-bold">Adresses totales<span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></label></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#7CF2C0] font-mono text-2xl font-semibold">2</span><div><h3 class="text-2xl font-black">Choisir le masque</h3><p class="mt-1 text-lg font-medium">Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.</p></div></div>
<div class="mt-5"><div class="flex flex-wrap gap-4 font-bold"><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>1 bit</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>2 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>3 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>4 bits</span></div><p class="mt-4 font-bold">Justification :</p><div class="mt-1 grid gap-2"><span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span><span class="inline-block h-9 w-full border-2 border-black bg-white align-middle print:bg-white"></span></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#C4B5FD] font-mono text-2xl font-semibold">3</span><div><h3 class="text-2xl font-black">Calculer la taille d’un sous-réseau</h3><p class="mt-1 text-lg font-medium">Avec ton masque, complète le tableau.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black"><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Adresse réseau</th><td class="h-12 border-2 border-black p-2"></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Masque (décimal)</th><td class="h-12 border-2 border-black p-2"></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Nombre d’adresses par sous-réseau</th><td class="h-12 border-2 border-black p-2"></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Hôtes utilisables</th><td class="h-12 border-2 border-black p-2"></td></tr></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FF6FB5] font-mono text-2xl font-semibold">4</span><div><h3 class="text-2xl font-black">Découper le réseau</h3><p class="mt-1 text-lg font-medium">Remplis le plan d’adressage des 4 sous-réseaux.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black text-left"><thead class="bg-black text-white"><tr><th class="border-2 border-black p-2">Sous-réseau</th><th class="border-2 border-black p-2">Adresse réseau</th><th class="border-2 border-black p-2">Plage d’hôtes</th><th class="border-2 border-black p-2">Broadcast</th></tr></thead><tbody><tr><td class="border-2 border-black p-2 font-bold">SR1 · Administration</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR2 · Élèves</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR3 · Serveurs</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR4 · Wi-Fi invités</td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td><td class="h-12 border-2 border-black p-2"></td></tr></tbody></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">5</span><div><h3 class="text-2xl font-black">Vérifier sur le lab</h3><p class="mt-1 text-lg font-medium">Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.</p></div></div>
<div class="mt-5"><div class="h-16 border-2 border-dashed border-black bg-[#13233A]"></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-white font-mono text-2xl font-semibold">6</span><div><h3 class="text-2xl font-black">Auto-évaluation</h3><p class="mt-1 text-lg font-medium">Coche ce que tu sais faire.</p></div></div>
<div class="mt-5"><ul class="grid gap-2 font-bold"><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais lire une notation CIDR</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais calculer un masque</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais trouver une adresse de broadcast</li></ul></div>
</section></div>
</article>
<article id="correction" class="corr mt-12 border-4 border-[#ec3013] p-6" aria-label="Correction">
<header class="flex items-center justify-between gap-4 border-b-4 border-[#ec3013] pb-4"><h2 class="text-3xl font-black">Correction</h2><span class="border-2 border-black bg-[#ec3013] px-3 py-1 font-extrabold text-white">Version prof</span></header>
<div class="mt-6 grid gap-6">
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">1</span><div><h3 class="text-2xl font-black">Lire l’adresse</h3><p class="mt-1 text-lg font-medium">L’établissement dispose du réseau 192.168.10.0/24. Complète les cases.</p></div></div>
<div class="mt-5"><div class="grid gap-3 sm:grid-cols-2"><label class="grid gap-1 font-bold">Classe de l’adresse<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">C</span></span></label><label class="grid gap-1 font-bold">Partie réseau (bits)<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">24</span></span></label><label class="grid gap-1 font-bold">Partie hôte (bits)<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">8</span></span></label><label class="grid gap-1 font-bold">Adresses totales<span class="border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">256</span></span></label></div></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#7CF2C0] font-mono text-2xl font-semibold">2</span><div><h3 class="text-2xl font-black">Choisir le masque</h3><p class="mt-1 text-lg font-medium">Il faut 4 sous-réseaux de même taille. Combien de bits emprunter ? Coche puis justifie.</p></div></div>
<div class="mt-5"><div class="flex flex-wrap gap-4 font-bold"><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>1 bit</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black">✕</span>2 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>3 bits</span><span class="flex items-center gap-2"><span class="grid h-7 w-7 place-items-center border-2 border-black"></span>4 bits</span></div><p class="mt-4 font-bold">Justification :</p><p class="mt-1 border-2 border-black p-3 font-medium"><span class="font-mono font-semibold text-[#ec3013]">2² = 4 sous-réseaux. Le masque passe de /24 à /26.</span></p></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#C4B5FD] font-mono text-2xl font-semibold">3</span><div><h3 class="text-2xl font-black">Calculer la taille d’un sous-réseau</h3><p class="mt-1 text-lg font-medium">Avec ton masque, complète le tableau.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black"><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Adresse réseau</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.0</span></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Masque (décimal)</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">255.255.255.192</span></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Nombre d’adresses par sous-réseau</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">64</span></td></tr><tr><th class="w-1/2 border-2 border-black bg-[#FFFBEA] p-2 text-left">Hôtes utilisables</th><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">62</span></td></tr></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FF6FB5] font-mono text-2xl font-semibold">4</span><div><h3 class="text-2xl font-black">Découper le réseau</h3><p class="mt-1 text-lg font-medium">Remplis le plan d’adressage des 4 sous-réseaux.</p></div></div>
<div class="mt-5"><table class="w-full border-collapse border-4 border-black text-left"><thead class="bg-black text-white"><tr><th class="border-2 border-black p-2">Sous-réseau</th><th class="border-2 border-black p-2">Adresse réseau</th><th class="border-2 border-black p-2">Plage d’hôtes</th><th class="border-2 border-black p-2">Broadcast</th></tr></thead><tbody><tr><td class="border-2 border-black p-2 font-bold">SR1 · Administration</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.0</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.1 – .62</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.63</span></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR2 · Élèves</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.64</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.65 – .126</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.127</span></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR3 · Serveurs</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.128</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.129 – .190</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.191</span></td></tr><tr><td class="border-2 border-black p-2 font-bold">SR4 · Wi-Fi invités</td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.192</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.193 – .254</span></td><td class="h-12 border-2 border-black p-2"><span class="font-mono font-semibold text-[#ec3013]">192.168.10.255</span></td></tr></tbody></table></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-[#FFD23F] font-mono text-2xl font-semibold">5</span><div><h3 class="text-2xl font-black">Vérifier sur le lab</h3><p class="mt-1 text-lg font-medium">Connecte-toi au lab « Adressage IPv4 » et configure le poste du SR2. Recopie la commande utilisée.</p></div></div>
<div class="mt-5"><p class="border-2 border-black p-3"><span class="font-mono font-semibold text-[#ec3013]">sudo ip addr add 192.168.10.65/26 dev eth0</span></p></div>
</section>
<section class="break-inside-avoid border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] print:shadow-none">
<div class="flex items-start gap-4"><span class="grid h-12 w-12 shrink-0 place-items-center border-4 border-black bg-white font-mono text-2xl font-semibold">6</span><div><h3 class="text-2xl font-black">Auto-évaluation</h3><p class="mt-1 text-lg font-medium">Coche ce que tu sais faire.</p></div></div>
<div class="mt-5"><ul class="grid gap-2 font-bold"><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais lire une notation CIDR</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais calculer un masque</li><li class="flex items-center gap-3"><span class="h-7 w-7 border-2 border-black"></span>Je sais trouver une adresse de broadcast</li></ul></div>
</section></div>
</article>
</div>
<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>
</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="apercu-legal.html#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="apercu-legal.html#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>