Hugging Face's logo

Spaces:
iShares
/
pc
Running

App Files Community
iShares commited on
Commit
cace5d7
·
verified ·
1 Parent(s): b73b8f9

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +222 -364
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>PC Configurator - Créez votre PC de rêve</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -18,34 +18,34 @@
18
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
  }
20
 
21
- .component-card:hover {
22
- transform: translateY(-5px);
23
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- .component-card {
27
- transition: all 0.3s ease;
 
28
  }
29
 
30
- .price-tag {
31
- background: linear-gradient(90deg, #48bb78 0%, #38a169 100%);
 
32
  }
33
 
34
- .tab-active {
35
- border-bottom: 3px solid #667eea;
36
- color: #667eea;
37
- font-weight: 600;
38
- }
39
-
40
- /* Animation pour le bouton */
41
- @keyframes pulse {
42
- 0% { transform: scale(1); }
43
- 50% { transform: scale(1.05); }
44
- 100% { transform: scale(1); }
45
- }
46
-
47
- .animate-pulse {
48
- animation: pulse 2s infinite;
49
  }
50
  </style>
51
  </head>
@@ -62,356 +62,130 @@
62
  <button class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-medium">
63
  <i class="fas fa-user mr-1"></i> Mon compte
64
  </button>
65
- <button class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-medium">
66
  <i class="fas fa-shopping-cart mr-1"></i> Panier
 
67
  </button>
68
  </div>
69
  </div>
70
-
71
- <div class="mt-8 text-center">
72
- <h2 class="text-3xl font-bold mb-2">Créez votre PC gaming ultime</h2>
73
- <p class="text-indigo-100 mb-6">Sélectionnez chaque composant et visualisez votre configuration en temps réel</p>
74
- <button class="bg-yellow-400 text-gray-800 px-6 py-3 rounded-full font-bold shadow-lg hover:bg-yellow-300 transition duration-300 animate-pulse">
75
- <i class="fas fa-bolt mr-2"></i> Commencer maintenant
76
- </button>
77
- </div>
78
  </div>
79
  </header>
80
 
81
  <!-- Main Content -->
82
  <main class="container mx-auto px-4 py-8">
83
- <!-- Configuration Summary -->
84
- <div class="bg-white rounded-xl shadow-md p-6 mb-8">
85
- <h3 class="text-xl font-bold mb-4">Votre configuration</h3>
86
-
87
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
88
- <div class="bg-gray-50 p-4 rounded-lg">
89
- <div class="text-gray-500 text-sm">Budget total</div>
90
- <div class="text-2xl font-bold text-indigo-600">€1,549.99</div>
91
- </div>
92
- <div class="bg-gray-50 p-4 rounded-lg">
93
- <div class="text-gray-500 text-sm">Performance</div>
94
- <div class="flex items-center">
95
- <div class="w-full bg-gray-200 rounded-full h-2.5 mr-2">
96
- <div class="bg-green-500 h-2.5 rounded-full" style="width: 85%"></div>
97
- </div>
98
- <span class="text-sm font-medium">85%</span>
99
- </div>
100
- </div>
101
- <div class="bg-gray-50 p-4 rounded-lg">
102
- <div class="text-gray-500 text-sm">Compatibilité</div>
103
- <div class="flex items-center text-green-500">
104
- <i class="fas fa-check-circle mr-1"></i>
105
- <span class="text-sm font-medium">OK</span>
106
- </div>
107
- </div>
108
- <div class="bg-gray-50 p-4 rounded-lg">
109
- <div class="text-gray-500 text-sm">Type</div>
110
- <div class="text-sm font-medium">Gaming 1440p</div>
111
- </div>
112
- </div>
113
-
114
- <div class="flex overflow-x-auto pb-4 space-x-4">
115
- <div class="flex-shrink-0 w-48 bg-gray-100 rounded-lg p-3 flex flex-col items-center">
116
- <div class="bg-white p-2 rounded-full mb-2">
117
- <i class="fas fa-microchip text-3xl text-indigo-500"></i>
118
- </div>
119
- <div class="text-center">
120
- <div class="font-medium">AMD Ryzen 7 5800X</div>
121
- <div class="text-sm text-gray-500">€329.99</div>
122
- </div>
123
- </div>
124
- <div class="flex-shrink-0 w-48 bg-gray-100 rounded-lg p-3 flex flex-col items-center">
125
- <div class="bg-white p-2 rounded-full mb-2">
126
- <i class="fas fa-fan text-3xl text-indigo-500"></i>
127
- </div>
128
- <div class="text-center">
129
- <div class="font-medium">NZXT Kraken X63</div>
130
- <div class="text-sm text-gray-500">€149.99</div>
131
- </div>
132
- </div>
133
- <div class="flex-shrink-0 w-48 bg-gray-100 rounded-lg p-3 flex flex-col items-center">
134
- <div class="bg-white p-2 rounded-full mb-2">
135
- <i class="fas fa-memory text-3xl text-indigo-500"></i>
136
- </div>
137
- <div class="text-center">
138
- <div class="font-medium">Corsair Vengeance 32GB</div>
139
- <div class="text-sm text-gray-500">€129.99</div>
140
- </div>
141
- </div>
142
- <div class="flex-shrink-0 w-48 bg-gray-100 rounded-lg p-3 flex flex-col items-center">
143
- <div class="bg-white p-2 rounded-full mb-2">
144
- <i class="fas fa-hdd text-3xl text-indigo-500"></i>
145
- </div>
146
- <div class="text-center">
147
- <div class="font-medium">Samsung 980 Pro 1TB</div>
148
- <div class="text-sm text-gray-500">€99.99</div>
149
- </div>
150
- </div>
151
- <div class="flex-shrink-0 w-48 bg-gray-100 rounded-lg p-3 flex flex-col items-center">
152
- <div class="bg-white p-2 rounded-full mb-2">
153
- <i class="fas fa-desktop text-3xl text-indigo-500"></i>
154
- </div>
155
- <div class="text-center">
156
- <div class="font-medium">NVIDIA RTX 4070 Ti</div>
157
- <div class="text-sm text-gray-500">€849.99</div>
158
- </div>
159
- </div>
160
- <div class="flex-shrink-0 w-48 bg-gray-100 rounded-lg p-3 flex flex-col items-center">
161
- <div class="bg-white p-2 rounded-full mb-2">
162
- <i class="fas fa-plus-circle text-3xl text-gray-400"></i>
163
- </div>
164
- <div class="text-center">
165
- <div class="font-medium text-gray-500">Ajouter un composant</div>
166
- </div>
167
- </div>
168
- </div>
169
- </div>
170
-
171
- <!-- Component Selection -->
172
- <div class="bg-white rounded-xl shadow-md p-6">
173
- <div class="flex border-b mb-6">
174
- <button class="px-4 py-2 font-medium tab-active">Processeur</button>
175
- <button class="px-4 py-2 font-medium text-gray-500">Carte graphique</button>
176
- <button class="px-4 py-2 font-medium text-gray-500">RAM</button>
177
- <button class="px-4 py-2 font-medium text-gray-500">Stockage</button>
178
- <button class="px-4 py-2 font-medium text-gray-500">Boîtier</button>
179
  </div>
180
 
181
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
182
- <!-- CPU Card 1 -->
183
- <div class="component-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
184
- <div class="p-4">
185
- <div class="flex justify-between items-start">
186
- <div>
187
- <h4 class="font-bold text-lg">AMD Ryzen 7 5800X</h4>
188
- <div class="flex items-center mt-1">
189
- <div class="flex text-yellow-400">
190
- <i class="fas fa-star"></i>
191
- <i class="fas fa-star"></i>
192
- <i class="fas fa-star"></i>
193
- <i class="fas fa-star"></i>
194
- <i class="fas fa-star-half-alt"></i>
195
- </div>
196
- <span class="text-gray-500 text-sm ml-1">(142)</span>
197
- </div>
198
- </div>
199
- <div class="price-tag text-white text-sm font-bold px-2 py-1 rounded">
200
- €329.99
201
- </div>
202
- </div>
203
- <div class="mt-3">
204
- <div class="flex items-center text-sm text-gray-500 mb-1">
205
- <i class="fas fa-microchip mr-2"></i>
206
- <span>8 cœurs / 16 threads</span>
207
- </div>
208
- <div class="flex items-center text-sm text-gray-500 mb-1">
209
- <i class="fas fa-tachometer-alt mr-2"></i>
210
- <span>3.8GHz base / 4.7GHz boost</span>
211
- </div>
212
- <div class="flex items-center text-sm text-gray-500">
213
- <i class="fas fa-plug mr-2"></i>
214
- <span>105W TDP</span>
215
- </div>
216
  </div>
217
- </div>
218
- <div class="bg-gray-50 px-4 py-3 flex justify-between items-center">
219
- <button class="text-indigo-600 font-medium text-sm flex items-center">
220
- <i class="fas fa-info-circle mr-1"></i> Détails
221
- </button>
222
- <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium hover:bg-indigo-700 transition">
223
- <i class="fas fa-plus mr-1"></i> Ajouter
224
- </button>
225
- </div>
226
- </div>
227
-
228
- <!-- CPU Card 2 -->
229
- <div class="component-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
230
- <div class="p-4">
231
- <div class="flex justify-between items-start">
232
  <div>
233
- <h4 class="font-bold text-lg">Intel Core i7-13700K</h4>
234
- <div class="flex items-center mt-1">
235
- <div class="flex text-yellow-400">
236
- <i class="fas fa-star"></i>
237
- <i class="fas fa-star"></i>
238
- <i class="fas fa-star"></i>
239
- <i class="fas fa-star"></i>
240
- <i class="far fa-star"></i>
241
  </div>
242
- <span class="text-gray-500 text-sm ml-1">(98)</span>
243
  </div>
244
  </div>
245
- <div class="price-tag text-white text-sm font-bold px-2 py-1 rounded">
246
- €419.99
247
- </div>
248
- </div>
249
- <div class="mt-3">
250
- <div class="flex items-center text-sm text-gray-500 mb-1">
251
- <i class="fas fa-microchip mr-2"></i>
252
- <span>16 cœurs (8P+8E) / 24 threads</span>
253
- </div>
254
- <div class="flex items-center text-sm text-gray-500 mb-1">
255
- <i class="fas fa-tachometer-alt mr-2"></i>
256
- <span>3.4GHz base / 5.4GHz boost</span>
257
- </div>
258
- <div class="flex items-center text-sm text-gray-500">
259
- <i class="fas fa-plug mr-2"></i>
260
- <span>125W TDP</span>
261
- </div>
262
- </div>
263
- </div>
264
- <div class="bg-gray-50 px-4 py-3 flex justify-between items-center">
265
- <button class="text-indigo-600 font-medium text-sm flex items-center">
266
- <i class="fas fa-info-circle mr-1"></i> Détails
267
- </button>
268
- <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium hover:bg-indigo-700 transition">
269
- <i class="fas fa-plus mr-1"></i> Ajouter
270
- </button>
271
- </div>
272
- </div>
273
-
274
- <!-- CPU Card 3 -->
275
- <div class="component-card bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md">
276
- <div class="p-4">
277
- <div class="flex justify-between items-start">
278
- <div>
279
- <h4 class="font-bold text-lg">AMD Ryzen 9 7950X</h4>
280
- <div class="flex items-center mt-1">
281
- <div class="flex text-yellow-400">
282
- <i class="fas fa-star"></i>
283
- <i class="fas fa-star"></i>
284
- <i class="fas fa-star"></i>
285
- <i class="fas fa-star"></i>
286
- <i class="fas fa-star"></i>
287
- </div>
288
- <span class="text-gray-500 text-sm ml-1">(76)</span>
289
  </div>
290
  </div>
291
- <div class="price-tag text-white text-sm font-bold px-2 py-1 rounded">
292
- €699.99
293
- </div>
294
- </div>
295
- <div class="mt-3">
296
- <div class="flex items-center text-sm text-gray-500 mb-1">
297
- <i class="fas fa-microchip mr-2"></i>
298
- <span>16 cœurs / 32 threads</span>
299
- </div>
300
- <div class="flex items-center text-sm text-gray-500 mb-1">
301
- <i class="fas fa-tachometer-alt mr-2"></i>
302
- <span>4.5GHz base / 5.7GHz boost</span>
303
  </div>
304
- <div class="flex items-center text-sm text-gray-500">
305
- <i class="fas fa-plug mr-2"></i>
306
- <span>170W TDP</span>
 
307
  </div>
308
  </div>
309
  </div>
310
- <div class="bg-gray-50 px-4 py-3 flex justify-between items-center">
311
- <button class="text-indigo-600 font-medium text-sm flex items-center">
312
- <i class="fas fa-info-circle mr-1"></i> Détails
313
- </button>
314
- <button class="bg-indigo-600 text-white px-3 py-1 rounded text-sm font-medium hover:bg-indigo-700 transition">
315
- <i class="fas fa-plus mr-1"></i> Ajouter
316
- </button>
317
- </div>
318
- </div>
319
- </div>
320
-
321
- <div class="mt-8 flex justify-center">
322
- <button class="bg-white border border-gray-300 text-gray-700 px-6 py-2 rounded-full font-medium hover:bg-gray-50 transition">
323
- <i class="fas fa-chevron-down mr-2"></i> Voir plus de processeurs
324
- </button>
325
- </div>
326
- </div>
327
-
328
- <!-- Build Preview -->
329
- <div class="mt-8 bg-white rounded-xl shadow-md p-6">
330
- <h3 class="text-xl font-bold mb-4">Aperçu de votre build</h3>
331
-
332
- <div class="flex flex-col md:flex-row gap-6">
333
- <div class="md:w-1/2">
334
- <div class="bg-gray-100 rounded-lg p-6 flex justify-center items-center h-64">
335
- <img src="https://via.placeholder.com/300x200?text=3D+PC+Preview" alt="PC Preview" class="max-h-full">
336
- </div>
337
 
338
- <div class="mt-4 grid grid-cols-2 gap-4">
339
- <div class="bg-gray-50 p-3 rounded-lg">
340
- <div class="text-gray-500 text-sm">Température estimée</div>
341
- <div class="text-xl font-bold">62°C</div>
342
- </div>
343
- <div class="bg-gray-50 p-3 rounded-lg">
344
- <div class="text-gray-500 text-sm">Consommation</div>
345
- <div class="text-xl font-bold">450W</div>
346
- </div>
347
- <div class="bg-gray-50 p-3 rounded-lg">
348
- <div class="text-gray-500 text-sm">FPS moyen (1440p)</div>
349
- <div class="text-xl font-bold">124</div>
350
- </div>
351
- <div class="bg-gray-50 p-3 rounded-lg">
352
- <div class="text-gray-500 text-sm">Niveau sonore</div>
353
- <div class="text-xl font-bold">32dB</div>
354
  </div>
 
 
 
355
  </div>
356
  </div>
357
 
358
- <div class="md:w-1/2">
359
- <div class="bg-gray-50 rounded-lg p-4">
360
- <h4 class="font-bold mb-3">Détails de la configuration</h4>
361
 
362
- <div class="space-y-3">
363
- <div class="flex justify-between border-b pb-2">
364
- <span class="text-gray-600">Processeur</span>
365
- <span class="font-medium">AMD Ryzen 7 5800X</span>
366
- </div>
367
- <div class="flex justify-between border-b pb-2">
368
- <span class="text-gray-600">Refroidissement</span>
369
- <span class="font-medium">NZXT Kraken X63</span>
370
- </div>
371
- <div class="flex justify-between border-b pb-2">
372
- <span class="text-gray-600">Carte mère</span>
373
- <span class="font-medium">MSI B550 TOMAHAWK</span>
374
  </div>
375
- <div class="flex justify-between border-b pb-2">
376
- <span class="text-gray-600">Mémoire</span>
377
- <span class="font-medium">Corsair Vengeance 32GB</span>
378
  </div>
379
- <div class="flex justify-between border-b pb-2">
380
- <span class="text-gray-600">Stockage</span>
381
- <span class="font-medium">Samsung 980 Pro 1TB</span>
382
  </div>
383
- <div class="flex justify-between border-b pb-2">
384
- <span class="text-gray-600">Carte graphique</span>
385
- <span class="font-medium">NVIDIA RTX 4070 Ti</span>
386
- </div>
387
- <div class="flex justify-between border-b pb-2">
388
- <span class="text-gray-600">Boîtier</span>
389
- <span class="font-medium">Lian Li PC-O11 Dynamic</span>
390
- </div>
391
- <div class="flex justify-between border-b pb-2">
392
- <span class="text-gray-600">Alimentation</span>
393
- <span class="font-medium">Corsair RM850x</span>
394
  </div>
395
  </div>
396
 
397
- <div class="mt-6 pt-4 border-t">
398
- <div class="flex justify-between text-lg font-bold">
399
- <span>Total</span>
400
- <span class="text-indigo-600">€1,549.99</span>
401
- </div>
402
-
403
- <div class="mt-4 flex flex-col space-y-3">
404
- <button class="bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition flex items-center justify-center">
405
- <i class="fas fa-shopping-cart mr-2"></i> Acheter maintenant
406
- </button>
407
- <button class="bg-white border border-indigo-600 text-indigo-600 py-3 rounded-lg font-bold hover:bg-indigo-50 transition flex items-center justify-center">
408
- <i class="fas fa-save mr-2"></i> Sauvegarder la configuration
409
- </button>
410
- <button class="bg-white border border-gray-300 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-50 transition flex items-center justify-center">
411
- <i class="fas fa-share-alt mr-2"></i> Partager
412
- </button>
413
- </div>
414
  </div>
 
 
 
 
415
  </div>
416
  </div>
417
  </div>
@@ -469,40 +243,124 @@
469
  </div>
470
  </footer>
471
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
472
  <script>
473
- // Simple script pour la navigation des onglets
474
  document.addEventListener('DOMContentLoaded', function() {
475
- const tabs = document.querySelectorAll('.flex.border-b button');
 
 
 
 
 
476
 
477
- tabs.forEach(tab => {
478
- tab.addEventListener('click', function() {
479
- // Retirer la classe active de tous les onglets
480
- tabs.forEach(t => {
481
- t.classList.remove('tab-active');
482
- t.classList.add('text-gray-500');
483
- });
484
-
485
- // Ajouter la classe active à l'onglet cliqué
486
- this.classList.add('tab-active');
487
- this.classList.remove('text-gray-500');
488
- });
489
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
490
 
491
- // Animation pour les cartes de composants
492
- const componentCards = document.querySelectorAll('.component-card');
493
 
494
- componentCards.forEach(card => {
495
- card.addEventListener('mouseenter', function() {
496
- this.style.transform = 'translateY(-5px)';
497
- this.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.1)';
 
 
 
 
 
 
498
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
499
 
500
- card.addEventListener('mouseleave', function() {
501
- this.style.transform = '';
502
- this.style.boxShadow = '';
503
- });
504
- });
505
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
506
  </script>
507
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iShares/pc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
508
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PC Configurator - Paiement</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
18
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
19
  }
20
 
21
+ .apple-pay-button {
22
+ display: inline-block;
23
+ background-size: 100% 100%;
24
+ background-repeat: no-repeat;
25
+ background-position: center center;
26
+ border-radius: 5px;
27
+ padding: 0px;
28
+ box-sizing: border-box;
29
+ min-height: 32px;
30
+ min-width: 150px;
31
+ height: 44px;
32
+ border: 1px solid #000;
33
  }
34
 
35
+ .apple-pay-button-black {
36
+ background-color: #000;
37
+ background-image: -webkit-named-image(apple-pay-logo-white);
38
  }
39
 
40
+ .apple-pay-button-white {
41
+ background-color: #fff;
42
+ background-image: -webkit-named-image(apple-pay-logo-black);
43
  }
44
 
45
+ .apple-pay-button-white-with-line {
46
+ background-color: #fff;
47
+ background-image: -webkit-named-image(apple-pay-logo-black);
48
+ border: 0.5px solid #000;
 
 
 
 
 
 
 
 
 
 
 
49
  }
50
  </style>
51
  </head>
 
62
  <button class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-medium">
63
  <i class="fas fa-user mr-1"></i> Mon compte
64
  </button>
65
+ <button class="bg-white text-indigo-600 px-3 py-1 rounded-full text-sm font-medium relative">
66
  <i class="fas fa-shopping-cart mr-1"></i> Panier
67
+ <span class="absolute -top-2 -right-2 bg-yellow-400 text-gray-800 text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">1</span>
68
  </button>
69
  </div>
70
  </div>
 
 
 
 
 
 
 
 
71
  </div>
72
  </header>
73
 
74
  <!-- Main Content -->
75
  <main class="container mx-auto px-4 py-8">
76
+ <div class="max-w-4xl mx-auto">
77
+ <div class="flex items-center mb-6">
78
+ <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold mr-2">1</div>
79
+ <h2 class="text-xl font-bold">Panier</h2>
80
+ <div class="mx-4 text-gray-400"><i class="fas fa-chevron-right"></i></div>
81
+ <div class="w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white font-bold mr-2">2</div>
82
+ <h2 class="text-xl font-bold">Livraison</h2>
83
+ <div class="mx-4 text-gray-400"><i class="fas fa-chevron-right"></i></div>
84
+ <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 font-bold mr-2">3</div>
85
+ <h2 class="text-xl font-bold text-gray-400">Paiement</h2>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
86
  </div>
87
 
88
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
89
+ <div class="md:col-span-2">
90
+ <div class="bg-white rounded-xl shadow-md p-6 mb-6">
91
+ <h3 class="text-xl font-bold mb-6">Méthode de paiement</h3>
92
+
93
+ <!-- Apple Pay Button -->
94
+ <div id="apple-pay-button" class="apple-pay-button apple-pay-button-black mb-4 hidden"></div>
95
+
96
+ <div class="flex items-center mb-6">
97
+ <div class="flex-1 border-t border-gray-300"></div>
98
+ <span class="px-4 text-gray-500">ou</span>
99
+ <div class="flex-1 border-t border-gray-300"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  </div>
101
+
102
+ <!-- Credit Card Form -->
103
+ <div class="space-y-4">
 
 
 
 
 
 
 
 
 
 
 
 
104
  <div>
105
+ <label class="block text-gray-700 mb-2">Numéro de carte</label>
106
+ <div class="relative">
107
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="1234 5678 9012 3456">
108
+ <div class="absolute right-3 top-2 flex space-x-1">
109
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visa/visa-original.svg" class="h-6 opacity-50" alt="Visa">
110
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mastercard/mastercard-original.svg" class="h-6 opacity-50" alt="Mastercard">
111
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg" class="h-6 opacity-50" alt="Apple Pay">
 
112
  </div>
 
113
  </div>
114
  </div>
115
+
116
+ <div class="grid grid-cols-2 gap-4">
117
+ <div>
118
+ <label class="block text-gray-700 mb-2">Date d'expiration</label>
119
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="MM/AA">
120
+ </div>
121
+ <div>
122
+ <label class="block text-gray-700 mb-2">CVV</label>
123
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="123">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </div>
125
  </div>
126
+
127
+ <div>
128
+ <label class="block text-gray-700 mb-2">Nom sur la carte</label>
129
+ <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="Jean Dupont">
 
 
 
 
 
 
 
 
130
  </div>
131
+
132
+ <div class="flex items-center">
133
+ <input type="checkbox" id="save-card" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
134
+ <label for="save-card" class="ml-2 text-gray-700">Enregistrer cette carte pour mes prochains achats</label>
135
  </div>
136
  </div>
137
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
 
139
+ <div class="bg-white rounded-xl shadow-md p-6">
140
+ <h3 class="text-xl font-bold mb-4">Adresse de livraison</h3>
141
+ <div class="space-y-2">
142
+ <p class="text-gray-700">Jean Dupont</p>
143
+ <p class="text-gray-700">15 Rue de la République</p>
144
+ <p class="text-gray-700">75001 Paris, France</p>
145
+ <p class="text-gray-700">Tél: +33 6 12 34 56 78</p>
 
 
 
 
 
 
 
 
 
146
  </div>
147
+ <button class="mt-4 text-indigo-600 font-medium flex items-center">
148
+ <i class="fas fa-edit mr-2"></i> Modifier l'adresse
149
+ </button>
150
  </div>
151
  </div>
152
 
153
+ <div>
154
+ <div class="bg-white rounded-xl shadow-md p-6 sticky top-4">
155
+ <h3 class="text-xl font-bold mb-4">Récapitulatif</h3>
156
 
157
+ <div class="space-y-3 mb-6">
158
+ <div class="flex justify-between">
159
+ <span class="text-gray-600">Sous-total</span>
160
+ <span class="font-medium">€1,499.97</span>
 
 
 
 
 
 
 
 
161
  </div>
162
+ <div class="flex justify-between">
163
+ <span class="text-gray-600">Livraison</span>
164
+ <span class="font-medium">Gratuite</span>
165
  </div>
166
+ <div class="flex justify-between">
167
+ <span class="text-gray-600">Taxes</span>
168
+ <span class="font-medium">€299.99</span>
169
  </div>
170
+ <div class="border-t pt-3 flex justify-between text-lg font-bold">
171
+ <span>Total</span>
172
+ <span class="text-indigo-600">€1,799.96</span>
 
 
 
 
 
 
 
 
173
  </div>
174
  </div>
175
 
176
+ <button id="pay-button" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition flex items-center justify-center">
177
+ <i class="fas fa-lock mr-2"></i> Payer maintenant
178
+ </button>
179
+
180
+ <div class="mt-4 flex justify-center space-x-4">
181
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/visa/visa-original.svg" class="h-8 opacity-70" alt="Visa">
182
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mastercard/mastercard-original.svg" class="h-8 opacity-70" alt="Mastercard">
183
+ <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg" class="h-8 opacity-70" alt="Apple Pay">
 
 
 
 
 
 
 
 
 
184
  </div>
185
+
186
+ <p class="mt-4 text-xs text-gray-500 text-center">
187
+ Votre paiement est sécurisé et crypté. Nous ne stockons pas vos informations de carte.
188
+ </p>
189
  </div>
190
  </div>
191
  </div>
 
243
  </div>
244
  </footer>
245
 
246
+ <!-- Payment Success Modal -->
247
+ <div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden">
248
+ <div class="bg-white rounded-lg w-full max-w-md mx-4 p-6 text-center">
249
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
250
+ <i class="fas fa-check text-green-600 text-2xl"></i>
251
+ </div>
252
+ <h3 class="text-2xl font-bold mb-2">Paiement réussi!</h3>
253
+ <p class="text-gray-600 mb-6">Votre commande a été passée avec succès. Vous recevrez un email de confirmation sous peu.</p>
254
+ <div class="bg-gray-100 p-4 rounded-lg mb-6">
255
+ <p class="font-medium">N° de commande: <span class="text-indigo-600">PC-2023-789456</span></p>
256
+ </div>
257
+ <button id="continue-shopping" class="w-full bg-indigo-600 text-white py-3 rounded-lg font-bold hover:bg-indigo-700 transition">
258
+ Continuer mes achats
259
+ </button>
260
+ </div>
261
+ </div>
262
+
263
  <script>
264
+ // Vérifier si Apple Pay est disponible
265
  document.addEventListener('DOMContentLoaded', function() {
266
+ if (window.ApplePaySession && ApplePaySession.canMakePayments()) {
267
+ const applePayButton = document.getElementById('apple-pay-button');
268
+ applePayButton.classList.remove('hidden');
269
+
270
+ applePayButton.addEventListener('click', startApplePay);
271
+ }
272
 
273
+ // Gestion du bouton de paiement
274
+ const payButton = document.getElementById('pay-button');
275
+ payButton.addEventListener('click', processPayment);
276
+
277
+ // Gestion du bouton continuer
278
+ const continueButton = document.getElementById('continue-shopping');
279
+ continueButton.addEventListener('click', function() {
280
+ window.location.href = 'index.html';
 
 
 
 
281
  });
282
+ });
283
+
284
+ // Démarrer le processus Apple Pay
285
+ function startApplePay() {
286
+ const paymentRequest = {
287
+ countryCode: 'FR',
288
+ currencyCode: 'EUR',
289
+ supportedNetworks: ['visa', 'masterCard', 'amex', 'discover'],
290
+ merchantCapabilities: ['supports3DS'],
291
+ total: {
292
+ label: 'PC Configurator',
293
+ amount: '1799.96',
294
+ type: 'final'
295
+ },
296
+ lineItems: [
297
+ {
298
+ label: 'Sous-total',
299
+ amount: '1499.97'
300
+ },
301
+ {
302
+ label: 'Livraison',
303
+ amount: '0.00'
304
+ },
305
+ {
306
+ label: 'Taxes',
307
+ amount: '299.99'
308
+ }
309
+ ],
310
+ requiredBillingContactFields: ['postalAddress', 'name', 'phone', 'email'],
311
+ requiredShippingContactFields: ['postalAddress', 'name', 'phone']
312
+ };
313
 
314
+ const session = new ApplePaySession(3, paymentRequest);
 
315
 
316
+ session.onvalidatemerchant = function(event) {
317
+ // En production, vous devriez valider le marchand avec votre serveur
318
+ const validationURL = event.validationURL;
319
+ session.completeMerchantValidation({});
320
+ };
321
+
322
+ session.onpaymentmethodselected = function(event) {
323
+ session.completePaymentMethodSelection({
324
+ newTotal: paymentRequest.total,
325
+ newLineItems: paymentRequest.lineItems
326
  });
327
+ };
328
+
329
+ session.onshippingcontactselected = function(event) {
330
+ session.completeShippingContactSelection(
331
+ ApplePaySession.STATUS_SUCCESS,
332
+ [],
333
+ paymentRequest.total,
334
+ []
335
+ );
336
+ };
337
+
338
+ session.onpaymentauthorized = function(event) {
339
+ // En production, vous devriez traiter le paiement ici avec votre processeur de paiement
340
+ console.log('Payment authorized:', event.payment);
341
 
342
+ setTimeout(() => {
343
+ session.completePayment(ApplePaySession.STATUS_SUCCESS);
344
+
345
+ // Afficher le modal de succès
346
+ document.getElementById('success-modal').classList.remove('hidden');
347
+ }, 2000);
348
+ };
349
+
350
+ session.oncancel = function(event) {
351
+ console.log('Apple Pay cancelled');
352
+ };
353
+
354
+ session.begin();
355
+ }
356
+
357
+ // Traiter le paiement par carte
358
+ function processPayment() {
359
+ // Simulation de traitement de paiement
360
+ setTimeout(() => {
361
+ document.getElementById('success-modal').classList.remove('hidden');
362
+ }, 1500);
363
+ }
364
  </script>
365
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=iShares/pc" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
366
  </html>