Paillasse/design/_backup-ludique/resources/views/td/imprimable.blade.php

190 lines
40 KiB
PHP
Raw Normal View History

<!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>