Hugging Face's logo

Spaces:
Jobwengi
/
myshop1
Running

App Files Community
Jobwengi commited on
Commit
6c128a6
·
verified ·
1 Parent(s): 49f6861

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +487 -195
  2. prompts.txt +2 -1
index.html CHANGED
@@ -175,9 +175,157 @@
175
  font-size: 0.875rem;
176
  margin-top: 0.25rem;
177
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
178
  </style>
179
  </head>
180
  <body class="bg-gray-50">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
181
  <!-- Top Bar -->
182
  <div class="bg-black text-white text-sm py-2 px-4">
183
  <div class="container mx-auto flex justify-between items-center">
@@ -297,6 +445,25 @@
297
  </div>
298
  </div>
299
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
300
  <!-- Cart Modal -->
301
  <div id="cart-modal" class="modal">
302
  <div class="modal-content">
@@ -396,31 +563,9 @@
396
  <section class="py-12 bg-white">
397
  <div class="container mx-auto px-4">
398
  <h2 class="heading-font text-3xl font-bold text-center mb-12">Shop By Category</h2>
399
- <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
400
- <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
401
- <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Dresses" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
402
- <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
403
- <h3 class="text-white text-xl font-bold">Dresses</h3>
404
- </div>
405
- </a>
406
- <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
407
- <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Tops" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
408
- <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
409
- <h3 class="text-white text-xl font-bold">Tops</h3>
410
- </div>
411
- </a>
412
- <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
413
- <img src="https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80" alt="Skirts" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
414
- <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
415
- <h3 class="text-white text-xl font-bold">Skirts</h3>
416
- </div>
417
- </a>
418
- <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
419
- <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Accessories" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
420
- <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
421
- <h3 class="text-white text-xl font-bold">Accessories</h3>
422
- </div>
423
- </a>
424
  </div>
425
  </div>
426
  </section>
@@ -433,119 +578,9 @@
433
  <a href="#" class="text-amber-600 hover:text-amber-700 font-medium">View All <i class="fas fa-arrow-right ml-1"></i></a>
434
  </div>
435
 
436
- <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
437
- <!-- Product 1 -->
438
- <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
439
- <div class="relative overflow-hidden">
440
- <img src="https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=746&q=80" alt="African Print Dress" class="product-image w-full h-64 object-cover">
441
- <div class="absolute top-3 right-3">
442
- <span class="bg-amber-600 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
443
- </div>
444
- </div>
445
- <div class="p-4">
446
- <h3 class="font-semibold text-lg mb-1">African Print Maxi Dress</h3>
447
- <div class="flex items-center mb-2">
448
- <div class="flex text-amber-400">
449
- <i class="fas fa-star"></i>
450
- <i class="fas fa-star"></i>
451
- <i class="fas fa-star"></i>
452
- <i class="fas fa-star"></i>
453
- <i class="fas fa-star-half-alt"></i>
454
- </div>
455
- <span class="text-gray-600 text-sm ml-2">(24)</span>
456
- </div>
457
- <div class="flex justify-between items-center">
458
- <span class="font-bold text-lg">KSh 2,499</span>
459
- <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center" data-id="1" data-name="African Print Maxi Dress" data-price="2499" data-image="https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=746&q=80">
460
- <i class="fas fa-shopping-cart"></i>
461
- </button>
462
- </div>
463
- </div>
464
- </div>
465
-
466
- <!-- Product 2 -->
467
- <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
468
- <div class="relative overflow-hidden">
469
- <img src="https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Denim Jacket" class="product-image w-full h-64 object-cover">
470
- </div>
471
- <div class="p-4">
472
- <h3 class="font-semibold text-lg mb-1">Classic Denim Jacket</h3>
473
- <div class="flex items-center mb-2">
474
- <div class="flex text-amber-400">
475
- <i class="fas fa-star"></i>
476
- <i class="fas fa-star"></i>
477
- <i class="fas fa-star"></i>
478
- <i class="fas fa-star"></i>
479
- <i class="far fa-star"></i>
480
- </div>
481
- <span class="text-gray-600 text-sm ml-2">(18)</span>
482
- </div>
483
- <div class="flex justify-between items-center">
484
- <span class="font-bold text-lg">KSh 1,899</span>
485
- <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center" data-id="2" data-name="Classic Denim Jacket" data-price="1899" data-image="https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80">
486
- <i class="fas fa-shopping-cart"></i>
487
- </button>
488
- </div>
489
- </div>
490
- </div>
491
-
492
- <!-- Product 3 -->
493
- <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
494
- <div class="relative overflow-hidden">
495
- <img src="https://images.unsplash.com/photo-1595341595379-cf2a3d574a3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80" alt="Floral Skirt" class="product-image w-full h-64 object-cover">
496
- <div class="absolute top-3 right-3">
497
- <span class="bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full">SALE</span>
498
- </div>
499
- </div>
500
- <div class="p-4">
501
- <h3 class="font-semibold text-lg mb-1">Floral Midi Skirt</h3>
502
- <div class="flex items-center mb-2">
503
- <div class="flex text-amber-400">
504
- <i class="fas fa-star"></i>
505
- <i class="fas fa-star"></i>
506
- <i class="fas fa-star"></i>
507
- <i class="fas fa-star"></i>
508
- <i class="fas fa-star"></i>
509
- </div>
510
- <span class="text-gray-600 text-sm ml-2">(32)</span>
511
- </div>
512
- <div class="flex justify-between items-center">
513
- <div>
514
- <span class="font-bold text-lg text-amber-600">KSh 1,299</span>
515
- <span class="text-gray-500 text-sm line-through ml-2">KSh 1,799</span>
516
- </div>
517
- <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center" data-id="3" data-name="Floral Midi Skirt" data-price="1299" data-image="https://images.unsplash.com/photo-1595341595379-cf2a3d574a3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80">
518
- <i class="fas fa-shopping-cart"></i>
519
- </button>
520
- </div>
521
- </div>
522
- </div>
523
-
524
- <!-- Product 4 -->
525
- <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
526
- <div class="relative overflow-hidden">
527
- <img src="https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Elegant Blouse" class="product-image w-full h-64 object-cover">
528
- </div>
529
- <div class="p-4">
530
- <h3 class="font-semibold text-lg mb-1">Elegant Silk Blouse</h3>
531
- <div class="flex items-center mb-2">
532
- <div class="flex text-amber-400">
533
- <i class="fas fa-star"></i>
534
- <i class="fas fa-star"></i>
535
- <i class="fas fa-star"></i>
536
- <i class="fas fa-star"></i>
537
- <i class="fas fa-star-half-alt"></i>
538
- </div>
539
- <span class="text-gray-600 text-sm ml-2">(21)</span>
540
- </div>
541
- <div class="flex justify-between items-center">
542
- <span class="font-bold text-lg">KSh 2,199</span>
543
- <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center" data-id="4" data-name="Elegant Silk Blouse" data-price="2199" data-image="https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80">
544
- <i class="fas fa-shopping-cart"></i>
545
- </button>
546
- </div>
547
- </div>
548
- </div>
549
  </div>
550
  </div>
551
  </section>
@@ -555,27 +590,9 @@
555
  <div class="container mx-auto px-4">
556
  <h2 class="heading-font text-3xl font-bold text-center mb-12">Seasonal Collections</h2>
557
 
558
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
559
- <div class="relative rounded-lg overflow-hidden shadow-lg h-96">
560
- <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Summer Collection" class="w-full h-full object-cover">
561
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end p-8">
562
- <div>
563
- <h3 class="heading-font text-3xl font-bold text-white mb-2">Summer Vibes</h3>
564
- <p class="text-white mb-4">Bright colors and lightweight fabrics for the sunny season</p>
565
- <a href="#" class="bg-white hover:bg-gray-100 text-black font-medium py-2 px-6 rounded-full inline-block transition duration-300">Shop Collection</a>
566
- </div>
567
- </div>
568
- </div>
569
- <div class="relative rounded-lg overflow-hidden shadow-lg h-96">
570
- <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Winter Collection" class="w-full h-full object-cover">
571
- <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end p-8">
572
- <div>
573
- <h3 class="heading-font text-3xl font-bold text-white mb-2">Winter Essentials</h3>
574
- <p class="text-white mb-4">Cozy layers and warm fabrics to keep you stylish in the cold</p>
575
- <a href="#" class="bg-white hover:bg-gray-100 text-black font-medium py-2 px-6 rounded-full inline-block transition duration-300">Shop Collection</a>
576
- </div>
577
- </div>
578
- </div>
579
  </div>
580
 
581
  <div class="text-center">
@@ -776,28 +793,28 @@
776
  <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
777
  </div>
778
  <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">Send Message</button>
779
- </form>
780
- </div>
781
  </div>
782
  </div>
783
  </div>
784
- </section>
 
785
 
786
- <!-- Footer -->
787
- <footer class="bg-black text-white py-12">
788
- <div class="container mx-auto px-4">
789
- <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
790
- <div>
791
- <a href="#" class="flex items-center mb-4">
792
- <i class="fas fa-tshirt text-3xl text-amber-600 mr-2"></i>
793
- <span class="heading-font text-2xl font-bold">New Life Fashion</span>
794
- </a>
795
- <p class="text-gray-400">Your premier destination for stylish ladies fashion in Nairobi, Kenya.</p>
796
- <div class="flex space-x-4 mt-4">
797
- <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-facebook-f"></i></a>
798
- <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-instagram"></i></a>
799
- <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-twitter"></i></a>
800
- <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-pinterest"></i></a>
801
  </div>
802
  </div>
803
 
@@ -861,24 +878,108 @@
861
  </button>
862
 
863
  <script>
864
- // Initialize cart if not exists
865
  if (!localStorage.getItem('cart')) {
866
  localStorage.setItem('cart', JSON.stringify([]));
867
  }
868
 
869
- // Initialize users if not exists
870
  if (!localStorage.getItem('users')) {
871
  localStorage.setItem('users', JSON.stringify([]));
872
  }
873
 
874
- // Initialize orders if not exists
875
  if (!localStorage.getItem('orders')) {
876
  localStorage.setItem('orders', JSON.stringify([]));
877
  }
878
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
879
  // Update cart count on page load
880
  updateCartCount();
881
 
 
 
 
 
 
882
  // Mobile Menu Toggle
883
  const mobileMenuButton = document.getElementById('mobile-menu-button');
884
  const mobileMenu = document.getElementById('mobile-menu');
@@ -938,6 +1039,7 @@
938
  // Modal functionality
939
  const loginModal = document.getElementById('login-modal');
940
  const registerModal = document.getElementById('register-modal');
 
941
  const cartModal = document.getElementById('cart-modal');
942
  const checkoutModal = document.getElementById('checkout-modal');
943
  const confirmationModal = document.getElementById('confirmation-modal');
@@ -948,6 +1050,8 @@
948
  const mobileCartIcon = document.getElementById('mobile-cart-icon');
949
  const checkoutBtn = document.getElementById('checkout-btn');
950
  const continueShoppingBtn = document.getElementById('continue-shopping');
 
 
951
 
952
  const showLogin = document.getElementById('show-login');
953
  const showRegister = document.getElementById('show-register');
@@ -989,6 +1093,18 @@
989
  confirmationModal.style.display = 'none';
990
  });
991
 
 
 
 
 
 
 
 
 
 
 
 
 
992
  showLogin.addEventListener('click', (e) => {
993
  e.preventDefault();
994
  registerModal.style.display = 'none';
@@ -1006,6 +1122,7 @@
1006
  button.addEventListener('click', () => {
1007
  loginModal.style.display = 'none';
1008
  registerModal.style.display = 'none';
 
1009
  cartModal.style.display = 'none';
1010
  checkoutModal.style.display = 'none';
1011
  confirmationModal.style.display = 'none';
@@ -1020,6 +1137,9 @@
1020
  if (e.target === registerModal) {
1021
  registerModal.style.display = 'none';
1022
  }
 
 
 
1023
  if (e.target === cartModal) {
1024
  cartModal.style.display = 'none';
1025
  }
@@ -1031,6 +1151,30 @@
1031
  }
1032
  });
1033
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1034
  // Register form submission
1035
  document.getElementById('register-form').addEventListener('submit', (e) => {
1036
  e.preventDefault();
@@ -1041,7 +1185,7 @@
1041
  const confirm = document.getElementById('register-confirm').value;
1042
 
1043
  if (password !== confirm) {
1044
- alert('Passwords do not match!');
1045
  return;
1046
  }
1047
 
@@ -1049,7 +1193,7 @@
1049
 
1050
  // Check if user already exists
1051
  if (users.find(user => user.email === email)) {
1052
- alert('User with this email already exists!');
1053
  return;
1054
  }
1055
 
@@ -1057,7 +1201,7 @@
1057
  users.push({ name, email, password });
1058
  localStorage.setItem('users', JSON.stringify(users));
1059
 
1060
- alert('Registration successful! Please login.');
1061
  registerModal.style.display = 'none';
1062
  loginModal.style.display = 'block';
1063
 
@@ -1079,13 +1223,13 @@
1079
  // Store current user in session
1080
  sessionStorage.setItem('currentUser', JSON.stringify(user));
1081
 
1082
- alert(`Welcome back, ${user.name}!`);
1083
  loginModal.style.display = 'none';
1084
 
1085
  // Update user icon to show logged in state
1086
  updateUserIcon();
1087
  } else {
1088
- alert('Invalid email or password!');
1089
  }
1090
 
1091
  // Clear form
@@ -1135,12 +1279,71 @@
1135
 
1136
  // Clear form
1137
  document.getElementById('checkout-form').reset();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1138
  });
1139
 
1140
- // Add to cart functionality
1141
- document.querySelectorAll('.add-to-cart').forEach(button => {
1142
- button.addEventListener('click', (e) => {
1143
  e.preventDefault();
 
1144
 
1145
  const product = {
1146
  id: button.getAttribute('data-id'),
@@ -1151,7 +1354,7 @@
1151
  };
1152
 
1153
  addToCart(product);
1154
- });
1155
  });
1156
 
1157
  // Function to add item to cart
@@ -1171,7 +1374,7 @@
1171
  updateCartCount();
1172
 
1173
  // Show notification
1174
- alert(`${product.name} added to cart!`);
1175
  }
1176
 
1177
  // Function to update cart count
@@ -1311,8 +1514,97 @@
1311
  }
1312
  }
1313
 
1314
- // Initialize user icon
1315
- updateUserIcon();
1316
- </script>
1317
- <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=Jobwengi/myshop1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1318
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
175
  font-size: 0.875rem;
176
  margin-top: 0.25rem;
177
  }
178
+
179
+ /* Notification */
180
+ .notification {
181
+ position: fixed;
182
+ bottom: 20px;
183
+ right: 20px;
184
+ background-color: #4CAF50;
185
+ color: white;
186
+ padding: 15px;
187
+ border-radius: 5px;
188
+ z-index: 1000;
189
+ display: none;
190
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
191
+ }
192
+
193
+ /* Admin panel */
194
+ .admin-panel {
195
+ position: fixed;
196
+ top: 20px;
197
+ left: 20px;
198
+ z-index: 1000;
199
+ background-color: #333;
200
+ color: white;
201
+ padding: 10px;
202
+ border-radius: 5px;
203
+ display: none;
204
+ }
205
+
206
+ /* Tabs */
207
+ .tab-content {
208
+ display: none;
209
+ }
210
+
211
+ .tab-content.active {
212
+ display: block;
213
+ }
214
+
215
+ .tab-button {
216
+ padding: 10px 15px;
217
+ background-color: #f1f1f1;
218
+ border: none;
219
+ cursor: pointer;
220
+ }
221
+
222
+ .tab-button.active {
223
+ background-color: #d1a054;
224
+ color: white;
225
+ }
226
+
227
+ /* Loading spinner */
228
+ .loader {
229
+ border: 4px solid #f3f3f3;
230
+ border-top: 4px solid #d1a054;
231
+ border-radius: 50%;
232
+ width: 30px;
233
+ height: 30px;
234
+ animation: spin 1s linear infinite;
235
+ margin: 20px auto;
236
+ }
237
+
238
+ @keyframes spin {
239
+ 0% { transform: rotate(0deg); }
240
+ 100% { transform: rotate(360deg); }
241
+ }
242
  </style>
243
  </head>
244
  <body class="bg-gray-50">
245
+ <!-- Notification -->
246
+ <div id="notification" class="notification"></div>
247
+
248
+ <!-- Admin Panel (hidden by default) -->
249
+ <div id="admin-panel" class="admin-panel">
250
+ <button id="admin-login-btn" class="bg-amber-600 text-white px-3 py-1 rounded">Admin Login</button>
251
+ <div id="admin-content" class="hidden mt-3 bg-white text-black p-4 rounded">
252
+ <div class="flex border-b">
253
+ <button class="tab-button active" onclick="openTab(event, 'products-tab')">Products</button>
254
+ <button class="tab-button" onclick="openTab(event, 'collections-tab')">Collections</button>
255
+ <button class="tab-button" onclick="openTab(event, 'orders-tab')">Orders</button>
256
+ </div>
257
+
258
+ <div id="products-tab" class="tab-content active">
259
+ <h3 class="font-bold my-2">Add New Product</h3>
260
+ <form id="add-product-form">
261
+ <div class="form-group">
262
+ <label>Product Name</label>
263
+ <input type="text" id="product-name" class="form-control" required>
264
+ </div>
265
+ <div class="form-group">
266
+ <label>Price (KSh)</label>
267
+ <input type="number" id="product-price" class="form-control" required>
268
+ </div>
269
+ <div class="form-group">
270
+ <label>Image URL</label>
271
+ <input type="url" id="product-image" class="form-control" required>
272
+ </div>
273
+ <div class="form-group">
274
+ <label>Category</label>
275
+ <select id="product-category" class="form-control" required>
276
+ <option value="dresses">Dresses</option>
277
+ <option value="tops">Tops</option>
278
+ <option value="skirts">Skirts</option>
279
+ <option value="accessories">Accessories</option>
280
+ </select>
281
+ </div>
282
+ <button type="submit" class="btn btn-block">Add Product</button>
283
+ </form>
284
+
285
+ <h3 class="font-bold my-2">Current Products</h3>
286
+ <div id="products-list" class="space-y-2">
287
+ <!-- Products will be loaded here -->
288
+ <div class="loader"></div>
289
+ </div>
290
+ </div>
291
+
292
+ <div id="collections-tab" class="tab-content">
293
+ <h3 class="font-bold my-2">Add New Collection</h3>
294
+ <form id="add-collection-form">
295
+ <div class="form-group">
296
+ <label>Collection Name</label>
297
+ <input type="text" id="collection-name" class="form-control" required>
298
+ </div>
299
+ <div class="form-group">
300
+ <label>Description</label>
301
+ <textarea id="collection-desc" class="form-control" rows="2" required></textarea>
302
+ </div>
303
+ <div class="form-group">
304
+ <label>Image URL</label>
305
+ <input type="url" id="collection-image" class="form-control" required>
306
+ </div>
307
+ <button type="submit" class="btn btn-block">Add Collection</button>
308
+ </form>
309
+
310
+ <h3 class="font-bold my-2">Current Collections</h3>
311
+ <div id="collections-list" class="space-y-2">
312
+ <!-- Collections will be loaded here -->
313
+ <div class="loader"></div>
314
+ </div>
315
+ </div>
316
+
317
+ <div id="orders-tab" class="tab-content">
318
+ <h3 class="font-bold my-2">Recent Orders</h3>
319
+ <div id="orders-list">
320
+ <!-- Orders will be loaded here -->
321
+ <div class="loader"></div>
322
+ </div>
323
+ </div>
324
+
325
+ <button id="admin-logout" class="btn btn-block mt-4 bg-red-600 hover:bg-red-700">Logout</button>
326
+ </div>
327
+ </div>
328
+
329
  <!-- Top Bar -->
330
  <div class="bg-black text-white text-sm py-2 px-4">
331
  <div class="container mx-auto flex justify-between items-center">
 
445
  </div>
446
  </div>
447
 
448
+ <!-- Admin Login Modal -->
449
+ <div id="admin-login-modal" class="modal">
450
+ <div class="modal-content">
451
+ <span class="close">&times;</span>
452
+ <h2 class="heading-font text-2xl font-bold mb-6 text-center">Admin Login</h2>
453
+ <form id="admin-login-form">
454
+ <div class="form-group">
455
+ <label for="admin-email">Email</label>
456
+ <input type="email" id="admin-email" class="form-control" required>
457
+ </div>
458
+ <div class="form-group">
459
+ <label for="admin-password">Password</label>
460
+ <input type="password" id="admin-password" class="form-control" required>
461
+ </div>
462
+ <button type="submit" class="btn btn-block">Login</button>
463
+ </form>
464
+ </div>
465
+ </div>
466
+
467
  <!-- Cart Modal -->
468
  <div id="cart-modal" class="modal">
469
  <div class="modal-content">
 
563
  <section class="py-12 bg-white">
564
  <div class="container mx-auto px-4">
565
  <h2 class="heading-font text-3xl font-bold text-center mb-12">Shop By Category</h2>
566
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-6" id="categories-container">
567
+ <!-- Categories will be loaded dynamically -->
568
+ <div class="loader"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
569
  </div>
570
  </div>
571
  </section>
 
578
  <a href="#" class="text-amber-600 hover:text-amber-700 font-medium">View All <i class="fas fa-arrow-right ml-1"></i></a>
579
  </div>
580
 
581
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8" id="products-container">
582
+ <!-- Products will be loaded dynamically -->
583
+ <div class="loader"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
584
  </div>
585
  </div>
586
  </section>
 
590
  <div class="container mx-auto px-4">
591
  <h2 class="heading-font text-3xl font-bold text-center mb-12">Seasonal Collections</h2>
592
 
593
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12" id="collections-container">
594
+ <!-- Collections will be loaded dynamically -->
595
+ <div class="loader"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
596
  </div>
597
 
598
  <div class="text-center">
 
793
  <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-500"></textarea>
794
  </div>
795
  <button type="submit" class="bg-amber-600 hover:bg-amber-700 text-white font-bold py-2 px-6 rounded-lg transition duration-300">Send Message</button>
796
+ </form>
 
797
  </div>
798
  </div>
799
  </div>
800
+ </div>
801
+ </section>
802
 
803
+ <!-- Footer -->
804
+ <footer class="bg-black text-white py-12">
805
+ <div class="container mx-auto px-4">
806
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
807
+ <div>
808
+ <a href="#" class="flex items-center mb-4">
809
+ <i class="fas fa-tshirt text-3xl text-amber-600 mr-2"></i>
810
+ <span class="heading-font text-2xl font-bold">New Life Fashion</span>
811
+ </a>
812
+ <p class="text-gray-400">Your premier destination for stylish ladies fashion in Nairobi, Kenya.</p>
813
+ <div class="flex space-x-4 mt-4">
814
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-facebook-f"></i></a>
815
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-instagram"></i></a>
816
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-twitter"></i></a>
817
+ <a href="#" class="text-gray-400 hover:text-amber-400"><i class="fab fa-pinterest"></i></a>
818
  </div>
819
  </div>
820
 
 
878
  </button>
879
 
880
  <script>
881
+ // Initialize data if not exists
882
  if (!localStorage.getItem('cart')) {
883
  localStorage.setItem('cart', JSON.stringify([]));
884
  }
885
 
 
886
  if (!localStorage.getItem('users')) {
887
  localStorage.setItem('users', JSON.stringify([]));
888
  }
889
 
 
890
  if (!localStorage.getItem('orders')) {
891
  localStorage.setItem('orders', JSON.stringify([]));
892
  }
893
 
894
+ if (!localStorage.getItem('products')) {
895
+ // Default products
896
+ const defaultProducts = [
897
+ {
898
+ id: "1",
899
+ name: "African Print Maxi Dress",
900
+ price: 2499,
901
+ image: "https://images.unsplash.com/photo-1572804013309-59a88b7e92f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=746&q=80",
902
+ category: "dresses"
903
+ },
904
+ {
905
+ id: "2",
906
+ name: "Classic Denim Jacket",
907
+ price: 1899,
908
+ image: "https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80",
909
+ category: "tops"
910
+ },
911
+ {
912
+ id: "3",
913
+ name: "Floral Midi Skirt",
914
+ price: 1299,
915
+ image: "https://images.unsplash.com/photo-1595341595379-cf2a3d574a3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80",
916
+ category: "skirts"
917
+ },
918
+ {
919
+ id: "4",
920
+ name: "Elegant Silk Blouse",
921
+ price: 2199,
922
+ image: "https://images.unsplash.com/photo-1520367445093-50dc08a59d9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
923
+ category: "tops"
924
+ }
925
+ ];
926
+ localStorage.setItem('products', JSON.stringify(defaultProducts));
927
+ }
928
+
929
+ if (!localStorage.getItem('collections')) {
930
+ // Default collections
931
+ const defaultCollections = [
932
+ {
933
+ id: "1",
934
+ name: "Summer Vibes",
935
+ description: "Bright colors and lightweight fabrics for the sunny season",
936
+ image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
937
+ },
938
+ {
939
+ id: "2",
940
+ name: "Winter Essentials",
941
+ description: "Cozy layers and warm fabrics to keep you stylish in the cold",
942
+ image: "https://images.unsplash.com/photo-1585487000160-6ebcfceb0d03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80"
943
+ }
944
+ ];
945
+ localStorage.setItem('collections', JSON.stringify(defaultCollections));
946
+ }
947
+
948
+ if (!localStorage.getItem('categories')) {
949
+ // Default categories
950
+ const defaultCategories = [
951
+ {
952
+ name: "Dresses",
953
+ image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
954
+ },
955
+ {
956
+ name: "Tops",
957
+ image: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80"
958
+ },
959
+ {
960
+ name: "Skirts",
961
+ image: "https://images.unsplash.com/photo-1595341888016-a392ef81b7de?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1479&q=80"
962
+ },
963
+ {
964
+ name: "Accessories",
965
+ image: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80"
966
+ }
967
+ ];
968
+ localStorage.setItem('categories', JSON.stringify(defaultCategories));
969
+ }
970
+
971
+ // Default admin credentials (in a real app, this would be server-side)
972
+ const ADMIN_EMAIL = "admin@newlifefashion.com";
973
+ const ADMIN_PASSWORD = "admin123";
974
+
975
  // Update cart count on page load
976
  updateCartCount();
977
 
978
+ // Load dynamic content
979
+ loadCategories();
980
+ loadProducts();
981
+ loadCollections();
982
+
983
  // Mobile Menu Toggle
984
  const mobileMenuButton = document.getElementById('mobile-menu-button');
985
  const mobileMenu = document.getElementById('mobile-menu');
 
1039
  // Modal functionality
1040
  const loginModal = document.getElementById('login-modal');
1041
  const registerModal = document.getElementById('register-modal');
1042
+ const adminLoginModal = document.getElementById('admin-login-modal');
1043
  const cartModal = document.getElementById('cart-modal');
1044
  const checkoutModal = document.getElementById('checkout-modal');
1045
  const confirmationModal = document.getElementById('confirmation-modal');
 
1050
  const mobileCartIcon = document.getElementById('mobile-cart-icon');
1051
  const checkoutBtn = document.getElementById('checkout-btn');
1052
  const continueShoppingBtn = document.getElementById('continue-shopping');
1053
+ const adminLoginBtn = document.getElementById('admin-login-btn');
1054
+ const adminLogoutBtn = document.getElementById('admin-logout');
1055
 
1056
  const showLogin = document.getElementById('show-login');
1057
  const showRegister = document.getElementById('show-register');
 
1093
  confirmationModal.style.display = 'none';
1094
  });
1095
 
1096
+ adminLoginBtn.addEventListener('click', (e) => {
1097
+ e.preventDefault();
1098
+ adminLoginModal.style.display = 'block';
1099
+ });
1100
+
1101
+ adminLogoutBtn.addEventListener('click', (e) => {
1102
+ e.preventDefault();
1103
+ sessionStorage.removeItem('adminLoggedIn');
1104
+ document.getElementById('admin-content').classList.add('hidden');
1105
+ showNotification('Admin logged out successfully');
1106
+ });
1107
+
1108
  showLogin.addEventListener('click', (e) => {
1109
  e.preventDefault();
1110
  registerModal.style.display = 'none';
 
1122
  button.addEventListener('click', () => {
1123
  loginModal.style.display = 'none';
1124
  registerModal.style.display = 'none';
1125
+ adminLoginModal.style.display = 'none';
1126
  cartModal.style.display = 'none';
1127
  checkoutModal.style.display = 'none';
1128
  confirmationModal.style.display = 'none';
 
1137
  if (e.target === registerModal) {
1138
  registerModal.style.display = 'none';
1139
  }
1140
+ if (e.target === adminLoginModal) {
1141
+ adminLoginModal.style.display = 'none';
1142
+ }
1143
  if (e.target === cartModal) {
1144
  cartModal.style.display = 'none';
1145
  }
 
1151
  }
1152
  });
1153
 
1154
+ // Admin login form submission
1155
+ document.getElementById('admin-login-form').addEventListener('submit', (e) => {
1156
+ e.preventDefault();
1157
+
1158
+ const email = document.getElementById('admin-email').value;
1159
+ const password = document.getElementById('admin-password').value;
1160
+
1161
+ if (email === ADMIN_EMAIL && password === ADMIN_PASSWORD) {
1162
+ sessionStorage.setItem('adminLoggedIn', 'true');
1163
+ adminLoginModal.style.display = 'none';
1164
+ document.getElementById('admin-content').classList.remove('hidden');
1165
+ showNotification('Admin login successful');
1166
+ } else {
1167
+ alert('Invalid admin credentials');
1168
+ }
1169
+
1170
+ document.getElementById('admin-login-form').reset();
1171
+ });
1172
+
1173
+ // Check if admin is logged in
1174
+ if (sessionStorage.getItem('adminLoggedIn') === 'true') {
1175
+ document.getElementById('admin-content').classList.remove('hidden');
1176
+ }
1177
+
1178
  // Register form submission
1179
  document.getElementById('register-form').addEventListener('submit', (e) => {
1180
  e.preventDefault();
 
1185
  const confirm = document.getElementById('register-confirm').value;
1186
 
1187
  if (password !== confirm) {
1188
+ showNotification('Passwords do not match!', 'error');
1189
  return;
1190
  }
1191
 
 
1193
 
1194
  // Check if user already exists
1195
  if (users.find(user => user.email === email)) {
1196
+ showNotification('User with this email already exists!', 'error');
1197
  return;
1198
  }
1199
 
 
1201
  users.push({ name, email, password });
1202
  localStorage.setItem('users', JSON.stringify(users));
1203
 
1204
+ showNotification('Registration successful! Please login.');
1205
  registerModal.style.display = 'none';
1206
  loginModal.style.display = 'block';
1207
 
 
1223
  // Store current user in session
1224
  sessionStorage.setItem('currentUser', JSON.stringify(user));
1225
 
1226
+ showNotification(`Welcome back, ${user.name}!`);
1227
  loginModal.style.display = 'none';
1228
 
1229
  // Update user icon to show logged in state
1230
  updateUserIcon();
1231
  } else {
1232
+ showNotification('Invalid email or password!', 'error');
1233
  }
1234
 
1235
  // Clear form
 
1279
 
1280
  // Clear form
1281
  document.getElementById('checkout-form').reset();
1282
+
1283
+ // Notify admin of new order
1284
+ if (sessionStorage.getItem('adminLoggedIn') === 'true') {
1285
+ showNotification('New order received!', 'success');
1286
+ loadOrders(); // Refresh orders list in admin panel
1287
+ }
1288
+ });
1289
+
1290
+ // Add product form submission
1291
+ document.getElementById('add-product-form').addEventListener('submit', (e) => {
1292
+ e.preventDefault();
1293
+
1294
+ const name = document.getElementById('product-name').value;
1295
+ const price = parseInt(document.getElementById('product-price').value);
1296
+ const image = document.getElementById('product-image').value;
1297
+ const category = document.getElementById('product-category').value;
1298
+
1299
+ const newProduct = {
1300
+ id: Date.now().toString(),
1301
+ name,
1302
+ price,
1303
+ image,
1304
+ category
1305
+ };
1306
+
1307
+ // Add to products
1308
+ const products = JSON.parse(localStorage.getItem('products'));
1309
+ products.push(newProduct);
1310
+ localStorage.setItem('products', JSON.stringify(products));
1311
+
1312
+ showNotification('Product added successfully!');
1313
+ document.getElementById('add-product-form').reset();
1314
+ loadProducts();
1315
+ });
1316
+
1317
+ // Add collection form submission
1318
+ document.getElementById('add-collection-form').addEventListener('submit', (e) => {
1319
+ e.preventDefault();
1320
+
1321
+ const name = document.getElementById('collection-name').value;
1322
+ const description = document.getElementById('collection-desc').value;
1323
+ const image = document.getElementById('collection-image').value;
1324
+
1325
+ const newCollection = {
1326
+ id: Date.now().toString(),
1327
+ name,
1328
+ description,
1329
+ image
1330
+ };
1331
+
1332
+ // Add to collections
1333
+ const collections = JSON.parse(localStorage.getItem('collections'));
1334
+ collections.push(newCollection);
1335
+ localStorage.setItem('collections', JSON.stringify(collections));
1336
+
1337
+ showNotification('Collection added successfully!');
1338
+ document.getElementById('add-collection-form').reset();
1339
+ loadCollections();
1340
  });
1341
 
1342
+ // Add to cart functionality (delegated for dynamic products)
1343
+ document.addEventListener('click', function(e) {
1344
+ if (e.target && e.target.closest('.add-to-cart')) {
1345
  e.preventDefault();
1346
+ const button = e.target.closest('.add-to-cart');
1347
 
1348
  const product = {
1349
  id: button.getAttribute('data-id'),
 
1354
  };
1355
 
1356
  addToCart(product);
1357
+ }
1358
  });
1359
 
1360
  // Function to add item to cart
 
1374
  updateCartCount();
1375
 
1376
  // Show notification
1377
+ showNotification(`${product.name} added to cart!`);
1378
  }
1379
 
1380
  // Function to update cart count
 
1514
  }
1515
  }
1516
 
1517
+ // Function to show notification
1518
+ function showNotification(message, type = 'success') {
1519
+ const notification = document.getElementById('notification');
1520
+ notification.textContent = message;
1521
+ notification.style.display = 'block';
1522
+
1523
+ // Set color based on type
1524
+ if (type === 'error') {
1525
+ notification.style.backgroundColor = '#dc3545';
1526
+ } else if (type === 'success') {
1527
+ notification.style.backgroundColor = '#4CAF50';
1528
+ } else {
1529
+ notification.style.backgroundColor = '#333';
1530
+ }
1531
+
1532
+ // Hide after 3 seconds
1533
+ setTimeout(() => {
1534
+ notification.style.display = 'none';
1535
+ }, 3000);
1536
+ }
1537
+
1538
+ // Function to load categories
1539
+ function loadCategories() {
1540
+ const categoriesContainer = document.getElementById('categories-container');
1541
+ const categories = JSON.parse(localStorage.getItem('categories'));
1542
+
1543
+ let html = '';
1544
+ categories.forEach(category => {
1545
+ html += `
1546
+ <a href="#" class="group relative overflow-hidden rounded-lg shadow-md">
1547
+ <img src="${category.image}" alt="${category.name}" class="w-full h-48 md:h-64 object-cover group-hover:opacity-90 transition duration-300">
1548
+ <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
1549
+ <h3 class="text-white text-xl font-bold">${category.name}</h3>
1550
+ </div>
1551
+ </a>
1552
+ `;
1553
+ });
1554
+
1555
+ categoriesContainer.innerHTML = html;
1556
+ }
1557
+
1558
+ // Function to load products
1559
+ function loadProducts() {
1560
+ const productsContainer = document.getElementById('products-container');
1561
+ const products = JSON.parse(localStorage.getItem('products'));
1562
+
1563
+ let html = '';
1564
+ products.forEach(product => {
1565
+ html += `
1566
+ <div class="product-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition duration-300">
1567
+ <div class="relative overflow-hidden">
1568
+ <img src="${product.image}" alt="${product.name}" class="product-image w-full h-64 object-cover">
1569
+ <div class="absolute top-3 right-3">
1570
+ <span class="bg-amber-600 text-white text-xs font-bold px-2 py-1 rounded-full">NEW</span>
1571
+ </div>
1572
+ </div>
1573
+ <div class="p-4">
1574
+ <h3 class="font-semibold text-lg mb-1">${product.name}</h3>
1575
+ <div class="flex items-center mb-2">
1576
+ <div class="flex text-amber-400">
1577
+ <i class="fas fa-star"></i>
1578
+ <i class="fas fa-star"></i>
1579
+ <i class="fas fa-star"></i>
1580
+ <i class="fas fa-star"></i>
1581
+ <i class="fas fa-star-half-alt"></i>
1582
+ </div>
1583
+ <span class="text-gray-600 text-sm ml-2">(24)</span>
1584
+ </div>
1585
+ <div class="flex justify-between items-center">
1586
+ <span class="font-bold text-lg">KSh ${product.price.toLocaleString()}</span>
1587
+ <button class="add-to-cart bg-amber-600 hover:bg-amber-700 text-white rounded-full w-10 h-10 flex items-center justify-center"
1588
+ data-id="${product.id}"
1589
+ data-name="${product.name}"
1590
+ data-price="${product.price}"
1591
+ data-image="${product.image}">
1592
+ <i class="fas fa-shopping-cart"></i>
1593
+ </button>
1594
+ </div>
1595
+ </div>
1596
+ </div>
1597
+ `;
1598
+ });
1599
+
1600
+ productsContainer.innerHTML = html;
1601
+ }
1602
+
1603
+ // Function to load collections
1604
+ function loadCollections() {
1605
+ const collectionsContainer = document.getElementById('collections-container');
1606
+ const collections = JSON.parse(localStorage.getItem('collections'));
1607
+
1608
+ let html = '';
1609
+ collections.forEach
1610
+ </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- make it functional when a cleint can make a purchase and create their accounts with us
 
 
1
+ make it functional when a cleint can make a purchase and create their accounts with us
2
+ can I get the admin role of this to be editing it, again when one makes a purchase isn't notified, again can the collections be added in real time as fashion comes in, improve the functionalities in the website to be active