-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathorder.html
135 lines (126 loc) · 6.44 KB
/
order.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./assets/stylesheets/styles.css" rel="stylesheet">
<title>panier - Orinoco</title>
</head>
<body>
<div class="loader-page"></div>
<!-- header -->
<header class="bg-purple">
<div class="container d-flex flex-wrap justify-content-between align-items-center my-3">
<a href="./index.html">
<img class="rounded " src="./assets/images/15675819263013_image1.png" width="120px" alt="Bouton retour Accueil - logo Orinoco">
</a>
<ul class="nav">
<li class="nav-item mt-2"
><a class="nav-link active h5 white" href="./index.html" >Accueil</a>
</li>
<li class="nav-item ">
<a class="nav-link active" href="order.html">
<img class="white-svg" src="./assets/icons/shopping-basket.svg" width="40px" alt="bouton panier de commande" >
</a>
</li>
</ul>
</div>
</header>
<!-- page content -->
<div class="container" id="main-content">
<form class="row" id="contact-form" name="contact-form">
<!-- customer form -->
<div class="col-12 col-xl-6">
<h2 class="h1 text-center my-5">Informations client</h2>
<p>Afin de recevoir votre commande dans les plus bref délais, nous remercions de saisir vos informations complètes.</p>
<div class="form-group row my-4">
<div class="col">
<label for="firstName" class="mb-1">Prénom</label>
<input type="text-area" name="firstName" class="form-control" id="firstName" placeholder="Sophie" required minlength="2" maxlength="40">
<small id="firstNameHelp" class="form-text text-muted"></small>
</div>
<div class="col">
<label for="lastName" class="mb-1">Nom</label>
<input type="text" name="lastName" class="form-control" id="lastName" placeholder="Dupont" required minlength="2" maxlength="40">
<small id="lastNameHelp" class="form-text text-muted"></small>
</div>
</div>
<div class="form-group my-4">
<label for="address" class="mb-1">addresse</label>
<input type="text" name="address" class="form-control" id="address" placeholder="1 avenue de Bretagne" required minlength="2" maxlength="80">
<small id="addressHelp" class="form-text text-muted"></small>
</div>
<div class="form-group my-4">
<label for="city" class="mb-1">Code postal - Ville</label>
<input type="text" name="city" class="form-control" id="city" placeholder="45234 Orléans" required minlength="2" maxlength="80">
<small id="cityHelp" class="form-text text-muted"></small>
</div>
<div class="form-group my-4">
<label for="email" class="mb-1">Mail</label>
<input type="email" name="email" class="form-control" id="email" placeholder="sophie.dupont@gmail.com" required minlength="2" maxlength="60" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<small id="emailHelp" class="form-text text-muted">Toutes vos données sont sécurisées.</small>
</div>
</div>
<div class="col-12 col-xl-1"></div>
<!-- cart content -->
<div class="col-12 col-xl-5">
<h1 class="text-center my-5">Récapitulatif</h1>
<table class="table">
<thead class="thead-light">
<tr>
<th class="col col-sm-3 text-center">Produit</th>
<th class="col col-sm-3 text-center">Produit</th>
<th class="col col-sm-2 text-center">Quantité</th>
<th class="col col-sm-2 text-center">prix</th>
<th class="col col-sm-2"> </th>
</tr>
</thead>
<tbody id="cartTable">
</tbody>
</table>
<br>
<table class="table table-borderless">
<tbody>
<tr id="totalPrice">
</tr>
<tr>
<td colspan="3" class="text-center">
<button type="submit" class="btn btn-success" id="submit-btn" disabled>Passer commande</button>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<!-- footer -->
<footer class="bg-purple mt-5">
<div class="container">
<div class="row text-center align-items-center">
<div class="col-md-4 mb-3 mt-4 my-md-5 box">
<img class="rounded" src="./assets/images/15675819263013_image1.png" width="120px" alt="Bouton retour Accueil - logo Orinoco">
</div>
<div class="col-md-4 mb-3 mt-3 my-md-5 box">
<span class="h6 white ">Réalisé avec ❤️ par Orinoco</span>
</div>
<div class="col-md-4 mb-2 mt-3 my-md-5 box">
<ul class="">
<li class="list-inline-item mr-4">
<a href="#">
<img src="./assets/icons/facebook.svg" width="30px" alt="bouton Facebook">
</a>
</li>
<li class="list-inline-item">
<a href="#">
<img src="./assets/icons/instagram.svg" width="30px" alt="bouton Instagram">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script src="./src/order.js"></script>
</body>
</html>