329 lines
20 KiB
HTML
329 lines
20 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Catalog</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="page-wrapper">
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Radiance Jewels</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_catalog.html">Product Catalog</a></li><li><a href="shopping_cart.html">Shopping Cart</a></li><li><a href="checkout.html">Checkout</a></li><li><a href="login.html">Login</a></li><li><a href="dashboard.html">Dashboard</a></li><li><a href="order_history.html">Order History</a></li><li><a href="user_profile.html">User Profile</a></li><li><a href="sign_up.html">Sign Up</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign Up</button><button class="nav-1-btn nav-1-solid">Login</button></div></nav></div>
|
|
<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>
|
|
<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" />
|
|
<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>
|
|
<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>
|
|
⋮
|
|
</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">«</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">»</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"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping & Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Product Grid Section</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<link rel="stylesheet" href="style.css" />
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |