custom1/shopping_cart.html

202 lines
10 KiB
HTML
Raw Normal View History

<!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">
<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"><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>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
</script>
</body>
</html>