|
<!DOCTYPE html> |
|
<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-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"> |
|
|
|
<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> |
|
|
|
|
|
<div id="admin-page" class="hidden"> |
|
|
|
<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> |
|
|
|
|
|
<div class="flex admin-main"> |
|
|
|
<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> |
|
|
|
|
|
<div class="flex-1 p-8 bg-gray-50"> |
|
|
|
<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"> |
|
|
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<div id="store-page"> |
|
|
|
<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 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"> |
|
|
|
<div class="md:hidden"> |
|
<button id="mobile-menu-button" class="text-gray-700"> |
|
<i class="fas fa-bars text-xl"></i> |
|
</button> |
|
</div> |
|
|
|
|
|
<div class="flex-shrink-0"> |
|
<a href="#" class="text-2xl font-bold tracking-tight">NOVA<span class="text-pink-600">STYLE</span></a> |
|
</div> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<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 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> |
|
|
|
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." |
|
} |
|
]; |
|
|
|
|
|
const ADMIN_CREDENTIALS = { |
|
username: "admin", |
|
password: "admin123" |
|
}; |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
renderProductList(); |
|
|
|
|
|
document.getElementById('mobile-menu-button').addEventListener('click', function() { |
|
const menu = document.getElementById('mobile-menu'); |
|
menu.classList.toggle('hidden'); |
|
}); |
|
|
|
|
|
const quickViewButtons = document.querySelectorAll('.quick-view button'); |
|
const quickViewModal = document.getElementById('quick-view-modal'); |
|
|
|
quickViewButtons.forEach(button => { |
|
button.addEventListener('click', function() { |
|
showQuickViewModal(); |
|
}); |
|
}); |
|
|
|
|
|
const colorSwatches = document.querySelectorAll('.color-swatch'); |
|
colorSwatches.forEach(swatch => { |
|
swatch.addEventListener('click', function() { |
|
|
|
const parent = this.parentElement; |
|
parent.querySelectorAll('.color-swatch').forEach(s => { |
|
s.classList.remove('active'); |
|
}); |
|
|
|
this.classList.add('active'); |
|
}); |
|
}); |
|
|
|
|
|
const sizeOptions = document.querySelectorAll('.size-option:not(.disabled)'); |
|
sizeOptions.forEach(option => { |
|
option.addEventListener('click', function() { |
|
|
|
const parent = this.parentElement; |
|
parent.querySelectorAll('.size-option').forEach(o => { |
|
o.classList.remove('active'); |
|
}); |
|
|
|
this.classList.add('active'); |
|
}); |
|
}); |
|
|
|
|
|
document.getElementById('add-product-form').addEventListener('submit', function(e) { |
|
e.preventDefault(); |
|
addNewProduct(); |
|
}); |
|
|
|
|
|
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.'); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
function showAdminLoginModal() { |
|
document.getElementById('admin-login-modal').classList.remove('hidden'); |
|
document.body.style.overflow = 'hidden'; |
|
} |
|
|
|
|
|
function hideAdminLoginModal() { |
|
document.getElementById('admin-login-modal').classList.add('hidden'); |
|
document.body.style.overflow = 'auto'; |
|
} |
|
|
|
|
|
function showQuickViewModal() { |
|
document.getElementById('quick-view-modal').classList.remove('hidden'); |
|
document.body.style.overflow = 'hidden'; |
|
} |
|
|
|
|
|
function hideQuickViewModal() { |
|
document.getElementById('quick-view-modal').classList.add('hidden'); |
|
document.body.style.overflow = 'auto'; |
|
} |
|
|
|
|
|
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); |
|
}); |
|
} |
|
|
|
|
|
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(); |
|
} |
|
|
|
|
|
function editProduct(id) { |
|
const product = products.find(p => p.id === id); |
|
if (product) { |
|
|
|
alert(`Editing product: ${product.name}`); |
|
} |
|
} |
|
|
|
|
|
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(); |
|
} |
|
} |
|
} |
|
|
|
|
|
function showAddProductModal() { |
|
document.getElementById('add-product-modal').classList.remove('hidden'); |
|
document.body.style.overflow = 'hidden'; |
|
} |
|
|
|
|
|
function hideAddProductModal() { |
|
document.getElementById('add-product-modal').classList.add('hidden'); |
|
document.body.style.overflow = 'auto'; |
|
} |
|
|
|
|
|
function resetAddProductForm() { |
|
document.getElementById('add-product-form').reset(); |
|
} |
|
|
|
|
|
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'); |
|
} |
|
} |
|
|
|
|
|
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'); |
|
|
|
|
|
document.querySelectorAll('#admin-page nav a').forEach(link => { |
|
link.classList.remove('bg-gray-700'); |
|
}); |
|
event.target.classList.add('bg-gray-700'); |
|
} |
|
|
|
|
|
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> |
