2025-08-04 11:44:00 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Admin Add Product< / title >
< link rel = "stylesheet" href = "style.css" / >
< / head >
< body >
< div class = "page-wrapper" >
2025-08-05 06:00:54 +00:00
< div class = "nav-1-wrapper" > < nav class = "nav-1-navbar" > < div class = "nav-1-logo" > Radiance Jewels< / div > < ul class = "nav-1-nav-links" > < li > < a href = "index.html" > Home< / a > < / li > < li > < a href = "product_catalog.html" > Product Catalog< / a > < / li > < li > < a href = "shopping_cart.html" > Shopping Cart< / a > < / li > < li > < a href = "checkout.html" > Checkout< / a > < / li > < li > < a href = "login.html" > Login< / a > < / li > < li > < a href = "dashboard.html" > Dashboard< / a > < / li > < li > < a href = "order_history.html" > Order History< / a > < / li > < li > < a href = "user_profile.html" > User Profile< / a > < / li > < li > < a href = "sign_up.html" > Sign Up< / a > < / li > < / ul > < div class = "nav-1-nav-actions" > < button class = "nav-1-btn nav-1-outline" > Sign Up< / button > < button class = "nav-1-btn nav-1-solid" > Login< / button > < / div > < / nav > < / div >
< 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" >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< input type = "text" id = "productName" name = "productName" placeholder = "e.g., Elegant Diamond Ring" required = "" >
2025-08-04 11:44:00 +00:00
< / div >
< div class = "form-group" >
< label for = "category" > Category< / label >
2025-08-05 06:00:54 +00:00
< select id = "category" name = "category" required = "" >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< input type = "number" id = "price" name = "price" placeholder = "e.g., 45000" min = "0" step = "0.01" required = "" >
2025-08-04 11:44:00 +00:00
< / div >
< div class = "form-group" >
< label for = "stock" > Stock Quantity< / label >
2025-08-05 06:00:54 +00:00
< input type = "number" id = "stock" name = "stock" placeholder = "e.g., 50" min = "0" required = "" >
2025-08-04 11:44:00 +00:00
< / div >
< div class = "form-group full-width" >
< label for = "imageUrl" > Image URL< / label >
2025-08-05 06:00:54 +00:00
< input type = "url" id = "imageUrl" name = "imageUrl" placeholder = "e.g., https://example.com/images/diamond-ring.jpg" required = "" >
2025-08-04 11:44:00 +00:00
< / div >
< div class = "form-group full-width" >
< label for = "description" > Product Description< / label >
2025-08-05 06:00:54 +00:00
< textarea id = "description" name = "description" placeholder = "Provide a detailed description of the product, including material, dimensions, stone details, etc." required = "" > < / textarea >
2025-08-04 11:44:00 +00:00
< / 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 >
2025-08-05 06:00:54 +00:00
< / div >
< section class = "image-upload-section" >
2025-08-04 11:44:00 +00:00
< h2 class = "section-title" > Upload Product Image< / h2 >
< div class = "upload-area-container" >
< label for = "imageUploadInput" class = "drop-zone" >
< div class = "drop-zone-content" >
2025-08-05 06:00:54 +00:00
< span class = "upload-icon" > ⬆< / span >
< p class = "upload-text" > Drag & drop your image here or click to browse< / p >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< / section >
< section class = "seo-metadata-section" >
< h2 class = "section-title" > SEO & Metadata Fields< / h2 >
2025-08-04 11:44:00 +00:00
< 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" >
2025-08-05 06:00:54 +00:00
< button type = "submit" class = "button button-primary" > Save SEO & Metadata< / button >
2025-08-04 11:44:00 +00:00
< button type = "button" class = "button button-secondary" > Cancel< / button >
< / div >
< / div >
2025-08-05 06:00:54 +00:00
< / 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 >
2025-08-04 11:44:00 +00:00
< div class = "container" >
< h1 > Admin Panel< / h1 >
< / div >
2025-08-05 06:00:54 +00:00
< / header >
< nav >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< / nav >
< main >
2025-08-04 11:44:00 +00:00
< 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" >
2025-08-05 06:00:54 +00:00
< a href = "#" > « Previous< / a >
2025-08-04 11:44:00 +00:00
< a href = "#" class = "active" > 1< / a >
< a href = "#" > 2< / a >
< a href = "#" > 3< / a >
< span > ...< / span >
< a href = "#" > 10< / a >
2025-08-05 06:00:54 +00:00
< a href = "#" > Next »< / a >
2025-08-04 11:44:00 +00:00
< / div >
< / section >
< / div >
2025-08-05 06:00:54 +00:00
< / main >
< footer >
2025-08-04 11:44:00 +00:00
< div class = "container" >
2025-08-05 06:00:54 +00:00
< p > © 2023 Jewelry Store Admin Panel. All rights reserved.< / p >
2025-08-04 11:44:00 +00:00
< / div >
2025-08-05 06:00:54 +00:00
< / 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" >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< / div >
< section class = "publishing-options-section" >
2025-08-04 11:44:00 +00:00
< 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" >
2025-08-05 06:00:54 +00:00
< legend class = "fieldset-legend" > Product Status & Visibility< / legend >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< option value = "published" selected = "" > Published< / option >
2025-08-04 11:44:00 +00:00
< option value = "archived" > Archived< / option >
< / select >
< / div >
< div class = "form-row" >
< label class = "form-label" > Visibility< / label >
< div class = "radio-group" >
2025-08-05 06:00:54 +00:00
< input type = "radio" id = "visibilityPublic" name = "productVisibility" value = "public" checked = "" >
2025-08-04 11:44:00 +00:00
< 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" >
2025-08-05 06:00:54 +00:00
< legend class = "fieldset-legend" > Highlighting & Promotion< / legend >
2025-08-04 11:44:00 +00:00
< 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" >
2025-08-05 06:00:54 +00:00
< input type = "checkbox" id = "newArrival" name = "newArrival" class = "form-checkbox" checked = "" >
2025-08-04 11:44:00 +00:00
< 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" >
2025-08-05 06:00:54 +00:00
< legend class = "fieldset-legend" > Related Products & Cross-selling< / legend >
2025-08-04 11:44:00 +00:00
< div class = "form-row" >
< label for = "relatedItems" class = "form-label" > Suggest Related Items< / label >
2025-08-05 06:00:54 +00:00
< select id = "relatedItems" name = "relatedItems" class = "form-select select-multi" multiple = "" size = "4" >
2025-08-04 11:44:00 +00:00
< option value = "prod1" > Diamond Solitaire Necklace< / option >
2025-08-05 06:00:54 +00:00
< option value = "prod2" selected = "" > Emerald Cut Earrings< / option >
2025-08-04 11:44:00 +00:00
< option value = "prod3" > Gold Bangle Set< / option >
< option value = "prod4" > Sapphire Studs< / option >
2025-08-05 06:00:54 +00:00
< option value = "prod5" selected = "" > Pearl Drop Pendant< / option >
2025-08-04 11:44:00 +00:00
< / 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 >
2025-08-05 06:00:54 +00:00
< / section >
< div class = "footer-1-wrapper" > < section class = "footer-1-section" > < div class = "footer-1-top" > < div class = "footer-1-brand" > < h3 class = "footer-1-logo" > Gleam Jewels< / h3 > < p class = "footer-1-newsletter-text" > Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.< / p > < div class = "footer-1-newsletter-form" > < input type = "email" placeholder = "Your email address" > < button class = "footer-1-subscribe-btn" > Shine With Us< / button > < / div > < p class = "footer-1-privacy-note" > < span > By subscribing you agree to with our < / span > < a href = "#" > Privacy Policy< / a > < span > and provide consent to receive updates from our company.< / span > < / p > < / div > < div class = "footer-1-columns" > < div class = "footer-1-column" > < h4 > Explore< / h4 > < ul > < li > < a href = "rings.html" > Rings< / a > < / li > < li > < a href = "necklaces.html" > Necklaces< / a > < / li > < li > < a href = "bangles.html" > Bangles< / a > < / li > < li > < a href = "earrings.html" > Earrings< / a > < / li > < li > < a href = "new_arrivals.html" > New Arrivals< / a > < / li > < / ul > < / div > < div class = "footer-1-column" > < h4 > Support< / h4 > < ul > < li > < a href = "about_us.html" > About Us< / a > < / li > < li > < a href = "contact_us.html" > Contact Us< / a > < / li > < li > < a href = "faq.html" > FAQ< / a > < / li > < li > < a href = "shipping_returns.html" > Shipping & Returns< / a > < / li > < li > < a href = "customer_dashboard.html" > Customer Dashboard< / a > < / li > < / ul > < / div > < div class = "footer-1-column footer-1-social" > < h4 > Follow us< / h4 > < ul > < li > < i class = "fab fa-facebook" > < / i > < span > Facebook< / span > < / li > < li > < i class = "fab fa-instagram" > < / i > < span > Instagram< / span > < / li > < li > < i class = "fab fa-x-twitter" > < / i > < span > X< / span > < / li > < li > < i class = "fab fa-linkedin" > < / i > < span > LinkedIn< / span > < / li > < li > < i class = "fab fa-youtube" > < / i > < span > Youtube< / span > < / li > < / ul > < / div > < / div > < / div > < div class = "footer-1-bottom" > < p > © 2025 Gleam Jewels. All rights reserved.< / p > < ul class = "footer-1-links" > < li > < a href = "product_detail.html" > Product Detail< / a > < / li > < li > < a href = "order_confirmation.html" > Order Confirmation< / a > < / li > < li > < a href = "admin_login.html" > Admin Login< / a > < / li > < li > < a href = "admin_dashboard.html" > Admin Dashboard< / a > < / li > < li > < a href = "admin_product_management.html" > Admin Product Management< / a > < / li > < li > < a href = "admin_add_product.html" > Admin Add Product< / a > < / li > < li > < a href = "admin_edit_product.html" > Admin Edit Product< / a > < / li > < li > < a href = "admin_order_management.html" > Admin Order Management< / a > < / li > < li > < a href = "admin_user_management.html" > Admin User Management< / a > < / li > < / ul > < / div > < / section > < / div >
2025-08-04 11:44:00 +00:00
< 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 >
