Hugging Face's logo

Spaces:
fifine07
/
store
Running

App Files Community
store / index.html
fifine07's picture
fifine07
Add 1 files
5e40c4a verified
raw
history blame contribute delete
69.6 kB
 <!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 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">&#8203;</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">&#8203;</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">&#8203;</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>&copy; 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>