426 lines
26 KiB
HTML
426 lines
26 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Product Management</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Radiance Jewels</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_catalog.html">Product Catalog</a></li><li><a href="shopping_cart.html">Shopping Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="login.html">Login</a></li><li><a href="dashboard.html">Dashboard</a></li><li><a href="order_history.html">Order History</a></li><li><a href="user_profile.html">User Profile</a></li><li><a href="sign_up.html">Sign Up</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product List</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="product-list-section section-padding">
|
|
<div class="container">
|
|
<header class="product-list-header text-center">
|
|
<h2>Our Exquisite Collection</h2>
|
|
<p>Discover timeless elegance and unparalleled craftsmanship.</p>
|
|
</header>
|
|
|
|
<div class="product-list-table-wrapper">
|
|
<table class="product-list-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="product-image-cell">Image</th>
|
|
<th>Product Name</th>
|
|
<th>Category</th>
|
|
<th>Price</th>
|
|
<th>Description</th>
|
|
<th class="actions-cell">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="product-image-cell">
|
|
<img src="https://via.placeholder.com/100x100?text=Gold+Ring" alt="Elegant Gold Diamond Ring" class="product-image">
|
|
</td>
|
|
<td><span class="product-title">Elegant Gold Diamond Ring</span></td>
|
|
<td>Rings</td>
|
|
<td><span class="product-price">₹ 75,000.00</span></td>
|
|
<td><span class="product-description">A stunning 18K gold ring with a brilliant-cut diamond. Perfect for any occasion.</span></td>
|
|
<td class="actions-cell">
|
|
<a href="#" class="btn btn-view">View Details</a>
|
|
<a href="#" class="btn btn-add-to-cart">Add to Cart</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="product-image-cell">
|
|
<img src="https://via.placeholder.com/100x100?text=Pearl+Necklace" alt="Classic Pearl Strand Necklace" class="product-image">
|
|
</td>
|
|
<td><span class="product-title">Classic Pearl Strand Necklace</span></td>
|
|
<td>Necklaces</td>
|
|
<td><span class="product-price">₹ 42,500.00</span></td>
|
|
<td><span class="product-description">Timeless freshwater pearls hand-knotted on a silk thread.</span></td>
|
|
<td class="actions-cell">
|
|
<a href="#" class="btn btn-view">View Details</a>
|
|
<a href="#" class="btn btn-add-to-cart">Add to Cart</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="product-image-cell">
|
|
<img src="https://via.placeholder.com/100x100?text=Silver+Bangle" alt="Sterling Silver Filigree Bangle" class="product-image">
|
|
</td>
|
|
<td><span class="product-title">Sterling Silver Filigree Bangle</span></td>
|
|
<td>Bangles</td>
|
|
<td><span class="product-price">₹ 18,200.00</span></td>
|
|
<td><span class="product-description">Intricately designed sterling silver bangle with traditional filigree work.</span></td>
|
|
<td class="actions-cell">
|
|
<a href="#" class="btn btn-view">View Details</a>
|
|
<a href="#" class="btn btn-add-to-cart">Add to Cart</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="product-image-cell">
|
|
<img src="https://via.placeholder.com/100x100?text=Emerald+Earrings" alt="Emerald Drop Earrings" class="product-image">
|
|
</td>
|
|
<td><span class="product-title">Emerald Drop Earrings</span></td>
|
|
<td>Earrings</td>
|
|
<td><span class="product-price">₹ 58,000.00</span></td>
|
|
<td><span class="product-description">Exquisite drop earrings featuring vibrant emeralds set in white gold.</span></td>
|
|
<td class="actions-cell">
|
|
<a href="#" class="btn btn-view">View Details</a>
|
|
<a href="#" class="btn btn-add-to-cart">Add to Cart</a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="product-image-cell">
|
|
<img src="https://via.placeholder.com/100x100?text=Mens+Ring" alt="Men's Platinum Band" class="product-image">
|
|
</td>
|
|
<td><span class="product-title">Men's Platinum Wedding Band</span></td>
|
|
<td>Rings</td>
|
|
<td><span class="product-price">₹ 95,000.00</span></td>
|
|
<td><span class="product-description">Solid platinum band with a brushed finish, perfect for daily wear.</span></td>
|
|
<td class="actions-cell">
|
|
<a href="#" class="btn btn-view">View Details</a>
|
|
<a href="#" class="btn btn-add-to-cart">Add to Cart</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="product-filter-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Explore Our Exquisite Collection</h2>
|
|
|
|
<div class="search-filter-controls">
|
|
<div class="search-bar">
|
|
<form action="#" method="get" role="search">
|
|
<label for="search-input" class="sr-only">Search products</label>
|
|
<input type="search" id="search-input" name="q" placeholder="Search for rings, necklaces, or more..." class="search-input">
|
|
<button type="submit" class="search-button" aria-label="Perform search">
|
|
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="filter-sort-wrapper">
|
|
<div class="filter-panel">
|
|
<form action="#" method="get" class="filter-form">
|
|
<h3 class="filter-heading">Filters</h3>
|
|
|
|
<fieldset class="filter-group category-filter">
|
|
<legend class="filter-group-title">Category</legend>
|
|
<ul class="filter-options-list">
|
|
<li>
|
|
<input type="checkbox" id="cat-rings" name="category" value="rings">
|
|
<label for="cat-rings">Rings</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="cat-necklaces" name="category" value="necklaces">
|
|
<label for="cat-necklaces">Necklaces</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="cat-bangles" name="category" value="bangles">
|
|
<label for="cat-bangles">Bangles</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="cat-earrings" name="category" value="earrings">
|
|
<label for="cat-earrings">Earrings</label>
|
|
</li>
|
|
</ul>
|
|
</fieldset>
|
|
|
|
<fieldset class="filter-group price-filter">
|
|
<legend class="filter-group-title">Price Range</legend>
|
|
<div class="price-range-inputs">
|
|
<label for="min-price" class="sr-only">Minimum price</label>
|
|
<input type="number" id="min-price" name="min_price" placeholder="Min" min="0" value="0">
|
|
<span class="price-separator">-</span>
|
|
<label for="max-price" class="sr-only">Maximum price</label>
|
|
<input type="number" id="max-price" name="max_price" placeholder="Max">
|
|
</div>
|
|
<input type="range" id="price-slider" name="price_range_slider" min="0" max="500000" value="0" class="price-slider" aria-label="Price range slider">
|
|
<div class="price-range-labels">
|
|
<span>₹0</span>
|
|
<span>₹500,000+</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="filter-group material-filter">
|
|
<legend class="filter-group-title">Material</legend>
|
|
<ul class="filter-options-list">
|
|
<li>
|
|
<input type="checkbox" id="mat-gold" name="material" value="gold">
|
|
<label for="mat-gold">Gold</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="mat-diamond" name="material" value="diamond">
|
|
<label for="mat-diamond">Diamond</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="mat-silver" name="material" value="silver">
|
|
<label for="mat-silver">Silver</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="mat-platinum" name="material" value="platinum">
|
|
<label for="mat-platinum">Platinum</label>
|
|
</li>
|
|
</ul>
|
|
</fieldset>
|
|
|
|
<button type="submit" class="apply-filters-button">Apply Filters</button>
|
|
<button type="reset" class="clear-filters-button">Clear All</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="sort-options">
|
|
<label for="sort-by" class="sort-label">Sort By:</label>
|
|
<select id="sort-by" name="sort_by" class="sort-select">
|
|
<option value="relevance">Relevance</option>
|
|
<option value="price-asc">Price: Low to High</option>
|
|
<option value="price-desc">Price: High to Low</option>
|
|
<option value="newest">Newest Arrivals</option>
|
|
<option value="popularity">Popularity</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="product-results-grid-placeholder">
|
|
<p>Your search and filter results will appear here.</p>
|
|
<div class="placeholder-product-cards">
|
|
<div class="placeholder-card"></div>
|
|
<div class="placeholder-card"></div>
|
|
<div class="placeholder-card"></div>
|
|
<div class="placeholder-card"></div>
|
|
<div class="placeholder-card"></div>
|
|
<div class="placeholder-card"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="admin-product-actions-section">
|
|
<div class="container">
|
|
<h2 class="section-heading">Product Management</h2>
|
|
<p class="section-description">Effortlessly manage your jewelry product listings. Use the button below to add new items to your catalog.</p>
|
|
<div class="add-product-button-wrapper">
|
|
<a href="/admin/products/new" class="btn btn-primary add-new-product-btn" aria-label="Add New Product">
|
|
<span class="button-icon">+</span> Add New Product
|
|
</a>
|
|
<p class="wireframe-note">Clicking this button will navigate you to the new product creation form.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bulk Actions Options</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="bulk-actions-section" aria-labelledby="bulkActionsHeading">
|
|
<h2 id="bulkActionsHeading">Bulk Actions Options</h2>
|
|
|
|
<div class="bulk-actions-controls">
|
|
<label class="checkbox-all">
|
|
<input type="checkbox" id="selectAllItems">
|
|
Select All Items
|
|
</label>
|
|
|
|
<div class="bulk-action-dropdown">
|
|
<label for="bulkActionSelect" class="sr-only">Choose a bulk action</label>
|
|
<select id="bulkActionSelect">
|
|
<option value="">Choose an action...</option>
|
|
<option value="delete">Delete Selected</option>
|
|
<option value="archive">Archive Selected</option>
|
|
<option value="change_category">Change Category</option>
|
|
<option value="mark_featured">Mark as Featured</option>
|
|
<option value="update_price">Update Price (Bulk)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button type="button">Apply Action</button>
|
|
</div>
|
|
|
|
<div class="items-list">
|
|
<article class="item-card" aria-labelledby="itemTitle1">
|
|
<div class="item-checkbox">
|
|
<input type="checkbox" id="item1">
|
|
<label for="item1" class="sr-only">Select Necklace with Pearl</label>
|
|
</div>
|
|
<img src="https://via.placeholder.com/100x100/F0E6D2/A08A5E?text=Necklace" alt="Elegant Pearl Necklace" class="item-image">
|
|
<div class="item-details">
|
|
<h3 id="itemTitle1">Elegant Pearl Necklace</h3>
|
|
<p>SKU: NK001 | Category: Necklaces</p>
|
|
</div>
|
|
<div class="item-price">₹12,500</div>
|
|
</article>
|
|
|
|
<article class="item-card" aria-labelledby="itemTitle2">
|
|
<div class="item-checkbox">
|
|
<input type="checkbox" id="item2">
|
|
<label for="item2" class="sr-only">Select Diamond Engagement Ring</label>
|
|
</div>
|
|
<img src="https://via.placeholder.com/100x100/F0E6D2/A08A5E?text=Ring" alt="Classic Diamond Engagement Ring" class="item-image">
|
|
<div class="item-details">
|
|
<h3 id="itemTitle2">Diamond Engagement Ring</h3>
|
|
<p>SKU: RG005 | Category: Rings</p>
|
|
</div>
|
|
<div class="item-price">₹85,000</div>
|
|
</article>
|
|
|
|
<article class="item-card" aria-labelledby="itemTitle3">
|
|
<div class="item-checkbox">
|
|
<input type="checkbox" id="item3">
|
|
<label for="item3" class="sr-only">Select Gold Bangle Set</label>
|
|
</div>
|
|
<img src="https://via.placeholder.com/100x100/F0E6D2/A08A5E?text=Bangle" alt="Traditional Gold Bangle Set" class="item-image">
|
|
<div class="item-details">
|
|
<h3 id="itemTitle3">Traditional Gold Bangle Set</h3>
|
|
<p>SKU: BG010 | Category: Bangles</p>
|
|
</div>
|
|
<div class="item-price">₹45,000</div>
|
|
</article>
|
|
|
|
<article class="item-card" aria-labelledby="itemTitle4">
|
|
<div class="item-checkbox">
|
|
<input type="checkbox" id="item4">
|
|
<label for="item4" class="sr-only">Select Sapphire Drop Earrings</label>
|
|
</div>
|
|
<img src="https://via.placeholder.com/100x100/F0E6D2/A08A5E?text=Earrings" alt="Stylish Sapphire Drop Earrings" class="item-image">
|
|
<div class="item-details">
|
|
<h3 id="itemTitle4">Sapphire Drop Earrings</h3>
|
|
<p>SKU: ER003 | Category: Earrings</p>
|
|
</div>
|
|
<div class="item-price">₹28,000</div>
|
|
</article>
|
|
|
|
<article class="item-card" aria-labelledby="itemTitle5">
|
|
<div class="item-checkbox">
|
|
<input type="checkbox" id="item5">
|
|
<label for="item5" class="sr-only">Select Solitaire Pendant</label>
|
|
</div>
|
|
<img src="https://via.placeholder.com/100x100/F0E6D2/A08A5E?text=Pendant" alt="Minimalist Solitaire Pendant" class="item-image">
|
|
<div class="item-details">
|
|
<h3 id="itemTitle5">Minimalist Solitaire Pendant</h3>
|
|
<p>SKU: PN002 | Category: Necklaces</p>
|
|
</div>
|
|
<div class="item-price">₹32,000</div>
|
|
</article>
|
|
</div>
|
|
|
|
<nav class="pagination" aria-label="Bulk actions item navigation">
|
|
<button type="button" aria-label="Previous page" disabled="">Previous</button>
|
|
<span>Page 1 of 5</span>
|
|
<button type="button" aria-label="Next page">Next</button>
|
|
</nav>
|
|
</section>
|
|
<section class="inventory-summary-section">
|
|
<div class="container inventory-summary-wrapper">
|
|
<header class="section-header">
|
|
<h2 class="section-title">Inventory Summary</h2>
|
|
<p class="section-description">A concise overview of your current stock levels and product categories.</p>
|
|
</header>
|
|
|
|
<div class="inventory-cards-grid">
|
|
<!-- Card 1: Rings Inventory -->
|
|
<div class="summary-card">
|
|
<div class="summary-card-icon">[Ring Icon]</div>
|
|
<h3 class="summary-card-title">Rings</h3>
|
|
<p class="summary-card-metric">Total Stock: <span class="metric-value">150</span></p>
|
|
<p class="summary-card-metric">Low Stock: <span class="metric-value">8</span></p>
|
|
<a href="#" class="summary-card-action">View Details</a>
|
|
</div>
|
|
|
|
<!-- Card 2: Necklaces Inventory -->
|
|
<div class="summary-card">
|
|
<div class="summary-card-icon">[Necklace Icon]</div>
|
|
<h3 class="summary-card-title">Necklaces</h3>
|
|
<p class="summary-card-metric">Total Stock: <span class="metric-value">75</span></p>
|
|
<p class="summary-card-metric">Low Stock: <span class="metric-value">3</span></p>
|
|
<a href="#" class="summary-card-action">View Details</a>
|
|
</div>
|
|
|
|
<!-- Card 3: Bangles Inventory -->
|
|
<div class="summary-card">
|
|
<div class="summary-card-icon">[Bangle Icon]</div>
|
|
<h3 class="summary-card-title">Bangles</h3>
|
|
<p class="summary-card-metric">Total Stock: <span class="metric-value">50</span></p>
|
|
<p class="summary-card-metric">Low Stock: <span class="metric-value">5</span></p>
|
|
<a href="#" class="summary-card-action">View Details</a>
|
|
</div>
|
|
|
|
<!-- Card 4: Earrings Inventory -->
|
|
<div class="summary-card">
|
|
<div class="summary-card-icon">[Earring Icon]</div>
|
|
<h3 class="summary-card-title">Earrings</h3>
|
|
<p class="summary-card-metric">Total Stock: <span class="metric-value">200</span></p>
|
|
<p class="summary-card-metric">Low Stock: <span class="metric-value">10</span></p>
|
|
<a href="#" class="summary-card-action">View Details</a>
|
|
</div>
|
|
|
|
<!-- Card 5: Overall Low Stock Items -->
|
|
<div class="summary-card low-stock-alert">
|
|
<div class="summary-card-icon">[Alert Icon]</div>
|
|
<h3 class="summary-card-title">Overall Low Stock</h3>
|
|
<p class="summary-card-metric">Total Items Below Threshold: <span class="metric-value">26</span></p>
|
|
<a href="#" class="summary-card-action">View All Low Stock</a>
|
|
</div>
|
|
|
|
<!-- Card 6: Overall Out of Stock Items -->
|
|
<div class="summary-card out-of-stock-alert">
|
|
<div class="summary-card-icon">[Warning Icon]</div>
|
|
<h3 class="summary-card-title">Out of Stock Items</h3>
|
|
<p class="summary-card-metric">Items Requiring Reorder: <span class="metric-value">7</span></p>
|
|
<a href="#" class="summary-card-action">View All Out of Stock</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping & Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product List</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bulk Actions Options</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |