Skip to content
Snippets Groups Projects
Commit 62210f16 authored by Matias Mennecart's avatar Matias Mennecart
Browse files

Ajouts pages conducteur

parent 855ac52b
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
conducteur.html
+ 57
− 25
View file @ 62210f16
...@@ -3,38 +3,70 @@ ...@@ -3,38 +3,70 @@
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<title>Klaxit - Reserver</title> <title>Klaxit - Reserver</title>
<link rel='stylesheet' href="./public/styles.css"> <link rel='stylesheet' href="./css/conducteur.css">
<link rel='stylesheet' href="./public/conducteur.css"> <link rel='stylesheet' href="./css/footer.css">
<link rel='stylesheet' href="./public/footer.css">
</head> </head>
<body> <body>
<header> <header>
<div class="nav-bar"> <div class="nav-bar">
<nav> <nav>
<a href="index.html">Accueil</a> <a class="img" href="index.html"><img src="./css/images/logoKlaxit_BBCD_Color.webp" alt="Logo Klaxit"></a>
<a href="reserver.html">Passager</a> <div>
<a href="login.html" class="login-button">Login</a> <a href="index.html">ACCEUIL</a>
</nav> <a href="conducteur.html">CONDUCTEUR</a>
</div> <a href="login.html" class="login-button">LOGIN</a>
</header> </div>
</nav>
</div>
<div class="back"></div>
<div class="textHeader">
<div class="test">
<h1>Comment pouvons nous vous aider ?</h1>
<h2>Vous trouverez ici les questions les plus récurentes.</h2>
<p>Si cette page ne vous aide pas a répondre a votre question dirigez vous vers la page de contact.</p>
</div>
</div>
</header>
<main>
<section class="corp">
<div class="Container">
<div class="reserve-form">
<form action="./forms/conducteur-result.html" method="post">
<label id="title">Ajouter un trajet&nbsp;</label><br>
<p>Inscrivez vous en tant que conducteur pour conduire vos collegues au travail</p>
<label>Selectionner le bureau dans lequel vous vous rendez</label><br>
<select id="start-point">
<option value="bureau1">Paris - 8 Rue Sainte-Foy</option>
<option value="bureau2">Paris - 6 Rue Saint Sabin</option>
</select>
<br>
<label>Selectionner le nombre de passager que vous pouvez transporter</label><br>
<select id="start-point">
<option value="bureau1">1</option>
<option value="bureau2">2</option>
<option value="bureau2">3</option>
<option value="bureau2">4</option>
</select>
<br>
<label>Indiquez l'heure de depart</label><br>
<input type="time" class="time" name="appt" min="05:00" max="14:00" required />
<br>
<label>Indiquez l'adresse de depart</label><br>
<input type="text" class="adress" name="name" placeholder="Adresse de départ"/>
<br>
<button class="search-button" type="submit">Ajouter</button>
</form>
</div>
<main>
<div class="conducteur-panel">
<form action="./forms/conducteur-result.html" method="post">
<div class="content">
<label for="Départ">Votre point de départ&nbsp;:</label>
<input type="string" id="lieux"/>
<label for="Heure">Heure de départ&nbsp;:</label>
<input type="nombre" id="heure">
</div>
<div class="button">
<button class="confirm-button" type="submit">Confirmer</button>
</div>
</form>
</div> </div>
</main> </section>
</main>
<footer> <footer>
......
css/conducteur.css
+ 116
− 75
View file @ 62210f16
...@@ -3,8 +3,8 @@ ...@@ -3,8 +3,8 @@
src: url('../fonts/Inter/static/Inter-SemiBold.ttf'); src: url('../fonts/Inter/static/Inter-SemiBold.ttf');
} }
body { body {
margin: 0; margin: 0;
} }
...@@ -13,12 +13,7 @@ html { ...@@ -13,12 +13,7 @@ html {
font-family: "Inter"; font-family: "Inter";
} }
nav {
position: sticky;
top: 0px;
background-color: white;
padding: 10px;
}
h1{ h1{
font-size: 50px; font-size: 50px;
...@@ -38,7 +33,6 @@ h2{ ...@@ -38,7 +33,6 @@ h2{
width: 100%; width: 100%;
left: 0; left: 0;
top: 0; top: 0;
} }
.boxNav{ .boxNav{
display: flex; display: flex;
...@@ -67,6 +61,54 @@ header{ ...@@ -67,6 +61,54 @@ header{
height: 400px; height: 400px;
} }
header>div.nav-bar{
background-color: white;
width: 100%;
height: 5%;
font-family: 'Inter', sans-serif;
font-style: normal;
margin: 0;
padding: 0;
}
nav>a{
text-decoration: none;
color: #231543;
}
nav>div {
display: inline-flex;
justify-content: space-around;
margin-left: 40%;
width: 35%;
}
nav>div>a{
text-decoration: none;
color: #231543;
font-size: 30px;
}
nav>a.img {
color: white;
font-size: 80px;
}
nav>a>img {
width: 10%;
margin-left: 8%;
}
nav>div>a.login-button {
text-decoration: none;
text-shadow: none;
color: white;
background: linear-gradient(201.97deg, #9968F7 12.27%, #3936CC 83.53%);
width: 30%;
text-align: center;
border-radius: 40px;
font-style: oblique;
}
.test { .test {
display: flex; display: flex;
...@@ -79,96 +121,95 @@ header{ ...@@ -79,96 +121,95 @@ header{
background-color: #ECEDFEFF; background-color: #ECEDFEFF;
} }
.corpContainer{
height: fit-content;
width: 800px;
background-color:white;
border-radius: 50px;
margin-top: 30px;
}
.Container{ .Container{
margin: 25px; margin-top: 25px;
width: auto; width: auto;
height: fit-content;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: fit-content; height: fit-content;
flex-direction: column;
align-items: center;
color: #3f2875;
} }
div.reserve-form {
margin-top: 5%;
background-color: white;
border-radius: 45px;
div.connection-success { box-shadow: 0px 100px 80px rgba(0,0,0,0.04), 0px 41.7776px 33.4221px rgba(0,0,0,0.0287542);
background-color: #B0F2B6; width: 70%;
font-family: "Inter";
color: black;
text-align: center; text-align: center;
} }
div.connection-success>a {
text-decoration: underline;
background-color: #B0F2B6;
color: black;
}
footer {
position: sticky;
bottom: 0px;
}
.connect-panel { form {
background-color: white; font-family: "Inter";
border-radius: 45px;
box-shadow: 0px 100px 400px rgba(0,0,0,0.04), 0px 41.7776px 33.4221px rgba(0,0,0,0.0287542);
height : 400px;
margin-top: 5px;
} }
form>label#title {
.texte{ font-size: 80px;
display: flex; font-family: 'Inter';
flex-direction: column; color: #231543;
padding-left: 50px; font-style: oblique;
padding-top: 60px;
font-size: 35px;
} }
form>label{
.panel{ margin-top: 5%;
text-align: center;
} }
form>div>input { form>select {
width: 150%; font-size: xx-large;
height: 23px; background-color: #D9D9D9;
background-color:#D9D9D9; text-decoration: none;
border: none; border: none;
margin-top: 2px; margin-bottom: 5%;
text-align: center;
width: 60%;
font-family: "Inter";
color: #231543;
} }
form>button {
div.button { margin-bottom: 5%;
cursor: pointer; width: 30%;
width: 70%; border: 2px solid white;
margin-left: 60%;
background: linear-gradient(201.97deg, #9968F7 12.27%, #3936CC 83.53%); background: linear-gradient(201.97deg, #9968F7 12.27%, #3936CC 83.53%);
border-radius: 45px; font-size: 30px;
margin-top: 25%; border-radius: 40px;
} color: white;
div>button {
cursor: pointer;
display: contents;
font-size: 45px;
font-family: "Inter"; font-family: "Inter";
font-style: oblique; font-style: oblique;
width: 100%;
color: white;
} }
form { input.time {
font-size: xx-large;
width: 45%;
text-align: center;
margin-bottom: 5%;
}
input.adress {
font-size: xx-large;
width: 45%;
margin-bottom: 5%;
}
div.conducteur-success {
background-color: #B0F2B6;
font-family: "Inter"; font-family: "Inter";
color: black;
text-align: center;
margin-top: 5%;
width: 70%;
} }
div.conducteur-success>a {
text-decoration: underline;
background-color: #B0F2B6;
color: black;
}
forms/conducteur-result.html 0 → 100644
+ 99
− 0
View file @ 62210f16
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Klaxit - Reserver</title>
<link rel='stylesheet' href="../css/conducteur.css">
<link rel='stylesheet' href="../css/footer.css">
</head>
<body>
<header>
<div class="nav-bar">
<nav>
<a class="img" href="index.html"><img src="../css/images/logoKlaxit_BBCD_Color.webp" alt="Logo Klaxit"></a>
<div>
<a href="../index.html">ACCEUIL</a>
<a href="../conducteur.html">RESERVER</a>
<a href="../login.html" class="login-button">LOGIN</a>
</div>
</nav>
</div>
<div class="back"></div>
<div class="textHeader">
<div class="test">
<h1>Comment pouvons nous vous aider ?</h1>
<h2>Vous trouverez ici les questions les plus récurentes.</h2>
<p>Si cette page ne vous aide pas a répondre a votre question dirigez vous vers la page de contact.</p>
</div>
</div>
</header>
<main>
<section class="corp">
<div class="Container">
<div class="conducteur-success">
Votre tajet a été ajouté ! <br>
Vous pouvez desormais <a href="../index.html">retourner a l'accueil</a>
</div>
<div class="reserve-form">
<form action="conducteur-result.html" method="post">
<label id="title">Ajouter un trajet&nbsp;</label><br>
<p>Inscrivez vous en tant que conducteur pour conduire vos collegues au travail</p>
<label>Selectionner le bureau dans lequel vous vous rendez</label><br>
<select id="start-point">
<option value="bureau1">Paris - 8 Rue Sainte-Foy</option>
<option value="bureau2">Paris - 6 Rue Saint Sabin</option>
</select>
<br>
<label>Selectionner le nombre de passager que vous pouvez transporter</label><br>
<select id="start-point">
<option value="bureau1">1</option>
<option value="bureau2">2</option>
<option value="bureau2">3</option>
<option value="bureau2">4</option>
</select>
<br>
<label>Indiquez l'heure de depart</label><br>
<input type="time" class="time" name="appt" min="05:00" max="14:00" required />
<br>
<label>Indiquez l'adresse de depart</label><br>
<input type="text" class="adress" name="name" placeholder="Adresse de départ"/>
<br>
<button class="search-button" type="submit">Ajouter</button>
</form>
</div>
</div>
</section>
</main>
<footer>
<section class="links">
<div class="f-column">
<a href="">Qui sommes nous ?</a> <br />
<a href="https://www.klaxit.com/presse">Espace presse</a> <br />
<a href="contact.html">Nous contacter</a>
</div>
<div class="s-column">
<a href="conducteur.html">Conducteur</a> <br />
<a href="passager.html">Passager</a> <br />
<a href="faq.html">FAQ</a> <br />
</div>
<div class="t-colum">
<a href="https://www.klaxit.com/conditions-generales">CGU</a> <br />
<a href="https://www.klaxit.com/politique-de-confidentialite">Politique de confidentialité</a> <br />
<a href="https://www.klaxit.com/mentions-legales">mentions légales</a>
</div>
</section>
</footer>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment