Lucas/avsa_form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Lucas
2024-05-11 17:25:51 +02:00
commit 950482dbaf
11 changed files with 467 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
templates/accueil.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AVSA - Familles</title>
</head>
<body>
<a href="formulaire">
<button>S'inscrire</button>
</a>
</body>
</html>

257
templates/formulaire.html Normal file
View File

@@ -0,0 +1,257 @@
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-5 {
float: left;
width: 5%;
margin-top: 6px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-5 .col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
/* .button {
display: inline-block;
border-radius: 4px;
background-color: #04AA6D;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
} */
</style>
</head>
<body>
<h2>Proposition de créneau de balade - A Vélo Sans Age Nantes</h2>
<p>Merci de préciser votre demande ci-dessous :</p>
<div class="container">
<form action="/resultat" method="post">
<div class="row">
<div class="col-25">
<label for="utype">Vous êtes</label>
</div>
<div class="col-75">
<select id="utype" name="user_type">
<option value="usager">Bénéficiaire</option>
<option value="famille">Famille du bénéficiaire</option>
<option value="benevole">Bénévole pilote</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="fname">Prénom</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="first_name" placeholder="Votre prénom...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Nom</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="last_name" placeholder="Votre nom...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="phone">Téléphone</label>
</div>
<div class="col-75">
<input type="text" id="phone" name="phone_number" placeholder="Votre numéro de téléphone...">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="date">Disponible le </label>
</div>
<div class="col-75">
<input type="date" id="date" name="availability_date" placeholder="">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="hstart">À</label>
</div>
<div class="col-5">
<select id="hstart" name="start_availability_h" style="text-align: center">
<option value=08>08h</option>
<option value=09>09h</option>
<option value=10>10h</option>
<option value=11>11h</option>
<option value=12>12h</option>
<option value=13>13h</option>
<option value=14>14h</option>
<option value=15>15h</option>
<option value=16>16h</option>
<option value=17>17h</option>
<option value=18>18h</option>
<option value=19>19h</option>
</select>
</div>
<div class="col-5">
<select id="mstart" name="start_availability_m" style="text-align: center">
<option value=00>00</option>
<option value=15>15</option>
<option value=30>30</option>
<option value=45>45</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="hend">À</label>
</div>
<div class="col-5">
<select id="hend" name="end_availability_h" style="text-align: center">
<option value=08>08h</option>
<option value=09>09h</option>
<option value=10>10h</option>
<option value=11>11h</option>
<option value=12>12h</option>
<option value=13>13h</option>
<option value=14>14h</option>
<option value=15>15h</option>
<option value=16>16h</option>
<option value=17>17h</option>
<option value=18>18h</option>
<option value=19>19h</option>
</select>
</div>
<div class="col-5">
<select id="mend" name="end_availability_m" style="text-align: center">
<option value=00>00</option>
<option value=15>15</option>
<option value=30>30</option>
<option value=45>45</option>
</select>
</div>
</div>
<!-- <div class="row">
<div class="col-25">
<label for="tstart">De </label>
</div>
<div class="col-75">
<input type="time" id="tstart" name="start_availability_time" placeholder="">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="tend">Jusqu'à</label>
</div>
<div class="col-75">
<input type="time" id="tend" name="end_availability_time" placeholder="">
</div>
</div> -->
<br>
<div class="row">
<input type="submit" value="Envoyer">
</div>
<!-- <div style="text-align: center">
<button type="submit" class="button" style="vertical-align:middle"><span>Envoyer</span></button>
</div> -->
</form>
</div>
<div>
<a href="/">
<button>Retour</button>
</a>
</div>
</body>
</html>

20
templates/resultat.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>AVSA - Familles</title>
</head>
<body>
<h1>Votre demande a bien été prise en compte :</h1>
<p>Vous êtes : {{ user_type }}</p>
<p>Prenom : {{ first_name }}</p>
<p>Nom : {{ last_name }}</p>
<p>Téléphone : {{ user_message }}</p>
<p>Date : {{ availability_date }}</p>
<p>Horaire : de {{ start_availability_h }}h{{ start_availability_m }} à {{ end_availability_h }}h{{ end_availability_m }}</p>
<a href="/">
<button>Retour</button>
</a>
</body>
</html>