Hugging Face's logo

Spaces:
spanexx
/
ebayalt
Running

App Files Community
spanexx commited on
Commit
f877dfb
·
verified ·
1 Parent(s): 1bb1840

work on the deals page - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +163 -2
index.html CHANGED
@@ -29,6 +29,73 @@
29
  transition: all 0.3s ease;
30
  }
31
  </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  </head>
33
  <body class="bg-gray-50 font-sans">
34
  <!-- Navigation -->
@@ -43,7 +110,7 @@
43
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
44
  <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
45
  <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Categories</a>
46
- <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deals</a>
47
  <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sell</a>
48
  </div>
49
  </div>
@@ -89,7 +156,7 @@
89
  <div class="pt-2 pb-3 space-y-1">
90
  <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
91
  <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>
92
- <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Deals</a>
93
  <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sell</a>
94
  </div>
95
  <div class="pt-4 pb-3 border-t border-gray-200">
@@ -343,6 +410,100 @@
343
  </div>
344
  </div>
345
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  <!-- Landing Page -->
347
  <div id="landing-page">
348
  <!-- Hero Section -->
 
29
  transition: all 0.3s ease;
30
  }
31
  </style>
32
+ <script>
33
+ // Handle deals page navigation
34
+ document.addEventListener('DOMContentLoaded', function() {
35
+ const dealsNavLink = document.getElementById('deals-nav-link');
36
+ const mobileDealsNavLink = document.getElementById('mobile-deals-nav-link');
37
+ const landingPage = document.getElementById('landing-page');
38
+ const dealsPage = document.getElementById('deals-page');
39
+
40
+ function showDealsPage() {
41
+ landingPage.classList.add('hidden');
42
+ dealsPage.classList.remove('hidden');
43
+ // Update active state in navigation
44
+ document.querySelectorAll('nav a').forEach(link => {
45
+ link.classList.remove('border-blue-500', 'text-gray-900');
46
+ link.classList.add('border-transparent', 'text-gray-500');
47
+ });
48
+ dealsNavLink.classList.remove('border-transparent', 'text-gray-500');
49
+ dealsNavLink.classList.add('border-blue-500', 'text-gray-900');
50
+ }
51
+
52
+ dealsNavLink.addEventListener('click', function(e) {
53
+ e.preventDefault();
54
+ showDealsPage();
55
+ });
56
+
57
+ mobileDealsNavLink.addEventListener('click', function(e) {
58
+ e.preventDefault();
59
+ showDealsPage();
60
+ });
61
+
62
+ // Deal countdown timer
63
+ function updateDealCountdown() {
64
+ // This would be replaced with actual deal end time logic
65
+ const now = new Date();
66
+ const endTime = new Date(now.getTime() + 12 * 60 * 60 * 1000 + 34 * 60 * 1000);
67
+
68
+ const diff = endTime - now;
69
+ const hours = Math.floor(diff / (1000 * 60 * 60));
70
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
71
+
72
+ document.getElementById('deal-hours').textContent = hours.toString().padStart(2, '0');
73
+ document.getElementById('deal-minutes').textContent = minutes.toString().padStart(2, '0');
74
+ }
75
+
76
+ // Flash deal countdown timer
77
+ function updateFlashCountdown() {
78
+ // This would be replaced with actual flash deal end time logic
79
+ const now = new Date();
80
+ const endTime = new Date(now.getTime() + 5 * 60 * 60 * 1000 + 47 * 60 * 1000 + 32 * 1000);
81
+
82
+ const diff = endTime - now;
83
+ const hours = Math.floor(diff / (1000 * 60 * 60));
84
+ const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
85
+ const seconds = Math.floor((diff % (1000 * 60)) / 1000);
86
+
87
+ document.getElementById('flash-hours').textContent = hours.toString().padStart(2, '0');
88
+ document.getElementById('flash-minutes').textContent = minutes.toString().padStart(2, '0');
89
+ document.getElementById('flash-seconds').textContent = seconds.toString().padStart(2, '0');
90
+ }
91
+
92
+ // Initialize timers
93
+ updateDealCountdown();
94
+ updateFlashCountdown();
95
+ setInterval(updateDealCountdown, 60000);
96
+ setInterval(updateFlashCountdown, 1000);
97
+ });
98
+ </script>
99
  </head>
100
  <body class="bg-gray-50 font-sans">
101
  <!-- Navigation -->
 
110
  <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
111
  <a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
112
  <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Categories</a>
113
+ <a href="#" id="deals-nav-link" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Deals</a>
114
  <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Sell</a>
115
  </div>
116
  </div>
 
156
  <div class="pt-2 pb-3 space-y-1">
157
  <a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
158
  <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Categories</a>
159
+ <a href="#" id="mobile-deals-nav-link" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Deals</a>
160
  <a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Sell</a>
161
  </div>
162
  <div class="pt-4 pb-3 border-t border-gray-200">
 
410
  </div>
411
  </div>
412
  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
413
+ <!-- Deals Page -->
414
+ <div id="deals-page" class="hidden">
415
+ <section class="mb-12">
416
+ <div class="flex justify-between items-center mb-6">
417
+ <h2 class="text-2xl font-bold text-gray-900">Today's Best Deals</h2>
418
+ <div class="flex items-center">
419
+ <span class="text-sm text-gray-500 mr-2">Ending in:</span>
420
+ <div class="bg-red-600 text-white text-sm font-bold px-3 py-1 rounded">
421
+ <span id="deal-hours">12</span>h <span id="deal-minutes">34</span>m
422
+ </div>
423
+ </div>
424
+ </div>
425
+
426
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
427
+ <!-- Deal Card 1 -->
428
+ <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-all relative">
429
+ <div class="absolute top-2 left-2 bg-red-600 text-white text-xs font-bold px-2 py-1 rounded z-10">
430
+ 50% OFF
431
+ </div>
432
+ <div class="relative pb-3/4 h-48">
433
+ <img class="absolute h-full w-full object-cover" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Deal product">
434
+ <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
435
+ <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
436
+ </div>
437
+ </div>
438
+ <div class="p-4">
439
+ <div class="flex justify-between items-start">
440
+ <div>
441
+ <h3 class="text-lg font-semibold text-gray-900 mb-1">Premium Headphones</h3>
442
+ <p class="text-gray-500 text-sm">Electronics</p>
443
+ </div>
444
+ <div class="text-right">
445
+ <p class="text-lg font-bold text-blue-600">$99.99</p>
446
+ <p class="text-xs text-gray-500 line-through">$199.99</p>
447
+ </div>
448
+ </div>
449
+ <div class="mt-3 flex items-center">
450
+ <div class="flex items-center">
451
+ <i class="fas fa-star text-yellow-400"></i>
452
+ <span class="text-gray-700 ml-1">4.8</span>
453
+ <span class="text-gray-500 text-xs ml-1">(124)</span>
454
+ </div>
455
+ <div class="ml-auto">
456
+ <span class="text-green-600 text-sm font-medium">Free shipping</span>
457
+ </div>
458
+ </div>
459
+ <button class="mt-4 w-full bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md transition-colors">
460
+ Get Deal
461
+ </button>
462
+ </div>
463
+ </div>
464
+
465
+ <!-- More deal cards would go here -->
466
+ </div>
467
+ </section>
468
+
469
+ <section class="mb-12">
470
+ <h2 class="text-2xl font-bold text-gray-900 mb-6">Flash Deals</h2>
471
+ <div class="bg-gradient-to-r from-red-600 to-pink-600 rounded-lg p-6 text-white">
472
+ <div class="flex flex-col md:flex-row items-center">
473
+ <div class="md:w-1/3 mb-4 md:mb-0">
474
+ <h3 class="text-xl font-bold mb-2">Limited Time Offer</h3>
475
+ <p class="mb-4">Huge discounts on select items - while supplies last!</p>
476
+ <div class="flex items-center">
477
+ <div class="text-center px-2">
478
+ <div class="bg-black bg-opacity-30 rounded-lg px-3 py-2">
479
+ <span id="flash-hours">05</span>
480
+ </div>
481
+ <span class="text-xs mt-1">HOURS</span>
482
+ </div>
483
+ <span class="mx-1">:</span>
484
+ <div class="text-center px-2">
485
+ <div class="bg-black bg-opacity-30 rounded-lg px-3 py-2">
486
+ <span id="flash-minutes">47</span>
487
+ </div>
488
+ <span class="text-xs mt-1">MIN</span>
489
+ </div>
490
+ <span class="mx-1">:</span>
491
+ <div class="text-center px-2">
492
+ <div class="bg-black bg-opacity-30 rounded-lg px-3 py-2">
493
+ <span id="flash-seconds">32</span>
494
+ </div>
495
+ <span class="text-xs mt-1">SEC</span>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ <div class="md:w-2/3 grid grid-cols-2 md:grid-cols-3 gap-4">
500
+ <!-- Flash deal items would go here -->
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </section>
505
+ </div>
506
+
507
  <!-- Landing Page -->
508
  <div id="landing-page">
509
  <!-- Hero Section -->