1474 lines
87 KiB
HTML
1474 lines
87 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 Edit Product</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>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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 href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<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>
|
|
</body>
|
|
</html>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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 href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<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>
|
|
|
|
<main class="container admin-dashboard">
|
|
<aside class="sidebar" aria-label="Admin Navigation">
|
|
<h3>Admin Panel</h3>
|
|
<ul>
|
|
<li><a href="#" aria-label="Go to Dashboard Overview">Dashboard Overview</a></li>
|
|
<li><a href="#" aria-label="Manage Product Categories">Categories</a></li>
|
|
<li><a href="#" aria-label="Manage Inventory">Inventory</a></li>
|
|
<li><a href="#" class="active" aria-label="Manage Media Assets">Image Management</a></li>
|
|
<li><a href="#" aria-label="Manage Discounts and Promotions">Promotions</a></li>
|
|
<li><a href="#" aria-label="View System Settings">Settings</a></li>
|
|
</ul>
|
|
</aside>
|
|
|
|
<section class="main-content" aria-labelledby="image-management-heading">
|
|
<div class="section-header">
|
|
<h1 id="image-management-heading">Image Management</h1>
|
|
<button type="button" aria-label="Upload New Image">Upload New Image</button>
|
|
</div>
|
|
|
|
<div class="upload-section">
|
|
<h2>Upload New Images</h2>
|
|
<p>Drag & drop images here, or click to browse files.</p>
|
|
<input type="file" id="imageUploadInput" multiple accept="image/*" aria-label="Select images to upload">
|
|
<label for="imageUploadInput" class="upload-btn" role="button" tabindex="0">Browse Files</label>
|
|
<div class="upload-preview" aria-live="polite" aria-atomic="true">
|
|
<!-- Placeholder for image previews -->
|
|
<!-- <div class="upload-preview-item">
|
|
<img src="https://via.placeholder.com/100x100?text=Preview" alt="Image preview">
|
|
<button class="remove-btn" aria-label="Remove image">x</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="form-group" style="margin-top: 25px;">
|
|
<label for="imageTags">Tags (comma-separated, e.g., ring, gold, diamond)</label>
|
|
<input type="text" id="imageTags" placeholder="Enter relevant tags for SEO and searchability" aria-label="Enter image tags">
|
|
</div>
|
|
<button type="submit" aria-label="Save Uploaded Images">Save Uploaded Images</button>
|
|
</div>
|
|
|
|
<div class="section-header" style="margin-top: 40px;">
|
|
<h2>Existing Images</h2>
|
|
<input type="text" placeholder="Search images..." style="max-width: 250px; margin-bottom: 0;" aria-label="Search existing images">
|
|
</div>
|
|
|
|
<div class="image-gallery" aria-label="Gallery of existing product images">
|
|
<!-- Image Card 1 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Gold Diamond Ring, ID: img_001">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+1" alt="High-quality image of a gold diamond ring">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_001</p>
|
|
<p><strong>File:</strong> gold-diamond-ring.jpg</p>
|
|
<p><strong>Size:</strong> 1.2 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Ring Collection</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_001">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_001">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 2 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Emerald Necklace, ID: img_002">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+2" alt="High-quality image of an emerald necklace">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_002</p>
|
|
<p><strong>File:</strong> emerald-necklace.png</p>
|
|
<p><strong>Size:</strong> 0.8 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Necklace</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_002">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_002">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 3 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Silver Bangle, ID: img_003">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+3" alt="High-quality image of a silver bangle">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_003</p>
|
|
<p><strong>File:</strong> silver-bangle.jpg</p>
|
|
<p><strong>Size:</strong> 1.5 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Bangle</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_003">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_003">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 4 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Pearl Drop Earrings, ID: img_004">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+4" alt="High-quality image of pearl drop earrings">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_004</p>
|
|
<p><strong>File:</strong> pearl-earrings.webp</p>
|
|
<p><strong>Size:</strong> 0.6 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Earrings</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_004">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_004">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 5 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Ruby Pendant, ID: img_005">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+5" alt="High-quality image of a ruby pendant">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_005</p>
|
|
<p><strong>File:</strong> ruby-pendant.jpg</p>
|
|
<p><strong>Size:</strong> 0.9 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Necklace</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_005">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_005">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 6 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Platinum Wedding Band, ID: img_006">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+6" alt="High-quality image of a platinum wedding band">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_006</p>
|
|
<p><strong>File:</strong> platinum-band.jpg</p>
|
|
<p><strong>Size:</strong> 1.1 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Ring Collection</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_006">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_006">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 7 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Sapphire Studs, ID: img_007">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+7" alt="High-quality image of sapphire stud earrings">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_007</p>
|
|
<p><strong>File:</strong> sapphire-studs.png</p>
|
|
<p><strong>Size:</strong> 0.7 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Earrings</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_007">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_007">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Image Card 8 -->
|
|
<article class="image-card" tabindex="0" aria-label="Image: Traditional Kundan Necklace, ID: img_008">
|
|
<img src="https://via.placeholder.com/200x150/f0f0f0/888?text=Image+8" alt="High-quality image of a traditional Kundan necklace">
|
|
<div class="image-info">
|
|
<p><strong>ID:</strong> img_008</p>
|
|
<p><strong>File:</strong> kundan-necklace.jpg</p>
|
|
<p><strong>Size:</strong> 2.1 MB</p>
|
|
<p><strong>Usage:</strong> Product Page - Necklace</p>
|
|
<div class="image-actions">
|
|
<button class="btn-edit" aria-label="Edit details for image img_008">Edit</button>
|
|
<button class="btn-delete" aria-label="Delete image img_008">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|
|
<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>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Variant Management (Existing)</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;770&family=Raleway:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
</html>
|
|
<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>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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" />
|
|
</head>
|
|
<body>
|
|
<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>
|
|
</body>
|
|
</html>
|
|
<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"></input><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>
|
|
<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 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>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |