Paillasse/design/_backup-ludique/resources/views/classes/suivi.blade.php
2026-10-06 23:28:18 +02:00

156 lines
26 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.

@extends('layouts.vitrine')
@section('titre', 'Suivi de classe')
@section('contenu')
<section class="border-b-4 border-black bg-white">
<div class="mx-auto flex max-w-7xl flex-wrap items-end gap-6 px-5 pb-10 pt-10 lg:px-10">
<div class="flex-1">
<p class="font-mono text-sm font-semibold">Espace enseignant · Suivi</p>
<h1 class="mt-2 text-5xl font-black leading-[0.95] tracking-tighter sm:text-6xl">BTS SIO 1 · Groupe A</h1>
<p class="mt-3 text-lg font-semibold">Bloc 2 · Administration des systèmes et des réseaux · 24 élèves</p>
</div>
<div class="flex flex-wrap gap-3">
<a href="{{ route('banque') }}#flash" class="inline-flex items-center gap-3 border-4 border-black bg-[#FFD23F] px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000]">Quiz flash de début d’heure</a>
<a href="{{ route('devoirs') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] hover:bg-[#FFD23F]">Devoirs maison</a>
<a href="{{ route('cours.show') }}" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Voir la séquence</a>
<button type="button" class="inline-flex items-center gap-3 border-4 border-black bg-white px-5 py-3 font-extrabold shadow-[4px_4px_0px_#000000] transition-transform hover:bg-[#FFD23F] active:translate-x-1 active:translate-y-1 active:shadow-none">Exporter les notes (CSV)</button>
</div>
</div>
</section>
<div class="mx-auto max-w-7xl px-5 py-10 lg:px-10">
<dl class="grid grid-cols-2 gap-5 lg:grid-cols-4">
<div class="border-4 border-black bg-[#FFD23F] p-5 shadow-[5px_5px_0px_#000000]"><dt class="font-semibold">Progression moyenne</dt><dd class="mt-1 font-mono text-4xl font-semibold">52 %</dd></div>
<div class="border-4 border-black bg-[#C4B5FD] p-5 shadow-[5px_5px_0px_#000000] lg:translate-y-3"><dt class="font-semibold">Moyenne aux QCM</dt><dd class="mt-1 font-mono text-4xl font-semibold">13,4</dd></div>
<div class="border-4 border-black bg-[#7CF2C0] p-5 shadow-[5px_5px_0px_#000000]"><dt class="font-semibold">Actifs cette semaine</dt><dd class="mt-1 font-mono text-4xl font-semibold">21 / 24</dd></div>
<div class="border-4 border-black bg-[#ec3013] p-5 text-white shadow-[5px_5px_0px_#000000] lg:translate-y-3"><dt class="font-semibold">À aider maintenant</dt><dd class="mt-1 font-mono text-4xl font-semibold">2</dd></div>
</dl>
<div class="mt-14 grid gap-10 lg:grid-cols-12">
<section class="lg:col-span-8" aria-labelledby="t-tab">
<h2 id="t-tab" class="text-3xl font-black">Élèves</h2>
<div class="mt-5 overflow-x-auto border-4 border-black bg-white shadow-[8px_8px_0px_#000000]">
<table class="w-full min-w-[760px] text-left">
<thead class="bg-black text-white"><tr><th class="px-4 py-3">Élève</th><th class="px-3 py-3 font-mono text-xs font-semibold">Adressage IPv4</th><th class="px-3 py-3 font-mono text-xs font-semibold">VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">Inter-VLAN</th><th class="px-3 py-3 font-mono text-xs font-semibold">DHCP</th><th class="px-3 py-3 font-mono text-xs font-semibold">DNS BIND</th><th class="px-3 py-3">QCM</th><th class="px-3 py-3">Temps VM</th></tr></thead>
<tbody class="divide-y-2 divide-black">
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] font-black ">L</span><span><span class="block font-extrabold">Léa Martin</span><span class="block font-mono text-xs font-semibold">Terminé</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">18/20</td>
<td class="px-3 py-3 font-mono text-sm">12 h 40</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">Y</span><span><span class="block font-extrabold">Yanis Benali</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">14/20</td>
<td class="px-3 py-3 font-mono text-sm">9 h 10</td>
</tr>
<tr class="bg-[#FFD9E8]">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#FF6FB5] font-black ">N</span><span><span class="block font-extrabold">Nora Kaci</span><span class="block font-mono text-xs font-semibold">Main levée</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">11/20</td>
<td class="px-3 py-3 font-mono text-sm">8 h 05</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">T</span><span><span class="block font-extrabold">Tom Robert</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">16/20</td>
<td class="px-3 py-3 font-mono text-sm">10 h 30</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">I</span><span><span class="block font-extrabold">Inès Durand</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="2 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">9/20</td>
<td class="px-3 py-3 font-mono text-sm">5 h 20</td>
</tr>
<tr class="bg-[#FFE4DF]">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#ec3013] font-black text-white">S</span><span><span class="block font-extrabold">Sami Lefèvre</span><span class="block font-mono text-xs font-semibold">Bloqué 9 min</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">7/20</td>
<td class="px-3 py-3 font-mono text-sm">6 h 45</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-[#7CF2C0] font-black ">C</span><span><span class="block font-extrabold">Chloé Petit</span><span class="block font-mono text-xs font-semibold">En avance</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="1 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">19/20</td>
<td class="px-3 py-3 font-mono text-sm">13 h 15</td>
</tr>
<tr class="">
<td class="px-4 py-3"><span class="flex items-center gap-3"><span class="grid h-8 w-8 place-items-center border-2 border-black bg-white font-black ">A</span><span><span class="block font-extrabold">Adam Fontaine</span></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="4 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="3 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-black"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3"><span class="grid grid-cols-4 gap-0.5" title="0 / 4 étapes"><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span><span class="h-4 w-3 border-2 border-black bg-white"></span></span></td>
<td class="px-3 py-3 font-mono font-semibold">13/20</td>
<td class="px-3 py-3 font-mono text-sm">8 h 50</td>
</tr>
</tbody>
</table>
</div>
<p class="mt-4 font-semibold">8 élèves sur 24 affichés · triés par besoin d’aide</p>
</section>
<aside class="grid content-start gap-8 lg:col-span-4">
<section class="border-4 border-black bg-[#FF6FB5] p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-nora">
<p class="font-mono text-sm font-semibold">Fiche élève</p>
<h2 id="t-nora" class="mt-1 text-3xl font-black">Nora Kaci</h2>
<ol class="mt-5 grid gap-3 border-l-4 border-black pl-4 font-semibold">
<li><span class="font-mono text-xs">10:42</span><br>Main levée · Inter-VLAN, étape 3</li>
<li><span class="font-mono text-xs">10:31</span><br>Étape 2 validée après 3 essais</li>
<li><span class="font-mono text-xs">Mar.</span><br>QCM Adressage IPv4 : 11/20. Erreurs sur le calcul de l’adresse réseau (/22).</li>
</ol>
<div class="mt-6 flex flex-wrap gap-3">
<a href="{{ route('labs.essai') }}" class="border-4 border-black bg-white px-4 py-2 font-extrabold hover:bg-[#FFD23F]">Ouvrir sa console</a>
<a href="{{ route('cours.show') }}" class="border-4 border-black bg-black px-4 py-2 font-extrabold text-white hover:bg-[#13233A]">Lui assigner le TD</a>
</div>
</section>
<section class="border-4 border-black bg-white p-6 shadow-[8px_8px_0px_#000000]" aria-labelledby="t-exam">
<h2 id="t-exam" class="text-3xl font-black">Mode examen</h2>
<a href="{{ route('banque') }}" class="mt-3 inline-block font-extrabold underline underline-offset-4">Composer un sujet dans la banque →</a>
<form action="{{ route('examen') }}" method="get" class="mt-5 grid gap-4">
<label class="grid gap-2 font-extrabold">Épreuve<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>Adressage et VLAN · E6 blanc SISR</option><option>QCM Bloc 2</option></select></label>
<label class="grid gap-2 font-extrabold">Durée<select class="w-full border-4 border-black bg-white px-4 py-3 text-lg font-semibold text-black placeholder:text-[#444141] focus:bg-[#FFFBEA] focus:shadow-[4px_4px_0px_#000000] focus:outline-none"><option>1 h</option><option>2 h</option><option>4 h</option></select></label>
<fieldset class="grid gap-2 font-semibold">
<legend class="font-extrabold">Pendant l’épreuve</legend>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Indices désactivés</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Copier-coller bloqué</label>
<label class="flex items-center gap-3"><input type="checkbox" checked class="h-5 w-5 accent-black"> Sortie d’onglet signalée</label>
<label class="flex items-center gap-3"><input type="checkbox" class="h-5 w-5 accent-black"> Ordre des questions mélangé</label>
</fieldset>
<button type="submit" class="inline-flex items-center gap-4 border-4 border-black bg-black px-6 py-4 text-lg font-extrabold text-white shadow-[6px_6px_0px_#ec3013] transition-transform hover:-translate-x-0.5 hover:-translate-y-0.5 hover:bg-[#ec3013] hover:shadow-[8px_8px_0px_#000000] active:translate-x-1.5 active:translate-y-1.5 active:shadow-none">Lancer l’examen</button>
</form>
</section>
</aside>
</div>
</div>
@endsection