Maquettes Claude Design avec visio de classe
This commit is contained in:
Adam Belkacemi
parent
238070ae54
commit
236d2d3567
243 changed files with 27992 additions and 0 deletions
|
|
@ -0,0 +1,61 @@
|
|||
@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="etoile flotte absolute right-[8%] top-10 h-14 w-14 bg-[#7CF2C0] [--r:12deg]"></span><span class="flotte absolute left-[40%] bottom-10 h-9 w-9 rounded-full border-4 border-black bg-[#FF6FB5] [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 -rotate-2 border-2 border-black bg-[#7CF2C0] px-3 py-1 text-sm font-extrabold uppercase tracking-wider shadow-[4px_4px_0px_#000000]">Enseignants</p>
|
||||
<h1 class="mt-8 text-6xl font-black leading-[0.9] tracking-tighter sm:text-7xl">Créer une classe.</h1>
|
||||
<p class="mt-6 inline-block rotate-2 border-4 border-black bg-[#FF6FB5] px-4 py-2 text-2xl font-black shadow-[5px_5px_0px_#000000]">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('suivi') }}" method="get" class="grid gap-5 border-4 border-black bg-[#C4B5FD] p-7 shadow-[8px_8px_0px_#000000] sm:grid-cols-2 lg:col-span-7">
|
||||
@csrf
|
||||
<label class="grid gap-2 font-extrabold">Prénom<input name="prenom" autocomplete="given-name" required 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"></label>
|
||||
<label class="grid gap-2 font-extrabold">Nom<input name="nom" autocomplete="family-name" required 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"></label>
|
||||
<label class="grid gap-2 font-extrabold sm:col-span-2">E-mail professionnel<input type="email" name="email" autocomplete="email" required 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"></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_id" required data-etab 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 -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-4 border-black bg-white p-5 shadow-[5px_5px_0px_#000000]">
|
||||
<span class="absolute -right-3 -top-4 rotate-3 border-2 border-black bg-[#FF6FB5] px-3 py-1 text-sm font-extrabold shadow-[3px_3px_0px_#000000]">Version démo</span>
|
||||
<p class="font-semibold">Paillasse est en version démo. 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 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" 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 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"></label>
|
||||
<label class="grid gap-2 font-extrabold">Code UAI <span class="font-semibold">(facultatif)</span><input name="etablissement_uai" 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 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 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>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 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" placeholder="2nde NSI · Groupe B"></label>
|
||||
<div class="sm:col-span-2"><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">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>
|
||||
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
|
||||
Loading…
Add table
Add a link
Reference in a new issue