Paillasse/design/apercu-fiche-eleve.html

75 lines
35 KiB
HTML
Raw Permalink Normal View History

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fiche élève · 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-w
<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>
<div class="border-b border-[#e3e5e8] bg-[#f8f9fa]"><div class="mx-auto grid max-w-[1600px] lg:grid-cols-[240px_minmax(0,1fr)]"><aside class="border-b border-[#e3e5e8] bg-white p-5 lg:border-b-0 lg:border-r-2"><div class="flex items-center gap-3"><span class="grid h-14 w-14 place-items-center border border-[#dadce0] rounded-lg bg-[#fce8e6] font-mono text-lg font-semibold">LM</span><div><p class="text-lg font-extrabold leading-tight">Léa M.</p><p class="text-sm font-semibold">BTS SIO 1 · Groupe A</p></div></div>
<dl class="mt-5 grid gap-2 text-sm"><div class="flex justify-between border-b border-[#e3e5e8] pb-1"><dt class="font-semibold">Prof principal</dt><dd class="font-bold">M. Belkacemi</dd></div><div class="flex justify-between border-b border-[#e3e5e8] pb-1"><dt class="font-semibold">Option</dt><dd class="font-bold">SISR</dd></div><div class="flex justify-between border-b border-[#e3e5e8] pb-1"><dt class="font-semibold">Présence</dt><dd class="font-mono font-semibold">88 %</dd></div><div class="flex justify-between"><dt class="font-semibold">Aménagement</dt><dd class="font-bold">Tiers-temps</dd></div></dl>
<p class="mt-6 font-mono text-[11px] font-semibold uppercase tracking-wider">Fiche</p><ul class="mt-2 grid gap-1"><li><a href="#synthese" class="flex items-center gap-3 border border-[#dadce0] rounded-lg bg-[#0b57d0] text-white px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/></svg><span class="flex-1">Synthèse</span></a></li><li><a href="#competences" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg><span class="flex-1">Compétences</span></a></li><li><a href="#historique" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg><span class="flex-1">Historique</span></a></li><li><a href="#observations" class="flex items-center gap-3 border-2 border-transparent hover:border-black px-3 py-2 text-sm font-bold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="flex-1">Observations</span></a></li></ul>
<div class="mt-6 border border-[#dadce0] rounded-lg bg-[#ec3013] p-3 text-sm font-semibold text-white"><p class="font-extrabold">Alerte ouverte</p><p class="mt-1">Baisse continue depuis 4 semaines. Signalée à la CPE le 27/09.</p></div></aside><div class="min-w-0 p-5 lg:p-8"><div class="flex flex-wrap items-end justify-between gap-4"><div><p class="font-mono text-xs font-semibold">Fiche élève</p><div class="min-w-0 flex-1"><p data-public="P" 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-[#1d3fa8]">Pour les profs</p>
<h1 class="mt-1 text-4xl font-extrabold tracking-tight">Léa M.</h1></div><p class="mt-1 font-semibold">Accès journalisé · visible par l’équipe pédagogique et la vie scolaire</p></div><div class="flex flex-wrap gap-3"><a href="apercu-messagerie.html" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg bg-white px-4 text-sm font-extrabold hover:bg-[#f8f9fa]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>Écrire</a><button type="button" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg px-4 text-sm font-extrabold bg-white hover:bg-[#f8f9fa]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>Exporter en PDF</button><button type="button" class="inline-flex h-11 items-center gap-2 border border-[#dadce0] rounded-lg px-4 text-sm font-extrabold bg-[#fef7e0]"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8"/></svg>Proposer un accompagnement</button></div></div><ul id="synthese" class="mt-6 grid grid-cols-2 gap-4 md:grid-cols-4"><li class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Moyenne QCM</p><span class="h-2.5 w-2.5 bg-[#ec3013]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">7,5</p><p class="mt-3 text-xs font-bold">−4,5 en 4 semaines</p></li><li class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Labs réussis</p><span class="h-2.5 w-2.5 bg-[#fef7e0]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">5/14</p><p class="mt-3 text-xs font-bold">3,1 indices par lab</p></li><li class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">DM rendus</p><span class="h-2.5 w-2.5 bg-[#e6f4ea]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">3/3</p><p class="mt-3 text-xs font-bold">moyenne 11/20</p></li><li class="flex flex-col border border-[#dadce0] rounded-lg bg-white p-4"><div class="flex items-center justify-between gap-2"><p class="text-sm font-bold">Temps de lecture</p><span class="h-2.5 w-2.5 bg-[#fce8e6]"></span></div><p class="mt-2 font-mono text-3xl font-semibold leading-none">−62 %</p><p class="mt-3 text-xs font-bold">vs moyenne de la classe</p></li></ul>
<div class="mt-6 grid gap-6 xl:grid-cols-[minmax(0,1.2fr)_minmax(0,1fr)]">
<section id="competences" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-competences"><div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-competences" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9H4a2 2 0 0 1 0-4h2M18 9h2a2 2 0 0 0 0-4h-2M4 22h16M18 2H6v7a6 6 0 0 0 12 0V2z"/></svg>Compétences du référentiel</h2><span class="font-mono text-xs font-semibold">BTS SIO · bloc 1</span></div><ul class="divide-y divide-[#e3e5e8]"><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Installer et configurer un poste</p><div class="mt-1 h-2.5 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:80%;background:#7CF2C0"></div></div></div><span class="font-mono text-sm font-semibold">80 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#000" stroke-width="2" points="0,10.0 20,9.0 40,8.0 60,7.0 80,6.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Adressage IPv4</p><div class="mt-1 h-2.5 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:55%;background:#FFD23F"></div></div></div><span class="font-mono text-sm font-semibold">55 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#b3001b" stroke-width="2" points="0,8.0 20,8.8 40,10.0 60,10.4 80,11.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">VLAN et commutation</p><div class="mt-1 h-2.5 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:40%;background:#FF6FB5"></div></div></div><span class="font-mono text-sm font-semibold">40 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#b3001b" stroke-width="2" points="0,12.0 20,12.4 40,13.0 60,13.6 80,14.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Scripts Bash</p><div class="mt-1 h-2.5 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:35%;background:#FF6FB5"></div></div></div><span class="font-mono text-sm font-semibold">35 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#000" stroke-width="2" points="0,16.0 20,15.6 40,15.0 60,15.2 80,15.0"/></svg></li><li class="grid grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-4 p-4"><div><p class="text-sm font-bold">Sécurité des accès</p><div class="mt-1 h-2.5 border border-[#dadce0] rounded-lg"><div class="h-full" style="width:60%;background:#FFD23F"></div></div></div><span class="font-mono text-sm font-semibold">60 %</span><svg viewBox="0 0 80 24" class="h-6 w-20" aria-hidden="true"><polyline fill="none" stroke="#000" stroke-width="2" points="0,12.0 20,11.6 40,11.0 60,10.4 80,10.0"/></svg></li></ul></section>
<section id="observations" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-observations"><div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-observations" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>Observations</h2></div><ol class="divide-y divide-[#e3e5e8] text-sm"><li class="p-4"><p class="flex flex-wrap items-center gap-2"><span class="border border-[#dadce0] rounded-lg bg-[#f8f9fa] px-1.5 text-xs font-extrabold">Difficulté</span><span class="font-mono text-xs">21/09 · M. Belkacemi</span></p><p class="mt-1 font-medium">Participe mais se décourage vite.</p></li><li class="p-4"><p class="flex flex-wrap items-center gap-2"><span class="border border-[#dadce0] rounded-lg bg-[#f8f9fa] px-1.5 text-xs font-extrabold">Progrès</span><span class="font-mono text-xs">14/09 · Mme Roche</span></p><p class="mt-1 font-medium">Très bon travail en binôme sur le câblage.</p></li><li class="p-4"><p class="flex flex-wrap items-center gap-2"><span class="border border-[#dadce0] rounded-lg bg-[#f8f9fa] px-1.5 text-xs font-extrabold">CPE</span><span class="font-mono text-xs">27/09 · Mme Diallo</span></p><p class="mt-1 font-medium">Entretien prévu le 02/10 avec la famille.</p></li></ol><form class="flex gap-2 border-t border-[#e3e5e8] p-4"><input class="h-10 min-w-0 flex-1 border border-[#dadce0] rounded-lg px-2 text-sm font-medium" placeholder="Ajouter une observation"><button class="h-10 border border-[#dadce0] rounded-lg bg-black px-3 text-sm font-extrabold text-white">Ajouter</button></form></section>
</div>
<div class="mt-6"><section id="historique" class="border border-[#dadce0] rounded-lg bg-white" aria-labelledby="t-historique"><div class="flex flex-wrap items-center justify-between gap-3 border-b border-[#e3e5e8] p-4"><h2 id="t-historique" class="flex items-center gap-2 text-lg font-extrabold"><svg viewBox="0 0 24 24" class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"/></svg>Historique</h2></div><ol class="divide-y divide-[#e3e5e8]"><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">29/09</span><span class="mt-0.5 w-24 shrink-0 border border-[#dadce0] rounded-lg px-1.5 text-center text-xs font-extrabold" style="background:#FFD23F;color:#000">Lab</span><span class="font-semibold">Lab VLAN · étape 2 · 3 indices utilisés</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">28/09</span><span class="mt-0.5 w-24 shrink-0 border border-[#dadce0] rounded-lg px-1.5 text-center text-xs font-extrabold" style="background:#ec3013;color:#fff">Examen</span><span class="font-semibold">E6 blanc SISR · 9/20 · 1 sortie (6 s</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">26/09</span><span class="mt-0.5 w-24 shrink-0 border border-[#dadce0] rounded-lg px-1.5 text-center text-xs font-extrabold" style="background:#FF6FB5;color:#000">QCM</span><span class="font-semibold">Lecture CM VLAN · 7/20 · cours lu en 4 min</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">24/09</span><span class="mt-0.5 w-24 shrink-0 border border-[#dadce0] rounded-lg px-1.5 text-center text-xs font-extrabold" style="background:#C4B5FD;color:#000">DM</span><span class="font-semibold">DM 2 · Adressage · rendu · 11/20</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">22/09</span><span class="mt-0.5 w-24 shrink-0 border border-[#dadce0] rounded-lg px-1.5 text-center text-xs font-extrabold" style="background:#FFD23F;color:#000">Quiz flash</span><span class="font-semibold">Commandes Linux · 3/5</span></li><li class="flex items-start gap-4 p-4"><span class="w-12 shrink-0 font-mono text-sm font-semibold">21/09</span><span class="mt-0.5 w-24 shrink-0 border border-[#dadce0] rounded-lg px-1.5 text-center text-xs font-extrabold" style="background:#7CF2C0;color:#000">Observation</span><span class="font-semibold">« Participe mais se décourage vite. » · M. Belkacemi</span></li></ol></section></div></div></div></div>
</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>