-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcart.html
146 lines (137 loc) · 6.46 KB
/
cart.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
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Primary Meta Tags -->
<title>Panier - Orinoco</title>
<meta name="title" content="Panier - Orinoco">
<meta name="description" content="Orinoco est un site e-commerce à thème. C'est aussi le 5ième projet du parcours développeur web chez OpenClassrooms.">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://orinoco.mathisbarre.com/cart.html">
<meta property="og:title" content="Panier - Orinoco">
<meta property="og:description" content="Orinoco est un site e-commerce à thème. C'est aussi le 5ième projet du parcours développeur web chez OpenClassrooms.">
<meta property="og:image" content="http://orinoco.mathisbarre.com/images/orinoco.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://orinoco.mathisbarre.com/cart.html">
<meta property="twitter:title" content="Panier - Orinoco">
<meta property="twitter:description" content="Orinoco est un site e-commerce à thème. C'est aussi le 5ième projet du parcours développeur web chez OpenClassrooms.">
<meta property="twitter:image" content="http://orinoco.mathisbarre.com/images/orinoco.png">
<link rel="canonical" href="https://orinoco-v2.mathisbarre.com/cart" />
<link href="./styles/compiled.css" rel="stylesheet" />
<script src="./js/config.js" defer></script>
<script src="./js/cart.utils.js" defer></script>
<script src="./js/pages/cart.js" defer></script>
</head>
<body>
<div class="container px-4 py-8 mx-auto">
<!-- HEADER -->
<header class="flex items-center justify-between w-full px-6 py-2 rounded-lg bg-oniPink">
<a href="/"><img class="h-20 bg-oniPink" src="./images/logo.png" alt="Orinico" /></a>
<nav class="flex">
<ul class="font-semibold list-none">
<li>
<a class="px-4 py-4" href="">Panier</a>
</li>
</ul>
</nav>
</header>
<!-- HEADER -->
<div class="">
<!-- ORDER SUMMARY -->
<section class="p-4 mt-4 rounded-md bg-oniPink">
<h2 class="mb-2 text-lg font-bold">Votre carte</h2>
<table class="w-full border-collapse">
<thead>
<tr class="bg-white border">
<th class="py-2">Produit</th>
<th>Quantité</th>
<th>Prix</th>
<th>Total</th>
</tr>
</thead>
<tbody id="productsList">
<template id="productTemplate">
<tr class="bg-white border rounded">
<td id="productName" class="p-0 py-2 text-center">Arnold</td>
<td class="p-0 text-center">
<form class="flex">
<select
id="productQuantity"
class="z-10 block w-full py-1 pl-3 pr-10 text-base text-center border border-indigo-200 rounded focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
name="quantity"
id="quantity"
>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</form>
</td>
<td id="productPrice" class="p-0 text-center">x€</td>
<td id="productTotalPrice" class="p-0 text-center">x€</td>
</tr>
</template>
<tr class="bg-gray-100">
<td colspan="3" class="py-2 text-center">Total</td>
<td class="text-center" id="totalPrice">x€</td>
</tr>
</tbody>
</table>
</section>
<!-- ORDER SUMMARY -->
<!-- PURCHASE FORM -->
<section class="p-4 mt-4 rounded-md bg-oniPink">
<h2 class="mb-2 text-lg font-bold">Passer commande</h2>
<div class="grid grid-cols-4 gap-4">
<div class="flex flex-col">
<label for="firstname" class="label">Prénom</label>
<input type="text" name="firstname" id="firstname" class="input" required />
</div>
<div class="flex flex-col">
<label for="lastname" class="label">Nom</label>
<input type="text" name="lastname" id="lastname" class="input" required />
</div>
<div class="flex flex-col col-span-2">
<label for="email" class="label">Adresse e-mail</label>
<input type="text" name="email" id="email" class="input" required />
</div>
<div class="flex flex-col col-span-2">
<label for="adress" class="label">Adresse</label>
<input type="text" name="adress" id="adress" class="input" required />
</div>
<div class="flex flex-col">
<label for="zipcode" class="label">Code postal</label>
<input type="text" name="zipcode" id="zipcode" class="input" required />
</div>
<div class="flex flex-col">
<label for="city" class="label">Ville</label>
<input type="text" name="city" id="city" class="input" required />
</div>
</div>
<div class="flex justify-end">
<a
id="confirmPurchase"
class="inline-flex justify-center px-4 py-2 mt-6 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
href="#"
>
Procéder au paiement
</a>
</div>
</section>
<!-- PURCHASE FORM -->
</div>
</div>
</body>
</html>