618cd7efbe
Certificat Let's Encrypt obtenu et renouvelé par certbot (authentificateur nginx), expiration surveillée par Prometheus. TLS selon Mozilla v6.0 intermediate, HSTS, CSP stricte avec nonce sur l'application et adaptée sur la vitrine, xterm.js servi par le portail. Page de statut prévue sur status.syllabuslab.fr, administration de Grafana et Kuma par tunnel seul. Corrige aussi une faille XSS dans la page de classe, la page /cours en erreur depuis l'étape 8, et NodeSource relancé à chaque déploiement. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
68 lines
9.3 KiB
PHP
68 lines
9.3 KiB
PHP
@extends('layouts.vitrine')
|
||
|
||
@section('titre', 'Créer une classe')
|
||
|
||
@section('contenu')
|
||
<section class="relative overflow-hidden">
|
||
<div aria-hidden="true" class="pointer-events-none absolute inset-0"><span class="flotte absolute left-[40%] bottom-10 h-9 w-9 rounded-full border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] [animation-delay:1.5s]"></span></div>
|
||
<div class="relative mx-auto grid max-w-7xl gap-12 px-5 pb-24 pt-16 lg:grid-cols-12 lg:px-10">
|
||
<div class="lg:col-span-5">
|
||
<p class="inline-block border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-bold">Enseignants</p>
|
||
<h1 class="mt-8 text-6xl font-extrabold leading-[1.05] tracking-tight sm:text-7xl">Créer une classe.</h1>
|
||
<p class="mt-6 inline-block border border-[#e3e5e8] rounded-2xl bg-[#fce8e6] px-4 py-2 text-2xl font-extrabold">Gratuit · sans CB</p>
|
||
<p class="mt-8 text-xl font-medium">Ensuite, ajoutez vos élèves par code de classe, import CSV ou saisie rapide. Pour les mineurs, on ne demande que le nom, le prénom et le groupe.</p>
|
||
</div>
|
||
<form action="{{ route('inscription.store') }}" method="post" class="grid gap-5 border border-[#e3e5e8] rounded-2xl bg-[#eef0fd] p-7 sm:grid-cols-2 lg:col-span-7">
|
||
@csrf
|
||
@if ($errors->any())
|
||
<div class="sm:col-span-2 font-bold text-[#A63D2A]">
|
||
<ul>@foreach ($errors->all() as $erreur)<li>{{ $erreur }}</li>@endforeach</ul>
|
||
</div>
|
||
@endif
|
||
<label class="grid gap-2 font-extrabold">Prénom<input name="prenom" value="{{ old('prenom') }}" autocomplete="given-name" required class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
|
||
<label class="grid gap-2 font-extrabold">Nom<input name="nom" value="{{ old('nom') }}" autocomplete="family-name" required class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
|
||
<label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" value="{{ old('email') }}" autocomplete="email" required class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
|
||
<label class="grid gap-2 font-extrabold">Mot de passe<input type="password" name="password" autocomplete="new-password" required minlength="8" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
|
||
<label class="grid gap-2 font-extrabold">Confirme le mot de passe<input type="password" name="password_confirmation" autocomplete="new-password" required minlength="8" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
|
||
<div class="sm:col-span-2"><div class="grid gap-4">
|
||
<label class="grid gap-2 font-extrabold" for="etab-inscription">Établissement</label>
|
||
<select id="etab-inscription" name="etablissement_nom_liste" required data-etab class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 -mt-2">
|
||
<option value="">Choisir dans la liste</option>
|
||
<optgroup label="Lycées"><option value="Lycée Jean-Jaurès · Montreuil">Lycée Jean-Jaurès · Montreuil</option><option value="Lycée Louis-Armand · Paris 15e">Lycée Louis-Armand · Paris 15e</option><option value="Lycée Gustave-Eiffel · Bordeaux">Lycée Gustave-Eiffel · Bordeaux</option><option value="Lycée La Martinière Monplaisir · Lyon">Lycée La Martinière Monplaisir · Lyon</option></optgroup>
|
||
<optgroup label="BTS et IUT"><option value="Lycée Saint-Exupéry · Marseille">Lycée Saint-Exupéry · Marseille</option><option value="IUT de Villetaneuse · R&T">IUT de Villetaneuse · R&T</option><option value="IUT de Lannion · R&T">IUT de Lannion · R&T</option></optgroup>
|
||
<optgroup label="Organismes de formation"><option value="Télécom Saint-Étienne · école d’ingénieurs">Télécom Saint-Étienne · école d’ingénieurs</option><option value="AFPA · Centre de Rennes">AFPA · Centre de Rennes</option></optgroup>
|
||
<option value="autre">Mon établissement n’est pas dans la liste</option>
|
||
</select>
|
||
<div data-etab-autre hidden class="relative grid gap-4 border border-[#e3e5e8] rounded-2xl bg-white p-5">
|
||
<span class="absolute -right-3 -top-4 border border-[#dadce0] rounded-lg bg-[#e6f4ea] px-3 py-1 text-sm font-extrabold">Gratuit · sans CB</span>
|
||
<p class="font-semibold">C’est avec grand plaisir qu’on vous laisse l’accès, sans carte bancaire. En échange, donnez-nous un coup de pouce : aidez-nous à faire souscrire une offre à votre établissement, ou envoyez-nous vos critiques et remarques pour rendre l’outil plus utile.</p>
|
||
<label class="grid gap-2 font-extrabold">Nom de l’établissement<input name="etablissement_nom" data-req class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30" placeholder="Lycée Marie-Curie"></label>
|
||
<div class="grid gap-4 sm:grid-cols-2">
|
||
<label class="grid gap-2 font-extrabold">Ville<input name="etablissement_ville" data-req class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"></label>
|
||
<label class="grid gap-2 font-extrabold">Code UAI <span class="font-semibold">(facultatif)</span><input name="etablissement_uai" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30 font-mono" placeholder="0931234A"></label>
|
||
</div>
|
||
<fieldset class="grid gap-2 font-semibold">
|
||
<legend class="font-extrabold">Mon coup de pouce</legend>
|
||
<label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="offre" class="h-5 w-5 accent-black"> Aider à faire souscrire une offre</label>
|
||
<label class="flex items-center gap-3"><input type="checkbox" name="aide[]" value="avis" class="h-5 w-5 accent-black"> Envoyer mes critiques et remarques</label>
|
||
</fieldset>
|
||
</div>
|
||
</div></div>
|
||
<label class="grid gap-2 font-extrabold">Formation<select name="formation" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30"><option>Lycée NSI</option><option>BTS SIO SISR</option><option>BTS CIEL</option><option>BUT R&T</option><option>Titre pro TSSR</option></select></label>
|
||
<label class="grid gap-2 font-extrabold">Nom de la classe<input name="classe" class="w-full rounded-xl border border-[#c4c7c5] bg-white px-4 py-3 text-base font-semibold text-black placeholder:text-[#5f6368] focus:border-[#0b57d0] focus:outline-none focus:ring-2 focus:ring-[#0b57d0]/30" placeholder="2nde NSI · Groupe B"></label>
|
||
<div class="sm:col-span-2"><button type="submit" style="display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 28px;border:0;border-radius:999px;background:#0b57d0;color:#fff;font-size:16px;font-weight:700;cursor:pointer">Créer la classe <span class="font-mono" aria-hidden="true">→</span></button>
|
||
<p class="mt-3 font-semibold">Aucune carte bancaire demandée.</p></div>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
<script nonce="{{ Vite::cspNonce() }}">
|
||
document.querySelectorAll('[data-etab]').forEach(function (s) {
|
||
var box = s.parentNode.querySelector('[data-etab-autre]');
|
||
function maj() {
|
||
box.hidden = s.value !== 'autre';
|
||
box.querySelectorAll('[data-req]').forEach(function (i) { i.required = !box.hidden; });
|
||
}
|
||
s.addEventListener('change', maj); maj();
|
||
});
|
||
</script>
|
||
@endsection
|