From 62210f16a7cd485f416c6da8332f0fb52bf1527e Mon Sep 17 00:00:00 2001
From: Matias Mennecart <matias.mennecart.etu@univ-lille.fr>
Date: Fri, 22 Dec 2023 14:15:52 +0100
Subject: [PATCH] Ajouts pages conducteur
---
conducteur.html | 82 ++++++++++-----
css/conducteur.css | 191 +++++++++++++++++++++--------------
forms/conducteur-result.html | 99 ++++++++++++++++++
3 files changed, 272 insertions(+), 100 deletions(-)
create mode 100644 forms/conducteur-result.html
diff --git a/conducteur.html b/conducteur.html
index 857196c..3445e3f 100644
--- a/conducteur.html
+++ b/conducteur.html
@@ -3,38 +3,70 @@
<head>
<meta charset='utf-8'>
<title>Klaxit - Reserver</title>
- <link rel='stylesheet' href="./public/styles.css">
- <link rel='stylesheet' href="./public/conducteur.css">
- <link rel='stylesheet' href="./public/footer.css">
+ <link rel='stylesheet' href="./css/conducteur.css">
+ <link rel='stylesheet' href="./css/footer.css">
</head>
<body>
<header>
<div class="nav-bar">
- <nav>
- <a href="index.html">Accueil</a>
- <a href="reserver.html">Passager</a>
- <a href="login.html" class="login-button">Login</a>
- </nav>
- </div>
- </header>
+ <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">CONDUCTEUR</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="reserve-form">
+ <form action="./forms/conducteur-result.html" method="post">
+ <label id="title">Ajouter un trajet </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 :</label>
- <input type="string" id="lieux"/>
- <label for="Heure">Heure de départ :</label>
- <input type="nombre" id="heure">
- </div>
- <div class="button">
- <button class="confirm-button" type="submit">Confirmer</button>
- </div>
- </form>
-
</div>
- </main>
+ </section>
+
+</main>
<footer>
diff --git a/css/conducteur.css b/css/conducteur.css
index 8b24679..98ed7d1 100644
--- a/css/conducteur.css
+++ b/css/conducteur.css
@@ -3,8 +3,8 @@
src: url('../fonts/Inter/static/Inter-SemiBold.ttf');
}
-
- body {
+
+body {
margin: 0;
}
@@ -13,12 +13,7 @@ html {
font-family: "Inter";
}
-nav {
- position: sticky;
- top: 0px;
- background-color: white;
- padding: 10px;
-}
+
h1{
font-size: 50px;
@@ -38,7 +33,6 @@ h2{
width: 100%;
left: 0;
top: 0;
-
}
.boxNav{
display: flex;
@@ -67,6 +61,54 @@ header{
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 {
display: flex;
@@ -79,96 +121,95 @@ header{
background-color: #ECEDFEFF;
}
-.corpContainer{
- height: fit-content;
- width: 800px;
- background-color:white;
- border-radius: 50px;
- margin-top: 30px;
-}
-
.Container{
- margin: 25px;
+ margin-top: 25px;
width: auto;
+ height: fit-content;
display: flex;
justify-content: center;
height: fit-content;
+ flex-direction: column;
+ align-items: center;
+ color: #3f2875;
}
-
-
-
-
-div.connection-success {
- background-color: #B0F2B6;
- font-family: "Inter";
- color: black;
+div.reserve-form {
+ margin-top: 5%;
+ background-color: white;
+ border-radius: 45px;
+ box-shadow: 0px 100px 80px rgba(0,0,0,0.04), 0px 41.7776px 33.4221px rgba(0,0,0,0.0287542);
+ width: 70%;
text-align: center;
}
-div.connection-success>a {
- text-decoration: underline;
- background-color: #B0F2B6;
- color: black;
-}
-
-
-footer {
- position: sticky;
- bottom: 0px;
-}
-.connect-panel {
- background-color: white;
- 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 {
+ font-family: "Inter";
}
-
-.texte{
- display: flex;
- flex-direction: column;
- padding-left: 50px;
- padding-top: 60px;
- font-size: 35px;
+form>label#title {
+ font-size: 80px;
+ font-family: 'Inter';
+ color: #231543;
+ font-style: oblique;
}
-
-.panel{
- text-align: center;
+form>label{
+ margin-top: 5%;
}
-form>div>input {
- width: 150%;
- height: 23px;
- background-color:#D9D9D9;
+form>select {
+ font-size: xx-large;
+ background-color: #D9D9D9;
+ text-decoration: none;
border: none;
- margin-top: 2px;
+ margin-bottom: 5%;
+ text-align: center;
+ width: 60%;
+ font-family: "Inter";
+ color: #231543;
}
-
-div.button {
- cursor: pointer;
- width: 70%;
- margin-left: 60%;
+form>button {
+ margin-bottom: 5%;
+ width: 30%;
+ border: 2px solid white;
background: linear-gradient(201.97deg, #9968F7 12.27%, #3936CC 83.53%);
- border-radius: 45px;
- margin-top: 25%;
-}
-
-div>button {
- cursor: pointer;
- display: contents;
- font-size: 45px;
+ font-size: 30px;
+ border-radius: 40px;
+ color: white;
font-family: "Inter";
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";
-
+ color: black;
+ text-align: center;
+ margin-top: 5%;
+ width: 70%;
}
+div.conducteur-success>a {
+ text-decoration: underline;
+ background-color: #B0F2B6;
+ color: black;
+}
+
+
+
+
diff --git a/forms/conducteur-result.html b/forms/conducteur-result.html
new file mode 100644
index 0000000..25cf4bf
--- /dev/null
+++ b/forms/conducteur-result.html
@@ -0,0 +1,99 @@
+<!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 </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
--
GitLab