282 lines
15 KiB
HTML
282 lines
15 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Cart Page</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">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
|
<section class="cart-items-section">
|
|
<div class="container">
|
|
<h2>My Shopping Cart (2 Items)</h2>
|
|
<div class="cart-layout">
|
|
<div class="cart-items-list">
|
|
|
|
<!-- Cart Item 1 -->
|
|
<article class="cart-item">
|
|
<a href="#product-detail-link-1" class="cart-item__image-link">
|
|
<img src="https://via.placeholder.com/120x120?text=Product+A" alt="Wireless Bluetooth Headphones" class="cart-item__image">
|
|
</a>
|
|
<div class="cart-item__main-info">
|
|
<div class="cart-item__details">
|
|
<h3 class="cart-item__name">
|
|
<a href="#product-detail-link-1">Premium Wireless Bluetooth Headphones with ANC</a>
|
|
</h3>
|
|
<p class="cart-item__seller">Sold by: TechGadget Solutions</p>
|
|
<div class="cart-item__price-info">
|
|
<span class="cart-item__original-price">₹12,999</span>
|
|
<span class="cart-item__current-price">₹5,499</span>
|
|
<span class="cart-item__discount-percent">57% Off</span>
|
|
</div>
|
|
<p class="cart-item__delivery">Delivery by <strong>Wed, 24th July</strong></p>
|
|
</div>
|
|
<div class="cart-item__actions">
|
|
<div class="cart-item__quantity-selector">
|
|
<button class="quantity-btn quantity-btn--minus">-</button>
|
|
<input type="number" value="1" min="1" max="5" class="quantity-input" aria-label="Quantity">
|
|
<button class="quantity-btn quantity-btn--plus">+</button>
|
|
</div>
|
|
<div class="cart-item__action-buttons">
|
|
<button class="action-btn action-btn--remove">Remove</button>
|
|
<button class="action-btn action-btn--move-to-wishlist">Move to Wishlist</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Cart Item 2 -->
|
|
<article class="cart-item">
|
|
<a href="#product-detail-link-2" class="cart-item__image-link">
|
|
<img src="https://via.placeholder.com/120x120?text=Product+B" alt="Smartwatch Fitness Tracker" class="cart-item__image">
|
|
</a>
|
|
<div class="cart-item__main-info">
|
|
<div class="cart-item__details">
|
|
<h3 class="cart-item__name">
|
|
<a href="#product-detail-link-2">Smartwatch with Heart Rate Monitor & GPS</a>
|
|
</h3>
|
|
<p class="cart-item__seller">Sold by: FutureWearables Inc.</p>
|
|
<div class="cart-item__price-info">
|
|
<span class="cart-item__original-price">₹7,999</span>
|
|
<span class="cart-item__current-price">₹3,799</span>
|
|
<span class="cart-item__discount-percent">52% Off</span>
|
|
</div>
|
|
<p class="cart-item__delivery">Delivery by <strong>Thu, 25th July</strong></p>
|
|
</div>
|
|
<div class="cart-item__actions">
|
|
<div class="cart-item__quantity-selector">
|
|
<button class="quantity-btn quantity-btn--minus">-</button>
|
|
<input type="number" value="1" min="1" max="5" class="quantity-input" aria-label="Quantity">
|
|
<button class="quantity-btn quantity-btn--plus">+</button>
|
|
</div>
|
|
<div class="cart-item__action-buttons">
|
|
<button class="action-btn action-btn--remove">Remove</button>
|
|
<button class="action-btn action-btn--move-to-wishlist">Move to Wishlist</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Placeholder for empty cart or more items -->
|
|
<div class="cart-item-placeholder">
|
|
<p>Thinking of adding more items? <a href="#shop-more">Continue Shopping</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Optional: Price Details/Summary section can be placed here -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="order-summary-panel">
|
|
<h2 class="order-summary-title">Order Summary</h2>
|
|
|
|
<div class="order-summary-items">
|
|
<ul class="item-list">
|
|
<li class="item">
|
|
<div class="item-description">
|
|
<span class="item-name">Placeholder Product Name A (Example with longer title)</span>
|
|
<span class="item-quantity">Qty: 1</span>
|
|
</div>
|
|
<span class="item-price">₹1,299.00</span>
|
|
</li>
|
|
<li class="item">
|
|
<div class="item-description">
|
|
<span class="item-name">Placeholder Product B</span>
|
|
<span class="item-quantity">Qty: 2</span>
|
|
</div>
|
|
<span class="item-price">₹598.00</span>
|
|
</li>
|
|
<li class="item">
|
|
<div class="item-description">
|
|
<span class="item-name">Placeholder Product C</span>
|
|
<span class="item-quantity">Qty: 1</span>
|
|
</div>
|
|
<span class="item-price">₹350.00</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="order-summary-calculations">
|
|
<dl class="calculation-list">
|
|
<dt>Subtotal</dt>
|
|
<dd>₹2,247.00</dd>
|
|
|
|
<dt>Shipping Fee</dt>
|
|
<dd>₹49.00</dd>
|
|
|
|
<dt>Taxes & Charges</dt>
|
|
<dd>₹150.00</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="order-total">
|
|
<span class="total-label">Order Total</span>
|
|
<span class="total-amount">₹2,446.00</span>
|
|
</div>
|
|
|
|
<div class="order-actions">
|
|
<button class="proceed-to-checkout-btn">Proceed to Checkout</button>
|
|
</div>
|
|
</section>
|
|
<section class="cta-section">
|
|
<div class="cta-content-wrapper">
|
|
<h2 class="cta-heading">Ready to Discover Your Next Favorite Product?</h2>
|
|
<p class="cta-description">Browse through thousands of items, find exclusive deals, and enjoy a seamless shopping experience from the comfort of your home.</p>
|
|
<a href="#" class="cta-button">Shop Now ></a>
|
|
</div>
|
|
</section>
|
|
<section id="wishlist-section" class="wishlist-section">
|
|
<div class="container">
|
|
<h2 class="section-title">My Saved Items</h2>
|
|
|
|
<div id="wishlist-empty-state" class="wishlist-empty-state" style="display: none;">
|
|
<p class="empty-message">Your wishlist is empty. Start adding items you love!</p>
|
|
<a href="/products" class="button primary-button">Continue Shopping</a>
|
|
</div>
|
|
|
|
<div class="wishlist-grid">
|
|
<!-- Wishlist Item 1 -->
|
|
<article class="wishlist-item">
|
|
<div class="wishlist-item-header">
|
|
<button class="remove-button" aria-label="Remove item">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<a href="/product-details/1" class="wishlist-item-link">
|
|
<div class="wishlist-item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+1" alt="[Product Name 1 - Example Smart TV]">
|
|
</div>
|
|
<div class="wishlist-item-details">
|
|
<h3 class="wishlist-item-title">[Product Name 1 - e.g., Smart 4K UHD LED TV 55 inch]</h3>
|
|
<div class="wishlist-item-price">
|
|
<span class="current-price">₹45,999</span>
|
|
<span class="original-price">₹55,000</span>
|
|
<span class="discount">(16% off)</span>
|
|
</div>
|
|
<p class="wishlist-item-status in-stock">In Stock</p>
|
|
</div>
|
|
</a>
|
|
<div class="wishlist-item-actions">
|
|
<button class="button primary-button">Move to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Wishlist Item 2 -->
|
|
<article class="wishlist-item">
|
|
<div class="wishlist-item-header">
|
|
<button class="remove-button" aria-label="Remove item">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<a href="/product-details/2" class="wishlist-item-link">
|
|
<div class="wishlist-item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+2" alt="[Product Name 2 - Example Laptop]">
|
|
</div>
|
|
<div class="wishlist-item-details">
|
|
<h3 class="wishlist-item-title">[Product Name 2 - e.g., UltraBook 13-inch Core i5, 8GB RAM]</h3>
|
|
<div class="wishlist-item-price">
|
|
<span class="current-price">₹62,500</span>
|
|
<span class="original-price">₹70,000</span>
|
|
<span class="discount">(10% off)</span>
|
|
</div>
|
|
<p class="wishlist-item-status out-of-stock">Out of Stock</p>
|
|
</div>
|
|
</a>
|
|
<div class="wishlist-item-actions">
|
|
<button class="button primary-button" disabled="">Move to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Wishlist Item 3 -->
|
|
<article class="wishlist-item">
|
|
<div class="wishlist-item-header">
|
|
<button class="remove-button" aria-label="Remove item">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<a href="/product-details/3" class="wishlist-item-link">
|
|
<div class="wishlist-item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+3" alt="[Product Name 3 - Example Headphones]">
|
|
</div>
|
|
<div class="wishlist-item-details">
|
|
<h3 class="wishlist-item-title">[Product Name 3 - e.g., Noise Cancelling Headphones v2]</h3>
|
|
<div class="wishlist-item-price">
|
|
<span class="current-price">₹7,999</span>
|
|
</div>
|
|
<p class="wishlist-item-status in-stock">In Stock</p>
|
|
</div>
|
|
</a>
|
|
<div class="wishlist-item-actions">
|
|
<button class="button primary-button">Move to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
<!-- Wishlist Item 4 -->
|
|
<article class="wishlist-item">
|
|
<div class="wishlist-item-header">
|
|
<button class="remove-button" aria-label="Remove item">
|
|
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="icon-close"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
|
</button>
|
|
</div>
|
|
<a href="/product-details/4" class="wishlist-item-link">
|
|
<div class="wishlist-item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+4" alt="[Product Name 4 - Example Smartwatch]">
|
|
</div>
|
|
<div class="wishlist-item-details">
|
|
<h3 class="wishlist-item-title">[Product Name 4 - e.g., Smartwatch Pro Series 5]</h3>
|
|
<div class="wishlist-item-price">
|
|
<span class="current-price">₹14,999</span>
|
|
<span class="original-price">₹17,500</span>
|
|
<span class="discount">(14% off)</span>
|
|
</div>
|
|
<p class="wishlist-item-status in-stock">In Stock</p>
|
|
</div>
|
|
</a>
|
|
<div class="wishlist-item-actions">
|
|
<button class="button primary-button">Move to Cart</button>
|
|
</div>
|
|
</article>
|
|
|
|
</div> <!-- /wishlist-grid -->
|
|
|
|
</div> <!-- /container -->
|
|
</section>
|
|
<section class="continue-shopping-section">
|
|
<div class="continue-shopping-container">
|
|
<a href="/products" class="continue-shopping-link">
|
|
← Continue Shopping
|
|
</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |