Download index.html from fifine07/store: direct link, hf CLI and curl.
- Browser
- Download file 69.6 kB
-
https://huggingface.co/spaces/fifine07/store/resolve/main/index.html
- Command line
-
hf download hf://spaces/fifine07/store/index.html
-
curl -L -o index.html https://huggingface.co/spaces/fifine07/store/resolve/main/index.html
69.6 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NovaStyle | Trendy Fashion for Every Body</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| overflow-x: hidden; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .product-card:hover .quick-view { | |
| opacity: 1; | |
| } | |
| .hero-slide { | |
| animation: fade 8s infinite; | |
| } | |
| @keyframes fade { | |
| 0%, 100% { opacity: 0 } | |
| 20%, 80% { opacity: 1 } | |
| } | |
| .slide-1 { animation-delay: 0s; } | |
| .slide-2 { animation-delay: 4s; } | |
| .color-swatch { | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 5px; | |
| border: 1px solid #e5e7eb; | |
| cursor: pointer; | |
| } | |
| .color-swatch.active { | |
| border: 2px solid #000; | |
| transform: scale(1.1); | |
| } | |
| .size-option { | |
| display: inline-block; | |
| padding: 8px 12px; | |
| margin: 0 5px 5px 0; | |
| border: 1px solid #d1d5db; | |
| cursor: pointer; | |
| } | |
| .size-option.active { | |
| background-color: #000; | |
| color: white; | |
| border-color: #000; | |
| } | |
| .size-option.disabled { | |
| color: #d1d5db; | |
| cursor: not-allowed; | |
| } | |
| /* Admin page specific styles */ | |
| .admin-nav { | |
| background-color: #1f2937; | |
| } | |
| .admin-nav a:hover { | |
| background-color: #374151; | |
| } | |
| .admin-main { | |
| min-height: calc(100vh - 64px); | |
| } | |
| .product-table th { | |
| background-color: #f3f4f6; | |
| } | |
| .product-table tr:nth-child(even) { | |
| background-color: #f9fafb; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-gray-900"> | |
| <!-- Admin Login Modal --> | |
| <div id="admin-login-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-md sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Admin Login</h3> | |
| <button onclick="hideAdminLoginModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="admin-login-form"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="admin-username"> | |
| Username | |
| </label> | |
| <input type="text" id="admin-username" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="admin-password"> | |
| Password | |
| </label> | |
| <input type="password" id="admin-password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Login | |
| </button> | |
| <button type="button" onclick="hideAdminLoginModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Check if we're on admin page --> | |
| <div id="admin-page" class="hidden"> | |
| <!-- Admin Navigation --> | |
| <nav class="admin-nav text-white shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-xl font-bold">NovaStyle Admin</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="hover:bg-gray-700 px-3 py-2 rounded" onclick="showAdminPage(false)">View Store</a> | |
| <button class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded" onclick="logout()"> | |
| Logout <i class="fas fa-sign-out-alt ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Admin Sidebar and Main Content --> | |
| <div class="flex admin-main"> | |
| <!-- Sidebar --> | |
| <div class="w-64 bg-gray-800 text-white shadow-lg"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold">Admin Dashboard</h3> | |
| </div> | |
| <nav class="mt-4"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700 bg-gray-700" onclick="showSection('products')"> | |
| <i class="fas fa-tshirt mr-2"></i> Products | |
| </a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700" onclick="showSection('orders')"> | |
| <i class="fas fa-shopping-bag mr-2"></i> Orders | |
| </a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700" onclick="showSection('customers')"> | |
| <i class="fas fa-users mr-2"></i> Customers | |
| </a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-700" onclick="showSection('analytics')"> | |
| <i class="fas fa-chart-line mr-2"></i> Analytics | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 p-8 bg-gray-50"> | |
| <!-- Products Section --> | |
| <div id="products-section"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Product Management</h2> | |
| <button class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded" onclick="showAddProductModal()"> | |
| <i class="fas fa-plus mr-2"></i> Add Product | |
| </button> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <table class="min-w-full product-table"> | |
| <thead> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Image</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200" id="product-list"> | |
| <!-- Products will be added here dynamically --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Orders Section (Hidden by default) --> | |
| <div id="orders-section" class="hidden"> | |
| <h2 class="text-2xl font-bold mb-6">Order Management</h2> | |
| <p class="text-gray-600">Order management functionality would go here.</p> | |
| </div> | |
| <!-- Customers Section (Hidden by default) --> | |
| <div id="customers-section" class="hidden"> | |
| <h2 class="text-2xl font-bold mb-6">Customer Management</h2> | |
| <p class="text-gray-600">Customer management functionality would go here.</p> | |
| </div> | |
| <!-- Analytics Section (Hidden by default) --> | |
| <div id="analytics-section" class="hidden"> | |
| <h2 class="text-2xl font-bold mb-6">Analytics Dashboard</h2> | |
| <p class="text-gray-600">Analytics and reporting would go here.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Add Product Modal --> | |
| <div id="add-product-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Add New Product</h3> | |
| <button onclick="hideAddProductModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="add-product-form"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-name"> | |
| Product Name | |
| </label> | |
| <input type="text" id="product-name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-price"> | |
| Price ($) | |
| </label> | |
| <input type="number" step="0.01" id="product-price" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-stock"> | |
| Stock Quantity | |
| </label> | |
| <input type="number" id="product-stock" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-category"> | |
| Category | |
| </label> | |
| <select id="product-category" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| <option value="dresses">Dresses</option> | |
| <option value="tops">Tops</option> | |
| <option value="bottoms">Bottoms</option> | |
| <option value="sets">Matching Sets</option> | |
| <option value="swimwear">Swimwear</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-status"> | |
| Status | |
| </label> | |
| <select id="product-status" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| <option value="active">Active</option> | |
| <option value="draft">Draft</option> | |
| <option value="archived">Archived</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-image"> | |
| Image URL | |
| </label> | |
| <input type="text" id="product-image" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="https://example.com/image.jpg"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 text-sm font-bold mb-2" for="product-description"> | |
| Description | |
| </label> | |
| <textarea id="product-description" rows="3" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> | |
| <button type="submit" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-pink-600 text-base font-medium text-white hover:bg-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Add Product | |
| </button> | |
| <button type="button" onclick="hideAddProductModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> | |
| Cancel | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Store Content (Hidden when admin page is shown) --> | |
| <div id="store-page"> | |
| <!-- Announcement Bar --> | |
| <div class="bg-black text-white text-center py-2 px-4 text-sm"> | |
| ✨ FREE SHIPPING ON ORDERS OVER $75 | 30-DAY RETURNS ✨ | |
| </div> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex items-center justify-between py-4"> | |
| <!-- Mobile Menu Button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| <!-- Logo --> | |
| <div class="flex-shrink-0"> | |
| <a href="#" class="text-2xl font-bold tracking-tight">NOVA<span class="text-pink-600">STYLE</span></a> | |
| </div> | |
| <!-- Desktop Navigation --> | |
| <nav class="hidden md:flex space-x-8"> | |
| <div class="dropdown relative"> | |
| <button class="font-medium hover:text-pink-600 flex items-center"> | |
| NEW ARRIVALS <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg mt-2 w-48 rounded-md py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Just Dropped 🔥</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Bestsellers</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Back in Stock</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="font-medium hover:text-pink-600 flex items-center"> | |
| CLOTHING <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg mt-2 w-48 rounded-md py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Dresses</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tops</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Bottoms</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Matching Sets</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Jumpsuits & Rompers</a> | |
| </div> | |
| </div> | |
| <div class="dropdown relative"> | |
| <button class="font-medium hover:text-pink-600 flex items-center"> | |
| CURVE + PLUS <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg mt-2 w-48 rounded-md py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Dresses</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Tops</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Bottoms</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Swimwear</a> | |
| </div> | |
| </div> | |
| <a href="#" class="font-medium hover:text-pink-600">SALE</a> | |
| <a href="#" class="font-medium hover:text-pink-600 hidden md:block" onclick="showAdminLoginModal()">ADMIN</a> | |
| </nav> | |
| <!-- Search and Icons --> | |
| <div class="flex items-center space-x-4"> | |
| <div class="hidden md:block relative"> | |
| <input type="text" placeholder="Search..." class="border border-gray-300 rounded-full py-1 px-4 text-sm w-48 focus:outline-none focus:ring-1 focus:ring-pink-500"> | |
| <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <a href="#" class="text-gray-700 hover:text-pink-600"><i class="far fa-user text-xl"></i></a> | |
| <a href="#" class="text-gray-700 hover:text-pink-600 relative"> | |
| <i class="far fa-heart text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">3</span> | |
| </a> | |
| <a href="#" class="text-gray-700 hover:text-pink-600 relative"> | |
| <i class="fas fa-shopping-bag text-xl"></i> | |
| <span class="absolute -top-2 -right-2 bg-pink-600 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">2</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t"> | |
| <div class="container mx-auto px-4 py-2"> | |
| <div class="mb-2"> | |
| <input type="text" placeholder="Search..." class="border border-gray-300 rounded-full py-2 px-4 text-sm w-full focus:outline-none focus:ring-1 focus:ring-pink-500"> | |
| </div> | |
| <a href="#" class="block py-2 border-b">NEW ARRIVALS</a> | |
| <a href="#" class="block py-2 border-b">CLOTHING</a> | |
| <a href="#" class="block py-2 border-b">CURVE + PLUS</a> | |
| <a href="#" class="block py-2 border-b">SALE</a> | |
| <a href="#" class="block py-2 border-b" onclick="showAdminLoginModal()">ADMIN</a> | |
| <a href="#" class="block py-2 border-b">ACCOUNT</a> | |
| <a href="#" class="block py-2">WISHLIST</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative overflow-hidden h-[500px]"> | |
| <div class="hero-slide slide-1 absolute inset-0 w-full h-full"> | |
| <div class="bg-gradient-to-r from-black to-transparent absolute inset-0 z-10"></div> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Summer Collection" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-1/4 left-10 z-20 text-white max-w-md"> | |
| <h2 class="text-4xl font-bold mb-4">SUMMER VIBES JUST DROPPED 🌴</h2> | |
| <p class="text-lg mb-6">Get snatched in our hottest new swim & vacay styles</p> | |
| <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">SHOP NOW</a> | |
| </div> | |
| </div> | |
| <div class="hero-slide slide-2 absolute inset-0 w-full h-full opacity-0"> | |
| <div class="bg-gradient-to-r from-black to-transparent absolute inset-0 z-10"></div> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a4b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Night Out Collection" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-1/4 left-10 z-20 text-white max-w-md"> | |
| <h2 class="text-4xl font-bold mb-4">NIGHT OUT ESSENTIALS ✨</h2> | |
| <p class="text-lg mb-6">Turn heads in our curve-hugging going out fits</p> | |
| <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">SHOP NOW</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-10">SHOP BY CATEGORY</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="category-card relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1585487000160-6a376398702a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Dresses" class="w-full h-64 md:h-80 object-cover transition duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <h3 class="text-white text-2xl font-bold">DRESSES</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb1c4f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Tops" class="w-full h-64 md:h-80 object-cover transition duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <h3 class="text-white text-2xl font-bold">TOPS</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1595950653106-6c9ebd64022e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Bottoms" class="w-full h-64 md:h-80 object-cover transition duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <h3 class="text-white text-2xl font-bold">BOTTOMS</h3> | |
| </div> | |
| </a> | |
| <a href="#" class="category-card relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1617137968427-8599c93a6d62?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" alt="Matching Sets" class="w-full h-64 md:h-80 object-cover transition duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center justify-center"> | |
| <h3 class="text-white text-2xl font-bold">MATCHING SETS</h3> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Arrivals Section --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-3xl font-bold">NEW ARRIVALS 🔥</h2> | |
| <a href="#" class="text-pink-600 font-medium hover:underline">VIEW ALL</a> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <!-- Product Card 1 --> | |
| <div class="product-card relative"> | |
| <div class="relative overflow-hidden rounded-lg mb-3"> | |
| <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Bodycon Dress" class="w-full h-80 object-cover"> | |
| <div class="quick-view absolute bottom-4 left-0 right-0 mx-auto opacity-0 transition-opacity duration-300"> | |
| <button class="bg-white text-black font-medium py-2 px-4 rounded-full w-3/4 mx-auto block hover:bg-black hover:text-white" onclick="showQuickViewModal()">QUICK VIEW</button> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <button class="bg-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-pink-600 hover:text-white"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="absolute top-3 left-3 bg-pink-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div> | |
| </div> | |
| <h3 class="font-medium">Caught Feelings Bodycon Dress</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="font-bold">$39.99</span> | |
| <div class="flex"> | |
| <div class="color-swatch bg-red-600 active"></div> | |
| <div class="color-swatch bg-black"></div> | |
| <div class="color-swatch bg-pink-400"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 2 --> | |
| <div class="product-card relative"> | |
| <div class="relative overflow-hidden rounded-lg mb-3"> | |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80" alt="Crop Top" class="w-full h-80 object-cover"> | |
| <div class="quick-view absolute bottom-4 left-0 right-0 mx-auto opacity-0 transition-opacity duration-300"> | |
| <button class="bg-white text-black font-medium py-2 px-4 rounded-full w-3/4 mx-auto block hover:bg-black hover:text-white" onclick="showQuickViewModal()">QUICK VIEW</button> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <button class="bg-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-pink-600 hover:text-white"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <h3 class="font-medium">Main Character Energy Crop Top</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <div> | |
| <span class="font-bold text-pink-600">$24.99</span> | |
| <span class="text-gray-500 line-through text-sm ml-2">$34.99</span> | |
| </div> | |
| <div class="flex"> | |
| <div class="color-swatch bg-white active"></div> | |
| <div class="color-swatch bg-yellow-300"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 3 --> | |
| <div class="product-card relative"> | |
| <div class="relative overflow-hidden rounded-lg mb-3"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Swimsuit" class="w-full h-80 object-cover"> | |
| <div class="quick-view absolute bottom-4 left-0 right-0 mx-auto opacity-0 transition-opacity duration-300"> | |
| <button class="bg-white text-black font-medium py-2 px-4 rounded-full w-3/4 mx-auto block hover:bg-black hover:text-white" onclick="showQuickViewModal()">QUICK VIEW</button> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <button class="bg-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-pink-600 hover:text-white"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="absolute top-3 left-3 bg-pink-600 text-white text-xs font-bold px-2 py-1 rounded">NEW</div> | |
| </div> | |
| <h3 class="font-medium">Beach Babe One-Piece Swimsuit</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="font-bold">$49.99</span> | |
| <div class="flex"> | |
| <div class="color-swatch bg-blue-500 active"></div> | |
| <div class="color-swatch bg-black"></div> | |
| <div class="color-swatch bg-red-600"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Card 4 --> | |
| <div class="product-card relative"> | |
| <div class="relative overflow-hidden rounded-lg mb-3"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a4b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Jumpsuit" class="w-full h-80 object-cover"> | |
| <div class="quick-view absolute bottom-4 left-0 right-0 mx-auto opacity-0 transition-opacity duration-300"> | |
| <button class="bg-white text-black font-medium py-2 px-4 rounded-full w-3/4 mx-auto block hover:bg-black hover:text-white" onclick="showQuickViewModal()">QUICK VIEW</button> | |
| </div> | |
| <div class="absolute top-3 right-3"> | |
| <button class="bg-white rounded-full w-8 h-8 flex items-center justify-center hover:bg-pink-600 hover:text-white"> | |
| <i class="far fa-heart"></i> | |
| </button> | |
| </div> | |
| <div class="absolute top-3 left-3 bg-black text-white text-xs font-bold px-2 py-1 rounded">BESTSELLER</div> | |
| </div> | |
| <h3 class="font-medium">Night Out Jumpsuit</h3> | |
| <div class="flex justify-between items-center mt-1"> | |
| <span class="font-bold">$59.99</span> | |
| <div class="flex"> | |
| <div class="color-swatch bg-black active"></div> | |
| <div class="color-swatch bg-emerald-600"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sale Banner --> | |
| <section class="py-16 bg-pink-600 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl font-bold mb-4">SUMMER SALE IS ON! 🎉</h2> | |
| <p class="text-xl mb-8">Up to 60% off select styles. Limited time only!</p> | |
| <a href="#" class="bg-white text-pink-600 hover:bg-black hover:text-white font-bold py-3 px-8 rounded-full inline-block transition duration-300">SHOP THE SALE</a> | |
| </div> | |
| </section> | |
| <!-- Shop the Look Section --> | |
| <section class="py-12"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-10">SHOP THE LOOK ✨</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1556905055-8f358a7a4b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Night Out Look" class="w-full h-full object-cover transition duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-20 flex flex-col justify-end p-6"> | |
| <h3 class="text-white text-2xl font-bold mb-4">NIGHT OUT VIBES</h3> | |
| <div class="flex space-x-3"> | |
| <div class="bg-white rounded-full px-4 py-1 text-sm">Dress</div> | |
| <div class="bg-white rounded-full px-4 py-1 text-sm">Heels</div> | |
| <div class="bg-white rounded-full px-4 py-1 text-sm">Bag</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb1c4f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1976&q=80" alt="Casual Look" class="w-full h-full object-cover transition duration-300 group-hover:scale-105"> | |
| <div class="absolute inset-0 bg-black bg-opacity-20 flex flexocol justify-end p-6"> | |
| <h3 class="text-white text-2xl font-bold mb-4">CASUAL CHIC</h3> | |
| <div class="flex space-x-3"> | |
| <div class="bg-white rounded-full px-4 py-1 text-sm">Top</div> | |
| <div class="bg-white rounded-full px-4 py-1 text-sm">Jeans</div> | |
| <div class="bg-white rounded-full px-4 py-1 text-sm">Sneakers</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Instagram Feed Section --> | |
| <section class="py-12 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col items-center mb-10"> | |
| <h2 class="text-3xl font-bold mb-2">#NOVASTYLE</h2> | |
| <p class="text-gray-600">Tag us for a chance to be featured</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-2"> | |
| <a href="#" class="instagram-post overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1529139574466-a303027c1d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Instagram Post" class="w-full h-64 object-cover transition duration-300 group-hover:scale-110"> | |
| </a> | |
| <a href="#" class="instagram-post overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1965&q=80" alt="Instagram Post" class="w-full h-64 object-cover transition duration-300 group-hover:scale-110"> | |
| </a> | |
| <a href="#" class="instagram-post overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1542295669297-4d352b042bca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Instagram Post" class="w-full h-64 object-cover transition duration-300 group-hover:scale-110"> | |
| </a> | |
| <a href="#" class="instagram-post overflow-hidden rounded-lg group"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Instagram Post" class="w-full h-64 object-cover transition duration-300 group-hover:scale-110"> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick View Modal --> | |
| <div id="quick-view-modal" class="fixed inset-0 z-50 hidden overflow-y-auto"> | |
| <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | |
| <div class="fixed inset-0 transition-opacity" aria-hidden="true"> | |
| <div class="absolute inset-0 bg-gray-500 opacity-75"></div> | |
| </div> | |
| <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | |
| <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full"> | |
| <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> | |
| <div class="sm:flex sm:items-start"> | |
| <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"> | |
| <div class="flex justify-between items-start"> | |
| <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Caught Feelings Bodycon Dress</h3> | |
| <button onclick="hideQuickViewModal()" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="relative overflow-hidden rounded-lg mb-4"> | |
| <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Bodycon Dress" class="w-full h-auto"> | |
| </div> | |
| <div class="grid grid-cols-4 gap-2"> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| <div class="border rounded cursor-pointer"> | |
| <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| <极速赛车开奖直播官网>极速赛车开奖直播官网> | |
| <img src="https://images.unsplash.com/photo-1591047139829-d91aecb1c4f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto:format&fit=crop&w=1976&q=80" alt="Thumbnail" class="w-full h-20 object-cover"> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between items-center mb-4"> | |
| <span class="text-2xl font-bold">$39.99</span> | |
| <div class="极速赛车开奖直播官网 items-center"> | |
| <div class="flex mr-4"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| <a href="#reviews" class="text-sm text-gray-600 hover:underline">142 reviews</a> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2">COLOR: <span class="font-normal">Red</span></h4> | |
| <div class="flex"> | |
| <div class="color-swatch bg-red-600 active"></div> | |
| <div class="color-swatch bg-black"></div> | |
| <div class="color-swatch bg-pink-400"></div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2">SIZE:</h4> | |
| <div> | |
| <span class="size-option">XS</span> | |
| <span class="size-option active">S</span> | |
| <span class="size-option">M</span> | |
| <span class="size-option">L</span> | |
| <span class="size-option">XL</span> | |
| <span class="size-option disabled">XXL</span> | |
| </div> | |
| <a href="#" class="text-sm text-gray-600 hover:underline mt-1 inline-block">Size Guide</a> | |
| </div> | |
| <div class="mb-6"> | |
| <button class="bg-black text-white font-bold py-3 px-6 rounded-full w-full hover:bg-pink-600 transition duration-300 mb-3">ADD TO CART</button> | |
| <button class="border border-black text-black font-bold py-3 px-6 rounded-full w-full hover:bg-gray-100 transition duration-300">ADD TO WISHLIST</button> | |
| </div> | |
| <div class="border-t pt-4"> | |
| <h4 class="font-medium mb-2">THE DEETS:</h4> | |
| <ul class="list-disc pl-5 text-sm"> | |
| <li>Figure-hugging bodycon silhouette</li> | |
| <li>Spaghetti straps with square neckline</li> | |
| <li>Mid-thigh length</li> | |
| <li>95% Polyester, 5% Spandex</li> | |
| <li>Machine wash cold, hang to dry</极速赛车开奖直播官网> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 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> | |
| <h3 class="text-xl font-bold mb-4">CUSTOMER SERVICE</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-pink-400">Contact Us</a></li> | |
| <li><a href="#" class="hover:text-pink-400">FAQs</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Shipping Info</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Returns & Exchanges</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Track Order</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">ABOUT US</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-pink-400">Our Story</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Careers</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Blog</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Influencers</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Sustainability</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">SHOP</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-pink-400">New Arrivals</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Bestsellers</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Sale</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Curve + Plus</a></li> | |
| <li><a href="#" class="hover:text-pink-400">Gift Cards</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">JOIN OUR NOVA FAM</h3> | |
| <p class="mb-4">Get exclusive offers, styling tips, and first access to new drops!</p> | |
| <div class="flex mb-4"> | |
| <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l focus:outline-none w-full"> | |
| <button class="bg-pink-600 hover:bg-pink-700 px-4 py-2 rounded-r">SIGN UP</button> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-pink-400"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="hover:text-pink-400"><i class="fab fa-tiktok text-xl"></i></a> | |
| <a href="#" class="hover:text-pink-400"><i class="fab fa-facebook text-xl"></i></a> | |
| <a href="#" class="hover:text-pink-400"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="hover:text-pink-400"><i class="fab fa-pinterest text-xl"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2023 NovaStyle. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-pink-400">Privacy Policy</a> | |
| <a href="#" class="hover:text-pink-400">Terms of Service</a> | |
| <a href="#" class="hover:text-pink-400">Accessibility</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Sample product data | |
| const products = [ | |
| { | |
| id: 1, | |
| name: "Caught Feelings Bodycon Dress", | |
| price: 39.99, | |
| stock: 42, | |
| status: "active", | |
| category: "dresses", | |
| image: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?ixlib=rb-4.0.3&ixid=M3wxMjA3极速赛车开奖直播官网fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", | |
| description: "Figure-hugging bodycon silhouette with spaghetti straps and square neckline." | |
| }, | |
| { | |
| id: 2, | |
| name: "Main Character Energy Crop Top", | |
| price: 24.99, | |
| stock: 18, | |
| status: "active", | |
| category: "tops", | |
| image: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1935&q=80", | |
| description: "Trendy crop top perfect for making you feel like the main character." | |
| }, | |
| { | |
| id: 3, | |
| name: "Beach Babe One-Piece Swimsuit", | |
| price: 49.99, | |
| stock: 7, | |
| status: "active", | |
| category: "swimwear", | |
| image: "https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80", | |
| description: "Flattering one-piece swimsuit with cheeky cut and adjustable straps." | |
| }, | |
| { | |
| id: 4, | |
| name: "Night Out Jumpsuit", | |
| price: 59.99, | |
| stock: 0, | |
| status: "draft", | |
| category: "sets", | |
| image: "https://images.unsplash.com/photo-1556905055-8f358a7a4b2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80", | |
| description: "Sleek black jumpsuit perfect for a night out with friends." | |
| } | |
| ]; | |
| // Admin credentials | |
| const ADMIN_CREDENTIALS = { | |
| username: "admin", | |
| password: "admin123" | |
| }; | |
| // Initialize the page | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderProductList(); | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Quick view modal | |
| const quickViewButtons = document.querySelectorAll('.quick-view button'); | |
| const quickViewModal = document.getElementById('quick-view-modal'); | |
| quickViewButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| showQuickViewModal(); | |
| }); | |
| }); | |
| // Color swatch selection | |
| const colorSwatches = document.querySelectorAll('.color-swatch'); | |
| colorSwatches.forEach(swatch => { | |
| swatch.addEventListener('click', function() { | |
| // Remove active class from all swatches in this group | |
| const parent = this.parentElement; | |
| parent.querySelectorAll('.color-swatch').forEach(s => { | |
| s.classList.remove('active'); | |
| }); | |
| // Add active class to clicked swatch | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Size selection | |
| const sizeOptions = document.querySelectorAll('.size-option:not(.disabled)'); | |
| sizeOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove active class from all options in this group | |
| const parent = this.parentElement; | |
| parent.querySelectorAll('.size-option').forEach(o => { | |
| o.classList.remove('active'); | |
| }); | |
| // Add active class to clicked option | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Add product form submission | |
| document.getElementById('add-product-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| addNewProduct(); | |
| }); | |
| // Admin login form submission | |
| document.getElementById('admin-login-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const username = document.getElementById('admin-username').value; | |
| const password = document.getElementById('admin-password').value; | |
| if (username === ADMIN_CREDENTIALS.username && password === ADMIN_CREDENTIALS.password) { | |
| hideAdminLoginModal(); | |
| showAdminPage(true); | |
| } else { | |
| alert('Invalid credentials. Please try again.'); | |
| } | |
| }); | |
| }); | |
| // Show admin login modal | |
| function showAdminLoginModal() { | |
| document.getElementById('admin-login-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Hide admin login modal | |
| function hideAdminLoginModal() { | |
| document.getElementById('admin-login-modal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Show quick view modal | |
| function showQuickViewModal() { | |
| document.getElementById('quick-view-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Hide quick view modal | |
| function hideQuickViewModal() { | |
| document.getElementById('quick-view-modal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Render product list in admin | |
| function renderProductList() { | |
| const productList = document.getElementById('product-list'); | |
| productList.innerHTML = ''; | |
| products.forEach(product => { | |
| const statusClass = product.status === 'active' ? 'bg-green-100 text-green-800' : | |
| product.status === 'draft' ? 'bg-yellow-100 text-yellow-800' : | |
| 'bg-gray-100 text-gray-800'; | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="${product.image}" alt="${product.name}"> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm font-medium text-gray-900">${product.name}</div> | |
| <div class="text-sm text-gray-500">${product.category}</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">$${product.price.toFixed(2)}</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">${product.stock}</div> | |
| </td> | |
| <td class="px极速赛车开奖直播官网-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusClass}"> | |
| ${product.status.charAt(0).toUpperCase() + product.status.slice(1)} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button onclick="editProduct(${product.id})" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</button> | |
| <button onclick="deleteProduct(${product.id})" class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| `; | |
| productList.appendChild(row); | |
| }); | |
| } | |
| // Add new product | |
| function addNewProduct() { | |
| const name = document.getElementById('product-name').value; | |
| const price = parseFloat(document.getElementById('product-price').value); | |
| const stock = parseInt(document.getElementById('product-stock').value); | |
| const category = document.getElementById('product-category').value; | |
| const status = document.getElementById('product-status').value; | |
| const image = document.getElementById('product-image').value || 'https://via.placeholder.com/150'; | |
| const description = document.getElementById('product-description').value; | |
| const newProduct = { | |
| id: products.length > 0 ? Math.max(...products.map(p => p.id)) + 1 : 1, | |
| name, | |
| price, | |
| stock, | |
| status, | |
| category, | |
| image, | |
| description | |
| }; | |
| products.push(newProduct); | |
| renderProductList(); | |
| hideAddProductModal(); | |
| resetAddProductForm(); | |
| } | |
| // Edit product | |
| function editProduct(id) { | |
| const product = products.find(p => p.id === id); | |
| if (product) { | |
| // In a real app, you would populate a form with the product data | |
| alert(`Editing product: ${product.name}`); | |
| } | |
| } | |
| // Delete product | |
| function deleteProduct(id) { | |
| if (confirm('Are you sure you want to delete this product?')) { | |
| const index = products.findIndex(p => p.id === id); | |
| if (index !== -1) { | |
| products.splice(index, 1); | |
| renderProductList(); | |
| } | |
| } | |
| } | |
| // Show add product modal | |
| function showAddProductModal() { | |
| document.getElementById('add-product-modal').classList.remove('hidden'); | |
| document.body.style.overflow = 'hidden'; | |
| } | |
| // Hide add product modal | |
| function hideAddProductModal() { | |
| document.getElementById('add-product-modal').classList.add('hidden'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| // Reset add product form | |
| function resetAddProductForm() { | |
| document.getElementById('add-product-form').reset(); | |
| } | |
| // Show admin page | |
| function showAdminPage(show) { | |
| if (show) { | |
| document.getElementById('admin-page').classList.remove('hidden'); | |
| document.getElementById('store-page').classList.add('hidden'); | |
| } else { | |
| document.getElementById('admin-page').classList.add('hidden'); | |
| document.getElementById('store-page').classList.remove('hidden'); | |
| } | |
| } | |
| // Show different sections in admin | |
| function showSection(section) { | |
| document.getElementById('products-section').classList.add('hidden'); | |
| document.getElementById('orders-section').classList.add('hidden'); | |
| document.getElementById('customers-section').classList.add('hidden'); | |
| document.getElementById('analytics-section').classList.add('hidden'); | |
| document.getElementById(`${section}-section`).classList.remove('hidden'); | |
| // Update active nav link | |
| document.querySelectorAll('#admin-page nav a').forEach(link => { | |
| link.classList.remove('bg-gray-700'); | |
| }); | |
| event.target.classList.add('bg-gray-700'); | |
| } | |
| // Logout function | |
| function logout() { | |
| showAdminPage(false); | |
| } | |
| </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=fifine07/store" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |