646 lines
37 KiB
HTML
646 lines
37 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 Add 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>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Details Form - Admin</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<div class="product-details-container">
|
|
<h1>Product Details Form</h1>
|
|
<div class="form-info-message">
|
|
<p>Use this form to add a new product or edit an existing one. All fields are required to ensure complete product information for your catalog.</p>
|
|
</div>
|
|
<form action="#" method="POST">
|
|
<div class="grid-layout">
|
|
<div class="form-group">
|
|
<label for="productName">Product Name</label>
|
|
<input type="text" id="productName" name="productName" placeholder="e.g., Elegant Diamond Ring" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="category">Category</label>
|
|
<select id="category" name="category" required="">
|
|
<option value="">Select Category</option>
|
|
<option value="rings">Rings</option>
|
|
<option value="necklaces">Necklaces</option>
|
|
<option value="bangles">Bangles</option>
|
|
<option value="earrings">Earrings</option>
|
|
<option value="other">Other Jewelry</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="price">Price (INR)</label>
|
|
<input type="number" id="price" name="price" placeholder="e.g., 45000" min="0" step="0.01" required="">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="stock">Stock Quantity</label>
|
|
<input type="number" id="stock" name="stock" placeholder="e.g., 50" min="0" required="">
|
|
</div>
|
|
|
|
<div class="form-group full-width">
|
|
<label for="imageUrl">Image URL</label>
|
|
<input type="url" id="imageUrl" name="imageUrl" placeholder="e.g., https://example.com/images/diamond-ring.jpg" required="">
|
|
</div>
|
|
|
|
<div class="form-group full-width">
|
|
<label for="description">Product Description</label>
|
|
<textarea id="description" name="description" placeholder="Provide a detailed description of the product, including material, dimensions, stone details, etc." required=""></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button type="button" class="btn-secondary">Cancel</button>
|
|
<button type="submit" class="btn-primary">Save Product</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<section class="image-upload-section">
|
|
<h2 class="section-title">Upload Product Image</h2>
|
|
<div class="upload-area-container">
|
|
<label for="imageUploadInput" class="drop-zone">
|
|
<div class="drop-zone-content">
|
|
<span class="upload-icon">⬆</span>
|
|
<p class="upload-text">Drag & drop your image here or click to browse</p>
|
|
<input type="file" id="imageUploadInput" accept="image/*" class="hidden-file-input">
|
|
</div>
|
|
</label>
|
|
<div class="image-details-preview">
|
|
<h3 class="preview-heading">Image Preview</h3>
|
|
<div class="preview-box">
|
|
<img src="placeholder-image.jpg" alt="Selected image preview" class="uploaded-image-placeholder">
|
|
<p class="no-image-selected-text">No image selected yet</p>
|
|
</div>
|
|
<div class="file-info">
|
|
<p class="file-name">Filename: sample_jewelry.jpg</p>
|
|
<p class="file-size">File size: 1.5 MB</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="upload-action-buttons">
|
|
<button type="button" class="upload-button primary-button">Upload Image</button>
|
|
<button type="button" class="cancel-button secondary-button">Cancel</button>
|
|
</div>
|
|
</section>
|
|
<section class="seo-metadata-section">
|
|
<h2 class="section-title">SEO & Metadata Fields</h2>
|
|
|
|
<div class="form-container">
|
|
|
|
<fieldset class="form-group">
|
|
<legend class="group-legend">Search Engine Optimization</legend>
|
|
|
|
<div class="form-field">
|
|
<label for="seo-title" class="field-label">SEO Title</label>
|
|
<input type="text" id="seo-title" name="seo_title" class="field-input" placeholder="Enter a concise SEO title (e.g., Product Name - Category | Store Name)" maxlength="60">
|
|
<p class="field-hint">Recommended length: 50-60 characters. This appears in search results.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="meta-description" class="field-label">Meta Description</label>
|
|
<textarea id="meta-description" name="meta_description" class="field-input textarea-input" rows="4" placeholder="Craft a compelling description for search engine users (e.g., Discover our exquisite diamond rings, perfect for engagements and special occasions.)" maxlength="160"></textarea>
|
|
<p class="field-hint">Recommended length: 150-160 characters. Summarizes content for search results.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="seo-keywords" class="field-label">Keywords</label>
|
|
<input type="text" id="seo-keywords" name="seo_keywords" class="field-input" placeholder="Enter comma-separated keywords (e.g., diamond ring, gold necklace, jewelry online)">
|
|
<p class="field-hint">Less important for SEO, but can help with internal search or classification.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="url-slug" class="field-label">URL Slug / Handle</label>
|
|
<input type="text" id="url-slug" name="url_slug" class="field-input" placeholder="product-name-sku">
|
|
<p class="field-hint">A user-friendly, unique URL path (e.g., your-store.com/products/elegant-diamond-pendant).</p>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-group">
|
|
<legend class="group-legend">Social Media Sharing (Open Graph - Facebook, LinkedIn, etc.)</legend>
|
|
|
|
<div class="form-field">
|
|
<label for="og-title" class="field-label">Open Graph Title</label>
|
|
<input type="text" id="og-title" name="og_title" class="field-input" placeholder="Title that appears when shared on social media">
|
|
<p class="field-hint">Often same as SEO Title, but can be optimized for social media engagement.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="og-description" class="field-label">Open Graph Description</label>
|
|
<textarea id="og-description" name="og_description" class="field-input textarea-input" rows="3" placeholder="Description that appears when shared on social media"></textarea>
|
|
<p class="field-hint">Often same as Meta Description, or a more concise, engaging summary for social.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="og-image" class="field-label">Open Graph Image URL</label>
|
|
<input type="url" id="og-image" name="og_image" class="field-input" placeholder="https://example.com/images/share-image.jpg">
|
|
<p class="field-hint">URL of the image displayed when shared. Recommended size: 1200x630px.</p>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-group">
|
|
<legend class="group-legend">Social Media Sharing (Twitter Card)</legend>
|
|
|
|
<div class="form-field">
|
|
<label for="twitter-title" class="field-label">Twitter Card Title</label>
|
|
<input type="text" id="twitter-title" name="twitter_title" class="field-input" placeholder="Title for Twitter Card (max 70 chars)">
|
|
<p class="field-hint">Specific title for Twitter shares. Can be shorter than OG Title.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="twitter-description" class="field-label">Twitter Card Description</label>
|
|
<textarea id="twitter-description" name="twitter_description" class="field-input textarea-input" rows="3" placeholder="Description for Twitter Card (max 200 chars)"></textarea>
|
|
<p class="field-hint">Specific description for Twitter shares. Keep it concise and engaging.</p>
|
|
</div>
|
|
|
|
<div class="form-field">
|
|
<label for="twitter-image" class="field-label">Twitter Card Image URL</label>
|
|
<input type="url" id="twitter-image" name="twitter_image" class="field-input" placeholder="https://example.com/images/twitter-share.jpg">
|
|
<p class="field-hint">URL of the image displayed on Twitter. Recommended size: 120x120px (summary) or 800x418px (summary_large_image).</p>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="button button-primary">Save SEO & Metadata</button>
|
|
<button type="button" class="button button-secondary">Cancel</button>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Variant Management</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<header>
|
|
<div class="container">
|
|
<h1>Admin Panel</h1>
|
|
</div>
|
|
</header>
|
|
<nav>
|
|
<div class="container">
|
|
<ul>
|
|
<li><a href="#dashboard">Dashboard</a></li>
|
|
<li><a href="#products">Products</a></li>
|
|
<li><a href="#orders">Orders</a></li>
|
|
<li><a href="#users">Users</a></li>
|
|
<li><a href="#variants" class="active">Variant Management</a></li>
|
|
<li><a href="#settings">Settings</a></li>
|
|
<li><a href="#logout">Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<div class="container">
|
|
<section class="variant-management-section">
|
|
<div class="section-header">
|
|
<h2>Manage Product Variants</h2>
|
|
<p>Add, edit, or delete product variants and their specific attributes.</p>
|
|
</div>
|
|
|
|
<div class="variant-controls">
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="Search variants by ID, name, or product...">
|
|
</div>
|
|
<div class="button-group">
|
|
<button class="btn btn-primary">Add New Variant</button>
|
|
<button class="btn btn-secondary">Bulk Actions</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="variant-list">
|
|
<!-- Variant Card 1 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Ring+Variant+A" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product A - Variant Gold (Size 7)</h3>
|
|
<p><strong>Product ID:</strong> PROD001</p>
|
|
<p><strong>Variant ID:</strong> VAR001-GOLD-S7</p>
|
|
<p><strong>Color:</strong> Gold</p>
|
|
<p><strong>Size:</strong> 7</p>
|
|
<p><strong>Material:</strong> 18K Yellow Gold</p>
|
|
<p><strong>Stock:</strong> 15 units</p>
|
|
<p class="price">Price: ₹ 45,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 2 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Necklace+Variant+B" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product B - Variant Silver (Length 18")</h3>
|
|
<p><strong>Product ID:</strong> PROD002</p>
|
|
<p><strong>Variant ID:</strong> VAR002-SILVER-18</p>
|
|
<p><strong>Color:</strong> Silver</p>
|
|
<p><strong>Length:</strong> 18 inches</p>
|
|
<p><strong>Material:</strong> Sterling Silver</p>
|
|
<p><strong>Stock:</strong> 22 units</p>
|
|
<p class="price">Price: ₹ 28,500.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 3 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Bangle+Variant+C" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product C - Variant Rose Gold (Small)</h3>
|
|
<p><strong>Product ID:</strong> PROD003</p>
|
|
<p><strong>Variant ID:</strong> VAR003-ROSE-S</p>
|
|
<p><strong>Color:</strong> Rose Gold</p>
|
|
<p><strong>Size:</strong> Small</p>
|
|
<p><strong>Material:</strong> 14K Rose Gold</p>
|
|
<p><strong>Stock:</strong> 8 units</p>
|
|
<p class="price">Price: ₹ 38,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 4 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Earrings+Variant+D" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product D - Variant Diamond (Clarity VS1)</h3>
|
|
<p><strong>Product ID:</strong> PROD004</p>
|
|
<p><strong>Variant ID:</strong> VAR004-DIAMOND-VS1</p>
|
|
<p><strong>Stone:</strong> Diamond</p>
|
|
<p><strong>Clarity:</strong> VS1</p>
|
|
<p><strong>Cut:</strong> Brilliant</p>
|
|
<p><strong>Stock:</strong> 5 pairs</p>
|
|
<p class="price">Price: ₹ 72,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 5 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Ring+Variant+E" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product E - Variant Platinum (Size 8)</h3>
|
|
<p><strong>Product ID:</strong> PROD005</p>
|
|
<p><strong>Variant ID:</strong> VAR005-PLAT-S8</p>
|
|
<p><strong>Color:</strong> Platinum</p>
|
|
<p><strong>Size:</strong> 8</p>
|
|
<p><strong>Material:</strong> Platinum</p>
|
|
<p><strong>Stock:</strong> 10 units</p>
|
|
<p class="price">Price: ₹ 55,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<a href="#">« Previous</a>
|
|
<a href="#" class="active">1</a>
|
|
<a href="#">2</a>
|
|
<a href="#">3</a>
|
|
<span>...</span>
|
|
<a href="#">10</a>
|
|
<a href="#">Next »</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2023 Jewelry Store Admin Panel. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Save/Cancel Buttons - Jewelry Store</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<div class="section-container">
|
|
<h2>Section Title: Account Settings / Product Edit</h2>
|
|
<p>This area represents a form or page where a user or admin can make changes, e.g., updating their profile, editing a product, or configuring order details. The buttons below provide the options to save or discard these changes.</p>
|
|
|
|
<!-- Placeholder for form content or editable fields -->
|
|
<div style="min-height: 150px; background-color: #F8F8F8; border: 1px dashed var(--border-color); border-radius: 4px; padding: 20px; margin-top: 25px; display: flex; align-items: center; justify-content: center; color: var(--text-light);">
|
|
<p><strong>[ Form Fields / Editable Content Placeholder ]</strong><br>e.g., Input fields for Name, Email, Product Price, Description, etc.</p>
|
|
</div>
|
|
|
|
<div class="form-actions" role="group" aria-label="Form actions">
|
|
<button type="button" class="button button--secondary">Cancel</button>
|
|
<button type="submit" class="button button--primary">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
<section class="publishing-options-section">
|
|
<div class="container">
|
|
<header class="section-header">
|
|
<h2 class="section-title">Publishing Options</h2>
|
|
<p class="section-description">Manage how this product appears and is discovered on your store.</p>
|
|
</header>
|
|
|
|
<form class="publishing-form">
|
|
<div class="form-group-grid">
|
|
<fieldset class="form-fieldset status-visibility">
|
|
<legend class="fieldset-legend">Product Status & Visibility</legend>
|
|
<div class="form-row">
|
|
<label for="productStatus" class="form-label">Status</label>
|
|
<select id="productStatus" name="productStatus" class="form-select">
|
|
<option value="draft">Draft</option>
|
|
<option value="published" selected="">Published</option>
|
|
<option value="archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label class="form-label">Visibility</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="visibilityPublic" name="productVisibility" value="public" checked="">
|
|
<label for="visibilityPublic">Public</label>
|
|
|
|
<input type="radio" id="visibilityPrivate" name="productVisibility" value="private">
|
|
<label for="visibilityPrivate">Private (Hidden)</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="publishDate" class="form-label">Publish Date</label>
|
|
<input type="date" id="publishDate" name="publishDate" class="form-input" value="2023-10-27">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="publishTime" class="form-label">Publish Time</label>
|
|
<input type="time" id="publishTime" name="publishTime" class="form-input" value="10:00">
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-fieldset highlighting">
|
|
<legend class="fieldset-legend">Highlighting & Promotion</legend>
|
|
<div class="form-row checkbox-row">
|
|
<input type="checkbox" id="featuredProduct" name="featuredProduct" class="form-checkbox">
|
|
<label for="featuredProduct" class="checkbox-label">Mark as Featured Product</label>
|
|
<p class="checkbox-description">Appears on homepage and special collections.</p>
|
|
</div>
|
|
<div class="form-row checkbox-row">
|
|
<input type="checkbox" id="homepageCarousel" name="homepageCarousel" class="form-checkbox">
|
|
<label for="homepageCarousel" class="checkbox-label">Include in Homepage Carousel</label>
|
|
<p class="checkbox-description">Display in the main rotating banner.</p>
|
|
</div>
|
|
<div class="form-row checkbox-row">
|
|
<input type="checkbox" id="newArrival" name="newArrival" class="form-checkbox" checked="">
|
|
<label for="newArrival" class="checkbox-label">Mark as New Arrival</label>
|
|
<p class="checkbox-description">Show 'New' badge for a limited time.</p>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<fieldset class="form-fieldset seo-metadata">
|
|
<legend class="fieldset-legend">Search Engine Optimization (SEO)</legend>
|
|
<div class="form-row">
|
|
<label for="metaTitle" class="form-label">Meta Title</label>
|
|
<input type="text" id="metaTitle" name="metaTitle" class="form-input" placeholder="Enter SEO-friendly title (max 60 chars)">
|
|
<p class="input-hint">Default: Product Name | Store Name</p>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="metaDescription" class="form-label">Meta Description</label>
|
|
<textarea id="metaDescription" name="metaDescription" class="form-textarea" rows="3" placeholder="A brief, compelling description for search results (max 160 chars)"></textarea>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="metaKeywords" class="form-label">Meta Keywords</label>
|
|
<input type="text" id="metaKeywords" name="metaKeywords" class="form-input" placeholder="Comma-separated keywords (e.g., diamond ring, engagement, gold)">
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="form-fieldset related-products">
|
|
<legend class="fieldset-legend">Related Products & Cross-selling</legend>
|
|
<div class="form-row">
|
|
<label for="relatedItems" class="form-label">Suggest Related Items</label>
|
|
<select id="relatedItems" name="relatedItems" class="form-select select-multi" multiple="" size="4">
|
|
<option value="prod1">Diamond Solitaire Necklace</option>
|
|
<option value="prod2" selected="">Emerald Cut Earrings</option>
|
|
<option value="prod3">Gold Bangle Set</option>
|
|
<option value="prod4">Sapphire Studs</option>
|
|
<option value="prod5" selected="">Pearl Drop Pendant</option>
|
|
</select>
|
|
<p class="input-hint">Select items that complement this product.</p>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="button button-primary">Save Publishing Options</button>
|
|
<button type="reset" class="button button-secondary">Reset to Default</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping & Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Details Form - Admin</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>Variant Management</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
<header>
|
|
<div class="container">
|
|
<h1>Admin Panel</h1>
|
|
</div>
|
|
</header>
|
|
<nav>
|
|
<div class="container">
|
|
<ul>
|
|
<li><a href="#dashboard">Dashboard</a></li>
|
|
<li><a href="#products">Products</a></li>
|
|
<li><a href="#orders">Orders</a></li>
|
|
<li><a href="#users">Users</a></li>
|
|
<li><a href="#variants" class="active">Variant Management</a></li>
|
|
<li><a href="#settings">Settings</a></li>
|
|
<li><a href="#logout">Logout</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<main>
|
|
<div class="container">
|
|
<section class="variant-management-section">
|
|
<div class="section-header">
|
|
<h2>Manage Product Variants</h2>
|
|
<p>Add, edit, or delete product variants and their specific attributes.</p>
|
|
</div>
|
|
|
|
<div class="variant-controls">
|
|
<div class="search-bar">
|
|
<input type="text" placeholder="Search variants by ID, name, or product...">
|
|
</div>
|
|
<div class="button-group">
|
|
<button class="btn btn-primary">Add New Variant</button>
|
|
<button class="btn btn-secondary">Bulk Actions</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="variant-list">
|
|
<!-- Variant Card 1 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Ring+Variant+A" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product A - Variant Gold (Size 7)</h3>
|
|
<p><strong>Product ID:</strong> PROD001</p>
|
|
<p><strong>Variant ID:</strong> VAR001-GOLD-S7</p>
|
|
<p><strong>Color:</strong> Gold</p>
|
|
<p><strong>Size:</strong> 7</p>
|
|
<p><strong>Material:</strong> 18K Yellow Gold</p>
|
|
<p><strong>Stock:</strong> 15 units</p>
|
|
<p class="price">Price: ₹ 45,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 2 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Necklace+Variant+B" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product B - Variant Silver (Length 18")</h3>
|
|
<p><strong>Product ID:</strong> PROD002</p>
|
|
<p><strong>Variant ID:</strong> VAR002-SILVER-18</p>
|
|
<p><strong>Color:</strong> Silver</p>
|
|
<p><strong>Length:</strong> 18 inches</p>
|
|
<p><strong>Material:</strong> Sterling Silver</p>
|
|
<p><strong>Stock:</strong> 22 units</p>
|
|
<p class="price">Price: ₹ 28,500.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 3 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Bangle+Variant+C" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product C - Variant Rose Gold (Small)</h3>
|
|
<p><strong>Product ID:</strong> PROD003</p>
|
|
<p><strong>Variant ID:</strong> VAR003-ROSE-S</p>
|
|
<p><strong>Color:</strong> Rose Gold</p>
|
|
<p><strong>Size:</strong> Small</p>
|
|
<p><strong>Material:</strong> 14K Rose Gold</p>
|
|
<p><strong>Stock:</strong> 8 units</p>
|
|
<p class="price">Price: ₹ 38,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 4 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Earrings+Variant+D" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product D - Variant Diamond (Clarity VS1)</h3>
|
|
<p><strong>Product ID:</strong> PROD004</p>
|
|
<p><strong>Variant ID:</strong> VAR004-DIAMOND-VS1</p>
|
|
<p><strong>Stone:</strong> Diamond</p>
|
|
<p><strong>Clarity:</strong> VS1</p>
|
|
<p><strong>Cut:</strong> Brilliant</p>
|
|
<p><strong>Stock:</strong> 5 pairs</p>
|
|
<p class="price">Price: ₹ 72,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Variant Card 5 -->
|
|
<article class="variant-card">
|
|
<div class="variant-image-placeholder">
|
|
<img src="https://via.placeholder.com/300x200?text=Ring+Variant+E" alt="Product Variant Image">
|
|
</div>
|
|
<div class="variant-details">
|
|
<h3>Product E - Variant Platinum (Size 8)</h3>
|
|
<p><strong>Product ID:</strong> PROD005</p>
|
|
<p><strong>Variant ID:</strong> VAR005-PLAT-S8</p>
|
|
<p><strong>Color:</strong> Platinum</p>
|
|
<p><strong>Size:</strong> 8</p>
|
|
<p><strong>Material:</strong> Platinum</p>
|
|
<p><strong>Stock:</strong> 10 units</p>
|
|
<p class="price">Price: ₹ 55,000.00</p>
|
|
<div class="variant-actions">
|
|
<button class="btn btn-edit">Edit</button>
|
|
<button class="btn btn-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="pagination">
|
|
<a href="#">« Previous</a>
|
|
<a href="#" class="active">1</a>
|
|
<a href="#">2</a>
|
|
<a href="#">3</a>
|
|
<span>...</span>
|
|
<a href="#">10</a>
|
|
<a href="#">Next »</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2023 Jewelry Store Admin Panel. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Save/Cancel Buttons - Jewelry Store</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |