Hugging Face's logo

Spaces:
iShares
/
pc
Running

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

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +473 -287
index.html CHANGED
@@ -3,364 +3,550 @@
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>
10
- @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
-
12
- body {
13
- font-family: 'Poppins', sans-serif;
14
- background-color: #f5f7fa;
15
  }
16
 
17
- .gradient-bg {
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>
52
- <body class="min-h-screen">
53
- <!-- Header -->
54
- <header class="gradient-bg text-white shadow-lg">
55
- <div class="container mx-auto px-4 py-6">
56
- <div class="flex justify-between items-center">
57
- <div class="flex items-center space-x-2">
58
- <i class="fas fa-gamepad text-2xl"></i>
59
- <h1 class="text-xl font-bold">PC Configurator</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </div>
61
- <div class="flex space-x-4">
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>
192
  </div>
193
- </main>
194
 
195
  <!-- Footer -->
196
- <footer class="bg-gray-900 text-white mt-12">
197
- <div class="container mx-auto px-4 py-8">
198
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
199
  <div>
200
- <h4 class="text-lg font-bold mb-4">PC Configurator</h4>
201
- <p class="text-gray-400">Créez le PC gaming de vos rêves avec notre configurateur intuitif et nos conseils d'experts.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  </div>
 
203
  <div>
204
- <h5 class="font-bold mb-4">Navigation</h5>
205
- <ul class="space-y-2 text-gray-400">
206
- <li><a href="#" class="hover:text-white transition">Accueil</a></li>
207
- <li><a href="#" class="hover:text-white transition">Configurateur</a></li>
208
- <li><a href="#" class="hover:text-white transition">Composants</a></li>
209
- <li><a href="#" class="hover:text-white transition">Guides</a></li>
210
- <li><a href="#" class="hover:text-white transition">Contact</a></li>
211
  </ul>
212
  </div>
 
213
  <div>
214
- <h5 class="font-bold mb-4">Support</h5>
215
- <ul class="space-y-2 text-gray-400">
216
- <li><a href="#" class="hover:text-white transition">FAQ</a></li>
217
- <li><a href="#" class="hover:text-white transition">Compatibilité</a></li>
218
- <li><a href="#" class="hover:text-white transition">Livraison</a></li>
219
- <li><a href="#" class="hover:text-white transition">Retours</a></li>
220
  <li><a href="#" class="hover:text-white transition">Garanties</a></li>
 
 
221
  </ul>
222
  </div>
 
223
  <div>
224
- <h5 class="font-bold mb-4">Newsletter</h5>
225
- <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir les dernières offres et conseils.</p>
226
- <div class="flex">
227
- <input type="email" placeholder="Votre email" class="bg-gray-800 text-white px-4 py-2 rounded-l focus:outline-none w-full">
228
- <button class="bg-indigo-600 px-4 py-2 rounded-r hover:bg-indigo-700 transition">
229
  <i class="fas fa-paper-plane"></i>
230
  </button>
231
- </div>
232
- <div class="mt-4 flex space-x-4">
233
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
234
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
235
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
236
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-discord"></i></a>
237
- </div>
238
  </div>
239
  </div>
240
- <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
241
- <p>© 2023 PC Configurator. Tous droits réservés.</p>
 
 
 
 
 
 
242
  </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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>PC Config Pro - Experts en configuration PC</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>
10
+ .hero-bg {
11
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80');
12
+ background-size: cover;
13
+ background-position: center;
 
14
  }
15
 
16
+ .config-card:hover {
17
+ transform: translateY(-10px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
  }
20
 
21
+ .part-card {
22
+ transition: all 0.3s ease;
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
+ .part-card:hover {
26
+ transform: scale(1.03);
 
27
  }
28
 
29
+ @keyframes fadeIn {
30
+ from { opacity: 0; transform: translateY(20px); }
31
+ to { opacity: 1; transform: translateY(0); }
32
  }
33
 
34
+ .animate-fade-in {
35
+ animation: fadeIn 0.8s ease-out forwards;
 
 
36
  }
37
  </style>
38
  </head>
39
+ <body class="font-sans bg-gray-50">
40
+ <!-- Navigation -->
41
+ <nav class="bg-gray-900 text-white sticky top-0 z-50 shadow-lg">
42
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
43
+ <div class="flex items-center space-x-2">
44
+ <i class="fas fa-desktop text-blue-400 text-2xl"></i>
45
+ <span class="text-xl font-bold">PC Config Pro</span>
46
+ </div>
47
+ <div class="hidden md:flex space-x-8">
48
+ <a href="#accueil" class="hover:text-blue-400 transition">Accueil</a>
49
+ <a href="#configurations" class="hover:text-blue-400 transition">Configurations</a>
50
+ <a href="#composants" class="hover:text-blue-400 transition">Composants</a>
51
+ <a href="#guides" class="hover:text-blue-400 transition">Guides</a>
52
+ <a href="#contact" class="hover:text-blue-400 transition">Contact</a>
53
+ </div>
54
+ <button class="md:hidden text-white focus:outline-none">
55
+ <i class="fas fa-bars text-xl"></i>
56
+ </button>
57
+ </div>
58
+ </nav>
59
+
60
+ <!-- Hero Section -->
61
+ <section id="accueil" class="hero-bg text-white py-32 px-6">
62
+ <div class="container mx-auto text-center animate-fade-in">
63
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Votre PC sur mesure</h1>
64
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Des configurations optimisées pour le gaming, le montage vidéo et le travail par des experts passionnés.</p>
65
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
66
+ <a href="#configurations" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition duration-300 transform hover:scale-105">Voir nos configurations</a>
67
+ <a href="#contact" class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-3 rounded-lg font-semibold transition duration-300 transform hover:scale-105">Contactez nos experts</a>
68
+ </div>
69
+ </div>
70
+ </section>
71
+
72
+ <!-- Configurations Section -->
73
+ <section id="configurations" class="py-16 bg-white">
74
+ <div class="container mx-auto px-6">
75
+ <div class="text-center mb-16">
76
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Configurations Phares</h2>
77
+ <p class="text-gray-600 max-w-2xl mx-auto">Des PC optimisés pour chaque usage et budget, assemblés avec soin par nos experts.</p>
78
+ </div>
79
+
80
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
81
+ <!-- Config 1 -->
82
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg config-card transition duration-500">
83
+ <div class="bg-gray-800 text-white p-6">
84
+ <h3 class="text-2xl font-bold mb-2">Gaming Elite</h3>
85
+ <p class="text-blue-300">Ultra performances pour les joueurs exigeants</p>
86
+ </div>
87
+ <div class="p-6">
88
+ <div class="flex justify-between items-center mb-4">
89
+ <span class="text-3xl font-bold text-gray-900">€1,899</span>
90
+ <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-medium">Top Vente</span>
91
+ </div>
92
+ <ul class="space-y-3 mb-6">
93
+ <li class="flex items-center">
94
+ <i class="fas fa-microchip text-blue-500 mr-2"></i>
95
+ <span>Intel Core i9-13900K</span>
96
+ </li>
97
+ <li class="flex items-center">
98
+ <i class="fas fa-memory text-blue-500 mr-2"></i>
99
+ <span>NVIDIA RTX 4080 16GB</span>
100
+ </li>
101
+ <li class="flex items-center">
102
+ <i class="fas fa-hdd text-blue-500 mr-2"></i>
103
+ <span>32GB DDR5 5600MHz</span>
104
+ </li>
105
+ <li class="flex items-center">
106
+ <i class="fas fa-bolt text-blue-500 mr-2"></i>
107
+ <span>1TB NVMe SSD + 2TB HDD</span>
108
+ </li>
109
+ </ul>
110
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">Personnaliser cette config</button>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Config 2 -->
115
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg config-card transition duration-500">
116
+ <div class="bg-gray-800 text-white p-6">
117
+ <h3 class="text-2xl font-bold mb-2">Création Pro</h3>
118
+ <p class="text-blue-300">Parfait pour le montage vidéo et 3D</p>
119
+ </div>
120
+ <div class="p-6">
121
+ <div class="flex justify-between items-center mb-4">
122
+ <span class="text-3xl font-bold text-gray-900">€2,499</span>
123
+ <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">Nouveau</span>
124
+ </div>
125
+ <ul class="space-y-3 mb-6">
126
+ <li class="flex items-center">
127
+ <i class="fas fa-microchip text-blue-500 mr-2"></i>
128
+ <span>AMD Ryzen 9 7950X</span>
129
+ </li>
130
+ <li class="flex items-center">
131
+ <i class="fas fa-memory text-blue-500 mr-2"></i>
132
+ <span>NVIDIA RTX 4090 24GB</span>
133
+ </li>
134
+ <li class="flex items-center">
135
+ <i class="fas fa-hdd text-blue-500 mr-2"></i>
136
+ <span>64GB DDR5 5200MHz</span>
137
+ </li>
138
+ <li class="flex items-center">
139
+ <i class="fas fa-bolt text-blue-500 mr-2"></i>
140
+ <span>2TB NVMe SSD + 4TB HDD</span>
141
+ </li>
142
+ </ul>
143
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">Personnaliser cette config</button>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Config 3 -->
148
+ <div class="bg-gray-50 rounded-xl overflow-hidden shadow-lg config-card transition duration-500">
149
+ <div class="bg-gray-800 text-white p-6">
150
+ <h3 class="text-2xl font-bold mb-2">Essentiel Gaming</h3>
151
+ <p class="text-blue-300">Entrée de gamme performante</p>
152
+ </div>
153
+ <div class="p-6">
154
+ <div class="flex justify-between items-center mb-4">
155
+ <span class="text-3xl font-bold text-gray-900">€999</span>
156
+ <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-medium">Économique</span>
157
+ </div>
158
+ <ul class="space-y-3 mb-6">
159
+ <li class="flex items-center">
160
+ <i class="fas fa-microchip text-blue-500 mr-2"></i>
161
+ <span>AMD Ryzen 5 7600X</span>
162
+ </li>
163
+ <li class="flex items-center">
164
+ <i class="fas fa-memory text-blue-500 mr-2"></i>
165
+ <span>NVIDIA RTX 3060 Ti 8GB</span>
166
+ </li>
167
+ <li class="flex items-center">
168
+ <i class="fas fa-hdd text-blue-500 mr-2"></i>
169
+ <span>16GB DDR5 4800MHz</span>
170
+ </li>
171
+ <li class="flex items-center">
172
+ <i class="fas fa-bolt text-blue-500 mr-2"></i>
173
+ <span>500GB NVMe SSD + 1TB HDD</span>
174
+ </li>
175
+ </ul>
176
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition">Personnaliser cette config</button>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <div class="text-center mt-12">
182
+ <a href="#" class="inline-flex items-center text-blue-600 font-medium hover:text-blue-800">
183
+ Voir toutes nos configurations
184
+ <i class="fas fa-arrow-right ml-2"></i>
185
+ </a>
186
+ </div>
187
+ </div>
188
+ </section>
189
+
190
+ <!-- Composants Section -->
191
+ <section id="composants" class="py-16 bg-gray-50">
192
+ <div class="container mx-auto px-6">
193
+ <div class="text-center mb-16">
194
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Composants de Qualité</h2>
195
+ <p class="text-gray-600 max-w-2xl mx-auto">Nous sélectionnons les meilleurs composants du marché pour vos configurations.</p>
196
+ </div>
197
+
198
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
199
+ <!-- CPU -->
200
+ <div class="bg-white rounded-lg shadow-md p-6 part-card">
201
+ <div class="text-blue-500 mb-4">
202
+ <i class="fas fa-microchip text-4xl"></i>
203
+ </div>
204
+ <h3 class="text-xl font-bold mb-2">Processeurs</h3>
205
+ <p class="text-gray-600 mb-4">Intel Core et AMD Ryzen de dernière génération pour des performances optimales.</p>
206
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
207
+ En savoir plus
208
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
209
+ </a>
210
+ </div>
211
+
212
+ <!-- GPU -->
213
+ <div class="bg-white rounded-lg shadow-md p-6 part-card">
214
+ <div class="text-purple-500 mb-4">
215
+ <i class="fas fa-gamepad text-4xl"></i>
216
+ </div>
217
+ <h3 class="text-xl font-bold mb-2">Cartes Graphiques</h3>
218
+ <p class="text-gray-600 mb-4">NVIDIA RTX et AMD Radeon pour le gaming et le rendu professionnel.</p>
219
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
220
+ En savoir plus
221
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
222
+ </a>
223
  </div>
224
+
225
+ <!-- RAM -->
226
+ <div class="bg-white rounded-lg shadow-md p-6 part-card">
227
+ <div class="text-green-500 mb-4">
228
+ <i class="fas fa-memory text-4xl"></i>
229
+ </div>
230
+ <h3 class="text-xl font-bold mb-2">Mémoire RAM</h3>
231
+ <p class="text-gray-600 mb-4">DDR4 et DDR5 haute fréquence pour une fluidité exceptionnelle.</p>
232
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
233
+ En savoir plus
234
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
235
+ </a>
236
+ </div>
237
+
238
+ <!-- Storage -->
239
+ <div class="bg-white rounded-lg shadow-md p-6 part-card">
240
+ <div class="text-orange-500 mb-4">
241
+ <i class="fas fa-hdd text-4xl"></i>
242
+ </div>
243
+ <h3 class="text-xl font-bold mb-2">Stockage</h3>
244
+ <p class="text-gray-600 mb-4">SSD NVMe ultra-rapides et HDD haute capacité pour tous vos besoins.</p>
245
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
246
+ En savoir plus
247
+ <i class="fas fa-chevron-right ml-1 text-sm"></i>
248
+ </a>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="mt-12 bg-blue-50 rounded-xl p-8">
253
+ <div class="flex flex-col md:flex-row items-center">
254
+ <div class="md:w-1/2 mb-6 md:mb-0">
255
+ <h3 class="text-2xl font-bold text-gray-900 mb-3">Configurateur en ligne</h3>
256
+ <p class="text-gray-700">Créez votre PC sur mesure en choisissant chaque composant selon vos besoins et votre budget.</p>
257
+ </div>
258
+ <div class="md:w-1/2 text-center md:text-right">
259
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition transform hover:scale-105">
260
+ Essayer le configurateur
261
+ <i class="fas fa-cogs ml-2"></i>
262
+ </button>
263
+ </div>
264
  </div>
265
  </div>
266
  </div>
267
+ </section>
268
 
269
+ <!-- Guides Section -->
270
+ <section id="guides" class="py-16 bg-white">
271
+ <div class="container mx-auto px-6">
272
+ <div class="text-center mb-16">
273
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos Guides Pratiques</h2>
274
+ <p class="text-gray-600 max-w-2xl mx-auto">Apprenez à choisir et optimiser votre configuration avec nos guides experts.</p>
 
 
 
 
 
 
275
  </div>
276
 
277
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
278
+ <!-- Guide 1 -->
279
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md">
280
+ <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Guide gaming" class="w-full h-48 object-cover">
281
+ <div class="p-6">
282
+ <div class="flex items-center text-sm text-gray-500 mb-2">
283
+ <span>Gaming</span>
284
+ <span class="mx-2">•</span>
285
+ <span>15 min de lecture</span>
286
+ </div>
287
+ <h3 class="text-xl font-bold mb-3">Choisir sa config gaming en 2023</h3>
288
+ <p class="text-gray-600 mb-4">Tout ce qu'il faut savoir pour sélectionner les bons composants selon son budget et ses jeux favoris.</p>
289
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
290
+ Lire le guide
291
+ <i class="fas fa-book-open ml-2"></i>
292
+ </a>
293
+ </div>
294
+ </div>
295
+
296
+ <!-- Guide 2 -->
297
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md">
298
+ <img src="https://images.unsplash.com/photo-1551033406-611a9b79f6b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Guide montage" class="w-full h-48 object-cover">
299
+ <div class="p-6">
300
+ <div class="flex items-center text-sm text-gray-500 mb-2">
301
+ <span>Montage</span>
302
+ <span class="mx-2">•</span>
303
+ <span>20 min de lecture</span>
304
+ </div>
305
+ <h3 class="text-xl font-bold mb-3">PC pour le montage vidéo : nos conseils</h3>
306
+ <p class="text-gray-600 mb-4">Optimisez votre workflow avec une configuration adaptée à Premiere Pro, DaVinci Resolve et After Effects.</p>
307
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
308
+ Lire le guide
309
+ <i class="fas fa-book-open ml-2"></i>
310
+ </a>
311
+ </div>
312
+ </div>
313
+
314
+ <!-- Guide 3 -->
315
+ <div class="bg-gray-50 rounded-lg overflow-hidden shadow-md">
316
+ <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Guide refroidissement" class="w-full h-48 object-cover">
317
+ <div class="p-6">
318
+ <div class="flex items-center text-sm text-gray-500 mb-2">
319
+ <span>Optimisation</span>
320
+ <span class="mx-2">•</span>
321
+ <span>12 min de lecture</span>
322
+ </div>
323
+ <h3 class="text-xl font-bold mb-3">Refroidissement : air ou watercooling ?</h3>
324
+ <p class="text-gray-600 mb-4">Comparatif complet des solutions de refroidissement pour votre processeur.</p>
325
+ <a href="#" class="text-blue-600 font-medium hover:text-blue-800 flex items-center">
326
+ Lire le guide
327
+ <i class="fas fa-book-open ml-2"></i>
328
+ </a>
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </section>
334
+
335
+ <!-- Contact Section -->
336
+ <section id="contact" class="py-16 bg-gray-900 text-white">
337
+ <div class="container mx-auto px-6">
338
+ <div class="text-center mb-16">
339
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez nos experts</h2>
340
+ <p class="text-gray-300 max-w-2xl mx-auto">Une question sur une configuration ? Besoin de conseils personnalisés ? Notre équipe est là pour vous aider.</p>
341
+ </div>
342
+
343
+ <div class="flex flex-col lg:flex-row gap-12">
344
+ <div class="lg:w-1/2">
345
+ <form class="space-y-6">
346
+ <div>
347
+ <label for="name" class="block text-sm font-medium mb-1">Nom complet</label>
348
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
349
+ </div>
350
 
351
+ <div>
352
+ <label for="email" class="block text-sm font-medium mb-1">Email</label>
353
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
354
+ </div>
355
 
356
+ <div>
357
+ <label for="subject" class="block text-sm font-medium mb-1">Sujet</label>
358
+ <select id="subject" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
359
+ <option>Demande de conseil</option>
360
+ <option>Question sur une configuration</option>
361
+ <option>Problème technique</option>
362
+ <option>Autre demande</option>
363
+ </select>
364
  </div>
365
 
366
+ <div>
367
+ <label for="message" class="block text-sm font-medium mb-1">Message</label>
368
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
369
+ </div>
370
+
371
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition transform hover:scale-[1.02]">
372
+ Envoyer le message
373
+ <i class="fas fa-paper-plane ml-2"></i>
374
+ </button>
375
+ </form>
376
+ </div>
377
+
378
+ <div class="lg:w-1/2">
379
+ <div class="bg-gray-800 rounded-xl p-8 h-full">
380
+ <h3 class="text-xl font-bold mb-6">Nos coordonnées</h3>
381
+
382
+ <div class="space-y-6">
383
+ <div class="flex items-start">
384
+ <div class="text-blue-400 mt-1 mr-4">
385
+ <i class="fas fa-map-marker-alt text-xl"></i>
386
+ </div>
387
+ <div>
388
+ <h4 class="font-medium mb-1">Adresse</h4>
389
+ <p class="text-gray-300">123 Rue de l'Informatique, 75000 Paris</p>
390
  </div>
391
  </div>
392
 
393
+ <div class="flex items-start">
394
+ <div class="text-blue-400 mt-1 mr-4">
395
+ <i class="fas fa-phone-alt text-xl"></i>
 
396
  </div>
397
  <div>
398
+ <h4 class="font-medium mb-1">Téléphone</h4>
399
+ <p class="text-gray-300">01 23 45 67 89</p>
400
+ <p class="text-gray-300">Lundi au vendredi, 9h-18h</p>
401
  </div>
402
  </div>
403
 
404
+ <div class="flex items-start">
405
+ <div class="text-blue-400 mt-1 mr-4">
406
+ <i class="fas fa-envelope text-xl"></i>
407
+ </div>
408
+ <div>
409
+ <h4 class="font-medium mb-1">Email</h4>
410
+ <p class="text-gray-300">contact@pcconfigpro.fr</p>
411
+ </div>
412
  </div>
413
 
414
+ <div class="flex items-start">
415
+ <div class="text-blue-400 mt-1 mr-4">
416
+ <i class="fas fa-share-alt text-xl"></i>
417
+ </div>
418
+ <div>
419
+ <h4 class="font-medium mb-3">Réseaux sociaux</h4>
420
+ <div class="flex space-x-4">
421
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition">
422
+ <i class="fab fa-facebook-f text-xl"></i>
423
+ </a>
424
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition">
425
+ <i class="fab fa-twitter text-xl"></i>
426
+ </a>
427
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition">
428
+ <i class="fab fa-instagram text-xl"></i>
429
+ </a>
430
+ <a href="#" class="text-gray-300 hover:text-blue-400 transition">
431
+ <i class="fab fa-youtube text-xl"></i>
432
+ </a>
433
+ </div>
434
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
435
  </div>
436
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
437
  </div>
438
  </div>
439
  </div>
440
  </div>
441
+ </section>
442
 
443
  <!-- Footer -->
444
+ <footer class="bg-gray-950 text-gray-400 py-12">
445
+ <div class="container mx-auto px-6">
446
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
447
  <div>
448
+ <div class="flex items-center space-x-2 mb-4">
449
+ <i class="fas fa-desktop text-blue-400 text-2xl"></i>
450
+ <span class="text-xl font-bold text-white">PC Config Pro</span>
451
+ </div>
452
+ <p class="mb-4">Experts en configuration PC depuis 2010. Nous vous accompagnons dans le choix et l'assemblage de votre ordinateur sur mesure.</p>
453
+ <div class="flex space-x-4">
454
+ <a href="#" class="text-gray-400 hover:text-white transition">
455
+ <i class="fab fa-facebook-f"></i>
456
+ </a>
457
+ <a href="#" class="text-gray-400 hover:text-white transition">
458
+ <i class="fab fa-twitter"></i>
459
+ </a>
460
+ <a href="#" class="text-gray-400 hover:text-white transition">
461
+ <i class="fab fa-instagram"></i>
462
+ </a>
463
+ <a href="#" class="text-gray-400 hover:text-white transition">
464
+ <i class="fab fa-youtube"></i>
465
+ </a>
466
+ </div>
467
  </div>
468
+
469
  <div>
470
+ <h4 class="text-white font-semibold mb-4 text-lg">Configurations</h4>
471
+ <ul class="space-y-2">
472
+ <li><a href="#" class="hover:text-white transition">PC Gaming</a></li>
473
+ <li><a href="#" class="hover:text-white transition">PC Montage Vidéo</a></li>
474
+ <li><a href="#" class="hover:text-white transition">PC Bureautique</a></li>
475
+ <li><a href="#" class="hover:text-white transition">PC Streaming</a></li>
476
+ <li><a href="#" class="hover:text-white transition">Toutes nos configs</a></li>
477
  </ul>
478
  </div>
479
+
480
  <div>
481
+ <h4 class="text-white font-semibold mb-4 text-lg">Informations</h4>
482
+ <ul class="space-y-2">
483
+ <li><a href="#" class="hover:text-white transition">Livraison & Retours</a></li>
484
+ <li><a href="#" class="hover:text-white transition">Paiement sécurisé</a></li>
 
 
485
  <li><a href="#" class="hover:text-white transition">Garanties</a></li>
486
+ <li><a href="#" class="hover:text-white transition">FAQ</a></li>
487
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
488
  </ul>
489
  </div>
490
+
491
  <div>
492
+ <h4 class="text-white font-semibold mb-4 text-lg">Newsletter</h4>
493
+ <p class="mb-4">Abonnez-vous pour recevoir nos offres et conseils.</p>
494
+ <form class="flex">
495
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full">
496
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition">
497
  <i class="fas fa-paper-plane"></i>
498
  </button>
499
+ </form>
 
 
 
 
 
 
500
  </div>
501
  </div>
502
+
503
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
504
+ <p>© 2023 PC Config Pro. Tous droits réservés.</p>
505
+ <div class="flex space-x-6 mt-4 md:mt-0">
506
+ <a href="#" class="hover:text-white transition">Mentions légales</a>
507
+ <a href="#" class="hover:text-white transition">CGV</a>
508
+ <a href="#" class="hover:text-white transition">Politique de confidentialité</a>
509
+ </div>
510
  </div>
511
  </div>
512
  </footer>
513
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
514
  <script>
515
+ // Smooth scrolling for anchor links
516
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
517
+ anchor.addEventListener('click', function (e) {
518
+ e.preventDefault();
 
519
 
520
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
521
+ behavior: 'smooth'
522
+ });
 
 
 
 
 
 
 
 
523
  });
524
  });
525
 
526
+ // Mobile menu toggle (would need implementation in WordPress)
527
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
528
+ mobileMenuButton.addEventListener('click', function() {
529
+ // This would need to be adapted for WordPress
530
+ alert("Dans une implémentation WordPress, ceci ouvrirait le menu mobile");
531
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
532
 
533
+ // Animation on scroll
534
+ const observerOptions = {
535
+ threshold: 0.1
536
+ };
537
+
538
+ const observer = new IntersectionObserver((entries) => {
539
+ entries.forEach(entry => {
540
+ if (entry.isIntersecting) {
541
+ entry.target.classList.add('animate-fade-in');
542
+ observer.unobserve(entry.target);
543
+ }
544
+ });
545
+ }, observerOptions);
546
+
547
+ document.querySelectorAll('section').forEach(section => {
548
+ observer.observe(section);
549
+ });
550
  </script>
551
  <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>
552
  </html>