2025-08-04 11:44:00 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Admin Edit Product< / title >
< link rel = "stylesheet" href = "style.css" / >
< / head >
< body >
< div class = "page-wrapper" >
2025-08-05 06:00:54 +00:00
< 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 >
2025-08-04 11:44:00 +00:00
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Product Details< / 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-details-container" aria-labelledby = "product-details-heading" >
< header class = "product-details-header" >
< h1 id = "product-details-heading" > Product Details: Exquisite Diamond Ring< / h1 >
< p > View and edit the details of this beautiful piece. All fields are pre-filled for convenience.< / p >
< / header >
< div class = "product-details-content" >
< div class = "product-image-gallery" >
< div class = "product-main-image" >
< img src = "https://via.placeholder.com/600x600/F0F0F0/888888?text=Main+Product+Image" alt = "Main image of Exquisite Diamond Ring" >
< / div >
< div class = "product-thumbnail-grid" >
< div class = "thumbnail-item active" >
< img src = "https://via.placeholder.com/150x150/F0F0F0/888888?text=Thumb+1" alt = "Thumbnail 1 of Exquisite Diamond Ring" >
< / div >
< div class = "thumbnail-item" >
< img src = "https://via.placeholder.com/150x150/F0F0F0/888888?text=Thumb+2" alt = "Thumbnail 2 of Exquisite Diamond Ring" >
< / div >
< div class = "thumbnail-item" >
< img src = "https://via.placeholder.com/150x150/F0F0F0/888888?text=Thumb+3" alt = "Thumbnail 3 of Exquisite Diamond Ring" >
< / div >
< div class = "thumbnail-item" >
< img src = "https://via.placeholder.com/150x150/F0F0F0/888888?text=Thumb+4" alt = "Thumbnail 4 of Exquisite Diamond Ring" >
< / div >
< / div >
< / div >
< form class = "product-details-form" aria-label = "Product Details Form" >
< h2 > Product Information< / h2 >
< fieldset >
< legend > General Details< / legend >
< div class = "form-group" >
< label for = "product-name" > Product Name< / label >
< input type = "text" id = "product-name" name = "product-name" value = "Exquisite Diamond Ring" required = "" >
< / div >
< div class = "form-group" >
< label for = "product-category" > Category< / label >
< select id = "product-category" name = "product-category" required = "" >
< option value = "rings" selected = "" > Rings< / option >
< option value = "necklaces" > Necklaces< / option >
< option value = "bangles" > Bangles< / option >
< option value = "earrings" > Earrings< / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "product-sku" > SKU< / label >
< input type = "text" id = "product-sku" name = "product-sku" value = "DR-1001-A" readonly = "" >
< / div >
< div class = "form-group" >
< label for = "product-description" > Description< / label >
< textarea id = "product-description" name = "product-description" rows = "5" required = "" > A stunning diamond ring crafted with 18K white gold, featuring a brilliant-cut center diamond surrounded by a halo of smaller pave diamonds. Perfect for engagements or special occasions.< / textarea >
< / div >
< / fieldset >
< fieldset >
< legend > Pricing & Inventory< / legend >
< div class = "form-group" >
< label for = "product-price" > Price (INR)< / label >
< input type = "number" id = "product-price" name = "product-price" value = "150000.00" step = "0.01" min = "0" required = "" >
< / div >
< div class = "form-group" >
< label for = "product-stock" > Stock Quantity< / label >
< input type = "number" id = "product-stock" name = "product-stock" value = "5" min = "0" required = "" >
< / div >
< div class = "form-group" >
< label for = "product-status" > Status< / label >
< select id = "product-status" name = "product-status" >
< option value = "active" selected = "" > Active< / option >
< option value = "inactive" > Inactive< / option >
< option value = "draft" > Draft< / option >
< / select >
< / div >
< / fieldset >
< fieldset >
< legend > Specifications< / legend >
< div class = "form-group" >
< label for = "material" > Material< / label >
< input type = "text" id = "material" name = "material" value = "18K White Gold" required = "" >
< / div >
< div class = "form-group" >
< label for = "gemstone" > Gemstone< / label >
< input type = "text" id = "gemstone" name = "gemstone" value = "Diamond" required = "" >
< / div >
< div class = "form-group" >
< label for = "weight" > Weight (grams)< / label >
< input type = "number" id = "weight" name = "weight" value = "3.5" step = "0.1" min = "0" required = "" >
< / div >
< div class = "form-group" >
< label for = "size" > Available Sizes< / label >
< input type = "text" id = "size" name = "size" value = "6, 7, 8, 9" placeholder = "e.g., S, M, L or 6, 7, 8" required = "" >
< / div >
< / fieldset >
< div class = "product-action-buttons" >
< button type = "button" class = "btn-secondary" > Cancel< / button >
< button type = "submit" class = "btn-primary" > Save Changes< / button >
< / div >
< / form >
< / div >
< / section >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Image Management - Admin Panel< / 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" / >
< header class = "header" >
< div class = "logo" > JewelCraft< / div >
< nav >
< ul >
< li > < a href = "#" aria-label = "Go to Admin Dashboard" > Dashboard< / a > < / li >
< li > < a href = "#" aria-label = "Manage Products" > Products< / a > < / li >
< li > < a href = "#" class = "active" aria-label = "Manage Images" > Images< / a > < / li >
< li > < a href = "#" aria-label = "View Orders" > Orders< / a > < / li >
< li > < a href = "#" aria-label = "Manage Users" > Users< / a > < / li >
< li > < a href = "#" aria-label = "Logout" > Logout< / a > < / li >
< / ul >
< / nav >
< / header >
< div class = "container" >
< header >
< h1 > Variant Management (Existing)< / h1 >
< / header >
< section class = "variant-list" >
< div class = "section-header" >
< h2 > Product Variants Overview< / h2 >
< a href = "#add-new-variant" class = "btn" > Add New Variant< / a >
< / div >
< div class = "search-filter-bar" >
< input type = "search" placeholder = "Search by variant name, SKU..." aria-label = "Search variants" >
< select aria-label = "Filter by Product" >
< option value = "" > Filter by Product...< / option >
< option value = "ring-1" > Classic Diamond Ring< / option >
< option value = "necklace-2" > Gold Chain Necklace< / option >
< option value = "bangle-3" > Traditional Gold Bangle< / option >
< option value = "earring-4" > Pearl Drop Earrings< / option >
< option value = "ring-5" > Solitaire Engagement Ring< / option >
< / select >
< select aria-label = "Filter by Status" >
< option value = "" > Filter by Status...< / option >
< option value = "active" > Active< / option >
< option value = "inactive" > Inactive< / option >
< option value = "outofstock" > Out of Stock< / option >
< / select >
< button type = "button" class = "btn" > Apply Filters< / button >
< / div >
< div class = "table-responsive" >
< table class = "variant-table" >
< thead >
< tr >
< th > ID< / th >
< th > Product Name< / th >
< th > Variant Name< / th >
< th > SKU< / th >
< th > Price< / th >
< th > Stock< / th >
< th > Status< / th >
< th > Actions< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > #001< / td >
< td > Classic Diamond Ring< / td >
< td > Size 7, 18K Gold, 0.5ct< / td >
< td > CDR-S7-G18-05< / td >
< td > ₹55,000< / td >
< td > 15< / td >
< td > Active< / td >
< td class = "actions" >
< a href = "#edit-variant-001" class = "btn-icon" aria-label = "Edit variant #001" > Edit< / a >
< a href = "#view-variant-001" class = "btn-icon" aria-label = "View variant #001" > View< / a >
< button class = "btn-icon" aria-label = "Delete variant #001" > Delete< / button >
< / td >
< / tr >
< tr >
< td > #002< / td >
< td > Classic Diamond Ring< / td >
< td > Size 8, 18K Gold, 0.5ct< / td >
< td > CDR-S8-G18-05< / td >
< td > ₹55,000< / td >
< td > 8< / td >
< td > Active< / td >
< td class = "actions" >
< a href = "#edit-variant-002" class = "btn-icon" aria-label = "Edit variant #002" > Edit< / a >
< a href = "#view-variant-002" class = "btn-icon" aria-label = "View variant #002" > View< / a >
< button class = "btn-icon" aria-label = "Delete variant #002" > Delete< / button >
< / td >
< / tr >
< tr >
< td > #003< / td >
< td > Gold Chain Necklace< / td >
< td > 20-inch, Yellow Gold< / td >
< td > GCN-20-YG< / td >
< td > ₹32,500< / td >
< td > 0< / td >
< td > Out of Stock< / td >
< td class = "actions" >
< a href = "#edit-variant-003" class = "btn-icon" aria-label = "Edit variant #003" > Edit< / a >
< a href = "#view-variant-003" class = "btn-icon" aria-label = "View variant #003" > View< / a >
< button class = "btn-icon" aria-label = "Delete variant #003" > Delete< / button >
< / td >
< / tr >
< tr >
< td > #004< / td >
< td > Traditional Gold Bangle< / td >
< td > Small, Matte Finish< / td >
< td > TGB-S-M< / td >
< td > ₹78,000< / td >
< td > 5< / td >
< td > Active< / td >
< td class = "actions" >
< a href = "#edit-variant-004" class = "btn-icon" aria-label = "Edit variant #004" > Edit< / a >
< a href = "#view-variant-004" class = "btn-icon" aria-label = "View variant #004" > View< / a >
< button class = "btn-icon" aria-label = "Delete variant #004" > Delete< / button >
< / td >
< / tr >
< tr >
< td > #005< / td >
< td > Pearl Drop Earrings< / td >
< td > Silver, Freshwater Pearl< / td >
< td > PDE-S-FP< / td >
< td > ₹12,000< / td >
< td > 22< / td >
< td > Active< / td >
< td class = "actions" >
< a href = "#edit-variant-005" class = "btn-icon" aria-label = "Edit variant #005" > Edit< / a >
< a href = "#view-variant-005" class = "btn-icon" aria-label = "View variant #005" > View< / a >
< button class = "btn-icon" aria-label = "Delete variant #005" > Delete< / button >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< nav class = "pagination" aria-label = "Variant page navigation" >
< a href = "#" aria-label = "Previous page" > Previous< / a >
< a href = "#" class = "active" aria-current = "page" > 1< / a >
< a href = "#" > 2< / a >
< a href = "#" > 3< / a >
< a href = "#" aria-label = "Next page" > Next< / a >
< / nav >
< / section >
< section id = "add-new-variant" >
< h2 > Add New Product Variant< / h2 >
< div class = "variant-detail-card" >
< form >
< div class = "form-group" >
< label for = "product-select" > Select Product:< / label >
< select id = "product-select" name = "product_id" required = "" >
< option value = "" > -- Choose a Product --< / option >
< option value = "1" > Classic Diamond Ring< / option >
< option value = "2" > Gold Chain Necklace< / option >
< option value = "3" > Traditional Gold Bangle< / option >
< option value = "4" > Pearl Drop Earrings< / option >
< option value = "5" > Solitaire Engagement Ring< / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "variant-name" > Variant Name:< / label >
< input type = "text" id = "variant-name" name = "variant_name" placeholder = "e.g., Size 7, 18K Gold, 0.5ct" required = "" >
< / div >
< div class = "form-group" >
< label for = "sku" > SKU:< / label >
< input type = "text" id = "sku" name = "sku" placeholder = "Unique SKU for this variant" required = "" >
< / div >
< div class = "form-group" >
< label for = "price" > Price (₹):< / label >
< input type = "number" id = "price" name = "price" step = "0.01" min = "0" placeholder = "e.g., 55000.00" required = "" >
< / div >
< div class = "form-group" >
< label for = "stock" > Stock Quantity:< / label >
< input type = "number" id = "stock" name = "stock" min = "0" placeholder = "e.g., 15" required = "" >
< / div >
< div class = "form-group" >
< label for = "status" > Status:< / label >
< select id = "status" name = "status" required = "" >
< option value = "active" > Active< / option >
< option value = "inactive" > Inactive< / option >
< option value = "outofstock" > Out of Stock< / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "description" > Variant Description (Optional):< / label >
< textarea id = "description" name = "description" placeholder = "Any specific details for this variant..." > < / textarea >
< / div >
< div class = "button-group" >
< button type = "submit" class = "btn" > Add Variant< / button >
< button type = "reset" class = "btn btn-secondary" > Clear Form< / button >
< / div >
< / form >
< / div >
< / section >
< section id = "edit-variant-001" >
< h2 > Edit Product Variant: Classic Diamond Ring (Size 7)< / h2 >
< div class = "variant-detail-card" >
< form >
< div class = "form-group" >
< label for = "edit-product-select" > Product Name:< / label >
< input type = "text" id = "edit-product-select" value = "Classic Diamond Ring" disabled = "" >
< / div >
< div class = "form-group" >
< label for = "edit-variant-name" > Variant Name:< / label >
< input type = "text" id = "edit-variant-name" name = "variant_name" value = "Size 7, 18K Gold, 0.5ct" required = "" >
< / div >
< div class = "form-group" >
< label for = "edit-sku" > SKU:< / label >
< input type = "text" id = "edit-sku" name = "sku" value = "CDR-S7-G18-05" required = "" >
< / div >
< div class = "form-group" >
< label for = "edit-price" > Price (₹):< / label >
< input type = "number" id = "edit-price" name = "price" step = "0.01" min = "0" value = "55000.00" required = "" >
< / div >
< div class = "form-group" >
< label for = "edit-stock" > Stock Quantity:< / label >
< input type = "number" id = "edit-stock" name = "stock" min = "0" value = "15" required = "" >
< / div >
< div class = "form-group" >
< label for = "edit-status" > Status:< / label >
< select id = "edit-status" name = "status" required = "" >
< option value = "active" selected = "" > Active< / option >
< option value = "inactive" > Inactive< / option >
< option value = "outofstock" > Out of Stock< / option >
< / select >
< / div >
< div class = "form-group" >
< label for = "edit-description" > Variant Description (Optional):< / label >
< textarea id = "edit-description" name = "description" > This variant is for the Classic Diamond Ring, featuring a 0.5 carat diamond set in 18K yellow gold, specifically in Size 7.< / textarea >
< / div >
< div class = "button-group" >
< button type = "submit" class = "btn" > Update Variant< / button >
< a href = "#" class = "btn btn-secondary" > Cancel< / a >
< / div >
< / form >
< / div >
< / section >
< / div >
< footer class = "footer" >
< p > © 2023 JewelCraft. All rights reserved. Admin Panel.< / p >
< / footer >
< script >
// Basic JavaScript for demonstration (not required for the HTML-only request, but good for context)
document.addEventListener('DOMContentLoaded', function() {
const imageUploadInput = document.getElementById('imageUploadInput');
const uploadPreview = document.querySelector('.upload-preview');
imageUploadInput.addEventListener('change', function(event) {
uploadPreview.innerHTML = ''; // Clear existing previews
const files = event.target.files;
if (files.length > 0) {
for (const file of files) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const previewItem = document.createElement('div');
previewItem.classList.add('upload-preview-item');
const img = document.createElement('img');
img.src = e.target.result;
img.alt = `Preview of ${file.name}`;
const removeBtn = document.createElement('button');
removeBtn.classList.add('remove-btn');
removeBtn.textContent = 'x';
removeBtn.setAttribute('aria-label', `Remove ${file.name}`);
removeBtn.onclick = function() {
previewItem.remove();
// In a real application, you'd also need to handle removing from a DataTransfer object or similar
};
previewItem.appendChild(img);
previewItem.appendChild(removeBtn);
uploadPreview.appendChild(previewItem);
};
reader.readAsDataURL(file);
}
}
}
});
// Example of active link styling for sidebar (can be done with server-side logic too)
const currentPath = window.location.pathname;
document.querySelectorAll('.sidebar a').forEach(link => {
if (link.href.includes('image-management') || link.classList.contains('active')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
document.querySelectorAll('.header nav a').forEach(link => {
if (link.href.includes('image-management') || link.classList.contains('active')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
< / script >
< section class = "seo-metadata-section" >
< div class = "container" >
< h2 class = "section-title" > SEO & Metadata Fields< / h2 >
< p class = "section-description" > Optimize your page for search engines and social media platforms to improve visibility and engagement.< / p >
< fieldset class = "form-fieldset basic-seo-fields" >
< legend class = "fieldset-legend" > Basic Search Engine Optimization< / legend >
< div class = "form-group" >
< label for = "seo-title" class = "form-label" > Page Title < span class = "char-recommendation" > (Recommended: 50-60 characters)< / span > < / label >
< input type = "text" id = "seo-title" name = "seo_title" class = "form-input" placeholder = "e.g., Elegant Diamond Ring - Solitaire Collection | Royal Gems" value = "Pre-filled: Solitaire Brilliance Diamond Ring | Royal Gems Fine Jewellery" >
< p class = "form-help" > This title appears in browser tabs and as the main headline in search engine results. Be concise and descriptive.< / p >
< / div >
< div class = "form-group" >
< label for = "meta-description" class = "form-label" > Meta Description < span class = "char-recommendation" > (Recommended: 150-160 characters)< / span > < / label >
< textarea id = "meta-description" name = "meta_description" class = "form-textarea" rows = "4" placeholder = "e.g., Discover our exquisite collection of [Product Name] rings, crafted with precision and passion. Shop now for timeless elegance." > Pre-filled: Discover the captivating Solitaire Brilliance Diamond Ring, handcrafted with exceptional precision. A timeless symbol of love, exclusively from Royal Gems Fine Jewellery.< / textarea >
< p class = "form-help" > A brief summary of the page content. This is often displayed under the title in search results.< / p >
< / div >
< div class = "form-group" >
< label for = "url-handle" class = "form-label" > URL Handle / Slug< / label >
< input type = "text" id = "url-handle" name = "url_handle" class = "form-input" placeholder = "e.g., elegant-diamond-ring-solitaire-collection" value = "pre-filled-solitaire-brilliance-diamond-ring" >
< p class = "form-help" > A clean, descriptive, and unique URL path for this page. Automatically generated if left empty.< / p >
< / div >
< div class = "form-group" >
< label for = "meta-keywords" class = "form-label" > Meta Keywords (Optional)< / label >
< input type = "text" id = "meta-keywords" name = "meta_keywords" class = "form-input" placeholder = "e.g., diamond ring, solitaire ring, engagement ring, luxury jewellery" value = "pre-filled: diamond ring, solitaire, engagement, luxury jewellery, royal gems" >
< p class = "form-help" > Comma-separated keywords relevant to your content. Less critical for SEO ranking but can be helpful for internal site search.< / p >
< / div >
< / fieldset >
< fieldset class = "form-fieldset social-media-og-fields" >
< legend class = "fieldset-legend" > Social Media Sharing (Open Graph Settings)< / legend >
< p class = "fieldset-description" > Control how this page appears when shared on social media platforms like Facebook, Twitter, and LinkedIn.< / p >
< div class = "form-group" >
< label for = "og-title" class = "form-label" > OG Title< / label >
< input type = "text" id = "og-title" name = "og_title" class = "form-input" placeholder = "e.g., Royal Gems: Elegant Diamond Ring" value = "Pre-filled: Royal Gems: Solitaire Brilliance Diamond Ring" >
< p class = "form-help" > The title displayed when the page is shared on social media. Defaults to Page Title if empty.< / p >
< / div >
< div class = "form-group" >
< label for = "og-description" class = "form-label" > OG Description< / label >
< textarea id = "og-description" name = "og_description" class = "form-textarea" rows = "3" placeholder = "e.g., Discover our exquisite collection of [Product Name] rings, crafted with precision and passion." > Pre-filled: Explore the stunning Solitaire Brilliance Diamond Ring. A timeless symbol of elegance and everlasting love, exclusively from Royal Gems Fine Jewellery.< / textarea >
< p class = "form-help" > The description displayed when the page is shared. Defaults to Meta Description if empty.< / p >
< / div >
< div class = "form-group" >
< label for = "og-image-url" class = "form-label" > OG Image URL< / label >
< input type = "url" id = "og-image-url" name = "og_image_url" class = "form-input" placeholder = "e.g., https://yourstore.com/images/product-name-og.jpg" value = "pre-filled: https://royal-gems.com/images/solitaire-brilliance-og.jpg" >
< p class = "form-help" > Direct URL to an image for social media shares. Recommended dimensions: 1200x630px for optimal display.< / p >
< / div >
< / fieldset >
< div class = "form-actions" >
< button type = "button" class = "button button-primary" > Save SEO Settings< / button >
< button type = "button" class = "button button-secondary" > Generate Defaults< / button >
< button type = "button" class = "button button-tertiary" > Live SEO Preview< / button >
< / div >
< div class = "seo-preview-section" >
< h3 class = "sub-section-title" > Live Preview Snippets< / h3 >
< div class = "preview-card search-engine-preview" >
< h4 class = "preview-card-title" > Google Search Result Preview< / h4 >
< div class = "search-result-snippet" >
< span class = "search-result-url" > https://royal-gems.com/< span class = "dynamic-slug" > pre-filled-solitaire-brilliance-diamond-ring< / span > < / span >
< h5 class = "search-result-title" > Pre-filled: Solitaire Brilliance Diamond Ring | Royal Gems Fine Jewellery< / h5 >
< p class = "search-result-description" > Pre-filled: Discover the captivating Solitaire Brilliance Diamond Ring, handcrafted with exceptional precision. A timeless symbol of love, exclusively from Royal Gems Fine Jewellery.< / p >
< / div >
< / div >
< div class = "preview-card social-share-preview" >
< h4 class = "preview-card-title" > Facebook Share Preview< / h4 >
< div class = "social-share-snippet" >
< img src = "https://via.placeholder.com/1200x630/cccccc/ffffff?text=OG+Image+Preview" alt = "Social Media Share Image Placeholder" class = "social-share-image" >
< div class = "social-share-text-content" >
< p class = "social-share-domain" > royal-gems.com< / p >
< h5 class = "social-share-title" > Pre-filled: Royal Gems: Solitaire Brilliance Diamond Ring< / h5 >
< p class = "social-share-description" > Pre-filled: Explore the stunning Solitaire Brilliance Diamond Ring. A timeless symbol of elegance and everlasting love, exclusively from Royal Gems Fine Jewellery.< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Variant Management (Existing)< / title >
< link rel = "stylesheet" href = "style.css" / >
< link rel = "stylesheet" href = "style.css" / >
< section class = "section-actions" >
< div class = "container action-buttons-wrapper" >
< button type = "submit" class = "button button-primary" > Update Details< / button >
< button type = "button" class = "button button-secondary" > Cancel< / button >
< / div >
< / section >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Product Status Toggle - Admin< / title >
< link rel = "stylesheet" href = "style.css" / >
< section class = "admin-section" >
< h2 > Product Status Toggle< / h2 >
< div class = "product-toggle-container" >
<!-- Product Toggle Card 1 -->
< article class = "product-toggle-card" >
< img src = "https://via.placeholder.com/150/f0f0f0/666666?text=Necklace" alt = "Elegant Diamond Necklace" class = "product-toggle-card__image" >
< div class = "product-toggle-card__details" >
< h3 > Elegant Diamond Necklace< / h3 >
< p > SKU: NK001 | Category: Necklaces< / p >
< / div >
< div class = "product-toggle-card__toggle" >
< label for = "toggle-nk001" > Available:< / label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-nk001" checked = "" >
< span class = "slider" > < / span >
< / label >
< / div >
< / article >
<!-- Product Toggle Card 2 -->
< article class = "product-toggle-card" >
< img src = "https://via.placeholder.com/150/f0f0f0/666666?text=Ring" alt = "Classic Gold Ring" class = "product-toggle-card__image" >
< div class = "product-toggle-card__details" >
< h3 > Classic Gold Ring< / h3 >
< p > SKU: RG005 | Category: Rings< / p >
< / div >
< div class = "product-toggle-card__toggle" >
< label for = "toggle-rg005" > Available:< / label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-rg005" >
< span class = "slider" > < / span >
< / label >
< / div >
< / article >
<!-- Product Toggle Card 3 -->
< article class = "product-toggle-card" >
< img src = "https://via.placeholder.com/150/f0f0f0/666666?text=Earrings" alt = "Pearl Drop Earrings" class = "product-toggle-card__image" >
< div class = "product-toggle-card__details" >
< h3 > Pearl Drop Earrings< / h3 >
< p > SKU: ER010 | Category: Earrings< / p >
< / div >
< div class = "product-toggle-card__toggle" >
< label for = "toggle-er010" > Available:< / label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-er010" checked = "" >
< span class = "slider" > < / span >
< / label >
< / div >
< / article >
<!-- Product Toggle Card 4 -->
< article class = "product-toggle-card" >
< img src = "https://via.placeholder.com/150/f0f0f0/666666?text=Bangle" alt = "Traditional Silver Bangle" class = "product-toggle-card__image" >
< div class = "product-toggle-card__details" >
< h3 > Traditional Silver Bangle< / h3 >
< p > SKU: BG003 | Category: Bangles< / p >
< / div >
< div class = "product-toggle-card__toggle" >
< label for = "toggle-bg003" > Available:< / label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-bg003" checked = "" >
< span class = "slider" > < / span >
< / label >
< / div >
< / article >
<!-- Product Toggle Card 5 -->
< article class = "product-toggle-card" >
< img src = "https://via.placeholder.com/150/f0f0f0/666666?text=Pendant" alt = "Emerald Gold Pendant" class = "product-toggle-card__image" >
< div class = "product-toggle-card__details" >
< h3 > Emerald Gold Pendant< / h3 >
< p > SKU: PD007 | Category: Pendants< / p >
< / div >
< div class = "product-toggle-card__toggle" >
< label for = "toggle-pd007" > Available:< / label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-pd007" >
< span class = "slider" > < / span >
< / label >
< / div >
< / article >
<!-- Product Toggle Card 6 -->
< article class = "product-toggle-card" >
< img src = "https://via.placeholder.com/150/f0f0f0/666666?text=Bracelet" alt = "Minimalist Chain Bracelet" class = "product-toggle-card__image" >
< div class = "product-toggle-card__details" >
< h3 > Minimalist Chain Bracelet< / h3 >
< p > SKU: BR012 | Category: Bracelets< / p >
< / div >
< div class = "product-toggle-card__toggle" >
< label for = "toggle-br012" > Available:< / label >
< label class = "switch" >
< input type = "checkbox" id = "toggle-br012" checked = "" >
< span class = "slider" > < / span >
< / label >
< / div >
< / article >
< / 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 >
2025-08-05 06:00:54 +00:00
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Product Details< / 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" / >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Image Management - Admin Panel< / 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" / >
< script >
// Basic JavaScript for demonstration (not required for the HTML-only request, but good for context)
document.addEventListener('DOMContentLoaded', function() {
const imageUploadInput = document.getElementById('imageUploadInput');
const uploadPreview = document.querySelector('.upload-preview');
imageUploadInput.addEventListener('change', function(event) {
uploadPreview.innerHTML = ''; // Clear existing previews
const files = event.target.files;
if (files.length > 0) {
for (const file of files) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const previewItem = document.createElement('div');
previewItem.classList.add('upload-preview-item');
const img = document.createElement('img');
img.src = e.target.result;
img.alt = `Preview of ${file.name}`;
const removeBtn = document.createElement('button');
removeBtn.classList.add('remove-btn');
removeBtn.textContent = 'x';
removeBtn.setAttribute('aria-label', `Remove ${file.name}`);
removeBtn.onclick = function() {
previewItem.remove();
// In a real application, you'd also need to handle removing from a DataTransfer object or similar
};
previewItem.appendChild(img);
previewItem.appendChild(removeBtn);
uploadPreview.appendChild(previewItem);
};
reader.readAsDataURL(file);
}
}
}
});
// Example of active link styling for sidebar (can be done with server-side logic too)
const currentPath = window.location.pathname;
document.querySelectorAll('.sidebar a').forEach(link => {
if (link.href.includes('image-management') || link.classList.contains('active')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
document.querySelectorAll('.header nav a').forEach(link => {
if (link.href.includes('image-management') || link.classList.contains('active')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
< / script >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Variant Management (Existing)< / title >
< 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 > Product Status Toggle - Admin< / title >
< link rel = "stylesheet" href = "style.css" / >
2025-08-04 11:44:00 +00:00
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
< / script >
< / body >
< / html >
