Spaces:

XBotz
/

e-commerce

Running

App Files Files Community

XBotz commited on May 2, 2025

Commit

9e18143

verified ·

1 Parent(s): f2e1195

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +918 -19
prompts.txt +0 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: E Commerce
-emoji: 🌍
-colorFrom: gray
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: e-commerce
+emoji: 🐳
+colorFrom: blue
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,918 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ShopNest - Premium E-Commerce</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  <style>
+    /* Custom CSS for animations and effects */
+    .product-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+    }
+    .cart-item-enter {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+    .cart-item-enter-active {
+      opacity: 1;
+      transform: translateX(0);
+      transition: all 300ms ease-in;
+    }
+    .cart-item-exit {
+      opacity: 1;
+    }
+    .cart-item-exit-active {
+      opacity: 0;
+      transform: translateX(20px);
+      transition: all 300ms ease-in;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+    }
+    .animate-pulse {
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+    .hero-gradient {
+      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    }
+  </style>
+</head>
+<body class="bg-gray-50 font-sans">
+  <!-- Header/Navigation -->
+  <header class="bg-white shadow-sm sticky top-0 z-50">
+    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+      <div class="flex items-center space-x-2">
+        <i class="fas fa-shopping-bag text-2xl text-indigo-600"></i>
+        <h1 class="text-xl font-bold text-gray-800">Shop<span class="text-indigo-600">Nest</span></h1>
+      </div>
+      <div class="hidden md:flex items-center space-x-8">
+        <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Home</a>
+        <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Shop</a>
+        <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Categories</a>
+        <a href="#" class="text-gray-700 hover:text-indigo-600 transition">About</a>
+        <a href="#" class="text-gray-700 hover:text-indigo-600 transition">Contact</a>
+      </div>
+      <div class="flex items-center space-x-4">
+        <button class="p-2 text-gray-600 hover:text-indigo-600 relative">
+                    <i class="fas fa-search"></i>
+                </button>
+        <button class="p-2 text-gray-600 hover:text-indigo-600 relative">
+                    <i class="far fa-heart"></i>
+                    <span class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span>
+                </button>
+        <button id="cart-btn" class="p-2 text-gray-600 hover:text-indigo-600 relative">
+                    <i class="fas fa-shopping-cart"></i>
+                    <span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
+                </button>
+        <button class="md:hidden p-2 text-gray-600 hover:text-indigo-600">
+                    <i class="fas fa-bars"></i>
+                </button>
+      </div>
+    </div>
+  </header>
+  <!-- Hero Section -->
+  <section class="hero-gradient py-16">
+    <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
+      <div class="md:w-1/2 mb-8 md:mb-0">
+        <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Summer Collection 2023</h1>
+        <p class="text-lg text-gray-600 mb-6">Discover our premium selection of products designed to elevate your
+          lifestyle.</p>
+        <div class="flex space-x-4">
+          <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition">Shop Now</button>
+          <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-3 rounded-lg font-medium transition">Learn More</button>
+        </div>
+      </div>
+      <div class="md:w-1/2 flex justify-center">
+        <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Fashion Model" class="rounded-lg shadow-xl max-w-full h-auto">
+      </div>
+    </div>
+  </section>
+  <!-- Categories -->
+  <section class="py-12 bg-white">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Shop by Category</h2>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
+        <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
+          <div class="h-40 bg-indigo-50 flex items-center justify-center">
+            <i class="fas fa-tshirt text-5xl text-indigo-600"></i>
+          </div>
+          <div class="p-4">
+            <h3 class="font-medium text-gray-800">Clothing</h3>
+            <p class="text-sm text-gray-500 mt-1">200+ items</p>
+          </div>
+        </div>
+        <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
+          <div class="h-40 bg-blue-50 flex items-center justify-center">
+            <i class="fas fa-laptop text-5xl text-blue-600"></i>
+          </div>
+          <div class="p-4">
+            <h3 class="font-medium text-gray-800">Electronics</h3>
+            <p class="text-sm text-gray-500 mt-1">150+ items</p>
+          </div>
+        </div>
+        <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
+          <div class="h-40 bg-green-50 flex items-center justify-center">
+            <i class="fas fa-home text-5xl text-green-600"></i>
+          </div>
+          <div class="p-4">
+            <h3 class="font-medium text-gray-800">Home</h3>
+            <p class="text-sm text-gray-500 mt-1">300+ items</p>
+          </div>
+        </div>
+        <div class="bg-gray-100 rounded-lg overflow-hidden hover:shadow-md transition cursor-pointer">
+          <div class="h-40 bg-yellow-50 flex items-center justify-center">
+            <i class="fas fa-gamepad text-5xl text-yellow-600"></i>
+          </div>
+          <div class="p-4">
+            <h3 class="font-medium text-gray-800">Gaming</h3>
+            <p class="text-sm text-gray-500 mt-1">120+ items</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Featured Products -->
+  <section class="py-12 bg-gray-50">
+    <div class="container mx-auto px-4">
+      <div class="flex justify-between items-center mb-8">
+        <h2 class="text-3xl font-bold text-gray-800">Featured Products</h2>
+        <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View All</a>
+      </div>
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="products-container">
+        <!-- Products will be loaded here by JavaScript -->
+      </div>
+    </div>
+  </section>
+  <!-- Special Offer -->
+  <section class="py-16 bg-indigo-600 text-white">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-3xl md:text-4xl font-bold mb-4">Limited Time Offer</h2>
+      <p class="text-xl mb-8 max-w-2xl mx-auto">Get 30% off on all summer collection. Use code
+        <span class="font-bold">SUMMER30</span> at checkout.</p>
+      <div class="flex justify-center space-x-4 mb-8">
+        <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center">
+          <div class="text-3xl font-bold" id="days">00</div>
+          <div class="text-sm">Days</div>
+        </div>
+        <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center">
+          <div class="text-3xl font-bold" id="hours">00</div>
+          <div class="text-sm">Hours</div>
+        </div>
+        <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center">
+          <div class="text-3xl font-bold" id="minutes">00</div>
+          <div class="text-sm">Minutes</div>
+        </div>
+        <div class="bg-white bg-opacity-20 rounded-lg p-4 text-center">
+          <div class="text-3xl font-bold" id="seconds">00</div>
+          <div class="text-sm">Seconds</div>
+        </div>
+      </div>
+      <button class="bg-white text-indigo-600 hover:bg-gray-100 px-8 py-3 rounded-lg font-bold transition">Shop Now</button>
+    </div>
+  </section>
+  <!-- Testimonials -->
+  <section class="py-12 bg-white">
+    <div class="container mx-auto px-4">
+      <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">What Our Customers Say</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
+          <div class="flex items-center mb-4">
+            <div class="text-yellow-400">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+            </div>
+          </div>
+          <p class="text-gray-600 mb-4">"The quality of products is outstanding and the delivery was super fast. Will
+            definitely shop here again!"</p>
+          <div class="flex items-center">
+            <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Customer" class="w-10 h-10 rounded-full mr-3">
+            <div>
+              <h4 class="font-medium text-gray-800">Sarah Johnson</h4>
+              <p class="text-sm text-gray-500">Verified Customer</p>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
+          <div class="flex items-center mb-4">
+            <div class="text-yellow-400">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+            </div>
+          </div>
+          <p class="text-gray-600 mb-4">"Excellent customer service! They helped me choose the perfect gift for my
+            wife's birthday. Highly recommended!"</p>
+          <div class="flex items-center">
+            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer" class="w-10 h-10 rounded-full mr-3">
+            <div>
+              <h4 class="font-medium text-gray-800">Michael Chen</h4>
+              <p class="text-sm text-gray-500">Verified Customer</p>
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
+          <div class="flex items-center mb-4">
+            <div class="text-yellow-400">
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star"></i>
+              <i class="fas fa-star-half-alt"></i>
+            </div>
+          </div>
+          <p class="text-gray-600 mb-4">"I've ordered multiple times and never been disappointed. The packaging is
+            eco-friendly which I really appreciate."</p>
+          <div class="flex items-center">
+            <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Customer" class="w-10 h-10 rounded-full mr-3">
+            <div>
+              <h4 class="font-medium text-gray-800">Emma Rodriguez</h4>
+              <p class="text-sm text-gray-500">Verified Customer</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Newsletter -->
+  <section class="py-12 bg-gray-100">
+    <div class="container mx-auto px-4 text-center">
+      <h2 class="text-3xl font-bold text-gray-800 mb-4">Stay Updated</h2>
+      <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to our newsletter to receive updates on new products,
+        special offers, and more.</p>
+      <div class="max-w-md mx-auto flex">
+        <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+        <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-r-lg font-medium transition">Subscribe</button>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-gray-800 text-white pt-12 pb-6">
+    <div class="container mx-auto px-4">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
+        <div>
+          <div class="flex items-center space-x-2 mb-4">
+            <i class="fas fa-shopping-bag text-2xl text-indigo-400"></i>
+            <h3 class="text-xl font-bold">Shop<span class="text-indigo-400">Nest</span></h3>
+          </div>
+          <p class="text-gray-400 mb-4">Premium e-commerce platform offering the best products at competitive prices.
+          </p>
+          <div class="flex space-x-4">
+            <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
+            <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
+            <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
+            <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
+          </div>
+        </div>
+        <div>
+          <h4 class="text-lg font-semibold mb-4">Shop</h4>
+          <ul class="space-y-2">
+            <li><a href="#" class="text-gray-400 hover:text-white transition">All Products</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Featured</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">New Arrivals</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Sale Items</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Gift Cards</a></li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="text-lg font-semibold mb-4">Customer Service</h4>
+          <ul class="space-y-2">
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">FAQs</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Shipping Policy</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Returns & Refunds</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Track Order</a></li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="text-lg font-semibold mb-4">Company</h4>
+          <ul class="space-y-2">
+            <li><a href="#" class="text-gray-400 hover:text-white transition">About Us</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
+            <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="border-t border-gray-700 pt-6 flex flex-col md:flex-row justify-between items-center">
+        <p class="text-gray-400 mb-4 md:mb-0">© 2023 ShopNest. All rights reserved.</p>
+        <div class="flex space-x-6">
+          <img src="https://via.placeholder.com/40x25?text=VISA" alt="Visa" class="h-6">
+          <img src="https://via.placeholder.com/40x25?text=MC" alt="Mastercard" class="h-6">
+          <img src="https://via.placeholder.com/40x25?text=AMEX" alt="American Express" class="h-6">
+          <img src="https://via.placeholder.com/40x25?text=PP" alt="PayPal" class="h-6">
+        </div>
+      </div>
+    </div>
+  </footer>
+  <!-- Shopping Cart Sidebar -->
+  <div id="cart-sidebar"
+    class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 ease-in-out z-50 overflow-y-auto">
+    <div class="p-6">
+      <div class="flex justify-between items-center mb-6">
+        <h3 class="text-xl font-bold text-gray-800">Your Cart (<span id="sidebar-cart-count">0</span>)</h3>
+        <button id="close-cart" class="text-gray-500 hover:text-gray-700">
+                    <i class="fas fa-times"></i>
+                </button>
+      </div>
+      <div id="cart-items" class="space-y-4 mb-6">
+        <!-- Cart items will be loaded here -->
+        <div class="text-center py-8 text-gray-500" id="empty-cart-message">
+          <i class="fas fa-shopping-cart text-4xl mb-4 text-gray-300"></i>
+          <p>Your cart is empty</p>
+        </div>
+      </div>
+      <div class="border-t border-gray-200 pt-4 mb-4">
+        <div class="flex justify-between mb-2">
+          <span class="text-gray-600">Subtotal</span>
+          <span class="font-medium" id="cart-subtotal">$0.00</span>
+        </div>
+        <div class="flex justify-between mb-2">
+          <span class="text-gray-600">Shipping</span>
+          <span class="font-medium">Free</span>
+        </div>
+        <div class="flex justify-between mb-2">
+          <span class="text-gray-600">Tax</span>
+          <span class="font-medium" id="cart-tax">$0.00</span>
+        </div>
+        <div class="flex justify-between text-lg font-bold mt-4">
+          <span>Total</span>
+          <span id="cart-total">$0.00</span>
+        </div>
+      </div>
+      <button id="checkout-btn" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-3 rounded-lg font-medium transition mb-4">Proceed to Checkout</button>
+      <button class="w-full border border-indigo-600 text-indigo-600 hover:bg-indigo-50 py-3 rounded-lg font-medium transition">Continue Shopping</button>
+    </div>
+  </div>
+  <div id="cart-overlay" class="hidden fixed inset-0 bg-black bg-opacity-50 z-40"></div>
+  <!-- Product Quick View Modal -->
+  <div id="quickview-modal"
+    class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
+    <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+      <div class="p-6">
+        <div class="flex justify-between items-start mb-6">
+          <h3 class="text-2xl font-bold text-gray-800" id="quickview-title">Product Name</h3>
+          <button id="close-quickview" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+        </div>
+        <div class="flex flex-col md:flex-row gap-8">
+          <div class="md:w-1/2">
+            <img id="quickview-image" src="" alt="Product" class="w-full rounded-lg mb-4">
+            <div class="grid grid-cols-4 gap-2">
+              <div class="border rounded cursor-pointer">
+                <img src="" class="w-full h-16 object-cover">
+              </div>
+              <div class="border rounded cursor-pointer">
+                <img src="" class="w-full h-16 object-cover">
+              </div>
+              <div class="border rounded cursor-pointer">
+                <img src="" class="w-full h-16 object-cover">
+              </div>
+              <div class="border rounded cursor-pointer">
+                <img src="" class="w-full h-16 object-cover">
+              </div>
+            </div>
+          </div>
+          <div class="md:w-1/2">
+            <div class="flex items-center mb-4">
+              <div class="text-yellow-400 mr-2">
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star"></i>
+                <i class="fas fa-star-half-alt"></i>
+              </div>
+              <span class="text-gray-600 text-sm">(42 reviews)</span>
+            </div>
+            <div class="text-2xl font-bold text-gray-800 mb-4" id="quickview-price">$99.99</div>
+            <p class="text-gray-600 mb-6" id="quickview-description">Product description goes here...</p>
+            <div class="mb-6">
+              <div class="flex items-center mb-2">
+                <span class="text-gray-700 font-medium mr-4">Color:</span>
+                <div class="flex space-x-2">
+                  <button class="w-6 h-6 rounded-full bg-blue-500 border-2 border-white shadow-md"></button>
+                  <button class="w-6 h-6 rounded-full bg-red-500 border-2 border-transparent hover:border-gray-200"></button>
+                  <button class="w-6 h-6 rounded-full bg-green-500 border-2 border-transparent hover:border-gray-200"></button>
+                  <button class="w-6 h-6 rounded-full bg-yellow-500 border-2 border-transparent hover:border-gray-200"></button>
+                </div>
+              </div>
+              <div class="flex items-center">
+                <span class="text-gray-700 font-medium mr-4">Size:</span>
+                <div class="flex space-x-2">
+                  <button class="px-3 py-1 border rounded hover:bg-gray-100">S</button>
+                  <button class="px-3 py-1 border rounded hover:bg-gray-100">M</button>
+                  <button class="px-3 py-1 border bg-gray-800 text-white rounded">L</button>
+                  <button class="px-3 py-1 border rounded hover:bg-gray-100">XL</button>
+                </div>
+              </div>
+            </div>
+            <div class="flex items-center mb-6">
+              <div class="flex items-center border rounded">
+                <button class="px-3 py-2 text-gray-600 hover:bg-gray-100">
+                                    <i class="fas fa-minus"></i>
+                                </button>
+                <span class="px-4 py-2">1</span>
+                <button class="px-3 py-2 text-gray-600 hover:bg-gray-100">
+                                    <i class="fas fa-plus"></i>
+                                </button>
+              </div>
+              <button id="add-to-cart-quickview" class="ml-4 bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded font-medium transition flex items-center">
+                                <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
+                            </button>
+            </div>
+            <div class="border-t border-gray-200 pt-4">
+              <div class="flex items-center text-gray-600 mb-2">
+                <i class="fas fa-truck mr-2"></i>
+                <span>Free shipping on orders over $50</span>
+              </div>
+              <div class="flex items-center text-gray-600 mb-2">
+                <i class="fas fa-undo mr-2"></i>
+                <span>30-day return policy</span>
+              </div>
+              <div class="flex items-center text-gray-600">
+                <i class="fas fa-shield-alt mr-2"></i>
+                <span>Secure payment</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Sample product data
+        const products = [
+            {
+                id: 1,
+                name: "Premium Wireless Headphones",
+                price: 199.99,
+                image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+                description: "Noise-cancelling wireless headphones with premium sound quality and 30-hour battery life.",
+                rating: 4.5
+            },
+            {
+                id: 2,
+                name: "Smart Watch Pro",
+                price: 249.99,
+                image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1399&q=80",
+                description: "Advanced smartwatch with health monitoring, GPS, and customizable watch faces.",
+                rating: 4.7
+            },
+            {
+                id: 3,
+                name: "Organic Cotton T-Shirt",
+                price: 29.99,
+                image: "https://images.unsplash.com/photo-1521572163474-6864f9cf17a6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1480&q=80",
+                description: "Comfortable 100% organic cotton t-shirt available in multiple colors.",
+                rating: 4.3
+            },
+            {
+                id: 4,
+                name: "Leather Wallet",
+                price: 49.99,
+                image: "https://images.unsplash.com/photo-1600857544200-b2f666a9a1ec?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+                description: "Genuine leather wallet with multiple card slots and RFID protection.",
+                rating: 4.6
+            },
+            {
+                id: 5,
+                name: "Ceramic Coffee Mug",
+                price: 19.99,
+                image: "https://images.unsplash.com/photo-1517256064527-09c73fc73e38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+                description: "Handcrafted ceramic mug with ergonomic handle and heat-resistant design.",
+                rating: 4.8
+            },
+            {
+                id: 6,
+                name: "Wireless Charging Pad",
+                price: 39.99,
+                image: "https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
+                description: "Fast-charging wireless pad compatible with all Qi-enabled devices.",
+                rating: 4.2
+            },
+            {
+                id: 7,
+                name: "Stainless Steel Water Bottle",
+                price: 24.99,
+                image: "https://images.unsplash.com/photo-1602143407151-7111541de5c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
+                description: "Insulated stainless steel water bottle that keeps drinks cold for 24 hours.",
+                rating: 4.9
+            },
+            {
+                id: 8,
+                name: "Bluetooth Speaker",
+                price: 89.99,
+                image: "https://images.unsplash.com/photo-1572569511254-d8f925fe2cbb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
+                description: "Portable Bluetooth speaker with 20W output and 15-hour playtime.",
+                rating: 4.4
+            }
+        ];
+        // Shopping cart functionality
+        let cart = [];
+        // DOM elements
+        const productsContainer = document.getElementById('products-container');
+        const cartBtn = document.getElementById('cart-btn');
+        const closeCartBtn = document.getElementById('close-cart');
+        const cartSidebar = document.getElementById('cart-sidebar');
+        const cartOverlay = document.getElementById('cart-overlay');
+        const cartItemsContainer = document.getElementById('cart-items');
+        const emptyCartMessage = document.getElementById('empty-cart-message');
+        const cartCount = document.getElementById('cart-count');
+        const sidebarCartCount = document.getElementById('sidebar-cart-count');
+        const cartSubtotal = document.getElementById('cart-subtotal');
+        const cartTax = document.getElementById('cart-tax');
+        const cartTotal = document.getElementById('cart-total');
+        const checkoutBtn = document.getElementById('checkout-btn');
+        // Quick view modal elements
+        const quickviewModal = document.getElementById('quickview-modal');
+        const closeQuickview = document.getElementById('close-quickview');
+        const quickviewTitle = document.getElementById('quickview-title');
+        const quickviewImage = document.getElementById('quickview-image');
+        const quickviewPrice = document.getElementById('quickview-price');
+        const quickviewDescription = document.getElementById('quickview-description');
+        const addToCartQuickview = document.getElementById('add-to-cart-quickview');
+        let currentQuickviewProduct = null;
+        // Initialize the page
+        document.addEventListener('DOMContentLoaded', () => {
+            renderProducts();
+            setupEventListeners();
+            startCountdown();
+        });
+        // Render products to the page
+        function renderProducts() {
+            productsContainer.innerHTML = '';
+            products.forEach(product => {
+                const productCard = document.createElement('div');
+                productCard.className = 'bg-white rounded-lg shadow-md overflow-hidden product-card transition duration-300';
+                productCard.innerHTML = `
+                    <div class="relative">
+                        <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
+                        <div class="absolute top-2 right-2 bg-white rounded-full p-2 shadow-md">
+                            <i class="far fa-heart text-gray-400 hover:text-red-500 cursor-pointer"></i>
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-semibold text-gray-800">${product.name}</h3>
+                            <span class="text-indigo-600 font-bold">$${product.price.toFixed(2)}</span>
+                        </div>
+                        <div class="flex items-center mb-3">
+                            <div class="text-yellow-400 text-sm">
+                                ${renderStars(product.rating)}
+                            </div>
+                            <span class="text-gray-500 text-xs ml-1">(${Math.floor(Math.random() * 100) + 20})</span>
+                        </div>
+                        <div class="flex space-x-2">
+                            <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded font-medium transition text-sm add-to-cart" data-id="${product.id}">
+                                Add to Cart
+                            </button>
+                            <button class="w-10 h-10 flex items-center justify-center border border-gray-300 rounded hover:bg-gray-100 quick-view" data-id="${product.id}">
+                                <i class="fas fa-eye text-gray-600"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                productsContainer.appendChild(productCard);
+            });
+        }
+        // Render star rating
+        function renderStars(rating) {
+            let stars = '';
+            const fullStars = Math.floor(rating);
+            const hasHalfStar = rating % 1 >= 0.5;
+            for (let i = 0; i < fullStars; i++) {
+                stars += '<i class="fas fa-star"></i>';
+            }
+            if (hasHalfStar) {
+                stars += '<i class="fas fa-star-half-alt"></i>';
+            }
+            const emptyStars = 5 - Math.ceil(rating);
+            for (let i = 0; i < emptyStars; i++) {
+                stars += '<i class="far fa-star"></i>';
+            }
+            return stars;
+        }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Cart toggle
+            cartBtn.addEventListener('click', toggleCart);
+            closeCartBtn.addEventListener('click', toggleCart);
+            cartOverlay.addEventListener('click', toggleCart);
+            // Quick view modal
+            closeQuickview.addEventListener('click', () => {
+                quickviewModal.classList.add('hidden');
+            });
+            // Add to cart buttons
+            document.addEventListener('click', (e) => {
+                if (e.target.classList.contains('add-to-cart') || e.target.closest('.add-to-cart')) {
+                    const button = e.target.classList.contains('add-to-cart') ? e.target : e.target.closest('.add-to-cart');
+                    const productId = parseInt(button.getAttribute('data-id'));
+                    addToCart(productId);
+                    // Show added animation
+                    button.innerHTML = '<i class="fas fa-check mr-1"></i> Added';
+                    button.classList.remove('bg-indigo-600');
+                    button.classList.add('bg-green-500');
+                    setTimeout(() => {
+                        button.innerHTML = 'Add to Cart';
+                        button.classList.remove('bg-green-500');
+                        button.classList.add('bg-indigo-600');
+                    }, 1500);
+                }
+                // Quick view buttons
+                if (e.target.classList.contains('quick-view') || e.target.closest('.quick-view')) {
+                    const button = e.target.classList.contains('quick-view') ? e.target : e.target.closest('.quick-view');
+                    const productId = parseInt(button.getAttribute('data-id'));
+                    showQuickView(productId);
+                }
+            });
+            // Add to cart from quick view
+            addToCartQuickview.addEventListener('click', () => {
+                if (currentQuickviewProduct) {
+                    addToCart(currentQuickviewProduct.id);
+                    // Show added animation
+                    addToCartQuickview.innerHTML = '<i class="fas fa-check mr-2"></i> Added to Cart';
+                    addToCartQuickview.classList.remove('bg-indigo-600');
+                    addToCartQuickview.classList.add('bg-green-500');
+                    setTimeout(() => {
+                        addToCartQuickview.innerHTML = '<i class="fas fa-shopping-cart mr-2"></i> Add to Cart';
+                        addToCartQuickview.classList.remove('bg-green-500');
+                        addToCartQuickview.classList.add('bg-indigo-600');
+                    }, 1500);
+                }
+            });
+            // Checkout button
+            checkoutBtn.addEventListener('click', () => {
+                alert('Proceeding to checkout! In a real application, this would redirect to the checkout page.');
+                toggleCart();
+            });
+        }
+        // Toggle cart sidebar
+        function toggleCart() {
+            cartSidebar.classList.toggle('translate-x-full');
+            cartOverlay.classList.toggle('hidden');
+            document.body.classList.toggle('overflow-hidden');
+            if (!cartSidebar.classList.contains('translate-x-full')) {
+                renderCartItems();
+            }
+        }
+        // Add product to cart
+        function addToCart(productId) {
+            const product = products.find(p => p.id === productId);
+            if (product) {
+                const existingItem = cart.find(item => item.id === productId);
+                if (existingItem) {
+                    existingItem.quantity += 1;
+                } else {
+                    cart.push({
+                        ...product,
+                        quantity: 1
+                    });
+                }
+                updateCartCount();
+                // If cart is open, update the display
+                if (!cartSidebar.classList.contains('translate-x-full')) {
+                    renderCartItems();
+                }
+            }
+        }
+        // Update cart count in header
+        function updateCartCount() {
+            const count = cart.reduce((total, item) => total + item.quantity, 0);
+            cartCount.textContent = count;
+            sidebarCartCount.textContent = count;
+        }
+        // Render cart items in sidebar
+        function renderCartItems() {
+            if (cart.length === 0) {
+                emptyCartMessage.classList.remove('hidden');
+                cartItemsContainer.innerHTML = '';
+                cartItemsContainer.appendChild(emptyCartMessage);
+                cartSubtotal.textContent = '$0.00';
+                cartTax.textContent = '$0.00';
+                cartTotal.textContent = '$0.00';
+                return;
+            }
+            emptyCartMessage.classList.add('hidden');
+            cartItemsContainer.innerHTML = '';
+            let subtotal = 0;
+            cart.forEach(item => {
+                const itemTotal = item.price * item.quantity;
+                subtotal += itemTotal;
+                const cartItem = document.createElement('div');
+                cartItem.className = 'flex items-center border-b border-gray-100 pb-4';
+                cartItem.innerHTML = `
+                    <div class="w-20 h-20 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">
+                        <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">
+                    </div>
+                    <div class="ml-4 flex-grow">
+                        <div class="flex justify-between">
+                            <h3 class="text-sm font-medium text-gray-900">${item.name}</h3>
+                            <p class="ml-4 text-sm font-medium text-gray-900">$${item.price.toFixed(2)}</p>
+                        </div>
+                        <div class="flex justify-between mt-1 text-sm text-gray-500">
+                            <div class="flex items-center space-x-2">
+                                <button class="text-gray-500 hover:text-indigo-600 quantity-btn" data-action="decrease" data-id="${item.id}">
+                                    <i class="fas fa-minus text-xs"></i>
+                                </button>
+                                <span class="quantity">${item.quantity}</span>
+                                <button class="text-gray-500 hover:text-indigo-600 quantity-btn" data-action="increase" data-id="${item.id}">
+                                    <i class="fas fa-plus text-xs"></i>
+                                </button>
+                            </div>
+                            <button class="text-red-500 hover:text-red-700 remove-btn" data-id="${item.id}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                `;
+                cartItemsContainer.appendChild(cartItem);
+            });
+            // Calculate totals
+            const tax = subtotal * 0.1; // 10% tax
+            const total = subtotal + tax;
+            cartSubtotal.textContent = `$${subtotal.toFixed(2)}`;
+            cartTax.textContent = `$${tax.toFixed(2)}`;
+            cartTotal.textContent = `$${total.toFixed(2)}`;
+            // Add event listeners for quantity buttons and remove buttons
+            document.querySelectorAll('.quantity-btn').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    const action = button.getAttribute('data-action');
+                    const productId = parseInt(button.getAttribute('data-id'));
+                    updateCartItemQuantity(productId, action);
+                });
+            });
+            document.querySelectorAll('.remove-btn').forEach(button => {
+                button.addEventListener('click', (e) => {
+                    const productId = parseInt(button.getAttribute('data-id'));
+                    removeFromCart(productId);
+                });
+            });
+        }
+        // Update cart item quantity
+        function updateCartItemQuantity(productId, action) {
+            const item = cart.find(item => item.id === productId);
+            if (item) {
+                if (action === 'increase') {
+                    item.quantity += 1;
+                } else if (action === 'decrease' && item.quantity > 1) {
+                    item.quantity -= 1;
+                }
+                updateCartCount();
+                renderCartItems();
+            }
+        }
+        // Remove item from cart
+        function removeFromCart(productId) {
+            cart = cart.filter(item => item.id !== productId);
+            updateCartCount();
+            renderCartItems();
+        }
+        // Show quick view modal
+        function showQuickView(productId) {
+            const product = products.find(p => p.id === productId);
+            if (product) {
+                currentQuickviewProduct = product;
+                quickviewTitle.textContent = product.name;
+                quickviewImage.src = product.image;
+                quickviewPrice.textContent = `$${product.price.toFixed(2)}`;
+                quickviewDescription.textContent = product.description;
+                quickviewModal.classList.remove('hidden');
+                document.body.classList.add('overflow-hidden');
+            }
+        }
+        // Countdown timer for special offer
+        function startCountdown() {
+            // Set the date we're counting down to (3 days from now)
+            const countDownDate = new Date();
+            countDownDate.setDate(countDownDate.getDate() + 3);
+            // Update the count down every 1 second
+            const x = setInterval(function() {
+                // Get today's date and time
+                const now = new Date().getTime();
+                // Find the distance between now and the count down date
+                const distance = countDownDate - now;
+                // Time calculations for days, hours, minutes and seconds
+                const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+                const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+                const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+                // Display the result
+                document.getElementById("days").textContent = days.toString().padStart(2, '0');
+                document.getElementById("hours").textContent = hours.toString().padStart(2, '0');
+                document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0');
+                document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0');
+                // If the count down is finished, clear interval
+                if (distance < 0) {
+                    clearInterval(x);
+                    document.getElementById("days").textContent = "00";
+                    document.getElementById("hours").textContent = "00";
+                    document.getElementById("minutes").textContent = "00";
+                    document.getElementById("seconds").textContent = "00";
+                }
+            }, 1000);
+        }
+  </script>
+<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=XBotz/e-commerce" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes