190 lines
46 KiB
HTML
190 lines
46 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Visio de classe · 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">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<script>tailwind.config={theme:{extend:{fontFamily:{display:['Archivo','system-ui','sans-serif'],mono:['"IBM Plex Mono"','monospace']}}}}</script>
|
||
<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="js/paillasse-terminal.js"></script>
|
||
<link rel="stylesheet" href="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="Apercu%20accueil%20Blade.html" aria-label="Syllabus, accueil" style="display:flex;align-items:center;gap:0;text-decoration:none"><img src="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 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] [&::-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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-fonctionnalites.html" 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="apercu-cours.html" 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="apercu-tarifs.html" 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="apercu-connexion.html" style="font-size:15px;font-weight:600;color:#0b1220;text-decoration:none" class="hover:text-[#0b57d0]">Se connecter</a>
|
||
<a href="apercu-inscription.html" 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:#f8f9fa">
|
||
<section style="padding:40px 20px 8px"><div style="max-width:1280px;margin:0 auto">
|
||
<p style="margin:0;display:inline-flex;align-items:center;gap:8px;border:1px solid #b8c1cf;border-radius:999px;background:#fff;padding:4px 12px;font-size:14px;font-weight:700;color:#1d3fa8">Visio de classe</p>
|
||
<h1 style="margin:14px 0 0;font-size:clamp(30px,4vw,44px);line-height:1.1;font-weight:800;letter-spacing:-0.02em;color:#0b1220">La classe à distance, sans brouhaha.</h1>
|
||
<p style="margin:12px 0 0;max-width:720px;font-size:18px;line-height:1.6;font-weight:500;color:#3c4043">Tous les élèves arrivent en sourdine. Ils lèvent la main, vous donnez la parole, un à la fois.</p>
|
||
<div role="tablist" aria-label="Vue" style="margin-top:28px;display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:#eef0f3">
|
||
<button type="button" role="tab" data-vue="prof" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0">Vue prof</button>
|
||
<button type="button" role="tab" data-vue="eleve" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0">Vue élève</button>
|
||
<button type="button" role="tab" data-vue="mobile" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0">Mobile élève</button>
|
||
</div>
|
||
<p style="margin:12px 0 0;font-size:14px;font-weight:600;color:#5f6368">Les vues sont reliées : levez la main côté élève (Léa M.), puis donnez-lui la parole côté prof.</p>
|
||
</div></section>
|
||
|
||
<section data-panel="prof" style="padding:20px 20px 72px"><div class="grid gap-5 lg:grid-cols-[minmax(0,1fr)_360px]" style="max-width:1280px;margin:0 auto">
|
||
<div style="background:#fff;border:1px solid #e3e5e8;border-radius:20px;overflow:hidden;min-width:0">
|
||
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e3e5e8">
|
||
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap"><span style="display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:#fce8e6;color:#b3261e;font-size:13px;font-weight:800"><span style="width:8px;height:8px;border-radius:50%;background:#d93025"></span>En direct · <span id="v-chrono" style="font-family:'IBM Plex Mono',monospace">00:24:12</span></span><span style="font-size:14px;font-weight:700;color:#0b1220">BTS SIO 1 · Groupe A</span><span id="v-nb" style="font-size:14px;font-weight:600;color:#5f6368"></span></div>
|
||
<div style="display:flex;gap:8px;flex-wrap:wrap"><button type="button" id="v-mute-all" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:1px solid #dadce0;background:#fff;color:#0b1220"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18"/></svg>Couper tous les micros</button><button type="button" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;border:0;background:#d93025;color:#fff">Terminer la visio</button></div>
|
||
</div>
|
||
<div id="v-parole" style="display:none"></div>
|
||
<ul id="v-grille" aria-label="Participants" style="margin:0;padding:20px;list-style:none;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))"></ul>
|
||
</div>
|
||
<div style="display:grid;gap:20px;align-content:start;min-width:0">
|
||
<section style="background:#fff;border:1px solid #e3e5e8;border-radius:20px" aria-labelledby="t-mains"><div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e3e5e8"><h2 id="t-mains" style="margin:0;font-size:16px;font-weight:800;color:#0b1220">Mains levées</h2><span id="v-nb-mains" style="min-width:28px;height:28px;padding:0 8px;border-radius:999px;background:#fef7e0;color:#7a4b00;display:inline-grid;place-items:center;font-size:13px;font-weight:800"></span></div><ol id="v-mains" style="margin:0;padding:8px 12px;list-style:none"></ol><p style="margin:0;padding:0 20px 14px;font-size:13px;font-weight:600;color:#5f6368">Premier arrivé en haut.</p></section>
|
||
<section style="background:#fff;border:1px solid #e3e5e8;border-radius:20px" aria-labelledby="t-attente"><div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid #e3e5e8"><h2 id="t-attente" style="margin:0;font-size:16px;font-weight:800;color:#0b1220">Salle d’attente</h2><button type="button" id="v-tout-admettre" style="border:0;background:none;color:#0b57d0;font-size:14px;font-weight:700;cursor:pointer">Tout admettre</button></div><ul id="v-attente" style="margin:0;padding:8px 12px;list-style:none"></ul></section>
|
||
<section style="background:#fff;border:1px solid #e3e5e8;border-radius:20px" aria-labelledby="t-chat"><div style="display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 20px;border-bottom:1px solid #e3e5e8"><h2 id="t-chat" style="margin:0;font-size:16px;font-weight:800;color:#0b1220">Chat des élèves</h2><button type="button" id="v-chat-switch" role="switch" aria-checked="false" aria-label="Activer le chat des élèves" style="position:relative;width:44px;height:26px;border-radius:999px;border:0;cursor:pointer;transition:background .2s"><span style="position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .2s"></span></button></div><div id="v-chat" style="padding:16px 20px"></div></section>
|
||
</div>
|
||
</div></section>
|
||
|
||
<section data-panel="eleve" style="padding:20px 20px 72px"><div style="max-width:1100px;margin:0 auto;background:#fff;border:1px solid #e3e5e8;border-radius:20px;overflow:hidden">
|
||
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #e3e5e8"><span style="font-size:14px;font-weight:700;color:#0b1220">BTS SIO 1 · Groupe A · VLAN et routage</span><span data-statut-e style="display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:700"></span></div>
|
||
<div style="padding:20px"><div style="position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#202124;display:grid;place-items:center">
|
||
<div style="text-align:center"><div style="width:120px;height:120px;margin:0 auto;border-radius:50%;background:#8ab4f8;display:grid;place-items:center;font-size:42px;font-weight:800;color:#0b1220">MB</div><p style="margin:16px 0 0;font-size:18px;font-weight:700;color:#fff">M. B. · votre professeur</p></div>
|
||
<span style="position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:13px;font-weight:700"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v3"/></svg>M. B.</span>
|
||
<div style="position:absolute;right:16px;bottom:16px;width:min(26%,200px);aspect-ratio:4/3;border-radius:12px;background:#3c4043;border:2px solid rgba(255,255,255,.25);display:grid;place-items:center"><span style="font-size:20px;font-weight:800;color:#fff">LM</span><span style="position:absolute;left:8px;bottom:6px;font-size:12px;font-weight:700;color:#fff">Vous</span></div>
|
||
</div></div>
|
||
<div style="display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:4px 20px 24px">
|
||
<button type="button" data-micro-e aria-label="Micro" style="width:52px;height:52px;border-radius:50%;display:grid;place-items:center"></button>
|
||
<button type="button" data-cam-e aria-label="Caméra" style="width:52px;height:52px;border-radius:50%;display:grid;place-items:center"></button>
|
||
<button type="button" data-main-e aria-pressed="false" class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-left text-lg font-extrabold aria-pressed:bg-[#fef7e0]" style="display:inline-flex;align-items:center;gap:10px"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5"/><path d="M14 10V4a2 2 0 0 0-4 0v6"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg><span>Lever la main</span></button>
|
||
<a href="apercu-espace-eleve.html" style="display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:700;cursor:pointer;height:52px;padding:0 22px;background:#d93025;color:#fff;text-decoration:none"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg>Quitter</a>
|
||
</div>
|
||
<p data-aide-e style="margin:0;padding:0 20px 24px;text-align:center;font-size:14px;font-weight:600;color:#5f6368"></p>
|
||
</div></section>
|
||
|
||
<section data-panel="mobile" style="padding:20px 20px 72px"><div style="display:flex;justify-content:center">
|
||
<div style="width:min(100%,390px);height:780px;border-radius:44px;border:10px solid #111;background:#202124;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 48px -16px rgba(15,23,42,.35)">
|
||
<div style="padding:18px 20px 10px;display:flex;align-items:center;justify-content:space-between;color:#fff"><span style="font-size:15px;font-weight:700">BTS SIO 1 · A</span><span style="display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#f28b82"><span style="width:7px;height:7px;border-radius:50%;background:#f28b82"></span>En direct</span></div>
|
||
<div style="flex:1;position:relative;margin:0 12px;border-radius:20px;background:#3c4043;display:grid;place-items:center">
|
||
<div style="text-align:center"><div style="width:96px;height:96px;margin:0 auto;border-radius:50%;background:#8ab4f8;display:grid;place-items:center;font-size:34px;font-weight:800;color:#0b1220">MB</div><p style="margin:12px 0 0;font-size:16px;font-weight:700;color:#fff">M. B.</p></div>
|
||
<div style="position:absolute;right:12px;top:12px;width:88px;height:118px;border-radius:12px;background:#5f6368;display:grid;place-items:center;font-size:16px;font-weight:800;color:#fff">LM</div>
|
||
</div>
|
||
<div style="padding:14px 12px 0;display:flex;justify-content:center"><span data-statut-e style="display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700"></span></div>
|
||
<div style="padding:14px 16px 26px;display:grid;gap:12px">
|
||
<button type="button" data-main-e aria-pressed="false" class="border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-5 py-4 text-lg font-extrabold aria-pressed:bg-[#fef7e0]" style="display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px"><svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 11V6a2 2 0 0 0-4 0v5"/><path d="M14 10V4a2 2 0 0 0-4 0v6"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/></svg><span>Lever la main</span></button>
|
||
<div style="display:flex;justify-content:space-between;gap:12px">
|
||
<button type="button" data-micro-e aria-label="Micro" style="flex:1;height:52px;border-radius:999px;display:grid;place-items:center"></button>
|
||
<button type="button" data-cam-e aria-label="Caméra" style="flex:1;height:52px;border-radius:999px;display:grid;place-items:center"></button>
|
||
<a href="apercu-espace-eleve.html" aria-label="Quitter" style="flex:1;height:52px;border-radius:999px;display:grid;place-items:center;background:#d93025;color:#fff"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></section>
|
||
<script>
|
||
(function () {
|
||
var IC = {"mic":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3\"/></svg>","micoff":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18\"/></svg>","cam":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg>","camoff":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/><path d=\"M2 2l20 20\"/></svg>","hand":"<svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 11V6a2 2 0 0 0-4 0v5\"/><path d=\"M14 10V4a2 2 0 0 0-4 0v6\"/><path d=\"M10 10.5V6a2 2 0 0 0-4 0v8\"/><path d=\"M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15\"/></svg>"};
|
||
var IC22 = {"mic":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3\"/></svg>","micoff":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"/><path d=\"M19 10v2a7 7 0 0 1-14 0v-2M12 19v3M3 3l18 18\"/></svg>","cam":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/></svg>","camoff":"<svg viewBox=\"0 0 24 24\" width=\"22\" height=\"22\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m16 13 5.2 3.1a.5.5 0 0 0 .8-.4V8.3a.5.5 0 0 0-.8-.4L16 11\"/><rect x=\"2\" y=\"6\" width=\"14\" height=\"12\" rx=\"2\"/><path d=\"M2 2l20 20\"/></svg>"};
|
||
var S = {
|
||
eleves: ['Léa M.','Yanis B.','Adam D.','Rayan H.','Emma G.','Lucas M.','Jade F.','Maël G.','Zoé L.','Camille D.','Sarah N.','Tom L.','Hugo P.'],
|
||
mains: [['Yanis B.', 'Lab VLAN · étape 4', 190], ['Adam D.', 'Masque /26', 75], ['Rayan H.', 'Lab VLAN · étape 2', 40]],
|
||
attente: ['Nathan R.', 'Inès K.'], parole: null, chat: false, moi: 'Léa M.'
|
||
};
|
||
var $ = function (s) { return document.querySelector(s); }, $$ = function (s) { return document.querySelectorAll(s); };
|
||
var ini = function (n) { return n.split(' ').map(function (p) { return p[0]; }).join(''); };
|
||
var duree = function (s) { return s < 60 ? s + ' s' : Math.floor(s / 60) + ' min'; };
|
||
var COUL = ['#d2e3fc','#ceead6','#fde293','#fad2cf','#e9d2fd','#cbf0f8'];
|
||
var btnB = 'display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;border:0;cursor:pointer;font-size:13px;font-weight:700;white-space:nowrap;';
|
||
function enMain(n) { return S.mains.some(function (m) { return m[0] === n; }); }
|
||
function donner(n) { S.parole = n; S.mains = S.mains.filter(function (m) { return m[0] !== n; }); rendre(); }
|
||
function renderProf() {
|
||
$('#v-nb').textContent = (S.eleves.length + 1) + ' participants';
|
||
var g = '<li style="position:relative;aspect-ratio:4/3;border-radius:16px;background:#e8f0fe;display:grid;place-items:center"><span style="width:56px;height:56px;border-radius:50%;background:#0b57d0;color:#fff;display:grid;place-items:center;font-size:18px;font-weight:800">MB</span><span style="position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;color:#0b1220">M. B. (vous)</span><span style="position:absolute;right:10px;bottom:8px;color:#0b57d0">' + IC.mic + '</span></li>';
|
||
g += S.eleves.map(function (n, i) {
|
||
var p = S.parole === n, m = enMain(n);
|
||
return '<li class="group" style="position:relative;aspect-ratio:4/3;border-radius:16px;background:#f1f3f4;display:grid;place-items:center;' + (p ? 'box-shadow:inset 0 0 0 3px #0b57d0;' : '') + '"><span style="width:56px;height:56px;border-radius:50%;background:' + COUL[i % COUL.length] + ';color:#0b1220;display:grid;place-items:center;font-size:18px;font-weight:800">' + ini(n) + '</span>' +
|
||
(m ? '<span style="position:absolute;left:8px;top:8px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;background:#fef7e0;color:#7a4b00;font-size:12px;font-weight:800">' + IC.hand.replace(/width="18" height="18"/, 'width="14" height="14"') + 'Main levée</span>' : '') +
|
||
(p ? '<span style="position:absolute;left:8px;top:8px;height:24px;padding:0 8px;border-radius:999px;background:#0b57d0;color:#fff;display:inline-flex;align-items:center;font-size:12px;font-weight:800">A la parole</span>' : '') +
|
||
'<button type="button" data-exclure="' + n + '" class="opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus:opacity-100" style="position:absolute;right:8px;top:8px;height:26px;padding:0 10px;border-radius:999px;border:1px solid #dadce0;background:#fff;color:#b3261e;font-size:12px;font-weight:700;cursor:pointer">Exclure</button>' +
|
||
'<span style="position:absolute;left:10px;bottom:8px;font-size:13px;font-weight:700;color:#0b1220">' + n + '</span><span title="' + (p ? 'Micro ouvert' : 'En sourdine') + '" style="position:absolute;right:10px;bottom:8px;color:' + (p ? '#0b57d0' : '#b3261e') + '">' + (p ? IC.mic : IC.micoff) + '</span></li>';
|
||
}).join('');
|
||
$('#v-grille').innerHTML = g;
|
||
var bar = $('#v-parole');
|
||
if (S.parole) { bar.style.cssText = 'display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;background:#e8f0fe;border-bottom:1px solid #d2e3fc'; bar.innerHTML = '<span style="display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:#0b57d0">' + IC.mic + S.parole + ' a la parole</span><button type="button" id="v-retirer" style="' + btnB + 'background:#fff;color:#0b1220;border:1px solid #dadce0">Retirer la parole</button>'; }
|
||
else bar.style.cssText = 'display:none';
|
||
$('#v-nb-mains').textContent = S.mains.length;
|
||
$('#v-mains').innerHTML = S.mains.length ? S.mains.map(function (m, i) { return '<li style="display:flex;align-items:center;gap:12px;padding:10px 8px;' + (i ? 'border-top:1px solid #f1f3f4' : '') + '"><span style="width:20px;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600;color:#5f6368">' + (i + 1) + '</span><span style="flex:1;min-width:0"><span style="display:block;font-size:15px;font-weight:700;color:#0b1220">' + m[0] + '</span><span style="display:block;font-size:13px;font-weight:500;color:#5f6368">' + m[1] + ' · depuis ' + duree(m[2]) + '</span></span><button type="button" data-donner="' + m[0] + '" style="' + btnB + 'background:#0b57d0;color:#fff">Donner la parole</button></li>'; }).join('') : '<li style="padding:16px 8px;font-size:14px;font-weight:600;color:#5f6368">Aucune main levée.</li>';
|
||
$('#v-attente').innerHTML = S.attente.length ? S.attente.map(function (n, i) { return '<li style="display:flex;align-items:center;gap:8px;padding:10px 8px;' + (i ? 'border-top:1px solid #f1f3f4' : '') + '"><span style="flex:1;font-size:15px;font-weight:700;color:#0b1220">' + n + '</span><button type="button" data-refuser="' + n + '" style="' + btnB + 'background:none;color:#5f6368">Refuser</button><button type="button" data-admettre="' + n + '" style="' + btnB + 'background:#e8f0fe;color:#0b57d0">Admettre</button></li>'; }).join('') : '<li style="padding:16px 8px;font-size:14px;font-weight:600;color:#5f6368">Personne en attente.</li>';
|
||
var sw = $('#v-chat-switch'); sw.setAttribute('aria-checked', String(S.chat)); sw.style.background = S.chat ? '#0b57d0' : '#9aa0a6'; sw.firstElementChild.style.transform = S.chat ? 'translateX(18px)' : 'none';
|
||
$('#v-chat').innerHTML = S.chat ? '<ul style="margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px"><li><b>Sarah N.</b> <span style="color:#3c4043">Le lien du lab ne s’ouvre pas</span></li><li><b>M. B.</b> <span style="color:#3c4043">Actualisez la page, il est dans l’onglet Labs.</span></li></ul><input aria-label="Message" placeholder="Écrire à la classe" style="margin-top:14px;width:100%;height:40px;padding:0 14px;border-radius:999px;border:1px solid #dadce0;font-size:14px">' : '<p style="margin:0;font-size:14px;font-weight:600;color:#5f6368">Chat désactivé. Les élèves ne peuvent pas écrire.</p>';
|
||
}
|
||
function renderEleve() {
|
||
var p = S.parole === S.moi, m = enMain(S.moi);
|
||
$$('[data-statut-e]').forEach(function (e) { e.style.background = p ? '#e6f4ea' : '#f1f3f4'; e.style.color = p ? '#137333' : '#3c4043'; e.innerHTML = (p ? IC.mic : IC.micoff) + (p ? 'Tu as la parole' : (m ? 'Main levée · en attente' : 'En sourdine')); });
|
||
$$('[data-micro-e],[data-cam-e]').forEach(function (b) { var cam = b.hasAttribute('data-cam-e'); b.disabled = !p; b.innerHTML = cam ? (p ? IC22.cam : IC22.camoff) : (p ? IC22.mic : IC22.micoff); b.style.background = p ? '#e8f0fe' : '#e8eaed'; b.style.color = p ? '#0b57d0' : '#9aa0a6'; b.style.border = '0'; b.style.cursor = p ? 'pointer' : 'not-allowed'; b.title = p ? (cam ? 'Caméra' : 'Micro') : 'Le prof doit te donner la parole'; });
|
||
$$('[data-main-e]').forEach(function (b) { b.setAttribute('aria-pressed', String(m)); b.disabled = p; b.style.opacity = p ? '.5' : '1'; b.querySelector('span').textContent = m ? 'Main levée · le prof est prévenu' : 'Lever la main'; });
|
||
$('[data-aide-e]').textContent = p ? 'Ton micro et ta caméra sont débloqués. Le prof peut te retirer la parole à tout moment.' : 'Ton micro et ta caméra s’activent quand le prof te donne la parole.';
|
||
}
|
||
function rendre() { renderProf(); renderEleve(); }
|
||
function vue(v) { $$('[data-panel]').forEach(function (p) { p.style.display = p.dataset.panel === v ? '' : 'none'; }); $$('[data-vue]').forEach(function (b) { var on = b.dataset.vue === v; b.setAttribute('aria-selected', String(on)); b.style.background = on ? '#fff' : 'transparent'; b.style.color = on ? '#0b57d0' : '#3c4043'; b.style.boxShadow = on ? '0 1px 2px rgba(15,23,42,.15)' : 'none'; }); try { localStorage.setItem('syllabus-visio-vue', v); } catch (x) {} }
|
||
document.addEventListener('click', function (e) {
|
||
var t = e.target.closest('button'); if (!t) return;
|
||
if (t.dataset.vue) return vue(t.dataset.vue);
|
||
if (t.dataset.donner) return donner(t.dataset.donner);
|
||
if (t.dataset.admettre) { S.attente = S.attente.filter(function (n) { return n !== t.dataset.admettre; }); S.eleves.push(t.dataset.admettre); return rendre(); }
|
||
if (t.dataset.refuser) { S.attente = S.attente.filter(function (n) { return n !== t.dataset.refuser; }); return rendre(); }
|
||
if (t.dataset.exclure) { var n = t.dataset.exclure; if (confirm('Exclure ' + n + ' de la visio ?')) { S.eleves = S.eleves.filter(function (x) { return x !== n; }); S.mains = S.mains.filter(function (m) { return m[0] !== n; }); if (S.parole === n) S.parole = null; rendre(); } return; }
|
||
if (t.id === 'v-retirer' || t.id === 'v-mute-all') { S.parole = null; return rendre(); }
|
||
if (t.id === 'v-tout-admettre') { S.eleves = S.eleves.concat(S.attente); S.attente = []; return rendre(); }
|
||
if (t.id === 'v-chat-switch') { S.chat = !S.chat; return rendre(); }
|
||
if (t.hasAttribute('data-main-e')) { if (enMain(S.moi)) S.mains = S.mains.filter(function (m) { return m[0] !== S.moi; }); else if (S.parole !== S.moi) S.mains.push([S.moi, 'Lab VLAN · étape 3', 0]); return rendre(); }
|
||
});
|
||
var t0 = 24 * 60 + 12;
|
||
setInterval(function () { t0++; S.mains.forEach(function (m) { m[2]++; }); $('#v-chrono').textContent = [Math.floor(t0 / 3600), Math.floor(t0 / 60) % 60, t0 % 60].map(function (x) { return String(x).padStart(2, '0'); }).join(':'); if (t0 % 15 === 0) renderProf(); }, 1000);
|
||
var v0 = 'prof'; try { v0 = new URLSearchParams(location.search).get('vue') || localStorage.getItem('syllabus-visio-vue') || 'prof'; } catch (x) {}
|
||
rendre(); vue(v0);
|
||
})();
|
||
</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="apercu-fonctionnalites.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Fonctionnalités</a></li><li><a href="apercu-cours.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cours gratuits</a></li><li><a href="apercu-lab-essai.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Essayer un lab</a></li><li><a href="apercu-tarifs.html" 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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?outil=sujet" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Examens</a></li><li><a href="apercu-ressource.html?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="apercu-etablissements.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Équiper une classe</a></li><li><a href="apercu-ressource.html?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="apercu-ressource.html?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="apercu-ressource.html?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="apercu-aide.html" style="font-size:14px;font-weight:500;color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Aide et tutoriels</a></li><li><a href="apercu-legal.html" 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="apercu-legal.html#mentions" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Mentions légales</a></li><li><a href="apercu-legal.html#cgu" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">CGU</a></li><li><a href="apercu-legal.html#confidentialite" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Confidentialité et RGPD</a></li><li><a href="apercu-legal.html#cookies" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Cookies</a></li><li><a href="apercu-legal.html#sous-traitance" style="color:#5f6368;text-decoration:none" class="hover:text-[#0b57d0]">Sous-traitance</a></li></ul></nav></div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
</body>
|
||
</html>
|