risadmin_prod/custom1
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Automated commit to 4_aug_test from Docker container

Browse Source
This commit is contained in:
risadmin_prod 2025-08-05 06:00:54 +00:00
parent ddaeed2a20
commit fdf75feb0a
19 changed files with 407 additions and 5929 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

654
admin_add_product.html
View File

@ -9,484 +9,7 @@
</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 Form - Admin</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<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>
</body>
</html>
<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">&#x2B06;</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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variant Management</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<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="#">&laquo; 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 &raquo;</a>
</div>
</section>
</div>
</main>
<footer>
<div class="container">
<p>&copy; 2023 Jewelry Store Admin Panel. All rights reserved.</p>
</div>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Save/Cancel Buttons - Jewelry Store</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<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>
</body>
</html>
<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"></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>
<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>
@ -937,6 +460,181 @@
</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 &amp; 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() {

404
admin_dashboard.html
View File

@ -9,400 +9,7 @@
</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>Dashboard Overview</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="dashboard-container" aria-labelledby="dashboardOverviewTitle">
<header class="dashboard-header">
<h1 id="dashboardOverviewTitle">Dashboard Overview</h1>
<p>Welcome back, [User Name]! Here's a quick look at your activity.</p>
</header>
<div class="overview-cards">
<div class="card">
<h3>Total Orders</h3>
<p class="metric">12</p>
<p class="description">Orders placed to date.</p>
</div>
<div class="card">
<h3>Pending Orders</h3>
<p class="metric">03</p>
<p class="description">Orders awaiting processing.</p>
</div>
<div class="card">
<h3>Last Order Date</h3>
<p class="metric">Jan 15, 2024</p>
<p class="description">Date of your most recent purchase.</p>
</div>
<div class="card">
<h3>Shopping Cart</h3>
<p class="metric">02 Items</p>
<p class="description">Items currently in your cart.</p>
</div>
</div>
<div class="dashboard-content-grid">
<div class="dashboard-section" aria-labelledby="recentOrdersTitle">
<h2 id="recentOrdersTitle">Recent Orders</h2>
<table class="order-history-table">
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Date</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD78901</td>
<td>Jan 15, 2024</td>
<td>₹15,000</td>
<td><span class="order-status status-delivered">Delivered</span></td>
<td><a href="#order-detail-78901">View Details</a></td>
</tr>
<tr>
<td>#ORD78899</td>
<td>Jan 10, 2024</td>
<td>₹2,500</td>
<td><span class="order-status status-processing">Processing</span></td>
<td><a href="#order-detail-78899">View Details</a></td>
</tr>
<tr>
<td>#ORD78850</td>
<td>Dec 28, 2023</td>
<td>₹8,999</td>
<td><span class="order-status status-shipped">Shipped</span></td>
<td><a href="#order-detail-78850">View Details</a></td>
</tr>
<tr>
<td>#ORD78800</td>
<td>Dec 15, 2023</td>
<td>₹20,000</td>
<td><span class="order-status status-delivered">Delivered</span></td>
<td><a href="#order-detail-78800">View Details</a></td>
</tr>
<tr>
<td>#ORD78750</td>
<td>Dec 01, 2023</td>
<td>₹5,500</td>
<td><span class="order-status status-cancelled">Cancelled</span></td>
<td><a href="#order-detail-78750">View Details</a></td>
</tr>
</tbody>
</table>
<div class="view-all-link">
<a href="#order-history">View All Order History &rarr;</a>
</div>
</div>
<div class="dashboard-section" aria-labelledby="quickActionsTitle">
<h2 id="quickActionsTitle">Quick Actions</h2>
<nav aria-label="Quick Dashboard Navigation">
<ul>
<li class="mb-20"><a href="#profile-settings" style="text-decoration: none; color: #a0522d; font-weight: 500;">&#9656; Update Profile Settings</a></li>
<li class="mb-20"><a href="#track-order" style="text-decoration: none; color: #a0522d; font-weight: 500;">&#9656; Track My Latest Order</a></li>
<li class="mb-20"><a href="#browse-catalog" style="text-decoration: none; color: #a0522d; font-weight: 500;">&#9656; Browse Jewelry Catalog</a></li>
<li class="mb-20"><a href="#support" style="text-decoration: none; color: #a0522d; font-weight: 500;">&#9656; Contact Support</a></li>
<li><a href="#logout" style="text-decoration: none; color: #a0522d; font-weight: 500;">&#9656; Log Out</a></li>
</ul>
</nav>
</div>
</div>
</section>
</body>
</html>
<section class="quick-actions-panel">
<h2 class="quick-actions-title">Quick Actions</h2>
<div class="quick-actions-grid">
<a href="#shop-now" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
🛍️
</div>
<span class="quick-action-label">Shop Latest Collection</span>
</a>
<a href="#view-cart" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
🛒
</div>
<span class="quick-action-label">View Shopping Cart</span>
</a>
<a href="#my-orders" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
📦
</div>
<span class="quick-action-label">My Orders & History</span>
</a>
<a href="#update-profile" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
⚙️
</div>
<span class="quick-action-label">Update Profile</span>
</a>
<a href="#wishlist" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
💖
</div>
<span class="quick-action-label">My Wishlist</span>
</a>
<a href="#contact-support" class="quick-action-item">
<div class="quick-action-icon">
<!-- Placeholder for SVG icon or image -->
📞
</div>
<span class="quick-action-label">Contact Support</span>
</a>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Activities Log</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="recent-activities-log">
<h2>Recent Activities Log</h2>
<div class="activity-table-wrapper">
<table class="activity-table">
<thead>
<tr>
<th scope="col">Activity Type</th>
<th scope="col">Details</th>
<th scope="col">Date & Time</th>
</tr>
</thead>
<tbody>
<tr>
<td class="activity-type">Order Placed</td>
<td>Order #ORDR-2023001 for <span class="activity-item-name">Diamond Stud Earrings</span> (x1)</td>
<td class="activity-date">2023-10-26 14:30:00</td>
</tr>
<tr>
<td class="activity-type">Login</td>
<td>User successfully logged in.</td>
<td class="activity-date">2023-10-26 14:25:15</td>
</tr>
<tr>
<td class="activity-type">Product Viewed</td>
<td>Viewed <span class="activity-item-name">Emerald Cut Ring</span></td>
<td class="activity-date">2023-10-26 14:10:45</td>
</tr>
<tr>
<td class="activity-type">Item Added to Cart</td>
<td>Added <span class="activity-item-name">Pearl Necklace</span> to cart.</td>
<td class="activity-date">2023-10-25 10:05:20</td>
</tr>
<tr>
<td class="activity-type">Password Change</td>
<td>User updated password.</td>
<td class="activity-date">2023-10-24 09:15:00</td>
</tr>
<tr>
<td class="activity-type">Order Placed</td>
<td>Order #ORDR-2023002 for <span class="activity-item-name">Gold Bangle Set</span> (x1)</td>
<td class="activity-date">2023-10-23 18:00:00</td>
</tr>
<tr>
<td class="activity-type">Product Viewed</td>
<td>Viewed <span class="activity-item-name">Diamond Solitaire Necklace</span></td>
<td class="activity-date">2023-10-23 17:45:00</td>
</tr>
<tr>
<td class="activity-type">Logout</td>
<td>User logged out.</td>
<td class="activity-date">2023-10-22 12:30:00</td>
</tr>
<tr>
<td class="activity-type">Login</td>
<td>User successfully logged in.</td>
<td class="activity-date">2023-10-22 12:00:00</td>
</tr>
<tr>
<td class="activity-type">Account Update</td>
<td>Updated shipping address.</td>
<td class="activity-date">2023-10-21 16:00:00</td>
</tr>
</tbody>
</table>
</div>
<!-- Optional: Placeholder for when there are no activities -->
<!--
<div class="no-activities">
<p>No recent activities to display yet. Start exploring our exquisite jewelry collection!</p>
</div>
-->
<nav class="pagination" aria-label="Activities Pagination">
<button aria-label="Previous page" disabled>&larr; Previous</button>
<span>Page 1 of 5</span>
<button aria-label="Next page">Next &rarr;</button>
</nav>
</section>
</body>
</html>
<section class="system-health-monitor">
<div class="container">
<header class="section-header">
<h2>System Health Monitor</h2>
<p>Real-time overview of critical system components and performance metrics.</p>
</header>
<div class="health-status-summary">
<h3 class="status-indicator status-operational">
<span class="icon" aria-hidden="true">&#x2713;</span> Overall System Status: Operational
</h3>
<p>All core services are running smoothly and within expected parameters.</p>
</div>
<div class="health-metrics-grid">
<div class="metric-card">
<h4 class="metric-title">Server Uptime</h4>
<p class="metric-value">
<span class="value">99 days, 14 hours, 32 minutes</span>
</p>
<p class="metric-detail">Last reboot: <time datetime="2024-01-01T00:00:00Z">January 1, 2024</time></p>
</div>
<div class="metric-card">
<h4 class="metric-title">Database Connection</h4>
<p class="metric-value status-connected">
<span class="icon" aria-hidden="true">&#x2713;</span> Connected
</p>
<p class="metric-detail">Status: All primary databases online</p>
</div>
<div class="metric-card">
<h4 class="metric-title">API Response Time</h4>
<p class="metric-value">
<span class="value">55 ms</span>
</p>
<p class="metric-detail">Average external API latency (last 1 hour)</p>
</div>
<div class="metric-card">
<h4 class="metric-title">Disk Usage</h4>
<p class="metric-value status-ok">
<span class="value">45%</span>
</p>
<p class="metric-detail">1.2 TB Free of 2 TB total capacity</p>
</div>
<div class="metric-card">
<h4 class="metric-title">CPU Load</h4>
<p class="metric-value status-ok">
<span class="value">12%</span>
</p>
<p class="metric-detail">Current average utilization across all cores</p>
</div>
<div class="metric-card">
<h4 class="metric-title">Memory Usage</h4>
<p class="metric-value status-warning">
<span class="value">78%</span>
</p>
<p class="metric-detail">Potential for high usage spikes during peak hours</p>
</div>
</div>
<div class="health-logs-charts">
<div class="log-summary-card">
<h3 class="card-title">Error Log Summary</h3>
<p class="log-status status-ok">
<span class="icon" aria-hidden="true">&#x2713;</span> No critical errors detected in the last 24 hours.
</p>
<ul class="recent-errors-list">
<li><time datetime="2024-07-20T10:30:00Z">10:30 AM</time> - <span class="log-level">[INFO]</span> Login attempt from new IP detected.</li>
<li><time datetime="2024-07-20T09:15:00Z">09:15 AM</time> - <span class="log-level">[WARN]</span> Database query exceeded 500ms execution time.</li>
<li><time datetime="2024-07-20T08:00:00Z">08:00 AM</time> - <span class="log-level">[INFO]</span> Daily scheduled database backup completed successfully.</li>
</ul>
<a href="#" class="view-all-logs-link">View Full Logs &rarr;</a>
</div>
<div class="chart-card">
<h3 class="card-title">Server Load Over Time</h3>
<div class="chart-placeholder" aria-label="Placeholder for interactive line chart showing CPU and memory usage trends.">
<p><em>(Placeholder for chart)</em></p>
<p>Interactive line chart displaying CPU and memory usage over the past 24 hours.</p>
</div>
</div>
<div class="chart-card">
<h3 class="card-title">Database Activity</h3>
<div class="chart-placeholder" aria-label="Placeholder for bar chart showing active connections and query rates.">
<p><em>(Placeholder for chart)</em></p>
<p>Bar chart illustrating active database connections and average query rates.</p>
</div>
</div>
</div>
<footer class="health-monitor-footer">
<p>Last Updated: <time datetime="2024-07-20T11:45:00Z">July 20, 2024, 11:45 AM (UTC)</time></p>
<button type="button" class="btn btn-primary">Refresh Data</button>
</footer>
</div>
</section>
<section class="user-management-widget">
<div class="widget-container">
<h2 class="widget-title">My Account</h2>
<p class="welcome-message">Welcome, <span class="user-name-placeholder">[User Name]</span>!</p>
<nav class="user-navigation">
<ul class="user-menu-list">
<li class="user-menu-item">
<a href="#user-dashboard" class="user-menu-link">
<span class="icon-placeholder">👤</span>
<span class="link-text">Dashboard</span>
</a>
</li>
<li class="user-menu-item">
<a href="#order-history" class="user-menu-link">
<span class="icon-placeholder">📦</span>
<span class="link-text">Order History</span>
</a>
</li>
<li class="user-menu-item">
<a href="#shopping-cart" class="user-menu-link">
<span class="icon-placeholder">🛒</span>
<span class="link-text">Shopping Cart</span>
<span class="notification-badge">[X]</span>
</a>
</li>
<li class="user-menu-item">
<a href="#profile-settings" class="user-menu-link">
<span class="icon-placeholder">⚙️</span>
<span class="link-text">Profile Settings</span>
</a>
</li>
<li class="user-menu-item">
<a href="#logout" class="user-menu-link logout-link">
<span class="icon-placeholder">🚪</span>
<span class="link-text">Logout</span>
</a>
</li>
</ul>
</nav>
</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"></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>
<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>Dashboard Overview</title>
@ -781,6 +388,15 @@
</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 &amp; 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>Dashboard Overview</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recent Activities Log</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

918
admin_edit_product.html
View File

@ -9,841 +9,7 @@
</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>&copy; 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>
<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>
@ -1463,6 +629,88 @@
</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 &amp; 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</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Management - Admin Panel</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<script>
// Basic JavaScript for demonstration (not required for the HTML-only request, but good for context)
document.addEventListener('DOMContentLoaded', function() {
const imageUploadInput = document.getElementById('imageUploadInput');
const uploadPreview = document.querySelector('.upload-preview');
imageUploadInput.addEventListener('change', function(event) {
uploadPreview.innerHTML = ''; // Clear existing previews
const files = event.target.files;
if (files.length > 0) {
for (const file of files) {
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = function(e) {
const previewItem = document.createElement('div');
previewItem.classList.add('upload-preview-item');
const img = document.createElement('img');
img.src = e.target.result;
img.alt = `Preview of ${file.name}`;
const removeBtn = document.createElement('button');
removeBtn.classList.add('remove-btn');
removeBtn.textContent = 'x';
removeBtn.setAttribute('aria-label', `Remove ${file.name}`);
removeBtn.onclick = function() {
previewItem.remove();
// In a real application, you'd also need to handle removing from a DataTransfer object or similar
};
previewItem.appendChild(img);
previewItem.appendChild(removeBtn);
uploadPreview.appendChild(previewItem);
};
reader.readAsDataURL(file);
}
}
}
});
// Example of active link styling for sidebar (can be done with server-side logic too)
const currentPath = window.location.pathname;
document.querySelectorAll('.sidebar a').forEach(link => {
if (link.href.includes('image-management') || link.classList.contains('active')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
document.querySelectorAll('.header nav a').forEach(link => {
if (link.href.includes('image-management') || link.classList.contains('active')) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variant Management (Existing)</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Status Toggle - Admin</title>
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

226
admin_login.html
View File

@ -9,217 +9,7 @@
</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>Admin Login - Jewelry Store</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=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="admin-login-container" role="main">
<header>
<h1>Admin Login</h1>
<p>Access the secure administration panel to manage products, orders, and user accounts.</p>
</header>
<section class="admin-login-form" aria-labelledby="adminLoginFormHeading">
<h2 id="adminLoginFormHeading" class="visually-hidden">Admin Login Form</h2>
<form action="/admin/login" method="POST">
<div class="form-group">
<label for="admin-username">Username</label>
<input type="text" id="admin-username" name="username" placeholder="Enter your admin username" required autocomplete="username">
</div>
<div class="form-group">
<label for="admin-password">Password</label>
<input type="password" id="admin-password" name="password" placeholder="Enter your password" required autocomplete="current-password">
</div>
<div class="checkbox-group">
<input type="checkbox" id="remember-admin" name="remember_me">
<label for="remember-admin">Remember me</label>
</div>
<button type="submit">Log In</button>
</form>
<div class="message error" role="alert" aria-live="polite" style="display: none;">
Invalid username or password. Please try again.
</div>
<!-- Optional: Link for forgotten password, if applicable for admin -->
<!-- <a href="#" class="forgot-password-link">Forgot Password?</a> -->
</section>
</main>
</body>
</html>
<section class="security-warning-section">
<div class="container">
<div class="security-warning-content">
<div class="security-warning-icon" aria-hidden="true">
<!-- Placeholder for a security-related icon (e.g., shield, lock) -->
&#128274; <!-- Unicode for a locked padlock -->
</div>
<h2 class="security-warning-header">Security Warning & Account Protection</h2>
<p class="security-warning-message">
Your online safety is our highest priority. Please be vigilant and follow these essential guidelines to protect your account and personal information while using our website.
</p>
<div class="security-warning-tips">
<h3 class="security-warning-subheader">Key Security Practices:</h3>
<ul>
<li><strong>Use Strong Passwords:</strong> Create unique, complex passwords and avoid reusing them across different sites.</li>
<li><strong>Beware of Phishing:</strong> Always verify the sender of emails and never click suspicious links or attachments. We will never ask for your password via email or phone.</li>
<li><strong>Secure Connection:</strong> Ensure the website URL begins with "https://" and displays a padlock icon in your browser, confirming a secure connection.</li>
<li><strong>Log Out After Use:</strong> Always log out of your account, especially when using shared or public computers.</li>
<li><strong>Monitor Account Activity:</strong> Regularly review your order history and account details for any unauthorized transactions.</li>
</ul>
</div>
<div class="security-warning-action">
<p>For more comprehensive information on our security measures and how to stay safe online:</p>
<a href="#" class="security-warning-link">View Our Full Security Policy</a>
</div>
</div>
</div>
</section>
<section class="system-status-section">
<div class="container">
<h2 class="section-title">System Status</h2>
<p class="section-description">Real-time operational status of our core services.</p>
<div class="system-status-grid">
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Database Connectivity</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Payment Gateway</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-degraded">
<div class="status-indicator"></div>
<h3 class="status-name">Inventory Service</h3>
<span class="status-text">Degraded Performance</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Shipping API</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">User Authentication</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-operational">
<div class="status-indicator"></div>
<h3 class="status-name">Product Image CDN</h3>
<span class="status-text">Operational</span>
</div>
<div class="status-item status-offline">
<div class="status-indicator"></div>
<h3 class="status-name">Promotional Emails</h3>
<span class="status-text">Under Maintenance</span>
</div>
</div>
</div>
</section>
<section id="admin-support-contact">
<div class="container">
<h2>Admin Support & Contact</h2>
<p>For assistance with your orders, account management, or any administrative inquiries, please use the contact methods below. Our team is dedicated to providing prompt and helpful support.</p>
<div class="contact-grid">
<div class="contact-option">
<h3>Email Support</h3>
<p>For general questions, order modifications, or technical issues, email us directly:</p>
<p><a href="mailto:admin@luxejewels.com">admin@luxejewels.com</a></p>
<p class="note">Expected response time: 1-2 business days.</p>
</div>
<div class="contact-option">
<h3>Phone Assistance</h3>
<p>For urgent matters or immediate support, please call us:</p>
<p><a href="tel:+18001234567">1-800-123-4567</a></p>
<p class="note">Available: Monday - Friday, 9 AM - 6 PM EST.</p>
</div>
<div class="contact-option">
<h3>Help Center & FAQs</h3>
<p>Explore our comprehensive help center for quick answers to common questions:</p>
<p><a href="/help-center-link">Visit Our Help Center</a></p>
<p class="note">Includes troubleshooting guides and detailed information.</p>
</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>MFA Setup - Jewelry Store</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;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="mfa-container" aria-labelledby="mfa-heading">
<h1 id="mfa-heading">Enhance Your Account Security</h1>
<p>
For added protection, we recommend setting up Multi-Factor Authentication (MFA). Choose your preferred method below.
</p>
<form action="#" method="POST">
<fieldset class="mfa-options">
<legend class="visually-hidden">Choose your MFA method</legend>
<label for="mfa-app" class="mfa-option">
<input type="radio" id="mfa-app" name="mfa_method" value="authenticator_app" checked>
<div class="mfa-option-content">
<h3>Authenticator App</h3>
<p>Use an app like Google Authenticator or Authy to generate codes.</p>
</div>
</label>
<label for="mfa-sms" class="mfa-option">
<input type="radio" id="mfa-sms" name="mfa_method" value="sms">
<div class="mfa-option-content">
<h3>SMS Verification</h3>
<p>Receive a verification code via text message to your registered phone number.</p>
</div>
</label>
<label for="mfa-security-key" class="mfa-option">
<input type="radio" id="mfa-security-key" name="mfa_method" value="security_key">
<div class="mfa-option-content">
<h3>Security Key (e.g., YubiKey)</h3>
<p>Use a physical security key for the strongest protection.</p>
</div>
</label>
</fieldset>
<div class="mfa-button-group">
<button type="submit" class="mfa-button">Set Up MFA</button>
<a href="/dashboard" class="mfa-link-alt">Skip for now</a>
</div>
</form>
</main>
</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>
<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>Admin Login - Jewelry Store</title>
@ -415,6 +205,20 @@
</form>
</main>
<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 &amp; 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>Admin Login - Jewelry Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MFA Setup - Jewelry Store</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

414
admin_order_management.html
View File

@ -9,406 +9,7 @@
</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>Order List - Jewelry Store</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<h2>Your Order History</h2>
<div class="table-responsive">
<table class="order-list-table" role="table" aria-label="List of your past orders">
<caption class="sr-only">Detailed list of customer's previous orders.</caption>
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Date</th>
<th scope="col">Total</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Order ID" class="order-id">#ORD-2023001</td>
<td data-label="Date" class="order-date">2023-10-26</td>
<td data-label="Total" class="order-total">$1,250.00</td>
<td data-label="Status" class="order-status completed">Completed</td>
<td data-label="Actions">
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023001">View Details</a>
</td>
</tr>
<tr>
<td data-label="Order ID" class="order-id">#ORD-2023002</td>
<td data-label="Date" class="order-date">2023-11-01</td>
<td data-label="Total" class="order-total">$350.50</td>
<td data-label="Status" class="order-status shipped">Shipped</td>
<td data-label="Actions">
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023002">View Details</a>
</td>
</tr>
<tr>
<td data-label="Order ID" class="order-id">#ORD-2023003</td>
<td data-label="Date" class="order-date">2023-11-05</td>
<td data-label="Total" class="order-total">$899.99</td>
<td data-label="Status" class="order-status pending">Pending</td>
<td data-label="Actions">
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023003">View Details</a>
</td>
</tr>
<tr>
<td data-label="Order ID" class="order-id">#ORD-2023004</td>
<td data-label="Date" class="order-date">2023-11-10</td>
<td data-label="Total" class="order-total">$2,100.00</td>
<td data-label="Status" class="order-status completed">Completed</td>
<td data-label="Actions">
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023004">View Details</a>
</td>
</tr>
<tr>
<td data-label="Order ID" class="order-id">#ORD-2023005</td>
<td data-label="Date" class="order-date">2023-11-15</td>
<td data-label="Total" class="order-total">$150.00</td>
<td data-label="Status" class="order-status cancelled">Cancelled</td>
<td data-label="Actions">
<a href="#" class="view-details-btn" aria-label="View details for order #ORD-2023005">View Details</a>
</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>
<section class="orders-section">
<header class="orders-header">
<h2>Search and Filter Orders</h2>
</header>
<div class="orders-controls-container">
<form class="search-bar">
<label for="orderSearch" class="visually-hidden">Search orders by Order ID or Customer Name</label>
<input type="search" id="orderSearch" placeholder="Search by Order ID, Customer Name..." class="search-input">
<button type="submit" class="btn btn-primary">Search</button>
</form>
<form class="filters-container">
<fieldset class="filter-group">
<legend class="visually-hidden">Order Filters</legend>
<div class="filter-item">
<label for="statusFilter">Status:</label>
<select id="statusFilter" class="filter-select">
<option value="">All Statuses</option>
<option value="pending">Pending</option>
<option value="processing">Processing</option>
<option value="shipped">Shipped</option>
<option value="delivered">Delivered</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
<div class="filter-item">
<label for="startDate">From Date:</label>
<input type="date" id="startDate" class="filter-date">
</div>
<div class="filter-item">
<label for="endDate">To Date:</label>
<input type="date" id="endDate" class="filter-date">
</div>
<div class="filter-item">
<label for="itemFilter">Jewelry Item:</label>
<input type="text" id="itemFilter" placeholder="e.g., Diamond Ring" class="filter-input">
</div>
</fieldset>
<div class="filter-actions">
<button type="submit" class="btn btn-secondary">Apply Filters</button>
<button type="reset" class="btn btn-secondary-outline">Clear Filters</button>
</div>
</form>
</div>
<div class="order-list-container table-responsive">
<table class="order-list-table">
<thead>
<tr>
<th>Order ID</th>
<th>Customer</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ORD001</td>
<td>Jane Doe</td>
<td>2023-10-26</td>
<td>Diamond Ring (1), Gold Necklace (1)</td>
<td>₹ 1,50,000</td>
<td><span class="status status-delivered">Delivered</span></td>
<td><a href="#" class="btn-small">View</a></td>
</tr>
<tr>
<td>#ORD002</td>
<td>John Smith</td>
<td>2023-10-25</td>
<td>Emerald Earrings (1)</td>
<td>₹ 55,000</td>
<td><span class="status status-shipped">Shipped</span></td>
<td><a href="#" class="btn-small">View</a></td>
</tr>
<tr>
<td>#ORD003</td>
<td>Alice Johnson</td>
<td>2023-10-24</td>
<td>Pearl Bangle (2)</td>
<td>₹ 30,000</td>
<td><span class="status status-pending">Pending</span></td>
<td><a href="#" class="btn-small">View</a></td>
</tr>
<tr>
<td>#ORD004</td>
<td>Bob Williams</td>
<td>2023-10-23</td>
<td>Silver Pendant (1)</td>
<td>₹ 8,000</td>
<td><span class="status status-cancelled">Cancelled</span></td>
<td><a href="#" class="btn-small">View</a></td>
</tr>
<tr>
<td>#ORD005</td>
<td>Maria Garcia</td>
<td>2023-10-22</td>
<td>Ruby Ring (1), Gold Chain (1)</td>
<td>₹ 95,000</td>
<td><span class="status status-processing">Processing</span></td>
<td><a href="#" class="btn-small">View</a></td>
</tr>
<!-- More order rows would be added here dynamically -->
</tbody>
</table>
<p class="no-orders-message visually-hidden">No orders found matching your criteria.</p>
</div>
</section>
<section class="user-dashboard-section" aria-labelledby="recent-orders-heading">
<h2 id="recent-orders-heading" class="section-title">Your Recent Orders</h2>
<div class="order-list-container">
<!-- Individual Order Card 1 -->
<article class="order-card">
<div class="order-summary-header">
<h3 class="order-id">Order ID: <span class="order-value">#JEWEL20231026-001</span></h3>
<p class="order-date">Placed On: <span class="order-value">October 26, 2023</span></p>
</div>
<div class="order-summary-details">
<p class="order-total">Order Total: <span class="order-value">$1,250.00</span></p>
<p class="order-items-count">Items: <span class="order-value">3</span></p>
</div>
<div class="order-action-link">
<a href="/user/orders/JEWEL20231026-001" class="btn btn-primary order-detail-link" aria-label="View full details for order JEWEL20231026-001">
View Order Details
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</a>
</div>
</article>
<!-- Wireframe Placeholder for more orders -->
<article class="order-card order-card-placeholder">
<div class="order-summary-header">
<h3 class="order-id">Order ID: <span class="order-value">#JEWEL20230915-002</span></h3>
<p class="order-date">Placed On: <span class="order-value">September 15, 2023</span></p>
</div>
<div class="order-summary-details">
<p class="order-total">Order Total: <span class="order-value">$780.00</span></p>
<p class="order-items-count">Items: <span class="order-value">1</span></p>
</div>
<div class="order-action-link">
<a href="/user/orders/JEWEL20230915-002" class="btn btn-primary order-detail-link" aria-label="View full details for order JEWEL20230915-002">
View Order Details
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</a>
</div>
</article>
<!-- Optional: Link to full order history -->
<div class="view-all-orders">
<a href="/user/orders/history" class="btn btn-secondary view-all-link">
View All Order History
<svg class="icon icon-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</a>
</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>Order Status Update Form</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<section aria-labelledby="order-status-heading">
<h2 id="order-status-heading">Update Order Status</h2>
<p class="description">Admins can use this form to update the status and details of existing orders.</p>
<form action="#" method="POST" aria-live="polite">
<div class="form-group">
<label for="order-id">Order ID:</label>
<input type="text" id="order-id" name="orderId" placeholder="e.g., ORD-2023-12345" required aria-required="true">
</div>
<div class="form-group">
<label for="customer-email">Customer Email (Optional for lookup):</label>
<input type="email" id="customer-email" name="customerEmail" placeholder="customer@example.com">
</div>
<div class="form-group">
<label for="status">Current Status:</label>
<select id="status" name="status" required aria-required="true">
<option value="">-- Select Status --</option>
<option value="pending">Pending</option>
<option value="processing">Processing</option>
<option value="shipped">Shipped</option>
<option value="delivered">Delivered</option>
<option value="cancelled">Cancelled</option>
<option value="refunded">Refunded</option>
</select>
</div>
<div class="form-group">
<label for="tracking-number">Tracking Number (Optional):</label>
<input type="text" id="tracking-number" name="trackingNumber" placeholder="e.g., ABC123DEF456GHI789">
</div>
<div class="form-group">
<label for="notes">Internal Notes:</label>
<textarea id="notes" name="notes" rows="4" placeholder="Add any relevant internal notes about this order..."></textarea>
</div>
<button type="submit">Update Order</button>
</form>
</section>
</div>
</body>
</html>
<main class="export-orders-section">
<div class="container">
<header class="section-header">
<h1 class="section-title">Export Orders Data</h1>
<p class="section-description">Generate and download comprehensive order data in various formats for analysis and record-keeping.</p>
</header>
<section class="export-form-panel">
<form action="#" method="post" class="export-form">
<div class="form-group">
<label for="date-start" class="form-label">Order Date From:</label>
<input type="date" id="date-start" name="date_start" class="form-input" value="2023-01-01">
</div>
<div class="form-group">
<label for="date-end" class="form-label">Order Date To:</label>
<input type="date" id="date-end" name="date_end" class="form-input" value="2023-12-31">
</div>
<div class="form-group">
<label for="order-status" class="form-label">Order Status:</label>
<select id="order-status" name="order_status" class="form-select">
<option value="all">All Statuses</option>
<option value="pending">Pending</option>
<option value="processing">Processing</option>
<option value="shipped">Shipped</option>
<option value="delivered">Delivered</option>
<option value="cancelled">Cancelled</option>
<option value="refunded">Refunded</option>
</select>
</div>
<div class="form-group">
<label for="export-format" class="form-label">Export Format:</label>
<select id="export-format" name="export_format" class="form-select">
<option value="csv">CSV (Comma Separated Values)</option>
<option value="xlsx">Excel (XLSX)</option>
<option value="pdf">PDF (Printable Document Format)</option>
</select>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
</svg>
Export Data
</button>
<button type="button" class="btn btn-secondary btn-reset">Reset Filters</button>
</div>
</form>
</section>
<div class="export-status-message">
<p class="status-placeholder">
<span class="icon-placeholder">ℹ️</span> Your export will begin shortly. The download link will appear here once ready.
</p>
</div>
</div>
</main>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipping Label Generation</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<section class="section-shipping-label" aria-labelledby="shippingLabelHeading">
<h2 id="shippingLabelHeading">Generate Shipping Label</h2>
<div class="shipping-label-content">
<div class="shipping-label-info">
<p>Click the button below to generate a printable shipping label for your recent orders.</p>
<p>Ensure your printer is connected and ready. Labels will be generated in PDF format.</p>
<p>This feature is available for processed orders awaiting shipment.</p>
</div>
<a href="#" class="label-generation-cta" role="button" aria-label="Generate Shipping Label PDF">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path d="M19 8H5c-1.1 0-2 .9-2 2v6h4v4h10v-4h4v-6c0-1.1-.9-2-2-2zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
</svg>
Generate Label
</a>
<div class="admin-note">
<p><em>(For Admin Use Only)</em></p>
<p>This link provides a quick access point for administrators to generate and print shipping labels for customer orders. Verify order details before printing.</p>
</div>
</div>
</section>
</div>
</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>
<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>Order List - Jewelry Store</title>
@ -676,6 +277,19 @@
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<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 &amp; 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>Order List - Jewelry Store</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Status Update Form</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shipping Label Generation</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

424
admin_product_management.html
View File

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

486
admin_user_management.html
View File

@ -9,476 +9,7 @@
</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>User List Table</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="user-list-section" aria-labelledby="userListHeading">
<h2 id="userListHeading">User Accounts</h2>
<div class="table-responsive">
<table class="user-table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">User ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Role</th>
<th scope="col">Status</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U1" alt="User 1 Avatar">
</td>
<td>#U001</td>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>Customer</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for John Doe">View</button>
<button class="btn btn-edit" aria-label="Edit details for John Doe">Edit</button>
<button class="btn btn-delete" aria-label="Delete user John Doe">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U2" alt="User 2 Avatar">
</td>
<td>#U002</td>
<td>Jane Smith</td>
<td>jane.smith@example.com</td>
<td>Admin</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Jane Smith">View</button>
<button class="btn btn-edit" aria-label="Edit details for Jane Smith">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Jane Smith">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U3" alt="User 3 Avatar">
</td>
<td>#U003</td>
<td>Robert Johnson</td>
<td>robert.j@example.com</td>
<td>Customer</td>
<td>Inactive</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Robert Johnson">View</button>
<button class="btn btn-edit" aria-label="Edit details for Robert Johnson">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Robert Johnson">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U4" alt="User 4 Avatar">
</td>
<td>#U004</td>
<td>Emily White</td>
<td>emily.w@example.com</td>
<td>Customer</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Emily White">View</button>
<button class="btn btn-edit" aria-label="Edit details for Emily White">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Emily White">Delete</button>
</td>
</tr>
<tr>
<td class="user-avatar">
<img src="https://via.placeholder.com/40/CCCCCC/666666?text=U5" alt="User 5 Avatar">
</td>
<td>#U005</td>
<td>Michael Brown</td>
<td>michael.b@example.com</td>
<td>Customer</td>
<td>Active</td>
<td class="user-actions">
<button class="btn btn-view" aria-label="View details for Michael Brown">View</button>
<button class="btn btn-edit" aria-label="Edit details for Michael Brown">Edit</button>
<button class="btn btn-delete" aria-label="Delete user Michael Brown">Delete</button>
</td>
</tr>
</tbody>
</table>
</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>Search and Filter Users</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=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header class="section-header">
<h2>Manage Users</h2>
<p>Search, filter, and view details of registered users.</p>
</header>
<section class="filter-controls" aria-labelledby="user-filter-heading">
<h3 id="user-filter-heading" class="sr-only">Filter Users</h3>
<div class="filter-group">
<label for="search-name">Search by Name</label>
<input type="text" id="search-name" placeholder="E.g., John Doe">
</div>
<div class="filter-group">
<label for="search-email">Search by Email</label>
<input type="email" id="search-email" placeholder="E.g., john.doe@example.com">
</div>
<div class="filter-group">
<label for="user-role">Filter by Role</label>
<select id="user-role">
<option value="">All Roles</option>
<option value="customer">Customer</option>
<option value="admin">Admin</option>
</select>
</div>
<div class="filter-group">
<button type="button">Apply Filters</button>
</div>
</section>
<main class="user-list" aria-live="polite">
<article class="user-card">
<h3>John Doe</h3>
<p><strong>Email:</strong> john.doe@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-01-15</p>
<p><strong>Total Orders:</strong> 5</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Jane Smith</h3>
<p><strong>Email:</strong> jane.smith@example.com</p>
<p><strong>Role:</strong> Admin</p>
<p><strong>Registered On:</strong> 2022-11-01</p>
<p><strong>Total Orders:</strong> N/A</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Alice Johnson</h3>
<p><strong>Email:</strong> alice.j@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-03-20</p>
<p><strong>Total Orders:</strong> 2</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Robert Brown</h3>
<p><strong>Email:</strong> rob.b@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-02-10</p>
<p><strong>Total Orders:</strong> 8</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Emily White</h3>
<p><strong>Email:</strong> emily.w@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-04-05</p>
<p><strong>Total Orders:</strong> 1</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
<article class="user-card">
<h3>Michael Green</h3>
<p><strong>Email:</strong> mike.g@example.com</p>
<p><strong>Role:</strong> Customer</p>
<p><strong>Registered On:</strong> 2023-05-12</p>
<p><strong>Total Orders:</strong> 0</p>
<div class="user-actions">
<button class="view-details">View Details</button>
<button class="manage-btn">Manage</button>
</div>
</article>
</main>
</div>
</body>
</html>
<section class="user-details-section">
<h2 class="section-title">Account Information</h2>
<div class="user-info-group">
<div class="user-info-item">
<span class="info-label">Full Name:</span>
<span class="info-value">[User Full Name]</span>
</div>
<div class="user-info-item">
<span class="info-label">Email Address:</span>
<span class="info-value">[user@example.com]</span>
</div>
<div class="user-info-item">
<span class="info-label">Phone Number:</span>
<span class="info-value">[+1 (XXX) XXX-XXXX]</span>
</div>
<div class="user-info-item address-block">
<span class="info-label">Shipping Address:</span>
<span class="info-value">
[Street Address Line 1]<br>
[Street Address Line 2 (Optional)]<br>
[City], [State/Province] [ZIP/Postal Code]<br>
[Country]
</span>
</div>
</div>
<div class="user-actions">
<a href="/account/edit-profile" class="edit-profile-link">Edit Profile Information</a>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Role Management Controls</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="role-management-section" aria-labelledby="role-management-heading">
<h2 id="role-management-heading">Role Management Controls</h2>
<div class="role-management-controls-header">
<div class="search-bar">
<label for="role-search" class="sr-only">Search roles</label>
<input type="text" id="role-search" placeholder="Search by role name or user ID...">
</div>
<div class="filter-select">
<label for="role-filter" class="sr-only">Filter by status</label>
<select id="role-filter">
<option value="all">All Statuses</option>
<option value="active">Active</option>
<option value="inactive">Inactive</option>
<option value="pending">Pending Assignment</option>
</select>
</div>
<button class="add-role-button" type="button">Add New Role</button>
</div>
<div class="table-container" role="region" aria-live="polite">
<table class="role-list-table">
<thead>
<tr>
<th scope="col">Role Name</th>
<th scope="col">Description</th>
<th scope="col">Assigned Users</th>
<th scope="col">Status</th>
<th scope="col">Last Modified</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Role Name">Administrator</td>
<td data-label="Description">Full control over all system features and data.</td>
<td data-label="Assigned Users">5</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-26</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Product Manager</td>
<td data-label="Description">Manages product catalog, pricing, and inventory.</td>
<td data-label="Assigned Users">3</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-20</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Order Processor</td>
<td data-label="Description">Handles order fulfillment, shipping, and returns.</td>
<td data-label="Assigned Users">7</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-25</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Customer Service</td>
<td data-label="Description">Manages customer inquiries and support tickets.</td>
<td data-label="Assigned Users">4</td>
<td data-label="Status"><span class="role-status status-active">Active</span></td>
<td data-label="Last Modified">2023-10-18</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Marketing Specialist</td>
<td data-label="Description">Manages promotional campaigns and website content.</td>
<td data-label="Assigned Users">2</td>
<td data-label="Status"><span class="role-status status-inactive">Inactive</span></td>
<td data-label="Last Modified">2023-09-15</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
<tr>
<td data-label="Role Name">Guest User</td>
<td data-label="Description">Default role for unauthenticated website visitors.</td>
<td data-label="Assigned Users">N/A</td>
<td data-label="Status"><span class="role-status status-pending">Pending Assignment</span></td>
<td data-label="Last Modified">2023-08-01</td>
<td data-label="Actions" class="role-actions">
<button type="button" class="edit-btn">Edit</button>
<button type="button" class="delete-btn">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<nav class="pagination-controls" aria-label="Role list pagination">
<button type="button" aria-label="Previous page" disabled>&laquo; Previous</button>
<span class="current-page">Page 1 of 5</span>
<button type="button" aria-label="Next page">Next &raquo;</button>
</nav>
</section>
</body>
</html>
<section class="password-reset-section">
<div class="password-reset-container">
<h1 class="section-title">Forgot Your Password?</h1>
<p class="section-description">Enter your registered email address below to receive a password reset link.</p>
<form class="password-reset-form" action="#" method="post">
<div class="form-group">
<label for="email" class="form-label">Email Address</label>
<input type="email" id="email" name="email" class="form-input" placeholder="youremail@example.com" autocomplete="email" required>
</div>
<button type="submit" class="submit-button">Send Reset Link</button>
</form>
<div class="form-footer">
<p class="footer-text">Remembered your password? <a href="#" class="footer-link">Back to Login</a></p>
<p class="footer-text">Need assistance? <a href="#" class="footer-link">Contact Support</a></p>
</div>
</div>
</section>
<section class="communication-tools-section">
<div class="container">
<h2 class="section-title">Connect With Us</h2>
<p class="section-description">We're here to assist you. Choose how you'd like to get in touch or find answers to your questions.</p>
<div class="communication-methods-grid">
<div class="method-card">
<div class="card-icon-placeholder icon-chat"></div>
<h3 class="card-title">Live Chat Support</h3>
<p class="card-description">Get instant assistance from our customer service team during business hours.</p>
<a href="#" class="btn btn-primary placeholder-button">Start Chat Now</a>
</div>
<div class="method-card">
<div class="card-icon-placeholder icon-email"></div>
<h3 class="card-title">Email Us</h3>
<p class="card-description">Send us your inquiries and we'll respond within 24-48 business hours.</p>
<a href="mailto:support@example.com" class="btn btn-secondary placeholder-button">Send an Email</a>
</div>
<div class="method-card">
<div class="card-icon-placeholder icon-phone"></div>
<h3 class="card-title">Call Us</h3>
<p class="card-description">Speak directly with our jewelry specialists for personalized assistance.</p>
<a href="tel:+1234567890" class="btn btn-secondary placeholder-button">Call: +1 (234) 567-890</a>
</div>
<div class="method-card">
<div class="card-icon-placeholder icon-faq"></div>
<h3 class="card-title">Frequently Asked Questions</h3>
<p class="card-description">Find quick answers to common questions about orders, products, and services.</p>
<a href="/faq" class="btn btn-secondary placeholder-button">View FAQs</a>
</div>
</div>
<div class="contact-form-section">
<h3 class="form-title">Send Us a Message</h3>
<p class="form-description">Prefer to write? Use the form below for general inquiries or feedback.</p>
<form action="#" method="POST" class="contact-form">
<div class="form-group">
<label for="name" class="visually-hidden">Your Name</label>
<input type="text" id="name" name="name" placeholder="Your Name" required class="form-input">
</div>
<div class="form-group">
<label for="email" class="visually-hidden">Your Email</label>
<input type="email" id="email" name="email" placeholder="Your Email" required class="form-input">
</div>
<div class="form-group">
<label for="subject" class="visually-hidden">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Subject (Optional)" class="form-input">
</div>
<div class="form-group">
<label for="message" class="visually-hidden">Your Message</label>
<textarea id="message" name="message" rows="5" placeholder="Your Message" required class="form-input"></textarea>
</div>
<button type="submit" class="btn btn-primary submit-button">Send Message</button>
</form>
</div>
<div class="social-media-links">
<h3 class="social-title">Connect with Us on Social Media</h3>
<p class="social-description">Stay updated with our latest collections, promotions, and stories.</p>
<div class="social-icons">
<a href="#" class="social-icon-placeholder icon-instagram" aria-label="Follow us on Instagram"></a>
<a href="#" class="social-icon-placeholder icon-facebook" aria-label="Follow us on Facebook"></a>
<a href="#" class="social-icon-placeholder icon-pinterest" aria-label="Follow us on Pinterest"></a>
<a href="#" class="social-icon-placeholder icon-youtube" aria-label="Subscribe to our YouTube channel"></a>
</div>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></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>
<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>User List Table</title>
@ -924,6 +455,21 @@
</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 &amp; 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>User List Table</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search and Filter Users</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Role Management Controls</title>
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

447
checkout.html
View File

@ -9,434 +9,7 @@
</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>
<section class="progress-indicator-section">
<h2 class="section-title">Your Checkout Progress</h2>
<nav aria-label="Checkout progress steps" class="progress-steps-container">
<ol class="progress-steps">
<li class="progress-step completed">
<a href="#" class="step-link">
<span class="step-number">1</span>
<span class="step-name">Shopping Cart</span>
</a>
</li>
<li class="progress-step current">
<a href="#" class="step-link" aria-current="step">
<span class="step-number">2</span>
<span class="step-name">Shipping Details</span>
</a>
</li>
<li class="progress-step">
<a href="#" class="step-link disabled" tabindex="-1">
<span class="step-number">3</span>
<span class="step-name">Payment Options</span>
</a>
</li>
<li class="progress-step">
<a href="#" class="step-link disabled" tabindex="-1">
<span class="step-number">4</span>
<span class="step-name">Order Review</span>
</a>
</li>
<li class="progress-step">
<a href="#" class="step-link disabled" tabindex="-1">
<span class="step-number">5</span>
<span class="step-name">Confirmation</span>
</a>
</li>
</ol>
</nav>
</section>
<section class="shipping-address-section">
<div class="container">
<h2 class="section-title">Shipping Address</h2>
<form class="shipping-address-form">
<div class="form-group">
<label for="fullName">Full Name</label>
<input type="text" id="fullName" name="fullName" placeholder="John Doe" required>
</div>
<div class="form-group">
<label for="addressLine1">Address Line 1</label>
<input type="text" id="addressLine1" name="addressLine1" placeholder="123 Main Street" required>
</div>
<div class="form-group">
<label for="addressLine2">Address Line 2 (Optional)</label>
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apartment, Suite, Unit, etc.">
</div>
<div class="form-row">
<div class="form-group">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="Anytown" required>
</div>
<div class="form-group">
<label for="stateProvince">State / Province</label>
<input type="text" id="stateProvince" name="stateProvince" placeholder="State/Province" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="postalCode">Postal Code / ZIP</label>
<input type="text" id="postalCode" name="postalCode" placeholder="12345" required>
</div>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="">Select Country</option>
<option value="USA">United States</option>
<option value="IND">India</option>
<option value="CAN">Canada</option>
<option value="GBR">United Kingdom</option>
<option value="AUS">Australia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="phoneNumber">Phone Number</label>
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="+1 (555) 123-4567">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">Save Address</button>
</div>
</form>
</div>
</section>
<section id="payment-selection" class="payment-selection-section">
<div class="container">
<h2 class="section-title">Select Payment Method</h2>
<div class="payment-methods-grid">
<!-- Credit Card Option -->
<label for="payment-credit-card" class="payment-method-card">
<input type="radio" id="payment-credit-card" name="payment_method" value="credit_card" checked>
<div class="card-content">
<div class="card-header">
<span class="method-name">Credit Card</span>
<div class="method-logo">
<span class="logo-placeholder">💳</span>
</div>
</div>
<p class="method-description">Pay securely with your Visa, MasterCard, or Amex.</p>
</div>
</label>
<!-- Debit Card Option -->
<label for="payment-debit-card" class="payment-method-card">
<input type="radio" id="payment-debit-card" name="payment_method" value="debit_card">
<div class="card-content">
<div class="card-header">
<span class="method-name">Debit Card</span>
<div class="method-logo">
<span class="logo-placeholder">💳</span>
</div>
</div>
<p class="method-description">Use your bank's debit card for easy payments.</p>
</div>
</label>
<!-- Net Banking Option -->
<label for="payment-net-banking" class="payment-method-card">
<input type="radio" id="payment-net-banking" name="payment_method" value="net_banking">
<div class="card-content">
<div class="card-header">
<span class="method-name">Net Banking</span>
<div class="method-logo">
<span class="logo-placeholder">🏦</span>
</div>
</div>
<p class="method-description">Login to your bank account to complete the payment.</p>
</div>
</label>
<!-- UPI Option -->
<label for="payment-upi" class="payment-method-card">
<input type="radio" id="payment-upi" name="payment_method" value="upi">
<div class="card-content">
<div class="card-header">
<span class="method-name">UPI</span>
<div class="method-logo">
<span class="logo-placeholder">📲</span>
</div>
</div>
<p class="method-description">Instant payment via UPI ID or QR code.</p>
</div>
</label>
<!-- Cash on Delivery Option -->
<label for="payment-cod" class="payment-method-card">
<input type="radio" id="payment-cod" name="payment_method" value="cod">
<div class="card-content">
<div class="card-header">
<span class="method-name">Cash on Delivery</span>
<div class="method-logo">
<span class="logo-placeholder">💵</span>
</div>
</div>
<p class="method-description">Pay with cash when your order is delivered.</p>
</div>
</label>
</div> <!-- /payment-methods-grid -->
<div class="payment-details-form-container">
<h3>Enter Payment Details</h3>
<!-- Placeholder for dynamic payment form based on selection -->
<div id="credit-card-details" class="payment-form-section active">
<p>Card Number: [____________ ____ ____ ____]</p>
<p>Card Holder Name: [_______________________]</p>
<p>Expiry Date (MM/YY): [__/__]</p>
<p>CVV: [___]</p>
</div>
<div id="debit-card-details" class="payment-form-section" style="display: none;">
<p>Card Number: [____________ ____ ____ ____]</p>
<p>Card Holder Name: [_______________________]</p>
<p>Expiry Date (MM/YY): [__/__]</p>
<p>CVV: [___]</p>
</div>
<div id="net-banking-details" class="payment-form-section" style="display: none;">
<p>Select Bank: [Dropdown/List of Banks]</p>
</div>
<div id="upi-details" class="payment-form-section" style="display: none;">
<p>UPI ID: [yourname@bankupi]</p>
</div>
<div id="cod-details" class="payment-form-section" style="display: none;">
<p>You have selected Cash on Delivery. Please keep the exact amount ready.</p>
</div>
</div>
<div class="action-buttons">
<button type="submit" class="button primary-button">Proceed to Pay</button>
<button type="button" class="button secondary-button">Back to Order Summary</button>
</div>
</div> <!-- /container -->
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Review Summary</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=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="order-review-summary" aria-labelledby="orderSummaryHeading">
<header>
<h2 id="orderSummaryHeading">Order Review Summary</h2>
</header>
<div class="order-review-summary-content">
<div class="summary-details">
<h3>Order Items</h3>
<ul class="order-items">
<li class="order-item">
<img src="https://via.placeholder.com/80x80/E0E0E0/808080?text=Ring" alt="Eternal Love Diamond Ring" class="item-image">
<div class="item-info">
<div class="item-name">Eternal Love Diamond Ring</div>
<div class="item-quantity">Quantity: 1</div>
<div class="item-price">Price: &#8377; 75,000.00</div>
</div>
<div class="item-subtotal">&#8377; 75,000.00</div>
</li>
<li class="order-item">
<img src="https://via.placeholder.com/80x80/E0E0E0/808080?text=Necklace" alt="Celestial Bloom Necklace" class="item-image">
<div class="item-info">
<div class="item-name">Celestial Bloom Necklace</div>
<div class="item-quantity">Quantity: 1</div>
<div class="item-price">Price: &#8377; 42,500.00</div>
</div>
<div class="item-subtotal">&#8377; 42,500.00</div>
</li>
<li class="order-item">
<img src="https://via.placeholder.com/80x80/E0E0E0/808080?text=Earrings" alt="Starlight Solitaire Earrings" class="item-image">
<div class="item-info">
<div class="item-name">Starlight Solitaire Earrings</div>
<div class="item-quantity">Quantity: 2</div>
<div class="item-price">Price: &#8377; 18,000.00</div>
</div>
<div class="item-subtotal">&#8377; 36,000.00</div>
</li>
</ul>
<div class="shipping-info">
<h4>Shipping Address</h4>
<address>
<p>John Doe</p>
<p>123 Jewel Street</p>
<p>Emerald City, 90210</p>
<p>United States</p>
<p>Phone: +1 (555) 123-4567</p>
</address>
</div>
<div class="payment-info">
<h4>Payment Method</h4>
<p>Credit Card (**** **** **** 1234)</p>
<p>Expires: 12/26</p>
</div>
</div>
<aside class="summary-total">
<h3>Order Totals</h3>
<div>
<span class="label">Subtotal:</span>
<span class="value">&#8377; 153,500.00</span>
</div>
<div>
<span class="label">Shipping:</span>
<span class="value">&#8377; 500.00</span>
</div>
<div>
<span class="label">GST (5%):</span>
<span class="value">&#8377; 7,700.00</span>
</div>
<div class="total-amount">
<span class="label">Total:</span>
<span class="value">&#8377; 161,700.00</span>
</div>
</aside>
</div>
<div class="button-group">
<a href="#" class="button button-secondary">Edit Order</a>
<button type="submit" class="button button-primary">Confirm & Place Order</button>
</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>Place Order</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="place-order-section">
<h2>Place Your Order</h2>
<div class="order-summary-details">
<h3>Order Summary</h3>
<dl>
<dt>Subtotal:</dt>
<dd>$2,500.00</dd>
<dt>Shipping:</dt>
<dd>$25.00</dd>
<dt>Tax (8%):</dt>
<dd>$202.00</dd>
<dt class="total">Grand Total:</dt>
<dd class="total">$2,727.00</dd>
</dl>
</div>
<div class="payment-info-placeholder">
<p>Payment Information Section Placeholder</p>
<p><em>(e.g., Credit Card Form, UPI Options, Net Banking)</em></p>
<p>Selected Method: <strong style="color: #5a3c2a;">Credit Card (**** 1234)</strong></p>
</div>
<div class="button-container">
<button type="submit" class="place-order-button">Confirm & Place Order</button>
</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>Security Assurance - JewelStore</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 id="security-assurance" class="security-assurance-section">
<div class="container">
<header class="security-intro">
<h1>Your Trust, Our Priority: Security Assurance</h1>
<p>At JewelStore, safeguarding your personal information and transaction details is paramount. We employ cutting-edge security measures to ensure a safe and private shopping experience for every customer.</p>
</header>
<div class="security-features-grid">
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
<h3>SSL Encrypted Connections</h3>
<p>All data transmitted between your browser and our servers is secured with industry-standard 256-bit SSL encryption, protecting your personal and payment details.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
<h3>Secure Payment Gateways</h3>
<p>We partner with leading payment processors that comply with the highest security standards (PCI DSS) to handle all transactions securely. Your payment information is never stored on our servers.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-database"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M21 19c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path></svg>
<h3>Data Privacy & Protection</h3>
<p>Your personal data is handled with the utmost care, in strict adherence to privacy regulations. We do not share or sell your information to third parties.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M21 2l-2 2m-7 7L4 12c-2.76 2.76-2.76 7.24 0 10s7.24 2.76 10 0l1.5-1.5m-3.5-3.5l1.5-1.5m-7-7L7 4c2.76-2.76 7.24-2.76 10 0s2.76 7.24 0 10l-1.5 1.5M10 10l3-3"></path></svg>
<h3>Secure Account Management</h3>
<p>Strong password policies, secure session management, and optional multi-factor authentication protect your user account from unauthorized access.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-activity"><polyline points="22 12 18 12 15 22 9 2 6 12 2 12"></polyline></svg>
<h3>Regular Security Audits</h3>
<p>Our systems undergo continuous monitoring and regular security audits by expert third parties to identify and address potential vulnerabilities promptly.</p>
</div>
<div class="feature-card">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
<h3>Fraud Prevention</h3>
<p>Advanced fraud detection systems are in place to scrutinize transactions and prevent fraudulent activities, ensuring a secure environment for all.</p>
</div>
</div>
<section class="trust-badges" aria-label="Security and Trust Badges">
<div class="badge-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-8.1"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
<span>PCI DSS Compliant</span>
</div>
<div class="badge-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-certificate-outline"><path d="M15 3h6v6"></path><path d="M10 14L2 22"></path><path d="M22 10V2"></path><path d="M22 2L10 14"></path><path d="M10 22L2 14"></path><path d="M2 10V2"></path><path d="M2 2L10 10"></path><path d="M14 10h6v6"></path><path d="M22 14V22"></path><path d="M14 22H22"></path></svg>
<span>SSL Secured</span>
</div>
<div class="badge-item">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>
<span>Global Privacy Standards</span>
</div>
</section>
<footer class="cta-security">
<h2>Shop with Confidence</h2>
<p>We are committed to providing you with a secure and enjoyable shopping journey. If you have any questions about our security practices, please do not hesitate to contact our support team.</p>
<a href="#contact-us" class="btn-primary">Contact Support</a>
</footer>
</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>
<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>
<section class="progress-indicator-section">
<h2 class="section-title">Your Checkout Progress</h2>
<nav aria-label="Checkout progress steps" class="progress-steps-container">
@ -840,6 +413,24 @@
</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 &amp; 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>Order Review Summary</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Place Order</title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Security Assurance - JewelStore</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

262
dashboard.html
View File

@ -9,255 +9,7 @@
</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>
<section class="welcome-header">
<div class="welcome-content">
<h1 class="welcome-title">Discover Your Perfect Sparkle</h1>
<p class="welcome-tagline">
Elegance crafted, memories cherished. Explore our exquisite collections of fine jewelry.
</p>
<a href="#shop-now" class="welcome-cta">Shop Our Collections</a>
</div>
</section>
<section class="quick-access-section">
<div class="container">
<h2 class="section-title">Quick Access & Collections</h2>
<div class="quick-access-grid">
<a href="#" class="quick-access-card" aria-label="Shop our exquisite collection of Rings">
<div class="card-icon">
<img src="https://via.placeholder.com/64x64/f0e68c/333?text=Rings" alt="Icon for Rings category">
</div>
<h3 class="card-title">Shop Rings</h3>
<p class="card-description">Discover stunning rings for every occasion.</p>
<span class="card-link" aria-hidden="true">Explore Rings &rarr;</span>
</a>
<a href="#" class="quick-access-card" aria-label="Browse our elegant collection of Necklaces">
<div class="card-icon">
<img src="https://via.placeholder.com/64x64/f0e68c/333?text=Necklaces" alt="Icon for Necklaces category">
</div>
<h3 class="card-title">Shop Necklaces</h3>
<p class="card-description">Find the perfect necklace to adorn your neck.</p>
<span class="card-link" aria-hidden="true">Explore Necklaces &rarr;</span>
</a>
<a href="#" class="quick-access-card" aria-label="View items in your Shopping Cart">
<div class="card-icon">
<img src="https://via.placeholder.com/64x64/f0e68c/333?text=Cart" alt="Icon for Shopping Cart">
</div>
<h3 class="card-title">My Cart</h3>
<p class="card-description">Review and manage items in your cart.</p>
<span class="card-link" aria-hidden="true">View Cart &rarr;</span>
</a>
<a href="#" class="quick-access-card" aria-label="Access your Order History and details">
<div class="card-icon">
<img src="https://via.placeholder.com/64x64/f0e68c/333?text=Orders" alt="Icon for Order History">
</div>
<h3 class="card-title">My Orders</h3>
<p class="card-description">Track your past and pending orders.</p>
<span class="card-link" aria-hidden="true">View Orders &rarr;</span>
</a>
<a href="#" class="quick-access-card" aria-label="Discover our latest New Arrivals">
<div class="card-icon">
<img src="https://via.placeholder.com/64x64/f0e68c/333?text=New" alt="Icon for New Arrivals">
</div>
<h3 class="card-title">New Arrivals</h3>
<p class="card-description">Be the first to explore our latest jewelry designs.</p>
<span class="card-link" aria-hidden="true">Discover Now &rarr;</span>
</a>
<a href="#" class="quick-access-card" aria-label="Find the perfect Gift Ideas">
<div class="card-icon">
<img src="https://via.placeholder.com/64x64/f0e68c/333?text=Gift" alt="Icon for Gift Ideas">
</div>
<h3 class="card-title">Gift Ideas</h3>
<p class="card-description">Curated selections for every special occasion.</p>
<span class="card-link" aria-hidden="true">Browse Gifts &rarr;</span>
</a>
</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>Recent Orders Snapshot</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=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="dashboard-section" aria-labelledby="recentOrdersHeading">
<h2 id="recentOrdersHeading">Recent Orders Snapshot</h2>
<div class="order-list">
<article class="order-card" aria-labelledby="order1Heading">
<h3 id="order1Heading">Order #ADG78901</h3>
<div class="order-info">
<p><strong>Date:</strong> <span>Oct 26, 2023</span></p>
<p><strong>Total:</strong> <span>₹ 15,499.00</span></p>
<p><strong>Items:</strong> <span>2 items</span></p>
<p><strong>Status:</strong> <span class="order-status status-delivered">Delivered</span></p>
</div>
<a href="#order-details-1" class="view-details-link">View Details</a>
</article>
<article class="order-card" aria-labelledby="order2Heading">
<h3 id="order2Heading">Order #ADG78902</h3>
<div class="order-info">
<p><strong>Date:</strong> <span>Oct 20, 2023</span></p>
<p><strong>Total:</strong> <span>₹ 7,850.00</span></p>
<p><strong>Items:</strong> <span>1 item</span></p>
<p><strong>Status:</strong> <span class="order-status status-shipped">Shipped</span></p>
</div>
<a href="#order-details-2" class="view-details-link">View Details</a>
</article>
<article class="order-card" aria-labelledby="order3Heading">
<h3 id="order3Heading">Order #ADG78903</h3>
<div class="order-info">
<p><strong>Date:</strong> <span>Oct 15, 2023</span></p>
<p><strong>Total:</strong> <span>₹ 22,100.00</span></p>
<p><strong>Items:</strong> <span>3 items</span></p>
<p><strong>Status:</strong> <span class="order-status status-pending">Pending</span></p>
</div>
<a href="#order-details-3" class="view-details-link">View Details</a>
</article>
</div>
<!-- Optional: Message if no recent orders -->
<!-- <div class="no-orders-message">
<p>You haven't placed any orders recently.</p>
<p>Explore our exquisite collection to find your next favorite piece!</p>
</div> -->
<div class="full-history-link-container">
<a href="#order-history" class="full-history-link">View All Order History</a>
</div>
</section>
</body>
</html>
<section class="recommended-products-section">
<div class="container">
<h2 class="section-title">Recommended for You</h2>
<div class="product-grid">
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/300x300/F0E6D2/A38C7A?text=Elegant+Diamond+Ring" alt="Elegant Diamond Ring" class="product-image">
</div>
<h3 class="product-title">Elegant Diamond Ring</h3>
<p class="product-price">$1,299.00</p>
<p class="product-description">A timeless piece crafted with precision and brilliance.</p>
</a>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/300x300/DEDCD3/8A7B6D?text=Classic+Pearl+Necklace" alt="Classic Pearl Necklace" class="product-image">
</div>
<h3 class="product-title">Classic Pearl Necklace</h3>
<p class="product-price">$850.00</p>
<p class="product-description">Sophistication personified with lustrous freshwater pearls.</p>
</a>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/300x300/F0E6D2/A38C7A?text=Minimalist+Gold+Bangle" alt="Minimalist Gold Bangle" class="product-image">
</div>
<h3 class="product-title">Minimalist Gold Bangle</h3>
<p class="product-price">$450.00</p>
<p class="product-description">Understated elegance for everyday wear or special occasions.</p>
</a>
</article>
<article class="product-card">
<a href="#" class="product-link">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/300x300/DEDCD3/8A7B6D?text=Sparkling+Stud+Earrings" alt="Sparkling Stud Earrings" class="product-image">
</div>
<h3 class="product-title">Sparkling Stud Earrings</h3>
<p class="product-price">$620.00</p>
<p class="product-description">Delicate and dazzling, perfect for adding a subtle sparkle.</p>
</a>
</article>
</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>Account Settings Link Section</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="account-settings-link-section">
<div class="container">
<header class="section-header">
<h2>Your Account Settings</h2>
<p>Manage your profile, orders, and preferences to personalize your shopping experience.</p>
</header>
<div class="settings-grid">
<article class="setting-item">
<span class="icon profile" aria-hidden="true"></span>
<h3>Profile Information</h3>
<p>Update your personal details, email, and contact information.</p>
<a href="/account/profile" class="view-link">Edit Profile</a>
</article>
<article class="setting-item">
<span class="icon security" aria-hidden="true"></span>
<h3>Security & Login</h3>
<p>Change your password or manage your login preferences.</p>
<a href="/account/security" class="view-link">Manage Security</a>
</article>
<article class="setting-item">
<span class="icon orders" aria-hidden="true"></span>
<h3>Order History</h3>
<p>View details of your past and current orders, track shipments.</p>
<a href="/account/orders" class="view-link">View Orders</a>
</article>
<article class="setting-item">
<span class="icon address" aria-hidden="true"></span>
<h3>Shipping Addresses</h3>
<p>Add, edit, or remove your shipping and billing addresses.</p>
<a href="/account/addresses" class="view-link">Manage Addresses</a>
</article>
<article class="setting-item">
<span class="icon payment" aria-hidden="true"></span>
<h3>Payment Methods</h3>
<p>Securely save and manage your preferred payment options.</p>
<a href="/account/payment" class="view-link">Manage Payments</a>
</article>
<article class="setting-item">
<span class="icon preferences" aria-hidden="true"></span>
<h3>Communication Prefs</h3>
<p>Adjust your email notification settings and newsletter subscriptions.</p>
<a href="/account/preferences" class="view-link">Update Preferences</a>
</article>
</div>
</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>
<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>
<section class="welcome-header">
<div class="welcome-content">
<h1 class="welcome-title">Discover Your Perfect Sparkle</h1>
@ -491,6 +243,18 @@
</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 &amp; 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>Recent Orders Snapshot</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Account Settings Link Section</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

10
index.html
View File

@ -9,15 +9,7 @@
</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>
<div class="hero-1-wrapper"><section class="hero-1-two-column"><div class="hero-1-content"><h2 class="hero-1-heading">Adorn Yourself in Pure Brilliance</h2><p class="hero-1-description">Indulge in the allure of fine jewelry. Each piece in our collection is meticulously crafted with passion and precision, ensuring exceptional quality and timeless beauty. Find your perfect adornment.</p><div class="hero-1-button-group"><button class="hero-1-btn hero-1-solid">Shop Now</button><button class="hero-1-btn hero-1-outline">Explore Collections</button></div></div><div class="hero-1-image"><img class="hero-1-placeholder" src="https://images.unsplash.com/photo-1547097268-d9d66399e574?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjUyMGpld2VscnklMkMlMjUyMGRpYW1vbmQlMjUyMHJpbmdzJTJDJTI1MjBnb2xkJTI1MjBuZWNrbGFjZXMlMkMlMjUyMGVsZWdhbnQlMjUyMGVhcnJpbmdzJTJDJTI1MjBmaW5lJTI1MjBjcmFmdHNtYW5zaGlwJTJDJTI1MjBlbmdhZ2VtZW50JTI1MjByaW5ncyUyQyUyNTIwZ2Vtc3RvbmUlMjUyMGpld2VscnklMkMlMjUyMHRpbWVsZXNzJTI1MjBkZXNpZ258ZW58MHx8fHwxNzU0MzAzNjQ3fDA&ixlib=rb-4.1.0&q=80&w=1080" /></div></section></div>
<div class="grid-11-wrapper"><section class="grid-11-section"><p class="grid-11-tagline">Experience Elegance</p><h2 class="grid-11-heading">Discover Our Exquisite Jewelry Collections</h2><p class="grid-11-description">At Aurum Jewels, we believe every piece of jewelry tells a unique story. Explore our meticulously crafted collections, designed to celebrate life's most precious moments with unparalleled beauty and timeless style.</p><div class="grid-11-card-grid"><div class="grid-11-card"><div class="grid-11-img-container"><img class="grid-11-placeholder" src="https://images.unsplash.com/photo-1451933371645-a3029668b979?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxjcmFmdHNtYW5zaGlwJTJDJTI1MjBoYW5kbWFkZSUyQyUyNTIwcXVhbGl0eSUyQyUyNTIwZGV0YWlsZWQlMkMlMjUyMGFydGlzYW5zfGVufDB8fHx8MTc1NDMwMzY3Nnww&ixlib=rb-4.1.0&q=80&w=1080" /></div><h3 class="grid-11-card-title">Unrivaled Craftsmanship</h3><p class="grid-11-card-desc">Each piece is a testament to our artisans' dedication, handcrafted with precision and passion, using only the finest ethically sourced materials to ensure lasting beauty and sparkle.</p></div><div class="grid-11-card"><div class="grid-11-img-container"><img class="grid-11-placeholder" src="https://images.unsplash.com/photo-1567836480874-b2bdaaa7a0e3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHx2YXJpZXR5JTJDJTI1MjBjb2xsZWN0aW9ucyUyQyUyNTIwdW5pcXVlJTJDJTI1MjBzdHlsZXMlMkMlMjUyMHJpbmdzJTJDJTI1MjBuZWNrbGFjZXMlMkMlMjUyMGJhbmdsZXMlMkMlMjUyMGVhcnJpbmdzfGVufDB8fHx8MTc1NDMwMzY3N3ww&ixlib=rb-4.1.0&q=80&w=1080" /></div><h3 class="grid-11-card-title">Diverse & Dazzling Collections</h3><p class="grid-11-card-desc">From classic elegance to contemporary chic, our extensive range of rings, necklaces, bangles, and earrings ensures you'll find the perfect adornment for every occasion and style.</p></div><div class="grid-11-card"><div class="grid-11-img-container"><img class="grid-11-placeholder" src="https://images.unsplash.com/photo-1564313677573-481bd55237ad?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxzZWN1cmUlMkMlMjUyMHNob3BwaW5nJTJDJTI1MjBjb252ZW5pZW5jZSUyQyUyNTIwZmFzdCUyNTIwZGVsaXZlcnklMkMlMjUyMGN1c3RvbWVyJTI1MjBzZXJ2aWNlJTJDJTI1MjBwZWFjZSUyNTIwb2YlMjUyMG1pbmR8ZW58MHx8fHwxNzU0MzAzNjc4fDA&ixlib=rb-4.1.0&q=80&w=1080" /></div><h3 class="grid-11-card-title">Seamless & Secure Shopping</h3><p class="grid-11-card-desc">Enjoy a worry-free shopping journey with our intuitive interface, secure payment options, and dedicated customer support, ensuring your cherished selections arrive safely at your doorstep.</p></div></div><div class="grid-11-button-group"><button class="grid-11-btn grid-11-outline">Explore All Jewelry</button><button class="grid-11-btn grid-11-arrow">Shop Now →</button></div></section></div>
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img class="testimonial-1-logo" src="io8-logo.svg" alt="Io8"></img><p class="testimonial-1-text">I was absolutely captivated by the exquisite craftsmanship and unique designs at Jewel Haven. My new diamond earrings are simply stunning and sparkle beautifully, a perfect complement to any occasion. The shopping experience was seamless, and the delivery was incredibly fast. I've found my go-to jeweler!</p><div class="testimonial-1-author"><img class="testimonial-1-author-image" src="author-avatar.jpg" alt="Author Avatar"></img><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Anya Sharma</p><p class="testimonial-1-author-position">Jewelry Collector, New York</p></div></div></div></div>
<section class="logo-section"><div class="container"><h2 class="section-title">Crafted with Trust: Our Certifications & Accolades</h2><div class="logo-grid"><div class="logo-item">BIS Hallmarked Gold</div><div class="logo-item">Kimberley Process Certified Diamonds</div><div class="logo-item">IGI & GIA Graded Gemstones</div><div class="logo-item">Responsible Jewellery Council Member</div><div class="logo-item">Luxury Lifestyle Awards - Best Jeweller</div><div class="logo-item">Ethical Sourcing Partner Network</div></div></div></section>
<div class="pricing-2-wrapper"><section class="pricing-2-section"><p class="pricing-2-tagline">Unlock Exquisite Privileges</p><h2 class="pricing-2-heading">Our Exclusive Membership Tiers</h2><p class="pricing-2-subheading">Elevate your journey with our meticulously crafted membership plans, offering unparalleled benefits and access to bespoke services.</p><div class="pricing-2-toggle"><button class="pricing-2-btn pricing-2-btn-active">Monthly Benefits</button><button class="pricing-2-btn">Annual Savings</button></div><div class="pricing-2-grid"><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Emerald Tier</h3><p class="pricing-2-plan-subtitle">Begin your journey into the world of luxury.</p><p class="pricing-2-price">$49/month</p><hr class="pricing-2-divider"></hr><p class="pricing-2-includes">Membership Benefits:</p><ul class="pricing-2-feature-list"><li>✓ Exclusive access to new arrivals</li><li>✓ Priority customer support</li><li>✓ Complimentary jewelry cleaning (1 per month)</li><li>✓ Early bird access to sales events</li><li>✓ Personalized styling tips</li><li>✓ Digital Lookbook subscription</li></ul><button class="pricing-2-cta">Join the Emerald Tier</button></div><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Diamond Tier</h3><p class="pricing-2-plan-subtitle">Experience the pinnacle of bespoke luxury and service.</p><p class="pricing-2-price">$99/month</p><hr class="pricing-2-divider"></hr><p class="pricing-2-includes">Premium Benefits:</p><ul class="pricing-2-feature-list"><li>✓ All Emerald Tier benefits included</li><li>✓ Personal jewelry consultant</li><li>✓ Unlimited complimentary cleaning & polishing</li><li>✓ Invitation to private collection viewings</li><li>✓ Exclusive VIP event access</li><li>✓ Concierge service for custom designs</li></ul><button class="pricing-2-cta">Discover Diamond Perks</button></div></div></section></div>
<div class="cta-3-wrapper"><section class="cta-3-section"><h2 class="cta-3-heading">Discover Your Signature Piece</h2><p class="cta-3-description">Immerse yourself in a world of exquisite craftsmanship and timeless beauty. Our curated collections offer the perfect blend of tradition and modern elegance, designed to be cherished for a lifetime.</p><div class="cta-3-button-group"><button class="cta-3-btn cta-3-solid">Shop Our Collections</button><button class="cta-3-btn cta-3-outline">Find Your Perfect Gift</button></div></section></div>
<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>
<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>
<div class="hero-1-wrapper"><section class="hero-1-two-column"><div class="hero-1-content"><h2 class="hero-1-heading"><a href="" id="itx3y2">Adorn Yourself in Pure Brilliance</a></h2><p class="hero-1-description">Indulge in the allure of fine jewelry. Each piece in our collection is meticulously crafted with passion and precision, ensuring exceptional quality and timeless beauty. Find your perfect adornment.</p><div class="hero-1-button-group"><button class="hero-1-btn hero-1-solid">Shop Now</button><button class="hero-1-btn hero-1-outline">Explore Collections</button></div></div><div class="hero-1-image"><img src="https://images.unsplash.com/photo-1547097268-d9d66399e574?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxsdXh1cnklMjUyMGpld2VscnklMkMlMjUyMGRpYW1vbmQlMjUyMHJpbmdzJTJDJTI1MjBnb2xkJTI1MjBuZWNrbGFjZXMlMkMlMjUyMGVsZWdhbnQlMjUyMGVhcnJpbmdzJTJDJTI1MjBmaW5lJTI1MjBjcmFmdHNtYW5zaGlwJTJDJTI1MjBlbmdhZ2VtZW50JTI1MjByaW5ncyUyQyUyNTIwZ2Vtc3RvbmUlMjUyMGpld2VscnklMkMlMjUyMHRpbWVsZXNzJTI1MjBkZXNpZ258ZW58MHx8fHwxNzU0MzAzNjQ3fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" class="hero-1-placeholder"></div></section></div>
<div class="grid-11-wrapper"><section class="grid-11-section"><p class="grid-11-tagline">Experience Elegance</p><h2 class="grid-11-heading">Discover Our Exquisite Jewelry Collections</h2><p class="grid-11-description">At Aurum Jewels, we believe every piece of jewelry tells a unique story. Explore our meticulously crafted collections, designed to celebrate life's most precious moments with unparalleled beauty and timeless style.</p><div class="grid-11-card-grid"><div class="grid-11-card"><div class="grid-11-img-container"><img src="https://images.unsplash.com/photo-1451933371645-a3029668b979?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxjcmFmdHNtYW5zaGlwJTJDJTI1MjBoYW5kbWFkZSUyQyUyNTIwcXVhbGl0eSUyQyUyNTIwZGV0YWlsZWQlMkMlMjUyMGFydGlzYW5zfGVufDB8fHx8MTc1NDMwMzY3Nnww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" class="grid-11-placeholder"></div><h3 class="grid-11-card-title">Unrivaled Craftsmanship</h3><p class="grid-11-card-desc">Each piece is a testament to our artisans' dedication, handcrafted with precision and passion, using only the finest ethically sourced materials to ensure lasting beauty and sparkle.</p></div><div class="grid-11-card"><div class="grid-11-img-container"><img src="https://images.unsplash.com/photo-1567836480874-b2bdaaa7a0e3?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHx2YXJpZXR5JTJDJTI1MjBjb2xsZWN0aW9ucyUyQyUyNTIwdW5pcXVlJTJDJTI1MjBzdHlsZXMlMkMlMjUyMHJpbmdzJTJDJTI1MjBuZWNrbGFjZXMlMkMlMjUyMGJhbmdsZXMlMkMlMjUyMGVhcnJpbmdzfGVufDB8fHx8MTc1NDMwMzY3N3ww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" class="grid-11-placeholder"></div><h3 class="grid-11-card-title">Diverse &amp; Dazzling Collections</h3><p class="grid-11-card-desc">From classic elegance to contemporary chic, our extensive range of rings, necklaces, bangles, and earrings ensures you'll find the perfect adornment for every occasion and style.</p></div><div class="grid-11-card"><div class="grid-11-img-container"><img src="https://images.unsplash.com/photo-1564313677573-481bd55237ad?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxzZWN1cmUlMkMlMjUyMHNob3BwaW5nJTJDJTI1MjBjb252ZW5pZW5jZSUyQyUyNTIwZmFzdCUyNTIwZGVsaXZlcnklMkMlMjUyMGN1c3RvbWVyJTI1MjBzZXJ2aWNlJTJDJTI1MjBwZWFjZSUyNTIwb2YlMjUyMG1pbmR8ZW58MHx8fHwxNzU0MzAzNjc4fDA&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080" class="grid-11-placeholder"></div><h3 class="grid-11-card-title">Seamless &amp; Secure Shopping</h3><p class="grid-11-card-desc">Enjoy a worry-free shopping journey with our intuitive interface, secure payment options, and dedicated customer support, ensuring your cherished selections arrive safely at your doorstep.</p></div></div><div class="grid-11-button-group"><button class="grid-11-btn grid-11-outline">Explore All Jewelry</button><button class="grid-11-btn grid-11-arrow">Shop Now →</button></div></section></div>
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img src="io8-logo.svg" alt="Io8" class="testimonial-1-logo"><p class="testimonial-1-text">I was absolutely captivated by the exquisite craftsmanship and unique designs at Jewel Haven. My new diamond earrings are simply stunning and sparkle beautifully, a perfect complement to any occasion. The shopping experience was seamless, and the delivery was incredibly fast. I've found my go-to jeweler!</p><div class="testimonial-1-author"><img src="author-avatar.jpg" alt="Author Avatar" class="testimonial-1-author-image"><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Anya Sharma</p><p class="testimonial-1-author-position">Jewelry Collector, New York</p></div></div></div></div>

184
login.html
View File

@ -9,179 +9,7 @@
</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>
<section class="login-section">
<div class="login-container">
<h2>Login to Your Account</h2>
<form class="login-form" action="#" method="POST">
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="your.email@example.com" required aria-label="Enter your email address">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="••••••••" required aria-label="Enter your password">
</div>
<button type="submit" class="login-button">Login</button>
<div class="form-options">
<a href="#" class="forgot-password-link">Forgot Password?</a>
<span class="separator">&bull;</span>
<a href="#" class="register-now-link">Don't have an account? Register here.</a>
</div>
</form>
</div>
</section>
<div class="forgot-password-wrapper">
<div class="forgot-password-container">
<h2 class="forgot-password-title">Forgot Your Password?</h2>
<p class="forgot-password-description">
Enter your email address below and we'll send you a link to reset it.
</p>
<form class="forgot-password-form" action="#" method="POST">
<div class="form-group">
<label for="email" class="form-label">Email Address</label>
<input type="email" id="email" name="email" class="form-input" placeholder="your.email@example.com" required>
</div>
<button type="submit" class="btn btn-primary">Send Reset Link</button>
</form>
<div class="forgot-password-actions">
<a href="/login" class="back-to-login-link">Back to Login</a>
</div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Login Options</title>
<link rel="stylesheet" href="style.css" />
<!-- Font Awesome for social icons (example) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<section class="social-login-section" aria-labelledby="socialLoginHeading">
<h2 id="socialLoginHeading">Or Login With</h2>
<div class="social-login-options">
<a href="#" class="social-login-button google" aria-label="Login with Google">
<span class="icon" aria-hidden="true"><i class="fab fa-google"></i></span>
<span>Continue with Google</span>
</a>
<a href="#" class="social-login-button facebook" aria-label="Login with Facebook">
<span class="icon" aria-hidden="true"><i class="fab fa-facebook-f"></i></span>
<span>Continue with Facebook</span>
</a>
<a href="#" class="social-login-button apple" aria-label="Login with Apple">
<span class="icon" aria-hidden="true"><i class="fab fa-apple"></i></span>
<span>Continue with Apple</span>
</a>
</div>
<div class="social-login-separator" aria-hidden="true">
<!-- This div is for visual separation, no meaningful content for screen readers -->
</div>
<!-- Placeholder for traditional login form, if applicable in same context -->
<p style="font-size: 0.9em; color: #555; margin-top: 20px;">
<a href="#" style="color: #007bff; text-decoration: none;">Forgot password?</a> |
<a href="#" style="color: #007bff; text-decoration: none;">Create an account</a>
</p>
</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>Welcome to Our Store</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<section class="new-user-prompt" aria-labelledby="welcome-heading">
<h1 id="welcome-heading">Welcome to Our Exquisite Collection!</h1>
<p>
We're thrilled to have you join us. Explore our meticulously crafted jewelry, discover your next treasure, and enjoy a seamless shopping experience tailored just for you.
</p>
<div class="prompt-actions">
<a href="/catalog" class="prompt-action-button prompt-action-button--primary">
Start Shopping Now
</a>
<a href="/user-dashboard" class="prompt-action-button prompt-action-button--secondary">
Go to My Dashboard
</a>
</div>
<ul class="feature-list" aria-label="What you can do">
<li>View our stunning catalog of rings, necklaces, bangles, and earrings.</li>
<li>Securely place orders for your favorite items.</li>
<li>Track your order history and manage your profile in the user dashboard.</li>
<li>Add items to your personalized shopping cart.</li>
</ul>
</section>
</main>
</body>
</html>
<section class="security-disclaimer">
<div class="container">
<h2 class="section-title">Security Disclaimer</h2>
<p class="disclaimer-text">
At [Your Jewelry Store Name], we are committed to ensuring the highest level of security for your personal information and transactions. This section outlines our approach to security and your role in maintaining a secure online experience.
</p>
<div class="disclaimer-item">
<h3 class="section-subtitle">Data Encryption</h3>
<p class="disclaimer-text">
All sensitive data transmitted between your browser and our servers, including personal details and payment information, is protected using industry-standard SSL/TLS encryption. This ensures that your data remains private and secure during transit.
</p>
</div>
<div class="disclaimer-item">
<h3 class="section-subtitle">Secure Transactions</h3>
<p class="disclaimer-text">
Payment processing is handled by reputable third-party payment gateways compliant with PCI DSS standards. We do not store your full credit card details on our servers. All transactions are processed through secure, encrypted channels.
</p>
</div>
<div class="disclaimer-item">
<h3 class="section-subtitle">User Responsibility</h3>
<p class="disclaimer-text">
While we take extensive measures to protect your data, your cooperation is crucial. Please ensure:
</p>
<ul class="disclaimer-list">
<li>You use a strong, unique password for your account.</li>
<li>You keep your login credentials confidential and do not share them.</li>
<li>You log out of your account after each session, especially on shared computers.</li>
<li>Your device is protected with up-to-date antivirus software and a firewall.</li>
<li>You are wary of phishing attempts and suspicious emails requesting your login information.</li>
</ul>
</div>
<div class="disclaimer-item">
<h3 class="section-subtitle">Disclaimer of Liability</h3>
<p class="disclaimer-text">
[Your Jewelry Store Name] strives to maintain a secure environment, but acknowledges that no data transmission over the internet or method of electronic storage is 100% secure. Therefore, while we employ commercially acceptable means to protect your personal information, we cannot guarantee its absolute security. In the event of an unauthorized access, disclosure, or loss of information, we will take reasonable steps to mitigate the impact and comply with applicable laws.
</p>
</div>
<div class="disclaimer-item">
<h3 class="section-subtitle">Changes to this Policy</h3>
<p class="disclaimer-text">
This Security Disclaimer may be updated periodically to reflect changes in our security practices or legal requirements. We encourage you to review this section regularly. Your continued use of our services after any changes indicates your acceptance of the updated disclaimer.
</p>
</div>
<p class="disclaimer-text disclaimer-note">
For any security concerns or questions, please contact our support team.
</p>
</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"></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>
<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>
<section class="login-section">
<div class="login-container">
<h2>Login to Your Account</h2>
@ -338,6 +166,16 @@
</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 &amp; 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>Social Login Options</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>Welcome to Our Store</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

332
order_confirmation.html
View File

@ -9,333 +9,7 @@
</head>
<body>
<div class="page-wrapper">
⚠️ HTML API call failed.
❌ LLM API failed after retries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Details Summary</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="order-summary-section" aria-labelledby="orderDetailsHeading">
<h2 id="orderDetailsHeading">Order Details Summary</h2>
<div class="order-header">
<div class="order-id">Order #<span id="orderId">ORD-20230412-876543</span></div>
<div class="order-date">Placed On: <time datetime="2023-04-12">April 12, 2023</time></div>
<div class="order-status">Status: <span class="status-badge delivered" id="orderStatus">Delivered</span></div>
</div>
<div class="order-items">
<h3>Items Ordered</h3>
<div class="product-item">
<img src="https://via.placeholder.com/80x80/f0f0f0/666666?text=Ring" alt="Elegant Diamond Ring">
<div class="product-info">
<h4>Elegant Diamond Ring</h4>
<p>SKU: DR-001 | Size: 7 | Material: 18K Gold</p>
</div>
<span class="product-quantity">Qty: 1</span>
<span class="product-price">₹125,000.00</span>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/80x80/f0f0f0/666666?text=Necklace" alt="Classic Pearl Necklace">
<div class="product-info">
<h4>Classic Pearl Necklace</h4>
<p>SKU: PN-005 | Length: 18" | Material: Sterling Silver, Freshwater Pearl</p>
</div>
<span class="product-quantity">Qty: 1</span>
<span class="product-price">₹35,500.00</span>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/80x80/f0f0f0/666666?text=Bangle" alt="Contemporary Gold Bangle">
<div class="product-info">
<h4>Contemporary Gold Bangle</h4>
<p>SKU: GB-010 | Size: S | Material: 22K Gold</p>
</div>
<span class="product-quantity">Qty: 2</span>
<span class="product-price">₹98,000.00</span>
</div>
</div>
<div class="address-details">
<address class="address-card">
<h3>Shipping Address</h3>
<p><strong>John Doe</strong></p>
<p>123, Jewel Street</p>
<p>Diamond City, State, 12345</p>
<p>India</p>
<p>Phone: +91 98765 43210</p>
</address>
<address class="address-card">
<h3>Billing Address</h3>
<p><strong>John Doe</strong></p>
<p>123, Jewel Street</p>
<p>Diamond City, State, 12345</p>
<p>India</p>
<p>Phone: +91 98765 43210</p>
</address>
</div>
<div class="order-totals">
<h3>Order Summary</h3>
<div class="total-row">
<span>Subtotal (3 items)</span>
<span>₹258,500.00</span>
</div>
<div class="total-row">
<span>Shipping & Handling</span>
<span>₹500.00</span>
</div>
<div class="total-row">
<span>GST (18%)</span>
<span>₹46,530.00</span>
</div>
<div class="total-row">
<span>Discount</span>
<span>-₹10,000.00</span>
</div>
<div class="total-row">
<span>Grand Total</span>
<span>₹295,530.00</span>
</div>
</div>
<div class="payment-method">
<p>Payment Method: <span id="paymentMethod">Credit Card (**** **** **** 1234)</span></p>
</div>
</section>
</body>
</html>
<section class="shipping-info-display">
<h2 class="shipping-info-title">Shipping Details</h2>
<div class="shipping-info-group recipient-info">
<h3 class="group-heading">Recipient Information</h3>
<dl class="detail-list">
<dt>Recipient Name:</dt>
<dd>Aarav Patel</dd>
<dt>Phone Number:</dt>
<dd>+91 98765 43210</dd>
</dl>
</div>
<div class="shipping-info-group delivery-address">
<h3 class="group-heading">Delivery Address</h3>
<dl class="detail-list">
<dt>Address Line 1:</dt>
<dd>Plot No. 12, Jewellery Road</dd>
<dt>Address Line 2:</dt>
<dd>Near Gold Souk</dd>
<dt>City:</dt>
<dd>Mumbai</dd>
<dt>State / Province:</dt>
<dd>Maharashtra</dd>
<dt>Zip / Postal Code:</dt>
<dd>400001</dd>
<dt>Country:</dt>
<dd>India</dd>
</dl>
</div>
<div class="shipping-info-group order-status">
<h3 class="group-heading">Order & Delivery Status</h3>
<dl class="detail-list">
<dt>Shipping Method:</dt>
<dd>Standard Delivery (5-7 Business Days)</dd>
<dt>Estimated Delivery:</dt>
<dd>July 25, 2024</dd>
<dt>Tracking Number:</dt>
<dd><a href="#" class="tracking-link">JP9876543210IN</a></dd>
</dl>
</div>
</section>
<section class="payment-confirmation-section">
<div class="container">
<div class="confirmation-header">
<span class="confirmation-icon">&#10003;</span> <!-- Placeholder for a checkmark icon -->
<h1>Payment Confirmed!</h1>
<p class="lead-text">Thank you for your purchase. Your order has been successfully placed.</p>
</div>
<div class="confirmation-details">
<p>An email confirmation with details and a tracking link has been sent to <strong>[user.email@example.com]</strong>.</p>
<div class="order-summary-card">
<h2>Order Summary</h2>
<dl class="summary-list">
<dt>Order Number:</dt>
<dd>#ORD123456789</dd>
<dt>Order Date:</dt>
<dd>October 26, 2023</dd>
<dt>Payment Method:</dt>
<dd>Credit Card (**** **** **** 1234)</dd>
<dt>Total Amount:</dt>
<dd>₹ 24,999.00</dd>
</dl>
</div>
<div class="delivery-info-card">
<h2>Delivery Information</h2>
<dl class="delivery-list">
<dt>Estimated Delivery:</dt>
<dd>Within 3-5 Business Days</dd>
<dt>Shipping Address:</dt>
<dd>
<address>
[User Name]<br>
[User Street Address]<br>
[User City], [User State] [User Postal Code]<br>
[User Country]
</address>
</dd>
</dl>
</div>
</div>
<div class="confirmation-actions">
<h2>What's Next?</h2>
<ul class="action-list">
<li><a href="/order-history">View Order History</a></li>
<li><a href="/catalog">Continue Shopping</a></li>
<li><a href="/support">Need Help? Contact Support</a></li>
</ul>
</div>
</div>
</section>
<section class="next-steps-section">
<div class="container">
<h2 class="section-title">Your Next Steps</h2>
<p class="section-description">Thank you for your recent action! Here's what you can do next to ensure a smooth experience with your order.</p>
<div class="steps-grid">
<div class="step-item">
<div class="step-icon-placeholder">
<!-- Placeholder for Email Confirmation Icon -->
<span class="icon-placeholder">✉️</span>
</div>
<h3 class="step-title">1. Check Your Email</h3>
<p class="step-description">A detailed order confirmation has been sent to your registered email address. Please check your inbox (and spam folder).</p>
<a href="#" class="btn-secondary-ghost" aria-label="Review Email Confirmation Guide">Review Email Guide</a>
</div>
<div class="step-item">
<div class="step-icon-placeholder">
<!-- Placeholder for Order Tracking Icon -->
<span class="icon-placeholder">🚚</span>
</div>
<h3 class="step-title">2. Track Your Order</h3>
<p class="step-description">Monitor the real-time status of your order, from processing to dispatch and final delivery.</p>
<a href="/dashboard/orders" class="btn-secondary-ghost" aria-label="Go to Order History">Go to Order History</a>
</div>
<div class="step-item">
<div class="step-icon-placeholder">
<!-- Placeholder for Continue Shopping Icon -->
<span class="icon-placeholder">🛍️</span>
</div>
<h3 class="step-title">3. Explore More Jewelry</h3>
<p class="step-description">Discover our latest collections and exquisite new arrivals to find your next perfect piece.</p>
<a href="/catalog" class="btn-secondary-ghost" aria-label="Continue Browsing Catalog">Continue Shopping</a>
</div>
<div class="step-item">
<div class="step-icon-placeholder">
<!-- Placeholder for Support Contact Icon -->
<span class="icon-placeholder">📞</span>
</div>
<h3 class="step-title">4. Need Assistance?</h3>
<p class="step-description">Our dedicated customer support team is available to help with any questions or concerns.</p>
<a href="/contact" class="btn-secondary-ghost" aria-label="Contact Customer Support">Contact Support</a>
</div>
</div>
</div>
</section>
<section id="customer-support" class="py-12 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-4xl font-bold text-center mb-8 text-gray-800">Customer Support</h2>
<p class="text-lg text-center text-gray-600 mb-12 max-w-3xl mx-auto">
Need assistance with your order, product information, or have a general inquiry? Our dedicated support team is here to help you.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Contact Option: Live Chat -->
<div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
<div class="text-5xl text-gold-600 mb-4">💬</div>
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Live Chat</h3>
<p class="text-gray-600 mb-6">Connect with a support agent instantly for real-time assistance.</p>
<a href="#" class="btn btn-primary">Start Live Chat</a>
</div>
<!-- Contact Option: Email Support -->
<div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
<div class="text-5xl text-gold-600 mb-4">📧</div>
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Email Support</h3>
<p class="text-gray-600 mb-6">Send us an email with your questions. We aim to respond within 24 hours.</p>
<a href="mailto:support@jewelrystore.com" class="btn btn-secondary">support@jewelrystore.com</a>
</div>
<!-- Contact Option: Phone Support -->
<div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
<div class="text-5xl text-gold-600 mb-4">📞</div>
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Phone Support</h3>
<p class="text-gray-600 mb-6">Call our dedicated support line during business hours.</p>
<a href="tel:+1234567890" class="btn btn-secondary">+1 (234) 567-890</a>
<p class="text-sm text-gray-500 mt-4">Mon-Fri: 9:00 AM - 6:00 PM EST</p>
</div>
</div>
<!-- Contact Form Section -->
<div class="bg-white p-10 rounded-lg shadow-lg max-w-3xl mx-auto">
<h3 class="text-3xl font-semibold text-center mb-8 text-gray-800">Send Us a Message</h3>
<p class="text-center text-gray-600 mb-8">
Fill out the form below and we'll get back to you as soon as possible.
</p>
<form action="/submit-contact" method="POST" class="space-y-6">
<div>
<label for="name" class="block text-gray-700 text-sm font-medium mb-2">Your Name</label>
<input type="text" id="name" name="name" placeholder="John Doe" required
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors">
</div>
<div>
<label for="email" class="block text-gray-700 text-sm font-medium mb-2">Your Email</label>
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors">
</div>
<div>
<label for="subject" class="block text-gray-700 text-sm font-medium mb-2">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Inquiry about Order #12345" required
class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors">
</div>
<div>
<label for="message" class="block text-gray-700 text-sm font-medium mb-2">Your Message</label>
<textarea id="message" name="message" rows="6" placeholder="Please provide details about your request..." required
class="w-full px-4 py-3 border border-gray-300 rounded-md resize-y focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors"></textarea>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary px-8 py-3 text-lg">Send Message</button>
</div>
</form>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></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>
<meta charset="UTF-8">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Order Details Summary</title>
<link rel="stylesheet" href="style.css" />
@ -648,6 +322,10 @@
</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 &amp; 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>Order Details Summary</title>
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

302
order_history.html
View File

@ -9,303 +9,7 @@
</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>
<header class="site-header">
<div class="header-container">
<div class="header-branding">
<a href="/" class="site-logo" aria-label="[Store Name] - Go to homepage">
<h1>[Store Name]</h1>
<!-- Optional: <img src="placeholder-logo.svg" alt="[Store Name] Logo"> -->
</a>
</div>
<nav class="main-navigation" aria-label="Primary Navigation">
<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="/collections.html">Collections</a></li>
</ul>
</nav>
<div class="header-actions">
<button class="action-item search-toggle" aria-label="Search website" title="Search">
<span class="icon-search"></span> <!-- Placeholder for search icon -->
</button>
<a href="/account.html" class="action-item user-account" aria-label="My Account" title="My Account">
<span class="icon-user"></span> <!-- Placeholder for user icon -->
</a>
<a href="/cart.html" class="action-item shopping-cart" aria-label="Shopping Cart" title="View Shopping Cart">
<span class="icon-cart"></span> <!-- Placeholder for cart icon -->
<span class="cart-count">0</span>
</a>
<button class="action-item menu-toggle" aria-label="Open mobile menu" title="Open Mobile Menu">
<span class="icon-menu"></span> <!-- Placeholder for hamburger menu icon -->
</button>
</div>
</div>
</header>
<section class="order-list-section">
<div class="container">
<h2 class="section-title">Your Order History</h2>
<div class="table-responsive">
<table class="order-table">
<thead>
<tr>
<th>Order ID</th>
<th>Date</th>
<th>Items</th>
<th>Total</th>
<th>Status</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Order ID">#JWL1001</td>
<td data-label="Date">2023-10-26</td>
<td data-label="Items">
<ul>
<li>Eternal Sparkle Diamond Ring (x1)</li>
<li>Celestial Pearl Necklace (x1)</li>
</ul>
</td>
<td data-label="Total">$2,599.00</td>
<td data-label="Status" class="status-completed">Completed</td>
<td data-label="Details"><a href="/order/JWL1001" class="btn btn-view-details">View</a></td>
</tr>
<tr>
<td data-label="Order ID">#JWL1002</td>
<td data-label="Date">2023-09-15</td>
<td data-label="Items">
<ul>
<li>Artisan Gold Bangle (x2)</li>
</ul>
</td>
<td data-label="Total">$1,150.00</td>
<td data-label="Status" class="status-processing">Processing</td>
<td data-label="Details"><a href="/order/JWL1002" class="btn btn-view-details">View</a></td>
</tr>
<tr>
<td data-label="Order ID">#JWL1003</td>
<td data-label="Date">2023-08-01</td>
<td data-label="Items">
<ul>
<li>Emerald Drop Earrings (x1)</li>
<li>Sapphire Pendant (x1)</li>
<li>Platinum Chain (x1)</li>
</ul>
</td>
<td data-label="Total">$3,200.00</td>
<td data-label="Status" class="status-shipped">Shipped</td>
<td data-label="Details"><a href="/order/JWL1003" class="btn btn-view-details">View</a></td>
</tr>
<tr>
<td data-label="Order ID">#JWL1004</td>
<td data-label="Date">2023-07-20</td>
<td data-label="Items">
<ul>
<li>Minimalist Silver Ring (x1)</li>
</ul>
</td>
<td data-label="Total">$180.00</td>
<td data-label="Status" class="status-cancelled">Cancelled</td>
<td data-label="Details"><a href="/order/JWL1004" class="btn btn-view-details">View</a></td>
</tr>
</tbody>
</table>
</div>
<div class="pagination">
<a href="#" class="page-link disabled">Previous</a>
<a href="#" class="page-link active">1</a>
<a href="#" class="page-link">2</a>
<a href="#" class="page-link">3</a>
<a href="#" class="page-link">Next</a>
</div>
<p class="no-orders-message" style="display: none;">You haven't placed any orders yet. Start exploring our exquisite collection!</p>
</div>
</section>
<div class="order-detail-view-link-section">
<a href="#order-details-placeholder" class="order-detail-link" aria-label="View full details for this order">
View Order Details
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
</svg>
</a>
</div>
<section class="orders-management-section">
<div class="container">
<h2 class="section-title">Search and Filter Orders</h2>
<div class="search-filter-controls">
<form class="order-filter-form">
<div class="search-input-group">
<label for="orderSearch" class="visually-hidden">Search orders by ID, Customer, or Product Name</label>
<input type="search" id="orderSearch" name="orderSearch" placeholder="Search by Order ID, Customer, Product..." class="search-input" aria-label="Search orders">
<button type="submit" class="search-button">Search</button>
</div>
<div class="filter-options-grid">
<div class="filter-group">
<label for="orderStatus" class="filter-label">Order Status</label>
<select id="orderStatus" name="orderStatus" class="filter-select">
<option value="">All Statuses</option>
<option value="pending">Pending</option>
<option value="shipped">Shipped</option>
<option value="delivered">Delivered</option>
<option value="canceled">Canceled</option>
</select>
</div>
<div class="filter-group">
<label for="dateFrom" class="filter-label">Date From</label>
<input type="date" id="dateFrom" name="dateFrom" class="filter-input">
</div>
<div class="filter-group">
<label for="dateTo" class="filter-label">Date To</label>
<input type="date" id="dateTo" name="dateTo" class="filter-input">
</div>
<div class="filter-group">
<label for="customerName" class="filter-label">Customer Name</label>
<input type="text" id="customerName" name="customerName" placeholder="e.g., Radhika Sharma" class="filter-input">
</div>
<div class="filter-group">
<label for="productSku" class="filter-label">Product SKU</label>
<input type="text" id="productSku" name="productSku" placeholder="e.g., RNG007" class="filter-input">
</div>
<div class="filter-actions">
<button type="submit" class="btn btn-primary">Apply Filters</button>
<button type="reset" class="btn btn-secondary">Clear Filters</button>
</div>
</div>
</form>
</div>
<div class="order-results-display">
<h3 class="results-heading">Current Orders</h3>
<p class="results-info">Displays orders based on your search and filter criteria.</p>
<div class="order-table-container">
<div class="order-table-header">
<span class="header-item">Order ID</span>
<span class="header-item">Customer</span>
<span class="header-item">Date Placed</span>
<span class="header-item">Status</span>
<span class="header-item">Total Amount</span>
<span class="header-item">Actions</span>
</div>
<div class="order-table-row">
<span class="row-item">#ORD78901</span>
<span class="row-item">Priya Singh</span>
<span class="row-item">2023-10-26</span>
<span class="row-item status-delivered">Delivered</span>
<span class="row-item">$1,850.00</span>
<span class="row-item"><a href="#" class="action-link">View</a></span>
</div>
<div class="order-table-row">
<span class="row-item">#ORD78902</span>
<span class="row-item">Rahul Kumar</span>
<span class="row-item">2023-10-25</span>
<span class="row-item status-pending">Pending</span>
<span class="row-item">$999.00</span>
<span class="row-item"><a href="#" class="action-link">View</a></span>
</div>
<div class="order-table-row">
<span class="row-item">#ORD78903</span>
<span class="row-item">Anjali Mehta</span>
<span class="row-item">2023-10-24</span>
<span class="row-item status-shipped">Shipped</span>
<span class="row-item">$3,200.00</span>
<span class="row-item"><a href="#" class="action-link">View</a></span>
</div>
<div class="order-table-row">
<span class="row-item">#ORD78904</span>
<span class="row-item">Vikram Desai</span>
<span class="row-item">2023-10-23</span>
<span class="row-item status-canceled">Canceled</span>
<span class="row-item">$450.00</span>
<span class="row-item"><a href="#" class="action-link">View</a></span>
</div>
</div>
<div class="pagination-controls">
<button class="pagination-btn">&laquo; Previous</button>
<span class="page-info">Page 1 of 5</span>
<button class="pagination-btn">Next &raquo;</button>
</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>Return/Exchange Information - Jewelry Store</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<section class="return-exchange-section">
<h1>Return & Exchange Information</h1>
<p>At [Your Jewelry Store Name], your satisfaction is our highest priority. We understand that sometimes a piece of jewelry may not be exactly what you envisioned. Please review our policy below for returns and exchanges.</p>
<h2>Eligibility & Timeframe</h2>
<ul>
<li>Items must be returned or exchanged within <strong>30 days</strong> of the original purchase date.</li>
<li>Merchandise must be in its original, unworn condition, free from any damage or alterations.</li>
<li>All original packaging, certificates (e.g., diamond certificates), and tags must be included.</li>
<li>Custom-designed or engraved items are generally non-returnable and non-exchangeable, unless there is a manufacturing defect.</li>
</ul>
<h2>Return Process</h2>
<p>To initiate a return:</p>
<ol>
<li><strong>Contact Us:</strong> Before shipping, please contact our customer service team at <a href="mailto:support@yourjewelry.com">support@yourjewelry.com</a> or call us at <a href="tel:+12345678900">+1 (234) 567-8900</a> to receive a Return Merchandise Authorization (RMA) number. Returns without an RMA number may experience delays or be rejected.</li>
<li><strong>Package Your Item:</strong> Securely package your item(s) in the original box with all accompanying materials.</li>
<li><strong>Ship Safely:</strong> We highly recommend using a traceable and insured shipping method for your return, as we are not responsible for lost or damaged returns during transit. Shipping costs for returns are typically the responsibility of the customer, unless the return is due to our error.</li>
<li><strong>Processing:</strong> Once we receive and inspect your returned item, we will process your refund to the original payment method within 7-10 business days. You will receive an email notification once your refund has been issued.</li>
</ol>
<h2>Exchange Process</h2>
<p>If you wish to exchange an item for a different size, style, or product:</p>
<ul>
<li>Follow the same steps as a return to send back the original item.</li>
<li>Simultaneously, you may place a new order for the desired item on our website. This ensures that the item you want is in stock and shipped to you promptly.</li>
<li>Once your returned item is received and processed, a refund will be issued.</li>
<li>If the new item has a different price, the difference will be charged or refunded accordingly.</li>
</ul>
<h2>Non-Returnable Items</h2>
<p>Please note that the following items cannot be returned or exchanged:</p>
<ul>
<li>Custom-designed or personalized jewelry.</li>
<li>Engraved items (unless manufacturing defect).</li>
<li>Items that have been altered or resized by a third-party jeweler.</li>
<li>Items purchased during final sale events or marked as "final sale."</li>
<li>Gift cards.</li>
</ul>
<h2>Damaged or Defective Items</h2>
<p>If you receive a damaged or defective item, please contact us immediately (within 48 hours of delivery). We will arrange for a return and replacement or refund at no additional cost to you.</p>
<div class="contact-info">
<h3>Need Further Assistance?</h3>
<p>Our dedicated customer service team is here to help you with any questions regarding your return or exchange.</p>
<p><strong>Email:</strong> <a href="mailto:support@yourjewelry.com">support@yourjewelry.com</a></p>
<p><strong>Phone:</strong> <a href="tel:+12345678900">+1 (234) 567-8900</a> (Mon-Fri, 9 AM - 5 PM EST)</p>
</div>
<a href="#" class="button">Start a Return/Exchange</a>
</section>
</div>
</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>
<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>
<header class="site-header">
<div class="header-container">
<div class="header-branding">
@ -594,6 +298,10 @@
</section>
</div>
<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 &amp; 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>Return/Exchange Information - Jewelry Store</title>
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

318
product_catalog.html
View File

@ -9,318 +9,7 @@
</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>
<section class="category-header">
<div class="container">
<nav aria-label="Breadcrumb" class="breadcrumbs">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Jewelry</a></li>
<li>Rings</li>
</ol>
</nav>
<h1 class="category-title">Rings Collection</h1>
<p class="category-description">Explore our exquisite range of rings, from timeless classics to modern statements, crafted with precision and passion. Discover the perfect piece to symbolize your unique story.</p>
</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 Grid Section</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="product-grid-section">
<div class="container">
<header class="section-header">
<h2>Our Exquisite Collections</h2>
<p>Discover a wide range of handcrafted jewelry, from timeless classics to modern designs, perfect for every occasion.</p>
</header>
<div class="product-grid" role="grid" aria-label="Jewelry Products">
<!-- Product Card 1: Ring -->
<a href="/product/1" class="product-card" role="gridcell" aria-labelledby="product1-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/E0D8CC/555555?text=Elegant+Diamond+Ring" alt="Elegant Diamond Ring">
</div>
<div class="product-card-content">
<h3 id="product1-title">Classic Diamond Solitaire Ring</h3>
<p class="description">A timeless piece featuring a brilliant-cut diamond set in 18k white gold.</p>
<p class="price">₹75,000</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 2: Necklace -->
<a href="/product/2" class="product-card" role="gridcell" aria-labelledby="product2-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/D1C4E9/555555?text=Sapphire+Necklace" alt="Enchanted Sapphire Necklace">
</div>
<div class="product-card-content">
<h3 id="product2-title">Enchanted Sapphire Pendant Necklace</h3>
<p class="description">Dazzling sapphire pendant with delicate chain, perfect for evening wear.</p>
<p class="price">₹42,500</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 3: Bangle -->
<a href="/product/3" class="product-card" role="gridcell" aria-labelledby="product3-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/C8E6C9/555555?text=Gold+Filigree+Bangle" alt="Traditional Gold Filigree Bangle">
</div>
<div class="product-card-content">
<h3 id="product3-title">Traditional Gold Filigree Bangle</h3>
<p class="description">Intricately designed 22k gold bangle, showcasing artisanal craftsmanship.</p>
<p class="price">₹98,000</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 4: Earrings -->
<a href="/product/4" class="product-card" role="gridcell" aria-labelledby="product4-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/FFECB3/555555?text=Pearl+Drop+Earrings" alt="Baroque Pearl Drop Earrings">
</div>
<div class="product-card-content">
<h3 id="product4-title">Baroque Pearl Drop Earrings</h3>
<p class="description">Exquisite freshwater pearls suspended from elegant gold settings.</p>
<p class="price">₹28,750</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 5: Ring -->
<a href="/product/5" class="product-card" role="gridcell" aria-labelledby="product5-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/FFCCBC/555555?text=Emerald+Ring" alt="Regal Emerald Cut Ring">
</div>
<div class="product-card-content">
<h3 id="product5-title">Regal Emerald Cut Ring</h3>
<p class="description">Stunning emerald-cut gemstone surrounded by pavé diamonds.</p>
<p class="price">₹62,000</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 6: Necklace -->
<a href="/product/6" class="product-card" role="gridcell" aria-labelledby="product6-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/BBDEFB/555555?text=Rose+Gold+Necklace" alt="Delicate Rose Gold Chain">
</div>
<div class="product-card-content">
<h3 id="product6-title">Delicate Rose Gold Chain with Charm</h3>
<p class="description">Subtle and elegant rose gold chain with a dainty charm.</p>
<p class="price">₹18,500</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 7: Bangle -->
<a href="/product/7" class="product-card" role="gridcell" aria-labelledby="product7-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/DCEDC8/555555?text=Diamond+Tennis+Bracelet" alt="Sparkling Diamond Tennis Bracelet">
</div>
<div class="product-card-content">
<h3 id="product7-title">Sparkling Diamond Tennis Bracelet</h3>
<p class="description">A continuous line of brilliant diamonds, timeless and luxurious.</p>
<p class="price">₹1,20,000</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
<!-- Product Card 8: Earrings -->
<a href="/product/8" class="product-card" role="gridcell" aria-labelledby="product8-title">
<div class="product-card-image">
<img src="https://via.placeholder.com/300x250/FFE0B2/555555?text=Hoop+Earrings" alt="Contemporary Hoop Earrings">
</div>
<div class="product-card-content">
<h3 id="product8-title">Contemporary Gold Hoop Earrings</h3>
<p class="description">Modern design gold hoops, lightweight and stylish for daily wear.</p>
<p class="price">₹15,000</p>
<div class="product-card-actions">
<button class="btn btn-primary">Add to Cart</button>
<button class="btn btn-secondary">View Details</button>
</div>
</div>
</a>
</div>
</div>
</section>
</body>
</html>
<div class="filter-sort-section">
<div class="filter-sort-header">
<h2 class="filter-sort-title">Filter & Sort</h2>
<button class="filter-sort-toggle-button" aria-expanded="false" aria-controls="filterSortControls">
<span class="sr-only">Toggle Filters</span>
&#x22EE;
</button>
</div>
<div id="filterSortControls" class="filter-sort-controls">
<div class="filter-group">
<fieldset class="filter-fieldset">
<legend class="filter-legend">Category</legend>
<ul class="filter-options-list">
<li class="filter-option-item">
<input type="checkbox" id="categoryRings" name="category" value="rings">
<label for="categoryRings">Rings</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="categoryNecklaces" name="category" value="necklaces">
<label for="categoryNecklaces">Necklaces</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="categoryBangles" name="category" value="bangles">
<label for="categoryBangles">Bangles</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="categoryEarrings" name="category" value="earrings">
<label for="categoryEarrings">Earrings</label>
</li>
</ul>
</fieldset>
<fieldset class="filter-fieldset">
<legend class="filter-legend">Price Range</legend>
<div class="price-range-inputs">
<input type="number" id="priceMin" name="priceMin" placeholder="Min" min="0" value="0" class="price-input">
<span class="price-separator">-</span>
<input type="number" id="priceMax" name="priceMax" placeholder="Max" min="0" value="50000" class="price-input">
</div>
</fieldset>
<fieldset class="filter-fieldset">
<legend class="filter-legend">Material</legend>
<ul class="filter-options-list">
<li class="filter-option-item">
<input type="checkbox" id="materialGold" name="material" value="gold">
<label for="materialGold">Gold</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="materialSilver" name="material" value="silver">
<label for="materialSilver">Silver</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="materialPlatinum" name="material" value="platinum">
<label for="materialPlatinum">Platinum</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="materialDiamond" name="material" value="diamond">
<label for="materialDiamond">Diamond</label>
</li>
</ul>
</fieldset>
<fieldset class="filter-fieldset">
<legend class="filter-legend">Gemstone</legend>
<ul class="filter-options-list">
<li class="filter-option-item">
<input type="checkbox" id="gemstoneRuby" name="gemstone" value="ruby">
<label for="gemstoneRuby">Ruby</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="gemstoneEmerald" name="gemstone" value="emerald">
<label for="gemstoneEmerald">Emerald</label>
</li>
<li class="filter-option-item">
<input type="checkbox" id="gemstoneSapphire" name="gemstone" value="sapphire">
<label for="gemstoneSapphire">Sapphire</label>
</li>
</ul>
</fieldset>
</div>
<div class="sort-group">
<fieldset class="sort-fieldset">
<legend class="sort-legend">Sort By</legend>
<div class="sort-options-select">
<select id="sortBy" name="sortBy">
<option value="popularity">Popularity</option>
<option value="price-asc">Price: Low to High</option>
<option value="price-desc">Price: High to Low</option>
<option value="new-arrivals">New Arrivals</option>
</select>
</div>
</fieldset>
</div>
<div class="filter-sort-actions">
<button type="button" class="apply-filters-button">Apply Filters</button>
<button type="button" class="reset-filters-button">Reset</button>
</div>
</div>
</div>
<nav aria-label="Pagination Controls" class="pagination-controls">
<ul class="pagination-list">
<li class="pagination-item disabled">
<a href="#" class="pagination-link" aria-label="Previous Page">
<span class="pagination-arrow">&laquo;</span> Previous
</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Page 1">1</a>
</li>
<li class="pagination-item active">
<span class="pagination-link current-page" aria-current="page" aria-label="Current Page, Page 2">2</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Page 3">3</a>
</li>
<li class="pagination-item ellipsis">
<span class="pagination-link" aria-hidden="true">...</span>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Page 10">10</a>
</li>
<li class="pagination-item">
<a href="#" class="pagination-link" aria-label="Next Page">
Next <span class="pagination-arrow">&raquo;</span>
</a>
</li>
</ul>
</nav>
<section class="promotion-banner">
<div class="container">
<div class="promotion-content">
<h2 class="promotion-title">Unlock Radiance: Up to 30% Off Diamonds!</h2>
<p class="promotion-description">Discover breathtaking diamond collections for a limited time. Elevate your style with exquisite brilliance.</p>
<a href="#shop-diamonds" class="btn btn-primary promotion-cta">Shop Diamond Collection</a>
</div>
<div class="promotion-image">
<img src="https://via.placeholder.com/600x400/F8F8F8/333333?text=Exquisite+Jewelry+Promotion" alt="Elegant diamond necklace and earrings on display, part of the promotion.">
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></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>
<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>
<section class="category-header">
<div class="container">
<nav aria-label="Breadcrumb" class="breadcrumbs">
@ -624,6 +313,11 @@
</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 &amp; 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 Grid Section</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

251
product_detail.html
View File

@ -9,256 +9,7 @@
</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>
<section class="product-image-gallery">
<h2 class="sr-only">Product Image Gallery</h2>
<div class="gallery-container">
<div class="gallery-thumbnails">
<div class="thumbnail-item active">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+1" alt="Thumbnail view 1 of the product, currently selected">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+2" alt="Thumbnail view 2 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+3" alt="Thumbnail view 3 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+4" alt="Thumbnail view 4 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+5" alt="Thumbnail view 5 of the product">
</div>
<div class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F5F5F5/AAAAAA?text=Thumb+6" alt="Thumbnail view 6 of the product">
</div>
</div>
<div class="gallery-main-image">
<img src="https://via.placeholder.com/600x600/F5F5F5/AAAAAA?text=Product+Main+Image" alt="High-quality image of the main product displayed" loading="eager">
</div>
</div>
</section>
<section class="product-detail-section">
<div class="product-container">
<figure class="product-image-gallery">
<img src="https://via.placeholder.com/600x600/F0F0F0/333333?text=Product+Image" alt="Elegant Diamond Solitaire Ring - Main View" class="main-product-image">
<div class="thumbnail-images">
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb1" alt="Product thumbnail 1" class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb2" alt="Product thumbnail 2" class="thumbnail-item">
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb3" alt="Product thumbnail 3" class="thumbnail-item">
</div>
<figcaption class="sr-only">Detailed view of Elegant Diamond Solitaire Ring, showcasing its design and sparkle.</figcaption>
</figure>
<div class="product-info">
<h1 class="product-title">Elegant Diamond Solitaire Ring</h1>
<p class="product-category">Category: Rings</p>
<div class="product-price">
<span class="currency">$</span>
<span class="price-value">1,899.00</span>
</div>
<div class="product-description">
<p>Discover the timeless beauty of this exquisite diamond solitaire ring, meticulously crafted from 925 sterling silver. Featuring a brilliant-cut diamond, this ring embodies sophistication and everlasting elegance, perfect for special occasions or daily wear.</p>
<ul>
<li><strong>Material:</strong> 925 Sterling Silver</li>
<li><strong>Stone:</strong> Natural Diamond, Brilliant Cut</li>
<li><strong>Carat Weight:</strong> 0.75 ct</li>
<li><strong>Clarity:</strong> VS1</li>
<li><strong>Color:</strong> G</li>
<li><strong>Available Sizes:</strong> 5, 6, 7, 8, 9</li>
</ul>
</div>
<div class="product-options">
<div class="option-group">
<label for="size-select" class="option-label">Size:</label>
<select id="size-select" class="option-select">
<option value="">Select Size</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="option-group">
<label for="quantity-select" class="option-label">Quantity:</label>
<input type="number" id="quantity-select" class="option-input" value="1" min="1" max="10">
</div>
</div>
<div class="product-actions">
<button class="add-to-cart-btn">Add to Cart</button>
<button class="buy-now-btn">Buy Now</button>
</div>
<div class="delivery-info">
<h3>Delivery & Returns</h3>
<p>Free standard delivery on all orders. Expected delivery in 3-5 business days. Easy 30-day returns.</p>
</div>
</div>
</div>
</section>
<section class="call-to-action-block">
<div class="container">
<div class="cta-content">
<h2 class="cta-heading">Find Your Perfect Sparkle</h2>
<p class="cta-description">
Explore our exquisite collection of handcrafted jewelry, designed to celebrate every moment.
Timeless elegance awaits.
</p>
<div class="cta-buttons">
<a href="#shop-now" class="button primary-button">Shop Our Latest Collection</a>
<a href="#contact-us" class="button secondary-button">Book a Consultation</a>
</div>
</div>
</div>
</section>
<section class="related-products-section">
<h2 class="section-title">You Might Also Like</h2>
<div class="related-products-grid">
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Elegant Diamond Necklace" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Elegant Diamond Necklace</h3>
<p class="product-price">$2,499.00</p>
</div>
</a>
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Classic Gold Bangle" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Classic Gold Bangle</h3>
<p class="product-price">$1,850.00</p>
</div>
</a>
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Sapphire Stud Earrings" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Sapphire Stud Earrings</h3>
<p class="product-price">$899.00</p>
</div>
</a>
<a href="#" class="related-product-card">
<div class="product-image-wrapper">
<img src="https://via.placeholder.com/250x250/F2F2F2/000000?text=Product+Image" alt="Emerald Solitaire Ring" loading="lazy">
</div>
<div class="product-details">
<h3 class="product-name">Emerald Solitaire Ring</h3>
<p class="product-price">$3,200.00</p>
</div>
</a>
</div>
</section>
<section class="customer-reviews-section">
<div class="container">
<h2 class="section-title">What Our Customers Say</h2>
<div class="reviews-summary">
<div class="average-rating">
<span class="rating-value">4.8</span> / 5
<div class="stars" aria-label="Average rating 4.8 out of 5 stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star half-filled">★</span>
</div>
<p class="total-reviews">(1,234 Reviews)</p>
</div>
<button class="button primary-button write-review-button">Write a Review</button>
</div>
<div class="reviews-grid">
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">JD</div>
<p class="reviewer-name">Jane Doe</p>
</div>
<div class="review-rating" aria-label="Rated 5 out of 5 stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
</div>
</div>
<h3 class="review-title">Absolutely Stunning Necklace!</h3>
<p class="review-text">I ordered the 'Eternal Sparkle' necklace and it exceeded all my expectations. The craftsmanship is superb, and it sparkles beautifully. It arrived quickly and was packaged elegantly. Highly recommend this store for their exquisite jewelry!</p>
<p class="review-date">Reviewed on October 26, 2023</p>
</article>
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">MS</div>
<p class="reviewer-name">Michael Smith</p>
</div>
<div class="review-rating" aria-label="Rated 4 out of 5 stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star empty">★</span>
</div>
</div>
<h3 class="review-title">Great Quality, Fast Shipping</h3>
<p class="review-text">Bought a pair of earrings for my wife, and she loves them. The quality is evident, and they look even better in person. Shipping was surprisingly fast, and the customer service was very helpful when I had a question about sizing. Will buy again!</p>
<p class="review-date">Reviewed on October 20, 2023</p>
</article>
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">AC</div>
<p class="reviewer-name">Aisha Khan</p>
</div>
<div class="review-rating" aria-label="Rated 5 out of 5 stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
</div>
</div>
<h3 class="review-title">My Go-To for Special Gifts</h3>
<p class="review-text">This is my third purchase from this store, and they consistently deliver perfection. The bangles I bought are exquisite and fit perfectly. The packaging always feels premium, making it ideal for gifting. A truly trustworthy brand.</p>
<p class="review-date">Reviewed on October 15, 2023</p>
</article>
<article class="review-card">
<div class="review-header">
<div class="reviewer-info">
<div class="reviewer-avatar">RW</div>
<p class="reviewer-name">Robert Williams</p>
</div>
<div class="review-rating" aria-label="Rated 3 out of 5 stars">
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star filled">★</span>
<span class="star empty">★</span>
<span class="star empty">★</span>
</div>
</div>
<h3 class="review-title">Decent Ring, Sizing Issue</h3>
<p class="review-text">The ring itself is beautiful, but the sizing was a bit off for me. Had to get it resized locally. Otherwise, good quality for the price. The customer support was responsive when I inquired about returns, but I decided to keep it.</p>
<p class="review-date">Reviewed on October 10, 2023</p>
</article>
</div>
<div class="view-all-reviews">
<button class="button secondary-button">View All 1,234 Reviews</button>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></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>
<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>
<section class="product-image-gallery">
<h2 class="sr-only">Product Image Gallery</h2>
<div class="gallery-container">

184
shopping_cart.html
View File

@ -9,189 +9,7 @@
</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>
<section class="cart-items-display">
<h2>Your Shopping Cart</h2>
<div class="cart-items-list">
<!-- Cart Item 1 -->
<div class="cart-item">
<div class="item-image">
<img src="images/ring-placeholder.jpg" alt="Elegant Gold Ring with Diamond Accent">
</div>
<div class="item-details">
<h3 class="item-name">Classic Diamond Band</h3>
<p class="item-price">$1,850.00</p>
</div>
<div class="item-quantity">
<label for="qty-item-1" class="sr-only">Quantity for Classic Diamond Band</label>
<input type="number" id="qty-item-1" value="1" min="1" max="10">
</div>
<div class="item-subtotal">
<p>$1,850.00</p>
</div>
<div class="item-actions">
<button class="remove-item">Remove</button>
</div>
</div>
<!-- Cart Item 2 -->
<div class="cart-item">
<div class="item-image">
<img src="images/necklace-placeholder.jpg" alt="Delicate Silver Chain Necklace with Pearl Pendant">
</div>
<div class="item-details">
<h3 class="item-name">Pearl Drop Necklace</h3>
<p class="item-price">$980.00</p>
</div>
<div class="item-quantity">
<label for="qty-item-2" class="sr-only">Quantity for Pearl Drop Necklace</label>
<input type="number" id="qty-item-2" value="1" min="1" max="10">
</div>
<div class="item-subtotal">
<p>$980.00</p>
</div>
<div class="item-actions">
<button class="remove-item">Remove</button>
</div>
</div>
<!-- Cart Item 3 (Example with multiple quantity) -->
<div class="cart-item">
<div class="item-image">
<img src="images/earrings-placeholder.jpg" alt="Sparkling Stud Earrings in Platinum">
</div>
<div class="item-details">
<h3 class="item-name">Brilliant Stud Earrings</h3>
<p class="item-price">$450.00</p>
</div>
<div class="item-quantity">
<label for="qty-item-3" class="sr-only">Quantity for Brilliant Stud Earrings</label>
<input type="number" id="qty-item-3" value="2" min="1" max="10">
</div>
<div class="item-subtotal">
<p>$900.00</p>
</div>
<div class="item-actions">
<button class="remove-item">Remove</button>
</div>
</div>
</div>
<div class="cart-summary">
<h3>Order Summary</h3>
<div class="summary-line">
<span>Subtotal:</span>
<span class="summary-value">$3,730.00</span>
</div>
<div class="summary-line">
<span>Shipping:</span>
<span class="summary-value">Calculated at checkout</span>
</div>
<div class="summary-line total-line">
<span>Total:</span>
<span class="summary-value">$3,730.00</span>
</div>
<button class="proceed-to-checkout">Proceed to Checkout</button>
</div>
</section>
<section class="order-summary-card">
<h2 class="order-summary-title">Order Summary</h2>
<div class="order-items">
<div class="order-item">
<div class="item-image-wrapper">
<img src="https://via.placeholder.com/60x60/f0f0f0/333333?text=Ring" alt="Elegant Diamond Ring" class="item-image">
</div>
<div class="item-details">
<span class="item-name">Elegant Diamond Ring</span>
<span class="item-quantity">Qty: 1</span>
</div>
<div class="item-price">$1,899.00</div>
</div>
<div class="order-item">
<div class="item-image-wrapper">
<img src="https://via.placeholder.com/60x60/f0f0f0/333333?text=Necklace" alt="Sapphire Pendant Necklace" class="item-image">
</div>
<div class="item-details">
<span class="item-name">Sapphire Pendant Necklace</span>
<span class="item-quantity">Qty: 1</span>
</div>
<div class="item-price">$1,250.00</div>
</div>
<div class="order-item">
<div class="item-image-wrapper">
<img src="https://via.placeholder.com/60x60/f0f0f0/333333?text=Earrings" alt="Gold Hoop Earrings" class="item-image">
</div>
<div class="item-details">
<span class="item-name">Gold Hoop Earrings</span>
<span class="item-quantity">Qty: 2</span>
</div>
<div class="item-price">$900.00</div>
</div>
</div>
<hr class="summary-divider">
<dl class="order-summary-details">
<div class="summary-row">
<dt>Subtotal:</dt>
<dd>$4,049.00</dd>
</div>
<div class="summary-row">
<dt>Shipping:</dt>
<dd>$25.00</dd>
</div>
<div class="summary-row">
<dt>Taxes (5%):</dt>
<dd>$202.45</dd>
</div>
<div class="summary-row total-row">
<dt>Total:</dt>
<dd>$4,276.45</dd>
</div>
</dl>
<div class="summary-actions">
<button class="btn btn-primary">Proceed to Checkout</button>
<button class="btn btn-secondary">Continue Shopping</button>
</div>
</section>
<section class="coupon-section">
<div class="coupon-container">
<h3 class="coupon-title">Have a Coupon Code?</h3>
<form class="coupon-form">
<div class="input-group">
<label for="couponCode" class="sr-only">Enter your coupon code</label>
<input type="text" id="couponCode" name="couponCode" placeholder="Enter coupon code here" class="coupon-input" aria-label="Enter your coupon code">
<button type="submit" class="coupon-apply-btn">Apply</button>
</div>
<p id="couponMessage" class="coupon-message" aria-live="polite">
<!-- Placeholder for success/error messages (e.g., "Code Applied!", "Invalid Code.") -->
</p>
</form>
</div>
</section>
<section class="continue-shopping-section">
<a href="/catalog" class="btn btn-secondary continue-shopping-button">
Continue Shopping
</a>
</section>
<section class="checkout-actions-section">
<div class="checkout-actions-container">
<div class="order-summary-total">
<p class="total-label">Order Total:</p>
<p class="total-amount">$1,250.00</p>
</div>
<button type="submit" class="proceed-to-checkout-button">
Proceed to Checkout
</button>
</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"></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>
<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>
<section class="cart-items-display">
<h2>Your Shopping Cart</h2>

198
sign_up.html
View File

@ -9,191 +9,7 @@
</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>
<section id="registration-form" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Register Your Account</h2>
<div class="row justify-content-center">
<div class="col-md-6 col-lg-5">
<form action="#" method="POST" class="p-4 border rounded shadow-sm">
<div class="form-group mb-3">
<label for="reg-fullname" class="form-label">Full Name</label>
<input type="text" id="reg-fullname" name="fullname" class="form-control" placeholder="Enter your full name" required aria-label="Full Name">
</div>
<div class="form-group mb-3">
<label for="reg-email" class="form-label">Email Address</label>
<input type="email" id="reg-email" name="email" class="form-control" placeholder="your@example.com" required aria-label="Email Address">
</div>
<div class="form-group mb-3">
<label for="reg-password" class="form-label">Password</label>
<input type="password" id="reg-password" name="password" class="form-control" placeholder="Minimum 8 characters" required aria-label="Password">
</div>
<div class="form-group mb-4">
<label for="reg-confirm-password" class="form-label">Confirm Password</label>
<input type="password" id="reg-confirm-password" name="confirm_password" class="form-control" placeholder="Re-enter your password" required aria-label="Confirm Password">
</div>
<button type="submit" class="btn btn-primary w-100">Register</button>
<p class="text-center mt-3 mb-0">
Already have an account? <a href="/login.html" class="text-decoration-none">Log In</a>
</p>
</form>
</div>
</div>
</div>
</section>
<section class="password-policy-guidelines">
<div class="container">
<h2>Password Policy Guidelines</h2>
<p class="intro-text">
To ensure the highest level of security for your account and personal data, please adhere to our strict password policy. Following these guidelines helps protect your information from unauthorized access.
</p>
<div class="policy-section">
<h3>Minimum Requirements</h3>
<ul>
<li>Must be at least 12 characters long.</li>
<li>Must include a combination of uppercase letters (A-Z), lowercase letters (a-z), numbers (0-9), and special characters (e.g., !, @, #, $, %, ^, &amp;, *).</li>
<li>Cannot contain more than two consecutive identical characters.</li>
</ul>
</div>
<div class="policy-section">
<h3>Password Complexity & Strength</h3>
<ul>
<li>Avoid using easily guessable information such as your name, birthdate, common words, or simple sequences (e.g., "123456", "password").</li>
<li>Ensure your password is unique and not reused from other websites or services.</li>
<li>Consider using a passphrase (a sequence of random words) for greater strength and memorability.</li>
</ul>
</div>
<div class="policy-section">
<h3>Prohibited Passwords</h3>
<ul>
<li>Passwords found in common breach lists.</li>
<li>Passwords that are too similar to your username or email address.</li>
<li>Common dictionary words or simple substitutions (e.g., "p@ssword").</li>
</ul>
</div>
<div class="policy-section">
<h3>Account Security & Management</h3>
<ul>
<li>We recommend using a reputable password manager to generate and store strong, unique passwords.</li>
<li>Do not share your password with anyone, including our support staff.</li>
<li>Regularly update your password, ideally every 90 days.</li>
<li>After several failed login attempts, your account may be temporarily locked for security. Follow the "Forgot Password" link to regain access.</li>
</ul>
</div>
<p class="security-note">
Your security is our top priority. Adhering to these guidelines significantly enhances the protection of your account.
</p>
</div>
</section>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Terms & Privacy Checkbox</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;404;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="terms-privacy-section" aria-labelledby="terms-privacy-heading">
<h2 id="terms-privacy-heading" class="terms-privacy-section__heading">Your Consent Matters</h2>
<div class="terms-privacy-section__content">
<div class="checkbox-group">
<input type="checkbox" id="terms-checkbox" name="terms_agreement" required>
<label for="terms-checkbox">
I agree to the <a href="/terms-of-service" target="_blank" rel="noopener noreferrer">Terms of Service</a>
</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="privacy-checkbox" name="privacy_agreement" required>
<label for="privacy-checkbox">
I have read and understood the <a href="/privacy-policy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>
</label>
</div>
<div class="checkbox-group">
<input type="checkbox" id="newsletter-checkbox" name="newsletter_consent">
<label for="newsletter-checkbox">
Subscribe me to exclusive offers and updates (optional)
</label>
</div>
</div>
<p class="terms-privacy-section__note">
By proceeding, you acknowledge and accept our policies.
</p>
<button type="submit" class="terms-privacy-section__button">
Confirm & Continue
</button>
</section>
</body>
</html>
<section class="signup-call-to-action">
<div class="container signup-content-wrapper">
<h2 class="signup-title">Join Our Exquisite World</h2>
<p class="signup-description">
Sign up to unlock exclusive collections, personalized recommendations, and a seamless shopping experience.
</p>
<div class="signup-button-wrapper">
<a href="#" class="btn btn-primary signup-btn">Sign Up Now</a>
</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>Existing User Prompt</title>
<link rel="stylesheet" href="style.css" />
<!-- Google Fonts for elegant typography -->
<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=Open+Sans:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<section class="existing-user-prompt">
<h2 id="promptHeading">Welcome Back!</h2>
<p id="promptMessage">It looks like you already have an account with us. Please log in to continue your secure shopping experience.</p>
<div class="prompt-actions">
<a href="/login" class="btn btn-primary" aria-labelledby="promptHeading promptMessage">Log In to Your Account</a>
<a href="/register?new_user=true" class="btn btn-secondary" aria-labelledby="promptHeading promptMessage">Not You? Create a New Account</a>
</div>
</section>
</body>
</html>
<section class="social-signup-section">
<div class="social-signup-container">
<h2 class="social-signup-heading">Sign Up Quickly</h2>
<p class="social-signup-intro">Or continue with:</p>
<div class="social-buttons-wrapper">
<a href="#" class="social-button social-button-google" aria-label="Sign up with Google">
<span class="social-icon google-icon"></span>
<span class="button-text">Sign up with Google</span>
</a>
<a href="#" class="social-button social-button-facebook" aria-label="Sign up with Facebook">
<span class="social-icon facebook-icon"></span>
<span class="button-text">Sign up with Facebook</span>
</a>
<a href="#" class="social-button social-button-apple" aria-label="Sign up with Apple">
<span class="social-icon apple-icon"></span>
<span class="button-text">Sign up with Apple</span>
</a>
</div>
<div class="signup-terms">
<p>By signing up, you agree to our <a href="#" class="terms-link">Terms of Service</a> and <a href="#" class="privacy-link">Privacy Policy</a>.</p>
</div>
</div>
</section>
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></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>
<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>
<section id="registration-form" class="py-5">
<div class="container">
<h2 class="text-center mb-4">Register Your Account</h2>
@ -360,6 +176,18 @@
</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 &amp; 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>Terms &amp; Privacy Checkbox</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>Existing User Prompt</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
<link rel="stylesheet" href="style.css" />
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {

2
style.css
View File

File diff suppressed because one or more lines are too long

320
user_profile.html
View File

@ -9,325 +9,7 @@
</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>
<section class="profile-header">
<div class="profile-info-container">
<div class="profile-avatar">
<img src="https://via.placeholder.com/120x120?text=User" alt="User Profile Picture" class="profile-image">
</div>
<div class="profile-details">
<h2 class="profile-name">Johnathan Doe</h2>
<p class="profile-tagline">Premium Member since 2023</p>
<p class="profile-email">john.doe@example.com</p>
</div>
</div>
<nav class="profile-navigation">
<ul class="profile-nav-list">
<li class="profile-nav-item"><a href="#dashboard" class="profile-nav-link">Dashboard</a></li>
<li class="profile-nav-item"><a href="#orders" class="profile-nav-link">Order History</a></li>
<li class="profile-nav-item"><a href="#wishlist" class="profile-nav-link">Wishlist</a></li>
<li class="profile-nav-item"><a href="#settings" class="profile-nav-link">Settings</a></li>
<li class="profile-nav-item"><a href="#logout" class="profile-nav-link profile-nav-link--logout">Logout</a></li>
</ul>
</nav>
</section>
<section class="personal-info-section">
<div class="container">
<h2 class="section-title">Personal Information</h2>
<p class="section-description">Manage your profile details and preferences for a seamless shopping experience.</p>
<form class="personal-info-form" action="/api/profile/update" method="POST">
<fieldset class="form-group">
<legend class="group-title">Contact Details</legend>
<div class="form-row">
<div class="form-field">
<label for="firstName">First Name</label>
<input type="text" id="firstName" name="firstName" placeholder="e.g., John" value="Placeholder First Name" required aria-required="true">
</div>
<div class="form-field">
<label for="lastName">Last Name</label>
<input type="text" id="lastName" name="lastName" placeholder="e.g., Doe" value="Placeholder Last Name" required aria-required="true">
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="e.g., john.doe@example.com" value="placeholder@example.com" required aria-required="true">
</div>
<div class="form-field">
<label for="phone">Phone Number (Optional)</label>
<input type="tel" id="phone" name="phone" placeholder="e.g., +1 (123) 456-7890" value="+1 (123) 456-7890">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<legend class="group-title">Shipping Address</legend>
<div class="form-field full-width">
<label for="addressLine1">Address Line 1</label>
<input type="text" id="addressLine1" name="addressLine1" placeholder="e.g., 123 Main Street" value="Placeholder Address Line 1" required aria-required="true">
</div>
<div class="form-field full-width">
<label for="addressLine2">Address Line 2 (Optional)</label>
<input type="text" id="addressLine2" name="addressLine2" placeholder="e.g., Apt 4B, Building C" value="Placeholder Address Line 2">
</div>
<div class="form-row">
<div class="form-field">
<label for="city">City</label>
<input type="text" id="city" name="city" placeholder="e.g., New York" value="Placeholder City" required aria-required="true">
</div>
<div class="form-field">
<label for="stateProvince">State / Province</label>
<input type="text" id="stateProvince" name="stateProvince" placeholder="e.g., NY" value="Placeholder State" required aria-required="true">
</div>
</div>
<div class="form-row">
<div class="form-field">
<label for="zipPostalCode">Zip / Postal Code</label>
<input type="text" id="zipPostalCode" name="zipPostalCode" placeholder="e.g., 10001" value="P1L 5F4" required aria-required="true">
</div>
<div class="form-field">
<label for="country">Country</label>
<select id="country" name="country" required aria-required="true">
<option value="">Select Country</option>
<option value="US" selected>United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
<option value="IN">India</option>
<option value="AU">Australia</option>
<option value="DE">Germany</option>
<option value="FR">France</option>
<!-- More countries would be listed here -->
</select>
</div>
</div>
</fieldset>
<fieldset class="form-group">
<legend class="group-title">Password Management</legend>
<p class="group-description">Change your password for enhanced account security.</p>
<div class="form-field full-width">
<label for="currentPassword">Current Password</label>
<input type="password" id="currentPassword" name="currentPassword" placeholder="Enter your current password">
</div>
<div class="form-field full-width">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" name="newPassword" placeholder="Enter a new password">
</div>
<div class="form-field full-width">
<label for="confirmNewPassword">Confirm New Password</label>
<input type="password" id="confirmNewPassword" name="confirmNewPassword" placeholder="Confirm your new password">
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="button button-primary">Save Changes</button>
<button type="reset" class="button button-secondary">Discard Changes</button>
</div>
</form>
</div>
</section>
<section class="shipping-addresses-management">
<div class="container">
<h2>Shipping Addresses</h2>
<div class="address-list">
<div class="address-card">
<h3>Default Shipping Address</h3>
<p><strong>Recipient:</strong> User Full Name</p>
<p><strong>Address Line 1:</strong> 123 Main Street</p>
<p><strong>Address Line 2:</strong> Apt 4B</p>
<p><strong>City:</strong> Anytown</p>
<p><strong>State/Province:</strong> AA</p>
<p><strong>Zip/Postal Code:</strong> 12345</p>
<p><strong>Country:</strong> United States</p>
<p><strong>Phone:</strong> (555) 123-4567</p>
<div class="address-actions">
<button type="button" class="btn btn-edit">Edit</button>
<button type="button" class="btn btn-delete">Delete</button>
</div>
</div>
<div class="address-card">
<h3>Secondary Address</h3>
<p><strong>Recipient:</strong> Another User</p>
<p><strong>Address Line 1:</strong> 456 Oak Avenue</p>
<p><strong>Address Line 2:</strong> Suite 101</p>
<p><strong>City:</strong> Othercity</p>
<p><strong>State/Province:</strong> BB</p>
<p><strong>Zip/Postal Code:</strong> 67890</p>
<p><strong>Country:</strong> United States</p>
<p><strong>Phone:</strong> (555) 987-6543</p>
<div class="address-actions">
<button type="button" class="btn btn-edit">Edit</button>
<button type="button" class="btn btn-delete">Delete</button>
<button type="button" class="btn btn-set-default">Set as Default</button>
</div>
</div>
<div class="address-card">
<h3>Work Address</h3>
<p><strong>Recipient:</strong> User Full Name</p>
<p><strong>Address Line 1:</strong> 789 Business Park Blvd</p>
<p><strong>Address Line 2:</strong> Office 200</p>
<p><strong>City:</strong> Metropolis</p>
<p><strong>State/Province:</strong> CC</p>
<p><strong>Zip/Postal Code:</strong> 90210</p>
<p><strong>Country:</strong> United States</p>
<p><strong>Phone:</strong> (555) 111-2222</p>
<div class="address-actions">
<button type="button" class="btn btn-edit">Edit</button>
<button type="button" class="btn btn-delete">Delete</button>
<button type="button" class="btn btn-set-default">Set as Default</button>
</div>
</div>
</div>
<div class="add-new-address-section">
<h3>Add New Shipping Address</h3>
<form class="address-form">
<div class="form-group">
<label for="newFullName">Full Name</label>
<input type="text" id="newFullName" name="fullName" placeholder="e.g., Jane Doe" required>
</div>
<div class="form-group">
<label for="newAddressLine1">Address Line 1</label>
<input type="text" id="newAddressLine1" name="addressLine1" placeholder="Street address, P.O. Box" required>
</div>
<div class="form-group">
<label for="newAddressLine2">Address Line 2 (Optional)</label>
<input type="text" id="newAddressLine2" name="addressLine2" placeholder="Apartment, suite, unit, building, floor etc.">
</div>
<div class="form-group">
<label for="newCity">City</label>
<input type="text" id="newCity" name="city" placeholder="e.g., New York" required>
</div>
<div class="form-group">
<label for="newStateProvince">State / Province</label>
<input type="text" id="newStateProvince" name="stateProvince" placeholder="e.g., NY" required>
</div>
<div class="form-group">
<label for="newZipCode">Zip / Postal Code</label>
<input type="text" id="newZipCode" name="zipCode" placeholder="e.g., 10001" required>
</div>
<div class="form-group">
<label for="newCountry">Country</label>
<select id="newCountry" name="country" required>
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="IN">India</option>
<option value="GB">United Kingdom</option>
<!-- More countries can be added here -->
</select>
</div>
<div class="form-group">
<label for="newPhoneNumber">Phone Number</label>
<input type="tel" id="newPhoneNumber" name="phoneNumber" placeholder="e.g., (123) 456-7890" required>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="setDefaultAddress" name="setDefaultAddress">
<label for="setDefaultAddress">Set as my default shipping address</label>
</div>
<button type="submit" class="btn btn-primary">Save Address</button>
</form>
</div>
</div>
</section>
<section class="password-change-section" aria-labelledby="passwordChangeHeading">
<div class="password-change-container">
<h2 id="passwordChangeHeading" class="section-title">Change Your Password</h2>
<p class="section-description">For your security, please update your password regularly.</p>
<form action="/update-password" method="POST" class="password-change-form">
<div class="form-group">
<label for="currentPassword">Current Password</label>
<input type="password" id="currentPassword" name="currentPassword" placeholder="Enter your current password" required autocomplete="current-password">
</div>
<div class="form-group">
<label for="newPassword">New Password</label>
<input type="password" id="newPassword" name="newPassword" placeholder="Enter your new password" required autocomplete="new-password">
</div>
<div class="form-group">
<label for="confirmNewPassword">Confirm New Password</label>
<input type="password" id="confirmNewPassword" name="confirmNewPassword" placeholder="Re-enter your new password" required autocomplete="new-password">
</div>
<button type="submit" class="submit-button">Update Password</button>
</form>
</div>
</section>
<section class="communication-preferences-section">
<div class="container">
<h2 class="section-title">Communication Preferences</h2>
<p class="section-description">Manage how you receive updates, offers, and essential notifications from us.</p>
<form class="preferences-form">
<fieldset class="preference-group">
<legend class="group-title">Email Notifications</legend>
<div class="preference-item">
<input type="checkbox" id="email-promotions" name="email-promotions" checked>
<label for="email-promotions" class="preference-label">
<span class="label-text">Promotional Offers & Discounts</span>
<span class="label-description">Receive exclusive deals, new collection alerts, and special event invitations directly in your inbox.</span>
</label>
</div>
<div class="preference-item">
<input type="checkbox" id="email-newsletter" name="email-newsletter" checked>
<label for="email-newsletter" class="preference-label">
<span class="label-text">Newsletter & Product Updates</span>
<span class="label-description">Stay informed about our latest jewelry trends, blog posts, and company news.</span>
</label>
</div>
<div class="preference-item">
<input type="checkbox" id="email-order-updates" name="email-order-updates" checked disabled>
<label for="email-order-updates" class="preference-label">
<span class="label-text">Order & Shipping Updates</span>
<span class="label-description">Essential notifications regarding your purchases, shipping status, and delivery (cannot be disabled).</span>
</label>
</div>
</fieldset>
<fieldset class="preference-group">
<legend class="group-title">SMS Notifications</legend>
<div class="preference-item">
<input type="checkbox" id="sms-promotions" name="sms-promotions">
<label for="sms-promotions" class="preference-label">
<span class="label-text">Promotional SMS</span>
<span class="label-description">Get quick alerts about flash sales, limited-time offers, and special events via text message.</span>
</label>
</div>
<div class="preference-item">
<input type="checkbox" id="sms-order-status" name="sms-order-status" checked disabled>
<label for="sms-order-status" class="preference-label">
<span class="label-text">Order Status Alerts</span>
<span class="label-description">Critical updates on your order confirmation, dispatch, and delivery status (cannot be disabled).</span>
</label>
</div>
</fieldset>
<div class="form-actions">
<button type="submit" class="button primary-button">Save Changes</button>
<button type="button" class="button secondary-button">Cancel</button>
<a href="#" class="unsubscribe-link">Unsubscribe from all marketing communications</a>
</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"></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>
<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>
<section class="profile-header">
<div class="profile-info-container">
<div class="profile-avatar">