Paillasse/design/resources/views/accueil.blade.php
2026-10-06 23:28:18 +02:00

75 lines
34 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{{-- resources/views/accueil.blade.php --}}
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Syllabus — Une vraie machine Linux pour chaque élève</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 style="background:#fff"><section style="padding:112px 20px 72px;background:#fff"><div style="max-width:1000px;margin:0 auto"><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0;text-align:center">Cours · TP sur machine · suivi des élèves</p><h1 style="margin:20px 0 0;font-size:clamp(40px,6vw,72px);line-height:1.04;font-weight:800;letter-spacing:-0.03em;color:#0b1220;text-align:center;text-wrap:balance">Enseigner l’informatique, du lycée au master.</h1><p style="margin:24px auto 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-align:center;text-wrap:pretty">Des cours gratuits, un vrai Linux pour chaque élève et toute la classe sur un écran. Dans le navigateur, rien à installer.</p><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="{{ route('register') }}" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Créer une classe gratuite</a><p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Sans carte bancaire · élève ? <a href="{{ route('login') }}" style="color:#0b57d0;font-weight:700;text-decoration:none">rejoindre ma classe</a></p></div></div></section><section style="padding:0 20px 24px"><ul style="max-width:1000px;margin:0 auto;padding:28px 0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;border-top:1px solid #e3e5e8;border-bottom:1px solid #e3e5e8"><li style="text-align:center"><p style="margin:0;font-size:17px;font-weight:800;color:#0b1220">Hébergé en France</p><p style="margin:2px 0 0;font-size:13px;font-weight:600;color:#5f6368">Paris</p></li><li style="text-align:center"><p style="margin:0;font-size:17px;font-weight:800;color:#0b1220">RGPD</p><p style="margin:2px 0 0;font-size:13px;font-weight:600;color:#5f6368">données minimisées</p></li><li style="text-align:center"><p style="margin:0;font-size:17px;font-weight:800;color:#0b1220">20 cursus</p><p style="margin:2px 0 0;font-size:13px;font-weight:600;color:#5f6368">du lycée au master</p></li><li style="text-align:center"><p style="margin:0;font-size:17px;font-weight:800;color:#0b1220">443 seulement</p><p style="margin:2px 0 0;font-size:13px;font-weight:600;color:#5f6368">aucun port à ouvrir</p></li><li style="text-align:center"><p style="margin:0;font-size:17px;font-weight:800;color:#0b1220">0 €</p><p style="margin:2px 0 0;font-size:13px;font-weight:600;color:#5f6368">sans carte bancaire</p></li></ul></section><section style="padding:96px 20px"><div style="max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px 72px;align-items:center"><div style=""><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0">Pour l’élève</p><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance">Un terminal Linux en 5 secondes.</h2><p style="margin:24px 0 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-wrap:pretty">Chaque élève a sa propre machine Debian. Il clique, la console s’ouvre. Aucun poste du lycée à configurer.</p><p style="margin:28px 0 0"><a href="{{ route('labs.essai') }}" style="font-size:16px;font-weight:700;color:#0b57d0;text-decoration:none">Essayer un lab sans compte →</a></p></div><div><div style="border-radius:24px;overflow:hidden;background:#fff;border:1px solid #e3e5e8;box-shadow:0 1px 2px rgba(15,23,42,.06),0 24px 48px -24px rgba(15,23,42,.18)"><div style="padding:12px 16px;border-bottom:1px solid #1f2937;background:#0d1117;font:600 13px 'IBM Plex Mono',monospace;color:#9ca3af">eleve@lab-07 · Debian 12</div><pre style="margin:0;padding:20px;background:#0d1117;color:#e5e7eb;font:500 14px/1.7 'IBM Plex Mono',monospace;white-space:pre-wrap">eleve@lab-07:~$ ip -br addr
ens18 UP 10.20.7.14/24
eleve@lab-07:~$ ping -c1 10.20.7.1
64 bytes from 10.20.7.1: time=0.4 ms
eleve@lab-07:~$ <span style="background:#e5e7eb;color:#0d1117"> </span></pre></div></div></div></section><section style="padding:96px 20px"><div style="max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px 72px;align-items:center"><div style="order:2"><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0">Correction</p><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance">Chaque étape se vérifie toute seule.</h2><p style="margin:24px 0 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-wrap:pretty">Le lab contrôle directement la machine. L’élève sait s’il a réussi, et reçoit un indice s’il bloque.</p></div><div><div style="border-radius:24px;overflow:hidden;background:#fff;border:1px solid #e3e5e8;box-shadow:0 1px 2px rgba(15,23,42,.06),0 24px 48px -24px rgba(15,23,42,.18)"><ol style="margin:0;padding:24px;list-style:none;display:grid;gap:12px"><li style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid #e3e5e8;background:#e6f4ea"><span style="font-size:15px;font-weight:700;color:#0b1220">1. Afficher l’adresse IP</span><span style="font-size:13px;font-weight:800;color:#137333">✓</span></li><li style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid #e3e5e8;background:#e6f4ea"><span style="font-size:15px;font-weight:700;color:#0b1220">2. Joindre la passerelle</span><span style="font-size:13px;font-weight:800;color:#137333">✓</span></li><li style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid #e3e5e8;background:#e8f0fe"><span style="font-size:15px;font-weight:700;color:#0b1220">3. Configurer le DNS</span><span style="font-size:13px;font-weight:800;color:#0b57d0">À vérifier</span></li><li style="display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;border:1px solid #e3e5e8;background:#fff"><span style="font-size:15px;font-weight:700;color:#0b1220">4. Tester la résolution</span><span style="font-size:13px;font-weight:800;color:#5f6368"></span></li><li style="padding:14px 16px;border-radius:14px;background:#f8f9fa;font-size:14px;line-height:1.5;font-weight:500;color:#3c4043"><b>Indice 1 :</b> le fichier se trouve dans /etc. Regardez son nom avec ls.</li></ol></div></div></div></section><section style="padding:96px 20px"><div style="max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:56px 72px;align-items:center"><div style=""><p style="margin:0;font-size:15px;font-weight:700;color:#0b57d0">Pour l’enseignant</p><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-wrap:balance">Le roi du silence : la fonction « Lever la main ».</h2><p style="margin:24px 0 0;max-width:660px;font-size:20px;line-height:1.6;font-weight:500;color:#3c4043;text-wrap:pretty">Vos élèves n’auront plus que le droit de tousser ou de respirer ! Les demandes arrivent dans l’ordre. Vous ouvrez la console de l’élève sans vous déplacer.</p><p style="margin:28px 0 0"><a href="{{ route('ressource') }}?outil=cockpit" style="font-size:16px;font-weight:700;color:#0b57d0;text-decoration:none">Voir le tableau de bord prof →</a></p></div><div><div style="border-radius:24px;overflow:hidden;background:#fff;border:1px solid #e3e5e8;box-shadow:0 1px 2px rgba(15,23,42,.06),0 24px 48px -24px rgba(15,23,42,.18)"><div style="padding:18px 24px;border-bottom:1px solid #e3e5e8;display:flex;justify-content:space-between"><p style="margin:0;font-size:15px;font-weight:800;color:#0b1220">Mains levées</p><p style="margin:0;font-size:14px;font-weight:700;color:#5f6368">3 en attente</p></div><ol style="margin:0;padding:16px 24px 24px;list-style:none;display:grid;gap:10px"><li style="display:flex;align-items:center;gap:14px"><span style="width:28px;height:28px;border-radius:999px;background:#e8f0fe;color:#0b57d0;display:grid;place-items:center;font-size:13px;font-weight:800">1</span><span style="flex:1"><span style="display:block;font-size:15px;font-weight:800;color:#0b1220">Nora</span><span style="display:block;font-size:13px;font-weight:600;color:#5f6368">étape 3 · depuis 2 min</span></span><span style="font-size:13px;font-weight:700;color:#0b57d0">Ouvrir sa console</span></li><li style="display:flex;align-items:center;gap:14px"><span style="width:28px;height:28px;border-radius:999px;background:#e8f0fe;color:#0b57d0;display:grid;place-items:center;font-size:13px;font-weight:800">2</span><span style="flex:1"><span style="display:block;font-size:15px;font-weight:800;color:#0b1220">Sami</span><span style="display:block;font-size:13px;font-weight:600;color:#5f6368">étape 2 · depuis 4 min</span></span><span style="font-size:13px;font-weight:700;color:#0b57d0">Ouvrir sa console</span></li><li style="display:flex;align-items:center;gap:14px"><span style="width:28px;height:28px;border-radius:999px;background:#e8f0fe;color:#0b57d0;display:grid;place-items:center;font-size:13px;font-weight:800">3</span><span style="flex:1"><span style="display:block;font-size:15px;font-weight:800;color:#0b1220">Jade</span><span style="display:block;font-size:13px;font-weight:600;color:#5f6368">étape 1 · depuis 6 min</span></span><span style="font-size:13px;font-weight:700;color:#0b57d0">Ouvrir sa console</span></li></ol></div></div></div></section><section style="padding:112px 20px;background:#f8f9fa"><div style="max-width:760px;margin:0 auto"><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-align:center;text-wrap:balance">Questions fréquentes.</h2><div style="margin-top:48px;display:grid;gap:0"><details style="border-top:1px solid #dadce0;padding:22px 0"><summary style="cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:#0b1220">Combien ça coûte ?</summary><p style="margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Les cours sont gratuits. Les TP sur VM : 29 € par mois pour une classe, ou 24 € par élève et par an pour un établissement.</p></details><details style="border-top:1px solid #dadce0;padding:22px 0"><summary style="cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:#0b1220">Faut-il installer quelque chose ?</summary><p style="margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Non. Un navigateur suffit, même sur un vieux PC ou un Chromebook. Tout passe par HTTPS, port 443.</p></details><details style="border-top:1px solid #dadce0;padding:22px 0"><summary style="cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:#0b1220">Comment inscrire mes élèves ?</summary><p style="margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Par code de classe, import CSV ou saisie rapide. Chaque élève reçoit une fiche de connexion, sans e-mail.</p></details><details style="border-top:1px solid #dadce0;padding:22px 0"><summary style="cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:#0b1220">Les cours se téléchargent-ils ?</summary><p style="margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Oui. CM, TD avec cases à remplir, correction et QCM papier, en PDF.</p></details><details style="border-top:1px solid #dadce0;padding:22px 0"><summary style="cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:#0b1220">Où sont les données ?</summary><p style="margin:12px 0 0;font-size:16px;line-height:1.65;font-weight:500;color:#3c4043">Sur un cloud hébergé en France. Les données des élèves sont supprimées 90 jours après l’archivage de la classe.</p></details></div><p style="margin:36px 0 0;text-align:center"><a href="{{ route('tarifs') }}" style="font-size:16px;font-weight:700;color:#0b57d0;text-decoration:none">Voir tous les tarifs →</a></p></div></section><section style="padding:128px 20px"><div style="max-width:760px;margin:0 auto;text-align:center"><h2 style="margin:12px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220;text-align:center;text-wrap:balance">Votre prochain TP commence dans 5 secondes.</h2><div style="margin-top:44px;display:flex;flex-direction:column;align-items:center;gap:14px"><a href="{{ route('register') }}" style="display:inline-flex;align-items:center;height:56px;padding:0 32px;border-radius:999px;background:#0b57d0;color:#fff;font-size:17px;font-weight:700;text-decoration:none">Créer une classe gratuite</a><p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Sans carte bancaire</p></div></div></section></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>
<script>
document.addEventListener('DOMContentLoaded', function () {
SyllabusTerminal.mount(document.getElementById('xterm-hero'), {
user: 'lea', host: 'debian', fontSize: 13,
demo: ['mkdir projets && cd projets', 'echo "Léa" > notes.txt', 'ls -la', 'cat notes.txt']
});
});
</script>
</body>
</html>