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