Hugging Face's logo

Spaces:
Stephane63
/
test-space
Running

App Files Community
Stephane63 commited on
Commit
191b022
·
verified ·
1 Parent(s): 35f894a

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +20 -185
index.html CHANGED
@@ -49,6 +49,25 @@
49
  .footer-divider {
50
  border-top: 1px solid rgba(201, 125, 74, 0.2);
51
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
  </style>
53
  </head>
54
  <body>
@@ -284,189 +303,5 @@
284
  <p class="text-amber-800 max-w-2xl mx-auto">Découvrez ce que nos clients passionnés pensent de nos cafés.</p>
285
  </div>
286
 
287
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
288
- <div class="bg-amber-50 p-6 rounded-lg">
289
- <div class="flex text-amber-500 mb-4">
290
- <i class="fas fa-star"></i>
291
- <i class="fas fa-star"></i>
292
- <i class="fas fa-star"></i>
293
- <i class="fas fa-star"></i>
294
- <i class="fas fa-star"></i>
295
- </div>
296
- <p class="text-gray-700 italic mb-6">"Le Yirgacheffe est une révélation ! Des notes florales incroyables que je n'avais jamais retrouvées dans un café auparavant."</p>
297
- <div class="flex items-center">
298
- <div class="w-10 h-10 rounded-full bg-amber-200 mr-3 overflow-hidden">
299
- <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-full h-full object-cover">
300
- </div>
301
- <div>
302
- <p class="font-medium text-amber-900">Sophie L.</p>
303
- <p class="text-gray-500 text-sm">Abonnée depuis 8 mois</p>
304
- </div>
305
- </div>
306
- </div>
307
-
308
- <div class="bg-amber-50 p-6 rounded-lg">
309
- <div class="flex text-amber-500 mb-4">
310
- <i class="fas fa-star"></i>
311
- <i class="fas fa-star"></i>
312
- <i class="fas fa-star"></i>
313
- <i class="fas fa-star"></i>
314
- <i class="fas fa-star"></i>
315
- </div>
316
- <p class="text-gray-700 italic mb-6">"La qualité des grains est exceptionnelle. Je ne peux plus me passer de mon Brésil Cerrado du matin, un régal !"</p>
317
- <div class="flex items-center">
318
- <div class="w-10 h-10 rounded-full bg-amber-200 mr-3 overflow-hidden">
319
- <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-full h-full object-cover">
320
- </div>
321
- <div>
322
- <p class="font-medium text-amber-900">Thomas R.</p>
323
- <p class="text-gray-500 text-sm">Client depuis 1 an</p>
324
- </div>
325
- </div>
326
- </div>
327
-
328
- <div class="bg-amber-50 p-6 rounded-lg">
329
- <div class="flex text-amber-500 mb-4">
330
- <i class="fas fa-star"></i>
331
- <i class="fas fa-star"></i>
332
- <i class="fas fa-star"></i>
333
- <i class="fas fa-star"></i>
334
- <i class="fas fa-star-half-alt"></i>
335
- </div>
336
- <p class="text-gray-700 italic mb-6">"L'abonnement est parfaitement adapté à mes goûts. Chaque mois, une nouvelle découverte qui m'émerveille."</p>
337
- <div class="flex items-center">
338
- <div class="w-10 h-10 rounded-full bg-amber-200 mr-3 overflow-hidden">
339
- <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-full h-full object-cover">
340
- </div>
341
- <div>
342
- <p class="font-medium text-amber-900">Élodie M.</p>
343
- <p class="text-gray-500 text-sm">Abonnée depuis 5 mois</p>
344
- </div>
345
- </div>
346
- </div>
347
- </div>
348
- </div>
349
- </section>
350
-
351
- <!-- Newsletter -->
352
- <section class="py-16 bg-amber-100">
353
- <div class="container mx-auto px-4 max-w-4xl text-center">
354
- <h3 class="title-font text-3xl font-bold text-amber-900 mb-2">Restez informés</h3>
355
- <p class="text-amber-800 mb-8">Abonnez-vous à notre newsletter pour recevoir nos nouveautés, conseils et offres exclusives.</p>
356
-
357
- <form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
358
- <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-full border border-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500">
359
- <button type="submit" class="btn-primary text-white font-medium py-3 px-8 rounded-full whitespace-nowrap">S'abonner</button>
360
- </form>
361
-
362
- <p class="text-amber-800 text-sm mt-4">Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment.</p>
363
- </div>
364
- </section>
365
-
366
- <!-- Footer -->
367
- <footer class="bg-amber-900 text-white pt-16 pb-8">
368
- <div class="container mx-auto px-4">
369
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
370
- <div>
371
- <div class="flex items-center mb-4">
372
- <i class="fas fa-coffee text-2xl text-amber-300 mr-2"></i>
373
- <h4 class="title-font text-xl font-bold">Grain d'Or</h4>
374
- </div>
375
- <p class="text-amber-200 mb-4">Des cafés d'exception, torréfiés avec passion pour les amateurs exigeants.</p>
376
- <div class="flex space-x-4">
377
- <a href="#" class="text-amber-300 hover:text-white text-xl"><i class="fab fa-instagram"></i></a>
378
- <a href="#" class="text-amber-300 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
379
- <a href="#" class="text-amber-300 hover:text-white text-xl"><i class="fab fa-pinterest"></i></a>
380
- </div>
381
- </div>
382
-
383
- <div>
384
- <h5 class="title-font font-bold text-lg mb-4">Navigation</h5>
385
- <ul class="space-y-2">
386
- <li><a href="#" class="text-amber-200 hover:text-white">Nos cafés</a></li>
387
- <li><a href="#" class="text-amber-200 hover:text-white">Origines</a></li>
388
- <li><a href="#" class="text-amber-200 hover:text-white">Méthodes de préparation</a></li>
389
- <li><a href="#" class="text-amber-200 hover:text-white">Notre histoire</a></li>
390
- <li><a href="#" class="text-amber-200 hover:text-white">Blog</a></li>
391
- </ul>
392
- </div>
393
-
394
- <div>
395
- <h5 class="title-font font-bold text-lg mb-4">Informations</h5>
396
- <ul class="space-y-2">
397
- <li><a href="#" class="text-amber-200 hover:text-white">Livraison & retours</a></li>
398
- <li><a href="#" class="text-amber-200 hover:text-white">FAQ</a></li>
399
- <li><a href="#" class="text-amber-200 hover:text-white">Contact</a></li>
400
- <li><a href="#" class="text-amber-200 hover:text-white">Boutiques</a></li>
401
- <li><a href="#" class="text-amber-200 hover:text-white">CGV</a></li>
402
- </ul>
403
- </div>
404
-
405
- <div>
406
- <h5 class="title-font font-bold text-lg mb-4">Contact</h5>
407
- <ul class="space-y-2">
408
- <li class="flex items-start">
409
- <i class="fas fa-map-marker-alt text-amber-300 mt-1 mr-3"></i>
410
- <span class="text-amber-200">12 Rue des Torréfacteurs<br>75011 Paris</span>
411
- </li>
412
- <li class="flex items-center">
413
- <i class="fas fa-phone-alt text-amber-300 mr-3"></i>
414
- <span class="text-amber-200">01 23 45 67 89</span>
415
- </li>
416
- <li class="flex items-center">
417
- <i class="fas fa-envelope text-amber-300 mr-3"></i>
418
- <span class="text-amber-200">contact@graindor.com</span>
419
- </li>
420
- </ul>
421
- </div>
422
- </div>
423
-
424
- <div class="footer-divider pt-8">
425
- <div class="flex flex-col md:flex-row justify-between items-center">
426
- <p class="text-amber-200 text-sm mb-4 md:mb-0">© 2023 Grain d'Or. Tous droits réservés.</p>
427
- <div class="flex space-x-6">
428
- <a href="#" class="text-amber-200 hover:text-white text-sm">Politique de confidentialité</a>
429
- <a href="#" class="text-amber-200 hover:text-white text-sm">Mentions légales</a>
430
- <a href="#" class="text-amber-200 hover:text-white text-sm">Cookies</a>
431
- </div>
432
- </div>
433
- </div>
434
- </div>
435
- </footer>
436
-
437
- <script>
438
- // Simple cart functionality for demo purposes
439
- document.querySelectorAll('.btn-primary').forEach(button => {
440
- button.addEventListener('click', function() {
441
- const productName = this.closest('.coffee-card').querySelector('h4').textContent;
442
- const price = this.closest('.coffee-card').querySelector('span').textContent;
443
-
444
- // Update cart count
445
- const cartCount = document.querySelector('.fa-shopping-cart').nextElementSibling;
446
- let count = parseInt(cartCount.textContent);
447
- cartCount.textContent = count + 1;
448
-
449
- // Show notification
450
- const notification = document.createElement('div');
451
- notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center animate-fade-in';
452
- notification.innerHTML = `
453
- <i class="fas fa-check-circle mr-2"></i>
454
- ${productName} ajouté au panier (${price})
455
- `;
456
- document.body.appendChild(notification);
457
-
458
- // Remove notification after 3 seconds
459
- setTimeout(() => {
460
- notification.classList.add('animate-fade-out');
461
- setTimeout(() => notification.remove(), 500);
462
- }, 3000);
463
- });
464
- });
465
-
466
- // Mobile menu toggle (would need proper implementation)
467
- document.querySelector('.fa-bars').addEventListener('click', function() {
468
- alert('Menu mobile à implémenter');
469
- });
470
- </script>
471
- <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=Stephane63/test-space" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
472
  </html>
 
49
  .footer-divider {
50
  border-top: 1px solid rgba(201, 125, 74, 0.2);
51
  }
52
+
53
+ /* Animation for notifications */
54
+ @keyframes fadeIn {
55
+ from { opacity: 0; transform: translateY(20px); }
56
+ to { opacity: 1; transform: translateY(0); }
57
+ }
58
+
59
+ @keyframes fadeOut {
60
+ from { opacity: 1; transform: translateY(0); }
61
+ to { opacity: 0; transform: translateY(20px); }
62
+ }
63
+
64
+ .animate-fade-in {
65
+ animation: fadeIn 0.3s ease-out forwards;
66
+ }
67
+
68
+ .animate-fade-out {
69
+ animation: fadeOut 0.3s ease-out forwards;
70
+ }
71
  </style>
72
  </head>
73
  <body>
 
303
  <p class="text-amber-800 max-w-2xl mx-auto">Découvrez ce que nos clients passionnés pensent de nos cafés.</p>
304
  </div>
305
 
306
+ <div class="grid grid-cols-1 md:grid-cols-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
307
  </html>