-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcheckout.html
More file actions
150 lines (142 loc) · 5.68 KB
/
checkout.html
File metadata and controls
150 lines (142 loc) · 5.68 KB
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
147
148
149
150
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmation de commande - Reine Shop</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/checkout.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- Barre de recherche -->
<div class="search-bar">
<div class="search-container">
<input type="text" id="search-input" placeholder="Rechercher des produits...">
<i class="fas fa-search"></i>
<div class="search-results" id="search-results"></div>
</div>
</div>
<!-- En-tête -->
<header>
<div class="logo">
<h1><a href="index.html">Ma Boutique</a></h1>
</div>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="index.html#products">Produits</a></li>
<li><a href="index.html#about">À propos</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
<div class="cart-icon">
<i class="fas fa-shopping-cart"></i>
<span class="cart-count">0</span>
</div>
</header>
<!-- Contenu principal -->
<main class="checkout-container">
<div class="checkout-header">
<h1>Confirmation de commande</h1>
<div class="order-steps">
<div class="step active">
<div class="step-number">1</div>
<div class="step-text">Panier</div>
</div>
<div class="step-connector"></div>
<div class="step active">
<div class="step-number">2</div>
<div class="step-text">Livraison</div>
</div>
<div class="step-connector"></div>
<div class="step active">
<div class="step-number">3</div>
<div class="step-text">Paiement</div>
</div>
<div class="step-connector"></div>
<div class="step active">
<div class="step-number">4</div>
<div class="step-text">Confirmation</div>
</div>
</div>
</div>
<div class="order-confirmation">
<div class="confirmation-icon">
<i class="fas fa-check-circle"></i>
</div>
<h2>Merci pour votre commande !</h2>
<p class="order-number">Numéro de commande: <span id="order-number"></span></p>
<p class="confirmation-message">
Votre commande a été reçue et est en cours de traitement.
Vous recevrez bientôt un email de confirmation avec les détails de votre commande.
</p>
<div class="order-summary">
<h3>Récapitulatif de la commande</h3>
<div class="order-details">
<div class="order-items" id="order-items">
<!-- Les articles seront ajoutés dynamiquement -->
</div>
<div class="order-totals">
<div class="order-row">
<span>Sous-total</span>
<span id="subtotal">0 FCFA</span>
</div>
<div class="order-row">
<span>Livraison</span>
<span id="shipping">0 FCFA</span>
</div>
<div class="order-row total">
<span>Total</span>
<span id="total">0 FCFA</span>
</div>
</div>
</div>
</div>
<div class="shipping-details">
<div class="shipping-address">
<h3>Adresse de livraison</h3>
<p id="shipping-address"></p>
</div>
<div class="payment-method">
<h3>Méthode de paiement</h3>
<p id="payment-method"></p>
</div>
</div>
<div class="confirmation-actions">
<a href="index.html" class="btn continue-shopping">Continuer vos achats</a>
<a href="#" class="btn print-order">Imprimer la commande</a>
</div>
</div>
</main>
<!-- Pied de page -->
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>À propos</h3>
<p>Votre boutique en ligne préférée pour des produits de qualité.</p>
</div>
<div class="footer-section">
<h3>Liens rapides</h3>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="index.html#products">Produits</a></li>
<li><a href="index.html#about">À propos</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact</h3>
<p>Email: contact@maboutique.com</p>
<p>Tél: +225 01 50 21 52 02</p>
<p>Tél: +225 05 56 21 37 59</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 Ma Boutique. Tous droits réservés.</p>
</div>
</footer>
<!-- Scripts -->
<script src="js/checkout.js"></script>
</body>
</html>