137 lines
29 KiB
PHP
137 lines
29 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Lab web · Syllabus</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>
|
||
<link rel="stylesheet" href="{{ asset('css/syllabus-theme.css') }}">
|
||
</head>
|
||
<body class="bg-white font-display text-black antialiased">
|
||
|
||
<header style="position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid #e3e5e8">
|
||
<nav aria-label="Navigation principale" style="position:relative;max-width:1200px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 40px">
|
||
<a href="{{ route('accueil') }}" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="{{ asset('images/logo-syllabus-icone.png') }}" alt="" style="height:32px;width:auto;display:block"><span style="font-family:Mulish,system-ui,sans-serif;font-weight:800;font-size:19px;color:#111827;letter-spacing:-0.01em;margin-left:-14px;position:relative">Syllabus</span></a>
|
||
<ul style="margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;flex:1;line-height:1.5"><li><details class="group"><summary @if(request()->routeIs('fonctionnalites') || request()->routeIs('ressource')) aria-current="page" @endif style="cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;height:36px;margin:-6px -12px;padding:0 12px;border-radius:999px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220" class="hover:bg-[#f1f3f4] group-open:bg-[#e8f0fe] group-open:text-[#0b57d0] aria-[current=page]:text-[#0b57d0] [&::-webkit-details-marker]:hidden">Fonctionnalités<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16" class="transition-transform duration-200 group-open:rotate-180" style="flex:none;opacity:.7"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
|
||
<div style="position:absolute;left:20px;right:20px;top:100%;margin-top:4px;z-index:50;max-width:1160px;margin-left:auto;margin-right:auto;box-sizing:border-box;max-height:calc(100vh - 90px);overflow:auto;border-radius:20px;background:#fff;border:1px solid #e3e5e8;box-shadow:0 24px 48px -16px rgba(15,23,42,.22)">
|
||
<div class="grid grid-cols-2 sm:grid-cols-3 min-[1100px]:grid-cols-5 [&>div:last-child]:col-span-2 min-[1100px]:[&>div:last-child]:col-span-1" style="gap:1px;background:#e3e5e8"><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#0b57d0"></span>Piloter la classe</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">En direct et au quotidien</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=cockpit" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="{{ route('ressource') }}?outil=visio" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Visio de classe</a></li><li><a href="{{ route('ressource') }}?outil=espace-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace élève</a></li><li><a href="{{ route('ressource') }}?outil=fiche-eleve" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Fiche élève</a></li><li><a href="{{ route('ressource') }}?outil=messagerie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Messagerie</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#137333"></span>Apprendre</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Cours, TP et code</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=cours" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="{{ route('ressource') }}?outil=labs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="{{ route('ressource') }}?outil=lab-web" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Lab web</a></li><li><a href="{{ route('ressource') }}?outil=ide" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Éditeur de code en ligne</a></li><li><a href="{{ route('ressource') }}?outil=maison" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Ressources à la maison</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#b06000"></span>Préparer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Prêt à projeter ou imprimer</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=bibliotheque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Bibliothèque du prof</a></li><li><a href="{{ route('ressource') }}?outil=banque" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Banque de sujets</a></li><li><a href="{{ route('ressource') }}?outil=generateur" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Générateur de TD</a></li><li><a href="{{ route('ressource') }}?outil=td-imprimable" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">TD à imprimer</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#c5221f"></span>Évaluer</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Quiz, examens, devoirs</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=quiz" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="{{ route('ressource') }}?outil=sujet" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Créer un sujet</a></li><li><a href="{{ route('ressource') }}?outil=devoirs" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Devoirs maison</a></li><li><a href="{{ route('ressource') }}?outil=correction" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Corriger les copies</a></li><li><a href="{{ route('ressource') }}?outil=export" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Export Pronote / ENT</a></li></ul></div><div style="padding:22px 20px 20px;min-width:0;background:#fff"><p style="margin:0;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#0b1220"><span aria-hidden="true" style="flex:none;width:10px;height:10px;border-radius:3px;background:#8430ce"></span>Établissement</p><p style="margin:4px 0 0 20px;min-height:32px;font-size:12px;line-height:16px;font-weight:500;color:#5f6368">Vie scolaire, direction, DSI</p><ul style="margin:10px 0 0 20px;padding:12px 0 0;border-top:1px solid #f1f3f4;list-style:none;display:grid;gap:2px"><li><a href="{{ route('ressource') }}?outil=vie-scolaire" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="{{ route('ressource') }}?outil=cohortes" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Suivi des cohortes</a></li><li><a href="{{ route('ressource') }}?outil=espace-etablissement" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Espace établissement</a></li><li><a href="{{ route('ressource') }}?outil=academie" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Académie</a></li><li><a href="{{ route('ressource') }}?outil=integration" style="display:block;margin:0 -8px;padding:6px 8px;border-radius:8px;font-size:14px;line-height:1.35;font-weight:600;color:#0b1220;text-decoration:none" class="hover:bg-[#f1f3f4] hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></div></div>
|
||
<div style="position:sticky;bottom:0;padding:14px 24px;border-top:1px solid #e3e5e8;background:#f8f9fa;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px"><span style="font-size:14px;font-weight:500;color:#5f6368">24 outils, chacun avec sa présentation et sa démo</span><a href="{{ route('fonctionnalites') }}" style="font-size:15px;font-weight:700;color:#0b57d0;text-decoration:none">Voir toutes les fonctionnalités →</a></div>
|
||
</div></details></li><li><a href="{{ route('cours.index') }}" @if(request()->routeIs('cours.index')) aria-current="page" @endif style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Cours</a></li><li><a href="{{ route('tarifs') }}" @if(request()->routeIs('tarifs')) aria-current="page" @endif style="display:inline-flex;align-items:center;height:24px;line-height:1.5;font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0] aria-[current=page]:text-[#0b57d0]">Tarifs</a></li></ul>
|
||
<div style="display:flex;align-items:center;gap:20px">
|
||
<a href="{{ route('login') }}" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
|
||
<a href="{{ route('register') }}" style="display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:#0b57d0;color:#fff;font-size:15px;font-weight:700;text-decoration:none">Créer une classe</a>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="border-b border-[#e3e5e8] bg-[#e6f4ea]">
|
||
<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 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">Lab web · Mon premier serveur Apache</h1></div>
|
||
<span class="border border-[#dadce0] rounded-lg bg-white px-3 py-1 font-mono text-sm font-semibold">SRV-1 · BTS SIO, BUT R&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 border-[#e3e5e8] rounded-2xl bg-white p-5">
|
||
<h2 class="text-2xl font-extrabold">Consignes</h2>
|
||
<ol id="w-etapes" class="mt-4 grid gap-2 font-medium [&_code]:break-all [&_code]:bg-[#fef7e0] [&_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 "<h1>Bonjour</h1>" > /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 border-[#e3e5e8] rounded-2xl bg-[#fef7e0] p-5"><p class="text-xl font-extrabold">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 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></div>
|
||
</aside>
|
||
<section class="flex min-w-0 flex-col border border-[#e3e5e8] rounded-2xl bg-[#13233A] lg:col-span-5" aria-label="Terminal de la VM">
|
||
<div class="flex items-center gap-2 border-b border-[#e3e5e8] bg-[#0d192b] px-4 py-2 text-white"><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 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 border-[#e3e5e8] rounded-2xl bg-white lg:col-span-4" aria-label="Navigateur relié à la VM">
|
||
<div class="flex items-center gap-2 border-b border-[#e3e5e8] bg-[#eef0fd] px-3 py-2">
|
||
<button type="button" id="w-reload" class="grid h-9 w-9 place-items-center border border-[#dadce0] rounded-lg bg-white font-extrabold hover:bg-[#fef7e0]" aria-label="Actualiser">↻</button>
|
||
<p class="flex-1 truncate border border-[#dadce0] rounded-lg 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 border-[#dadce0] rounded-lg bg-[#e6f4ea]' : ''); });
|
||
document.querySelectorAll('#w-barre > span').forEach(function (b, i) { b.className = 'h-3 border border-[#dadce0] rounded-lg ' + (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(); }
|
||
};
|
||
SyllabusTerminal.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 style="background:#f8f9fa;border-top:1px solid #e3e5e8;font-family:Mulish,system-ui,sans-serif">
|
||
<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 style="margin:0;font-size:18px;font-weight:800;color:#0b1220">Syllabus</p>
|
||
<p style="margin:10px 0 0;font-size:14px;line-height:1.6;font-weight:500;color:#5f6368">Cours, labs, IDE et examens en ligne, du lycée au master.</p>
|
||
</div>
|
||
<nav aria-label="Produit"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Produit</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('fonctionnalites') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="{{ route('cours.index') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="{{ route('labs.essai') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="{{ route('tarifs') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tarifs</a></li></ul></nav><nav aria-label="Outils"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Outils</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('ressource') }}?outil=cockpit" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Tableau de bord prof</a></li><li><a href="{{ route('ressource') }}?outil=labs" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">TP sur machine Linux</a></li><li><a href="{{ route('ressource') }}?outil=ide" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Éditeur de code</a></li><li><a href="{{ route('ressource') }}?outil=quiz" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Quiz flash</a></li><li><a href="{{ route('ressource') }}?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="{{ route('ressource') }}?outil=bibliotheque" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Bibliothèque du prof</a></li></ul></nav><nav aria-label="Établissements"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Établissements</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('etablissements') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="{{ route('ressource') }}?outil=vie-scolaire" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Vie scolaire</a></li><li><a href="{{ route('ressource') }}?outil=espace-etablissement" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Licences et factures</a></li><li><a href="{{ route('ressource') }}?outil=integration" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Intégration et sécurité</a></li></ul></nav><nav aria-label="Syllabus"><p style="margin:0;font-size:13px;font-weight:800;color:#0b1220">Syllabus</p><ul style="margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px"><li><a href="{{ route('aide') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="{{ route('legal') }}" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales et RGPD</a></li></ul></nav>
|
||
<p style="margin:0;align-self:start;font-size:14px;font-weight:600;color:#5f6368"><span style="color:#137333">●</span> Tous les services fonctionnent</p>
|
||
</div>
|
||
<div style="border-top:1px solid #e3e5e8"><ul aria-label="Engagements" style="max-width:1200px;margin:0 auto;padding:24px 20px;list-style:none;display:flex;flex-wrap:wrap;gap:12px 40px"><li style="font-size:14px;font-weight:700;color:#0b1220">Hébergé en France <span style="font-weight:500;color:#5f6368">· Paris</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">RGPD <span style="font-weight:500;color:#5f6368">· données minimisées</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">20 cursus <span style="font-weight:500;color:#5f6368">· du lycée au master</span></li><li style="font-size:14px;font-weight:700;color:#0b1220">0 € <span style="font-weight:500;color:#5f6368">· sans carte bancaire</span></li></ul>
|
||
</div>
|
||
<div style="border-top:1px solid #e3e5e8">
|
||
<div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-6 gap-y-2 px-5 py-4 lg:px-10"><nav aria-label="Informations légales"><ul class="flex flex-wrap justify-center gap-x-5 gap-y-1" style="margin:0;padding:0;list-style:none;font-size:14px;font-weight:500"><li><a href="{{ route('legal') }}#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="{{ route('legal') }}#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="{{ route('legal') }}#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="{{ route('legal') }}#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="{{ route('legal') }}#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</body>
|
||
</html>
|