62 lines
7.7 KiB
PHP
62 lines
7.7 KiB
PHP
|
@extends('layouts.vitrine')
|
|||
|
|
|
|||
|
|
@section('titre', 'Se connecter')
|
|||
|
|
|
|||
|
|
@section('contenu')
|
|||
|
|
<section class="relative overflow-hidden">
|
|||
|
|
<div aria-hidden="true" class="pointer-events-none absolute inset-0"></div>
|
|||
|
|
<div class="relative mx-auto max-w-5xl px-5 pb-28 pt-24 lg:px-10">
|
|||
|
|
<h1 style="margin:0;text-align:center;font-size:clamp(40px,6vw,64px);line-height:1.05;font-weight:800;letter-spacing:-0.03em;color:#0b1220">Se connecter.</h1>
|
|||
|
|
<div class="mt-12 grid gap-10 lg:grid-cols-2">
|
|||
|
|
<form action="{{ route('eleve') }}" method="get" class="grid content-start gap-5 p-8" style="border:1px solid #e3e5e8;border-radius:24px;background:#fff">
|
|||
|
|
<h2 style="margin:0;font-size:24px;font-weight:800;color:#0b1220">Je suis élève</h2>
|
|||
|
|
<label class="grid gap-2 font-extrabold">Identifiant<input name="identifiant" autocomplete="username" 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="lea.m.2nde-b"></label>
|
|||
|
|
<label class="grid gap-2 font-extrabold">Code secret<input type="password" name="code" autocomplete="current-password" 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"></label>
|
|||
|
|
<p class="font-medium">Ils sont sur ta fiche de connexion. Tu peux aussi scanner le QR.</p>
|
|||
|
|
<div><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">Entrer <span class="font-mono" aria-hidden="true">→</span></button></div>
|
|||
|
|
</form>
|
|||
|
|
<form action="{{ route('suivi') }}" method="get" class="grid content-start gap-5 p-8" style="border:1px solid #e3e5e8;border-radius:24px;background:#fff">
|
|||
|
|
<h2 style="margin:0;font-size:24px;font-weight:800;color:#0b1220">Je suis enseignant</h2>
|
|||
|
|
<div class="grid gap-4">
|
|||
|
|
<label class="grid gap-2 font-extrabold" for="etab-connexion">Établissement</label>
|
|||
|
|
<select id="etab-connexion" name="etablissement_id" 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="L0">Lycée Jean-Jaurès · Montreuil</option><option value="L1">Lycée Louis-Armand · Paris 15e</option><option value="L2">Lycée Gustave-Eiffel · Bordeaux</option><option value="L3">Lycée La Martinière Monplaisir · Lyon</option></optgroup>
|
|||
|
|
<optgroup label="BTS et IUT"><option value="B0">Lycée Saint-Exupéry · Marseille</option><option value="B1">IUT de Villetaneuse · R&T</option><option value="B2">IUT de Lannion · R&T</option></optgroup>
|
|||
|
|
<optgroup label="Organismes de formation"><option value="O0">Télécom Saint-Étienne · école d’ingénieurs</option><option value="O1">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>
|
|||
|
|
<label class="grid gap-2 font-extrabold">E-mail<input type="email" name="email" autocomplete="email" 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="current-password" 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="flex flex-wrap items-center gap-5"><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">Se connecter</button><a href="{{ route('register') }}" class="font-extrabold underline underline-offset-4">Créer une classe</a></div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
<script>
|
|||
|
|
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
|