Prepare production
This commit is contained in:
Lucas
257
app/templates/formulaire.html
Normal file
257
app/templates/formulaire.html
Normal 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>
|
||||
Reference in New Issue
Block a user