82 lines
6.5 KiB
PHP
82 lines
6.5 KiB
PHP
@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
|