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

83
design/resources/views/labs/essai.blade.php Normal file
View file

@ -0,0 +1,83 @@
@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 border-[#e3e5e8] bg-[#fef7e0]">
<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 border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#0b57d0] hover:text-white">← Labs</a>
<div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
<h1 class="flex-1 text-2xl font-extrabold tracking-tight">Premiers pas dans le shell</h1></div>
<span class="border border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-white p-6 lg:col-span-3" aria-labelledby="t-consignes">
<h2 id="t-consignes" class="text-2xl font-extrabold">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-[#fef7e0] 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-[#fef7e0] 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-[#fef7e0] 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-[#fef7e0] 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-[#fef7e0] px-1 font-mono">echo</code>.</span></li>
</ol>
</article>
<div class="border border-[#e3e5e8] rounded-2xl bg-[#13233A] font-mono text-white lg:col-span-6">
<div class="flex items-center gap-2 border-b border-[#e3e5e8] bg-[#0d192b] px-4 py-2">
<span class="h-3 w-3 bg-[#ec3013]"></span><span class="h-3 w-3 bg-[#fef7e0]"></span><span class="h-3 w-3 bg-[#e6f4ea]"></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 border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-5">
<h2 class="text-xl font-extrabold">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 border-[#dadce0] rounded-lg bg-white"></span><span class="h-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-3 border border-[#dadce0] rounded-lg bg-white"></span><span class="h-3 border border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-white p-5">
<summary class="cursor-pointer text-xl font-extrabold">Indice</summary>
<p class="mt-3 font-medium">La commande <code class="bg-[#fef7e0] 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 border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-left text-lg font-extrabold transition-transform active:shadow-none aria-pressed:bg-[#fef7e0]"><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 border-[#dadce0] rounded-lg bg-[#e6f4ea]' : '');
});
barre.forEach(function (b, i) { b.className = 'h-3 border border-[#dadce0] rounded-lg ' + (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';
}
SyllabusTerminal.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

86
design/resources/views/labs/index.blade.php Normal file
View file

@ -0,0 +1,86 @@
@extends('layouts.vitrine')
@section('titre', 'Labs')
@section('contenu')
<section class="relative overflow-hidden border-b border-[#e3e5e8] bg-white">
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="flotte absolute right-[30%] bottom-10 h-9 w-9 rounded-full border border-[#e3e5e8] rounded-2xl bg-[#fef7e0] [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 border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-bold">Catalogue</p>
<div class="min-w-0 flex-1"><p data-public="E" class="mb-2 inline-flex items-center gap-2 rounded-full border border-[#b8c1cf] bg-white px-3 py-1 text-sm font-bold text-[#0b5e3c]">Pour les élèves</p>
<h1 class="mt-8 max-w-5xl text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl xl:text-7xl">Des labs qui se corrigent tout seuls.</h1></div>
<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-extrabold">Filtrer</h2>
<button type="button" class="border border-[#dadce0] rounded-lg bg-black px-3 py-1 font-extrabold text-white">Tous</button>
<button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#fef7e0]">Linux</button>
<button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#e6f4ea]">Réseau</button>
<button type="button" class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-extrabold hover:bg-[#eef0fd]">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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-7">
<span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#e6f4ea] p-7">
<span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-7">
<span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#fce8e6] p-7">
<span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-white p-7">
<span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-7">
<span class="absolute -right-4 -top-4 border border-[#dadce0] rounded-lg bg-white px-3 py-1 text-sm font-extrabold">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-extrabold 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 border-[#dadce0] rounded-lg 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

137
design/resources/views/labs/web.blade.php Normal file
View file

File diff suppressed because one or more lines are too long