adam/Paillasse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Maquettes Claude Design avec visio de classe

Browse source
This commit is contained in:
Adam Belkacemi 2026-10-06 23:28:18 +02:00
parent 238070ae54
commit 236d2d3567
243 changed files with 27992 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

82
design/_backup-ludique/resources/views/labs/essai.blade.php Normal file
View file

@ -0,0 +1,82 @@
@extends('layouts.vitrine')
@section('titre', 'Lab d’essai · Premiers pas dans le shell')
@push('head')
<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>
@endpush
@section('contenu')
<section class="border-b-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-4 px-5 py-4 lg:px-10">
<a href="{{ route('labs.index') }}" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">← Labs</a>
<h1 class="flex-1 text-2xl font-black tracking-tight">Premiers pas dans le shell</h1>
<span class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold">Lab d’essai</span>
</div>
</section>
<section class="mx-auto grid max-w-7xl gap-8 px-5 py-10 lg:grid-cols-12 lg:px-10" aria-label="Espace de lab">
<article class="border-4 border-black bg-white p-6 shadow-[6px_6px_0px_#000000] lg:col-span-3" aria-labelledby="t-consignes">
<h2 id="t-consignes" class="text-2xl font-black">Consignes</h2>
<ol id="consignes" class="mt-5 space-y-2 font-medium">
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">1</span><span>Affiche le dossier courant avec <code class="bg-[#FFD23F] px-1 font-mono">pwd</code>.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">2</span><span>Liste son contenu avec <code class="bg-[#FFD23F] px-1 font-mono">ls -la</code>.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">3</span><span>Crée un dossier <code class="bg-[#FFD23F] px-1 font-mono">projets</code> et entre dedans.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">4</span><span>Crée un fichier <code class="bg-[#FFD23F] px-1 font-mono">notes.txt</code>.</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">5</span><span>Écris ton prénom dedans avec <code class="bg-[#FFD23F] px-1 font-mono">echo</code>.</span></li>
</ol>
</article>
<div class="border-4 border-black bg-[#13233A] font-mono text-white shadow-[8px_8px_0px_#FF6FB5] lg:col-span-6">
<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-sm">debian-lab · console 1 · xterm.js</span>
</div>
<div id="xterm-lab" class="h-[440px] bg-[#13233A] p-3"></div>
</div>
<aside class="flex flex-col gap-6 lg:col-span-3" aria-label="Vérification">
<div class="border-4 border-black bg-[#7CF2C0] p-5 shadow-[6px_6px_0px_#000000]">
<h2 class="text-xl font-black">Vérification</h2>
<p id="etape-texte" class="mt-2 font-extrabold" aria-live="polite">Tape ta première commande</p>
<div id="etape-barre" class="mt-3 grid grid-cols-5 gap-1"><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span></div>
<p class="mt-4 text-sm font-semibold">Chaque étape se valide dès que la commande est juste.</p>
</div>
<details class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<summary class="cursor-pointer text-xl font-black">Indice</summary>
<p class="mt-3 font-medium">La commande <code class="bg-[#FFD23F] px-1 font-mono">touch</code> crée un fichier vide.</p>
</details>
<button type="button" onclick="const on=this.getAttribute('aria-pressed')!=='true';this.setAttribute('aria-pressed',on);this.querySelector('span').textContent=on?'Main levée · le prof est prévenu':'Lever la main';" aria-pressed="false" class="border-4 border-black bg-[#FF6FB5] px-5 py-4 text-left text-lg font-extrabold shadow-[6px_6px_0px_#000000] transition-transform active:translate-x-1 active:translate-y-1 active:shadow-none aria-pressed:bg-[#FFD23F]"><span>Lever la main</span></button>
</aside>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
var etapes = document.querySelectorAll('#consignes > li');
var barre = document.querySelectorAll('#etape-barre > span');
var texte = document.getElementById('etape-texte');
var fait = [false, false, false, false, false], vus = { pwd: false, ls: false };
function maj(sh) {
var h = sh.home, p = h + '/projets', n = p + '/notes.txt';
fait[0] = vus.pwd;
fait[1] = fait[0] && vus.ls;
fait[2] = fait[1] && sh.dirs.has(p) && sh.cwd === p;
fait[3] = fait[2] && sh.files.has(n);
fait[4] = fait[3] && (sh.files.get(n) || '').trim().length > 0;
var k = fait.indexOf(false); if (k === -1) k = 5;
etapes.forEach(function (li, i) {
li.className = 'flex gap-3 p-2 ' + (i < k ? 'line-through decoration-2' : i === k ? 'border-2 border-black bg-[#7CF2C0]' : '');
});
barre.forEach(function (b, i) { b.className = 'h-3 border-2 border-black ' + (i < k ? 'bg-black' : 'bg-white'); });
texte.textContent = k === 5 ? 'Lab terminé : 5 / 5 ✓' : k === 0 ? 'Tape ta première commande' : 'Étape ' + k + ' / 5 validée';
}
PaillasseTerminal.mount(document.getElementById('xterm-lab'), {
user: 'eleve', host: 'debian-lab', focus: true,
welcome: '\x1b[2mDebian GNU/Linux 13 · VM prête en 3,2 s\x1b[0m\nTape \x1b[93mhelp\x1b[0m pour voir les commandes.\n',
onCommand: function (line, sh) {
line.split(/&&|;/).forEach(function (c) { c = c.trim().split(/\s+/)[0]; if (c === 'pwd') vus.pwd = true; if (c === 'ls' && vus.pwd) vus.ls = true; });
maj(sh);
}
});
});
</script>
@endsection

85
design/_backup-ludique/resources/views/labs/index.blade.php Normal file
View file

@ -0,0 +1,85 @@
@extends('layouts.vitrine')
@section('titre', 'Labs')
@section('contenu')
<section class="relative overflow-hidden border-b-4 border-black bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="etoile flotte absolute right-[10%] top-12 h-12 w-12 bg-[#FF6FB5] [--r:12deg]"></span><span class="flotte absolute right-[30%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#FFD23F] [animation-delay:1.5s]"></span></div>
<div class="relative mx-auto max-w-7xl px-5 pb-20 pt-14 lg:px-10 lg:pt-20">
<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]">Catalogue</p>
<h1 class="mt-8 max-w-5xl text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl xl:text-8xl">Des labs qui se corrigent tout seuls.</h1>
<p class="mt-8 max-w-2xl text-xl font-medium leading-relaxed">Chaque lab est une vraie VM Debian, ou plusieurs reliées en réseau. L’élève suit les consignes, la vérification valide chaque étape.</p>
</div>
</section>
<section class="mx-auto max-w-7xl px-5 py-16 lg:px-10" aria-labelledby="titre-catalogue">
<div class="flex flex-wrap items-center gap-3">
<h2 id="titre-catalogue" class="mr-4 text-2xl font-black">Filtrer</h2>
<button type="button" class="border-2 border-black bg-black px-3 py-1 font-extrabold text-white">Tous</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#FFD23F]">Linux</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#7CF2C0]">Réseau</button>
<button type="button" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-[#C4B5FD]">Services</button>
</div>
<ul class="mt-14 grid gap-10 pb-12 sm:grid-cols-2 lg:grid-cols-3">
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -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]">Linux</span>
<span class="font-mono text-5xl font-semibold">01</span>
<div>
<p class="font-mono text-sm font-semibold">Lycée NSI</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Premiers pas dans le shell</h3>
<p class="mt-3 font-medium">Se déplacer, créer des dossiers, lire des fichiers.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#7CF2C0] p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
<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]">Linux</span>
<span class="font-mono text-5xl font-semibold">02</span>
<div>
<p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Utilisateurs et droits</h3>
<p class="mt-3 font-medium">Créer des comptes, régler chmod et chown, tester les accès.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] 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]">Réseau</span>
<span class="font-mono text-5xl font-semibold">03</span>
<div>
<p class="font-mono text-sm font-semibold">BTS CIEL</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Adressage IPv4</h3>
<p class="mt-3 font-medium">Configurer deux VM pour qu’elles se voient, puis diagnostiquer.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FF6FB5] p-7 shadow-[8px_8px_0px_#000000] 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]">Réseau</span>
<span class="font-mono text-5xl font-semibold">04</span>
<div>
<p class="font-mono text-sm font-semibold">BUT · Licence pro</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Routage statique avec Kathará</h3>
<p class="mt-3 font-medium">Trois routeurs en conteneurs, une topologie à faire communiquer.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-white p-7 shadow-[8px_8px_0px_#000000] md:translate-y-10">
<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]">Services</span>
<span class="font-mono text-5xl font-semibold">05</span>
<div>
<p class="font-mono text-sm font-semibold">BTS SIO · SISR et SLAM</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Serveur web Apache</h3>
<p class="mt-3 font-medium">Installer, publier une page, lire les journaux.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
<li class="relative flex aspect-square flex-col justify-between border-4 border-black bg-[#FFD23F] p-7 shadow-[8px_8px_0px_#000000] -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]">Services</span>
<span class="font-mono text-5xl font-semibold">06</span>
<div>
<p class="font-mono text-sm font-semibold">Master · École d’ingé</p>
<h3 class="mt-2 text-3xl font-black leading-tight tracking-tight">Annuaire Samba AD</h3>
<p class="mt-3 font-medium">Monter un contrôleur de domaine et joindre un client.</p>
<a href="{{ route('labs.essai') }}" class="mt-5 inline-flex items-center gap-3 border-2 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#ec3013]">Lancer le lab <span class="font-mono" aria-hidden="true">→</span></a>
</div>
</li>
</ul>
</section>
@endsection

160
design/_backup-ludique/resources/views/labs/web.blade.php Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lab web · 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">
@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>
<section class="border-b-4 border-black bg-[#7CF2C0]">
<div class="mx-auto flex max-w-[1500px] flex-wrap items-center gap-4 px-5 py-4 lg:px-8">
<a href="{{ route('labs.index') }}" class="border-2 border-black bg-white px-3 py-1 font-extrabold hover:bg-black hover:text-white">← Labs</a>
<h1 class="flex-1 text-2xl font-black tracking-tight">Lab web · Mon premier serveur Apache</h1>
<span class="border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold">SRV-1 · BTS SIO, BUT R&amp;T, NSI</span>
</div>
</section>
<div class="mx-auto grid max-w-[1500px] gap-6 px-5 py-8 lg:grid-cols-12 lg:px-8">
<aside class="grid content-start gap-5 lg:col-span-3">
<article class="border-4 border-black bg-white p-5 shadow-[6px_6px_0px_#000000]">
<h2 class="text-2xl font-black">Consignes</h2>
<ol id="w-etapes" class="mt-4 grid gap-2 font-medium [&_code]:break-all [&_code]:bg-[#FFD23F] [&_code]:px-1 [&_code]:font-mono [&_code]:text-sm">
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">1</span><span>Installe le serveur : <code>sudo apt install apache2</code></span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">2</span><span>Vérifie qu’il tourne : <code>systemctl status apache2</code></span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">3</span><span>Remplace la page d’accueil : <code>echo "&lt;h1&gt;Bonjour&lt;/h1&gt;" &gt; /var/www/html/index.html</code></span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">4</span><span>Ouvre <code>http://192.168.10.10</code> dans le navigateur et actualise</span></li>
<li class="flex gap-3 p-2"><span class="font-mono font-semibold">5</span><span>Teste aussi en ligne de commande : <code>curl localhost</code></span></li>
</ol>
</article>
<div class="border-4 border-black bg-[#FFD23F] p-5 shadow-[6px_6px_0px_#000000]"><p class="text-xl font-black">Vérification</p><p id="w-texte" class="mt-1 font-extrabold" aria-live="polite">Étape 0 / 5</p><div id="w-barre" class="mt-3 grid grid-cols-5 gap-1"><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span><span class="h-3 border-2 border-black bg-white"></span></div></div>
</aside>
<section class="flex min-w-0 flex-col border-4 border-black bg-[#13233A] shadow-[8px_8px_0px_#FF6FB5] lg:col-span-5" aria-label="Terminal de la VM">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#0d192b] px-4 py-2 text-white"><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 font-mono text-sm">web-01 · 192.168.10.10 · xterm.js</span></div>
<div id="w-term" class="h-[520px] p-3"></div>
</section>
<section class="flex min-w-0 flex-col border-4 border-black bg-white shadow-[8px_8px_0px_#000000] lg:col-span-4" aria-label="Navigateur relié à la VM">
<div class="flex items-center gap-2 border-b-4 border-black bg-[#C4B5FD] px-3 py-2">
<button type="button" id="w-reload" class="grid h-9 w-9 place-items-center border-2 border-black bg-white font-black hover:bg-[#FFD23F]" aria-label="Actualiser">↻</button>
<p class="flex-1 truncate border-2 border-black bg-white px-3 py-1 font-mono text-sm font-semibold">http://192.168.10.10/</p>
</div>
<iframe id="w-nav" title="Navigateur de la VM" class="h-[520px] w-full bg-white" sandbox=""></iframe>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var etat = { apache: false, actif: false, statut: false, vu: false, curl: false }, sh = null;
var DEF = '<!doctype html><html><body style="font-family:sans-serif;margin:0"><div style="background:#d7003a;color:#fff;padding:24px"><h1 style="margin:0">Apache2 Debian Default Page</h1><p style="margin:8px 0 0">It works!</p></div><p style="padding:24px">This is the default welcome page used to test the correct operation of the Apache2 server after installation on Debian systems.</p></body></html>';
var ERR = '<!doctype html><html><body style="font-family:sans-serif;padding:32px;color:#201e1d"><h1>Impossible de se connecter</h1><p>Le serveur 192.168.10.10 ne répond pas sur le port 80.</p></body></html>';
var PAGE = '/var/www/html/index.html';
function page() { return sh && sh.files.has(PAGE) ? sh.files.get(PAGE) : ''; }
function recharger() { document.getElementById('w-nav').srcdoc = etat.actif ? (page() || '<p>403 Forbidden</p>') : ERR; if (etat.actif) { etat.vu = page().indexOf('It works') === -1 && page().length > 0; } maj(); }
function maj() {
var f = [etat.apache, etat.statut, etat.apache && page().indexOf('It works') === -1 && page().length > 0, etat.vu, etat.curl], k = 0;
while (k < 5 && f[k]) k++;
document.querySelectorAll('#w-etapes > li').forEach(function (li, i) { li.className = 'flex gap-3 p-2 ' + (i < k ? 'line-through decoration-2' : i === k ? 'border-2 border-black bg-[#7CF2C0]' : ''); });
document.querySelectorAll('#w-barre > span').forEach(function (b, i) { b.className = 'h-3 border-2 border-black ' + (i < k ? 'bg-black' : 'bg-white'); });
document.getElementById('w-texte').textContent = k === 5 ? 'Lab terminé : 5 / 5 ✓' : 'Étape ' + k + ' / 5';
}
var CMD = {
apt: function (a, s) {
if (a[0] !== 'install' || a.indexOf('apache2') === -1) return a[0] === 'update' ? 'Lecture des listes de paquets… Fait' : 'Usage : apt install <paquet>';
s.dirs.add('/var/www'); s.dirs.add('/var/www/html'); s.dirs.add('/etc/apache2'); s.files.set(PAGE, DEF); etat.apache = true; etat.actif = true;
return 'Lecture des listes de paquets… Fait\nLes NOUVEAUX paquets suivants seront installés : apache2 apache2-bin apache2-data\nParamétrage de apache2 (2.4.62-1) …\nCreated symlink /etc/systemd/system/multi-user.target.wants/apache2.service.';
},
systemctl: function (a) {
if (a[1] !== 'apache2') return 'Usage : systemctl status|start|stop|restart apache2';
if (!etat.apache) return false;
if (a[0] === 'stop') { etat.actif = false; return ''; }
if (a[0] === 'start' || a[0] === 'restart') { etat.actif = true; return ''; }
etat.statut = true;
return '\x1b[1;92m●\x1b[0m apache2.service - The Apache HTTP Server\n Loaded: loaded (/lib/systemd/system/apache2.service; enabled)\n Active: ' + (etat.actif ? '\x1b[1;92mactive (running)\x1b[0m' : 'inactive (dead)');
},
curl: function (a) { if (!etat.actif) return 'curl: (7) Failed to connect to ' + (a[0] || 'localhost') + ' port 80: Connexion refusée'; etat.curl = true; return page(); }
};
PaillasseTerminal.mount(document.getElementById('w-term'), {
user: 'eleve', host: 'web-01', commands: CMD, focus: true,
welcome: '\x1b[2mDebian GNU/Linux 13 · VM web-01 prête\x1b[0m\nLe navigateur à droite est relié à cette VM.',
onCommand: function (l, s) { sh = s; recharger(); }
});
document.getElementById('w-reload').addEventListener('click', recharger);
setTimeout(recharger, 300);
});
</script>
</main>
<footer class="border-t-4 border-black bg-white">
<div class="mx-auto grid max-w-7xl gap-10 px-5 py-14 sm:grid-cols-2 lg:grid-cols-4 lg:px-10">
<div>
<p class="text-2xl font-black tracking-tight">Paillasse</p>
<p class="mt-3 font-medium">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
</div>
<nav aria-label="Produit"><p class="font-mono text-sm font-semibold uppercase">Produit</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('cockpit') }}" class="hover:underline">Cockpit prof</a></li><li><a href="{{ route('espace.eleve') }}" class="hover:underline">Espace élève</a></li><li><a href="{{ route('aide') }}" class="hover:underline">Aide et tutoriels</a></li><li><a href="{{ route('labs.index') }}" class="hover:underline">Labs</a></li><li><a href="{{ route('fonctionnalites') }}" class="hover:underline">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" class="hover:underline">Cours gratuits</a></li><li><a href="{{ route('bibliotheque') }}" class="hover:underline">Bibliothèque</a></li><li><a href="{{ route('ide') }}" class="hover:underline">IDE en ligne</a></li><li><a href="{{ route('generateur') }}" class="hover:underline">Générateur de TD</a></li><li><a href="{{ route('labs.web') }}" class="hover:underline">Lab web</a></li><li><a href="{{ route('tarifs') }}" class="hover:underline">Tarifs</a></li><li><a href="{{ route('pourquoi') }}" class="hover:underline">Pourquoi ce projet ?</a></li></ul></nav>
<nav aria-label="Établissements"><p class="font-mono text-sm font-semibold uppercase">Établissements</p><ul class="mt-4 space-y-2 font-bold"><li><a href="{{ route('etablissements') }}" class="hover:underline">Équiper une classe</a></li><li><a href="{{ route('login') }}" class="hover:underline">Se connecter</a></li></ul></nav>
<div class="self-start justify-self-start border-2 border-black bg-[#7CF2C0] px-4 py-3 font-mono text-sm font-semibold shadow-[4px_4px_0px_#000000]">● Tous les services fonctionnent</div>
</div>
<div class="border-t-4 border-black bg-white">
<ul class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-8 px-5 py-8 lg:px-10" aria-label="Engagements">
<li class="grid h-40 w-40 shrink-0 -rotate-3 place-items-center rounded-full border-4 border-black bg-white text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Hébergé en</span><span class="flex h-7 w-11 border-2 border-black" aria-hidden="true"><span class="flex-1 bg-[#0055A4]"></span><span class="flex-1 bg-white"></span><span class="flex-1 bg-[#EF4135]"></span></span><span class="text-[10px] font-bold leading-tight">France</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-3 place-items-center rounded-full border-4 border-black bg-[#FFD23F] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Données</span><span class="font-mono text-3xl font-semibold leading-none">RGPD</span><span class="text-[10px] font-bold leading-tight">minimisées</span></span></li>
<li class="grid h-40 w-40 shrink-0 -rotate-6 place-items-center rounded-full border-4 border-black bg-[#7CF2C0] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Référentiels</span><span class="font-mono text-3xl font-semibold leading-none">20</span><span class="text-[10px] font-bold leading-tight">cursus couverts</span></span></li>
<li class="grid h-40 w-40 shrink-0 rotate-6 place-items-center rounded-full border-4 border-black bg-[#FF6FB5] text-center shadow-[4px_4px_0px_#000000] outline outline-2 outline-offset-[-10px] outline-black"><span class="flex max-w-[6.5rem] flex-col items-center gap-1.5"><span class="text-[10px] font-extrabold uppercase tracking-wide leading-none">Essai</span><span class="font-mono text-3xl font-semibold leading-none">0 €</span><span class="text-[10px] font-bold leading-tight">sans CB</span></span></li>
</ul>
</div>
<div class="border-t-4 border-black bg-[#FFD23F]">
<div class="mx-auto flex max-w-7xl flex-wrap items-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><p class="flex-1 font-extrabold">Fait avec <span class="text-[#ec3013]" aria-label="amour">♥</span> par Adam Belkacemi</p><nav aria-label="Informations légales"><ul class="flex flex-wrap gap-x-4 gap-y-1 text-sm font-bold"><li><a href="{{ route('legal') }}#mentions" class="underline underline-offset-4">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" class="underline underline-offset-4">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" class="underline underline-offset-4">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" class="underline underline-offset-4">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" class="underline underline-offset-4">Sous-traitance</a></li></ul></nav></div>
</div>
</footer>
</body>
</html>