Spaces:
Running
Running
create an adult sex toys ecommerce website under the name leisure empire that will be just listing products and people will place an order which will be stored on the database as an order to be followed up. There will be no payment function on this site - Follow Up Deployment
12178f9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SimpleShop - Browse & Order</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 enhancements */ | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .product-card { | |
| transition: all 0.3s ease; | |
| } | |
| .order-success { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .cart-badge { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background-color: #ef4444; | |
| color: white; | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center space-x-6"> | |
| <a href="#" class="text-xl font-bold text-indigo-600 flex items-center"> | |
| <i class="fas fa-crown mr-2"></i>Leisure Empire | |
| </a> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Home</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Adult Toys</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Vibrators</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Dildos</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Butt Plugs</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Male Toys</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Lubes</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">Condoms</a> | |
| <a href="#" class="text-gray-700 hover:text-indigo-600">18+ Games</a> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="cart-button" class="text-gray-700 hover:text-indigo-600 p-2 rounded-full relative"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cart-count" class="cart-badge hidden">0</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="bg-indigo-700 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl font-bold mb-4">Leisure Empire Adult Toys</h1> | |
| <p class="text-xl mb-8">Premium selection - Order now for discreet delivery</p> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Featured Products by Category --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Featured Adult Toys</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x300" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Premium Vibrator</h3> | |
| <p class="text-gray-600 text-sm mb-2">Multi-speed, waterproof design</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">KES 2,500</span> | |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Repeat similar product cards for other featured adult toys --> | |
| </div> | |
| </section> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Featured Vibrators</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x300" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Rabbit Vibrator</h3> | |
| <p class="text-gray-600 text-sm mb-2">Dual stimulation, 10 patterns</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">KES 3,200</span> | |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Repeat similar product cards for other featured vibrators --> | |
| </div> | |
| </section> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6">Featured Dildos</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <div class="product-card bg-white rounded-lg shadow-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x300" alt="Product" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="font-semibold text-lg mb-1">Realistic Dildo</h3> | |
| <p class="text-gray-600 text-sm mb-2">Life-like texture, suction base</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-indigo-600">KES 2,800</span> | |
| <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Repeat similar product cards for other featured dildos --> | |
| </div> | |
| </section> | |
| <!-- Order Form (Initially Hidden) --> | |
| <section id="order-form" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold text-gray-800">Place Your Order</h3> | |
| <button id="close-form" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="order-details-form"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> | |
| <input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Shipping Address</label> | |
| <textarea id="address" name="address" rows="3" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="notes" class="block text-sm font-medium text-gray-700 mb-1">Order Notes (Optional)</label> | |
| <textarea id="notes" name="notes" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea> | |
| </div> | |
| <div id="order-summary" class="mb-6 p-4 bg-gray-50 rounded-md"> | |
| <h4 class="font-medium text-gray-800 mb-2">Order Summary</h4> | |
| <div id="order-items" class="space-y-2 mb-2"> | |
| <!-- Order items will be inserted here --> | |
| </div> | |
| <div class="border-t border-gray-200 pt-2"> | |
| <div class="flex justify-between font-medium text-gray-800"> | |
| <span>Total</span> | |
| <span id="order-total">KES 0.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition duration-150"> | |
| Submit Order | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Order Success (Initially Hidden) --> | |
| <section id="order-success" class="hidden order-success fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50 p-4"> | |
| <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 text-center"> | |
| <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4"> | |
| <i class="fas fa-check text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-900 mb-2">Order Received!</h3> | |
| <p class="text-sm text-gray-500 mb-6">Thank you for your order. We'll contact you within 24 hours to confirm availability and arrange payment & delivery.</p> | |
| <button id="close-success" class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition duration-150"> | |
| Continue Shopping | |
| </button> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Leisure Empire</h3> | |
| <p class="text-gray-400">Premium adult toys for your intimate leisure.</p> | |
| </div> | |
| <div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Adult Toys</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Vibrators</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Dildos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Butt Plugs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Male Sex Toys</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Lubes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Condoms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">18+ Games</a></li> | |
| </ul> | |
| </div> | |
| <h3 class="text-lg font-semibold mb-4">Contact Us</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><i class="fas fa-map-marker-alt mr-2"></i> Nairobi</li> | |
| <li><i class="fas fa-phone mr-2"></i> +2540715841575</li> | |
| <li><i class="fas fa-envelope mr-2"></i> [email protected]</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| <p>© 2023 Pleasure Haven. Adults only. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Shopping cart functionality | |
| let cart = []; | |
| // DOM elements | |
| const cartButton = document.getElementById('cart-button'); | |
| const cartCount = document.getElementById('cart-count'); | |
| const orderForm = document.getElementById('order-form'); | |
| const closeForm = document.getElementById('close-form'); | |
| const orderItemsContainer = document.getElementById('order-items'); | |
| const orderTotal = document.getElementById('order-total'); | |
| const orderFormElement = document.getElementById('order-details-form'); | |
| const orderSuccess = document.getElementById('order-success'); | |
| const closeSuccess = document.getElementById('close-success'); | |
| // Update cart count display | |
| function updateCartCount() { | |
| const totalItems = cart.reduce((total, item) => total + item.quantity, 0); | |
| cartCount.textContent = totalItems; | |
| if (totalItems > 0) { | |
| cartCount.classList.remove('hidden'); | |
| } else { | |
| cartCount.classList.add('hidden'); | |
| } | |
| } | |
| // Show order form with cart items | |
| function showOrderForm() { | |
| if (cart.length === 0) { | |
| alert('Your cart is empty. Please add some products first.'); | |
| return; | |
| } | |
| // Populate order items | |
| orderItemsContainer.innerHTML = ''; | |
| let total = 0; | |
| cart.forEach(item => { | |
| const itemTotal = item.price * item.quantity; | |
| total += itemTotal; | |
| const itemElement = document.createElement('div'); | |
| itemElement.className = 'flex justify-between text-sm text-gray-600'; | |
| itemElement.innerHTML = ` | |
| <span>${item.name} (x${item.quantity})</span> | |
| <span>$${itemTotal.toFixed(2)}</span> | |
| `; | |
| orderItemsContainer.appendChild(itemElement); | |
| }); | |
| orderTotal.textContent = `$${total.toFixed(2)}`; | |
| orderForm.classList.remove('hidden'); | |
| } | |
| // Submit order form | |
| function submitOrder(e) { | |
| e.preventDefault(); | |
| const formData = { | |
| name: document.getElementById('name').value, | |
| email: document.getElementById('email').value, | |
| phone: document.getElementById('phone').value, | |
| address: document.getElementById('address').value, | |
| notes: document.getElementById('notes').value, | |
| items: cart, | |
| total: parseFloat(orderTotal.textContent.replace('$', '')), | |
| date: new Date().toISOString() | |
| }; | |
| // Store order in localStorage (replace with your database storage) | |
| const orderId = 'order_' + Date.now(); | |
| localStorage.setItem(orderId, JSON.stringify(formData)); | |
| // In a real app, you would send to your backend here | |
| console.log('Order submitted for follow-up:', orderId, formData); | |
| // Show success message | |
| orderForm.classList.add('hidden'); | |
| orderSuccess.classList.remove('hidden'); | |
| // Clear cart | |
| cart = []; | |
| updateCartCount(); | |
| // Reset form | |
| orderFormElement.reset(); | |
| } | |
| // Event listeners | |
| cartButton.addEventListener('click', showOrderForm); | |
| closeForm.addEventListener('click', () => orderForm.classList.add('hidden')); | |
| orderFormElement.addEventListener('submit', submitOrder); | |
| closeSuccess.addEventListener('click', () => orderSuccess.classList.add('hidden')); | |
| // Initialize the page | |
| updateCartCount(); | |
| </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=Alexis08/leisure-empire" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |