365 lines
19 KiB
HTML
365 lines
19 KiB
HTML
SafeValue must use [property]=binding:
|
|
<!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">Amazon Prime</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Products</a></li><li><a href="product_detail_page.html">Deals</a></li><li><a href="cart_page.html">Cart</a></li><li><a href="checkout_page.html">Checkout</a></li><li><a href="user_account_dashboard.html">My Account</a></li><li class="nav-1-dropdown"><a href="#">Shop by Category<i class="fas fa-chevron-down"><i class="fas fa-chevron-down">🔽</i></i></a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Sign In</button><button class="nav-1-btn nav-1-solid">Register</button></div></nav></div>
|
|
<section class="cart-items-section">
|
|
<div class="container">
|
|
<h2>Your Shopping Cart</h2>
|
|
|
|
<div class="cart-items-list">
|
|
<!-- Cart Item 1 -->
|
|
<div class="cart-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+1" alt="Placeholder Product 1">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 class="item-name">Placeholder Product Title - Example Long Name</h3>
|
|
<p class="item-stock">In Stock</p>
|
|
<p class="item-seller">Sold by: Dummy Seller Inc.</p>
|
|
<div class="item-actions">
|
|
<div class="quantity-selector">
|
|
<label for="qty1">Qty:</label>
|
|
<select id="qty1" name="quantity">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
<option value="3">3</option>
|
|
<option value="4">4</option>
|
|
<option value="5">5</option>
|
|
</select>
|
|
</div>
|
|
<span class="action-separator">|</span>
|
|
<button class="action-button delete-button">Delete</button>
|
|
<span class="action-separator">|</span>
|
|
<button class="action-button save-later-button">Save for later</button>
|
|
<span class="action-separator">|</span>
|
|
<button class="action-button compare-button">Compare with similar items</button>
|
|
</div>
|
|
</div>
|
|
<div class="item-price-info">
|
|
<p class="item-price">$XX.XX</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Item 2 -->
|
|
<div class="cart-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+2" alt="Placeholder Product 2">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 class="item-name">Another Placeholder Item - Shorter Title</h3>
|
|
<p class="item-stock">In Stock</p>
|
|
<p class="item-seller">Sold by: Another Dummy Seller</p>
|
|
<div class="item-actions">
|
|
<div class="quantity-selector">
|
|
<label for="qty2">Qty:</label>
|
|
<select id="qty2" name="quantity">
|
|
<option value="1">1</option>
|
|
<option value="2">2</option>
|
|
</select>
|
|
</div>
|
|
<span class="action-separator">|</span>
|
|
<button class="action-button delete-button">Delete</button>
|
|
<span class="action-separator">|</span>
|
|
<button class="action-button save-later-button">Save for later</button>
|
|
</div>
|
|
</div>
|
|
<div class="item-price-info">
|
|
<p class="item-price">$YY.YY</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cart Item 3 - Out of stock example -->
|
|
<div class="cart-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image+3" alt="Placeholder Product 3">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 class="item-name">Out of Stock Item Example</h3>
|
|
<p class="item-stock out-of-stock">Currently unavailable</p>
|
|
<p class="item-seller">Sold by: Third Dummy Seller Co.</p>
|
|
<div class="item-actions">
|
|
<button class="action-button delete-button">Delete</button>
|
|
</div>
|
|
</div>
|
|
<div class="item-price-info">
|
|
<p class="item-price unavailable">N/A</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="order-summary" class="order-summary-section">
|
|
<h2>Order Summary</h2>
|
|
|
|
<div class="order-items-list">
|
|
<article class="order-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/90x90?text=Product+Image" alt="Product Name Placeholder 1">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 class="item-name">Product Name Placeholder 1</h3>
|
|
<p class="item-quantity">Qty: 1</p>
|
|
<p class="item-price">$XX.XX</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="order-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/90x90?text=Product+Image" alt="Product Name Placeholder 2">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3 class="item-name">Product Name Placeholder 2</h3>
|
|
<p class="item-quantity">Qty: 2</p>
|
|
<p class="item-price">$YY.YY</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="order-summary-details">
|
|
<div class="summary-line">
|
|
<span>Items:</span>
|
|
<span>$ZZ.ZZ</span>
|
|
</div>
|
|
<div class="summary-line">
|
|
<span>Shipping & handling:</span>
|
|
<span>$S.SS</span>
|
|
</div>
|
|
<div class="summary-line">
|
|
<span>Total before tax:</span>
|
|
<span>$TBT.TT</span>
|
|
</div>
|
|
<div class="summary-line">
|
|
<span>Estimated tax:</span>
|
|
<span>$ET.EE</span>
|
|
</div>
|
|
<div class="summary-total">
|
|
<h3>Order total:</h3>
|
|
<h3>$TOTAL.OO</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-summary-actions">
|
|
<button class="proceed-button">Proceed to checkout</button>
|
|
</div>
|
|
</section>
|
|
<aside class="checkout-summary-section">
|
|
<div class="checkout-summary-content">
|
|
<p class="free-shipping-message">Your order qualifies for <span class="highlight">FREE Shipping</span>.</p>
|
|
<div class="subtotal-info">
|
|
<h3 class="subtotal-label">Subtotal (<span class="item-count">placeholder_item_count</span> items):</h3>
|
|
<span class="subtotal-amount">$placeholder_subtotal_amount</span>
|
|
</div>
|
|
<div class="gift-option">
|
|
<input type="checkbox" id="giftOption" class="gift-checkbox">
|
|
<label for="giftOption" class="gift-label">This order contains a gift</label>
|
|
</div>
|
|
<button class="proceed-to-checkout-button">Proceed to Checkout</button>
|
|
</div>
|
|
</aside>
|
|
<section class="recommended-products-section">
|
|
<h2 class="recommended-products-heading">Customers who bought items in your cart also bought</h2>
|
|
<div class="product-grid">
|
|
<div class="product-card">
|
|
<div class="product-image-placeholder"></div>
|
|
<h3 class="product-title">Product Title Placeholder 1</h3>
|
|
<div class="product-rating">
|
|
<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>
|
|
<span class="rating-count">(1,234)</span>
|
|
</div>
|
|
<div class="product-price">
|
|
<span class="price-current">$XX.XX</span>
|
|
<span class="price-original">$YY.YY</span>
|
|
</div>
|
|
<button class="add-to-cart-button">Add to Cart</button>
|
|
</div>
|
|
<div class="product-card">
|
|
<div class="product-image-placeholder"></div>
|
|
<h3 class="product-title">Product Title Placeholder 2</h3>
|
|
<div class="product-rating">
|
|
<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>
|
|
<span class="rating-count">(567)</span>
|
|
</div>
|
|
<div class="product-price">
|
|
<span class="price-current">$AA.AA</span>
|
|
</div>
|
|
<button class="add-to-cart-button">Add to Cart</button>
|
|
</div>
|
|
<div class="product-card">
|
|
<div class="product-image-placeholder"></div>
|
|
<h3 class="product-title">Product Title Placeholder 3</h3>
|
|
<div class="product-rating">
|
|
<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>
|
|
<span class="rating-count">(890)</span>
|
|
</div>
|
|
<div class="product-price">
|
|
<span class="price-current">$BB.BB</span>
|
|
<span class="price-original">$CC.CC</span>
|
|
</div>
|
|
<button class="add-to-cart-button">Add to Cart</button>
|
|
</div>
|
|
<div class="product-card">
|
|
<div class="product-image-placeholder"></div>
|
|
<h3 class="product-title">Product Title Placeholder 4</h3>
|
|
<div class="product-rating">
|
|
<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>
|
|
<span class="rating-count">(432)</span>
|
|
</div>
|
|
<div class="product-price">
|
|
<span class="price-current">$DD.DD</span>
|
|
</div>
|
|
<button class="add-to-cart-button">Add to Cart</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="secure-checkout">
|
|
<h2>Secure Checkout Information</h2>
|
|
|
|
<div class="checkout-steps">
|
|
|
|
<div class="checkout-step" id="step1-address">
|
|
<h3>1. Shipping Address</h3>
|
|
<form>
|
|
<div class="form-group">
|
|
<label for="fullName">Full Name</label>
|
|
<input type="text" id="fullName" name="fullName" placeholder="Enter your full name" aria-label="Full Name" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="addressLine1">Address Line 1</label>
|
|
<input type="text" id="addressLine1" name="addressLine1" placeholder="Street address, P.O. Box, company name, c/o" aria-label="Address Line 1" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="addressLine2">Address Line 2</label>
|
|
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apartment, suite, unit, building, floor, etc." aria-label="Address Line 2 (optional)">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="city">City</label>
|
|
<input type="text" id="city" name="city" placeholder="City" aria-label="City" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="stateProvince">State / Province / Region</label>
|
|
<input type="text" id="stateProvince" name="stateProvince" placeholder="State / Province / Region" aria-label="State or Province" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="zipCode">Zip / Postal Code</label>
|
|
<input type="text" id="zipCode" name="zipCode" placeholder="Zip or Postal Code" aria-label="Zip Code" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phoneNumber">Phone Number</label>
|
|
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="Phone Number" aria-label="Phone Number" required>
|
|
</div>
|
|
<button type="button" class="btn-continue" aria-label="Continue to Payment">Continue</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="checkout-step" id="step2-payment">
|
|
<h3>2. Payment Method</h3>
|
|
<form>
|
|
<fieldset class="payment-options">
|
|
<legend>Select a payment method</legend>
|
|
<div class="radio-group">
|
|
<input type="radio" id="creditDebit" name="paymentMethod" value="creditDebit" checked aria-label="Credit or Debit Card">
|
|
<label for="creditDebit">Credit or Debit Card</label>
|
|
</div>
|
|
<div class="radio-group">
|
|
<input type="radio" id="upi" name="paymentMethod" value="upi" aria-label="UPI">
|
|
<label for="upi">UPI (PhonePe, Google Pay, BHIM UPI, etc.)</label>
|
|
</div>
|
|
<div class="radio-group">
|
|
<input type="radio" id="netBanking" name="paymentMethod" value="netBanking" aria-label="Net Banking">
|
|
<label for="netBanking">Net Banking</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div class="card-details">
|
|
<h4>Card Details</h4>
|
|
<div class="form-group">
|
|
<label for="cardNumber">Card Number</label>
|
|
<input type="text" id="cardNumber" name="cardNumber" placeholder="xxxx xxxx xxxx xxxx" aria-label="Credit Card Number" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cardName">Name on Card</label>
|
|
<input type="text" id="cardName" name="cardName" placeholder="Full Name on Card" aria-label="Name on Card" required>
|
|
</div>
|
|
<div class="form-group form-group-inline">
|
|
<div>
|
|
<label for="expirationDate">Expiration Date</label>
|
|
<input type="text" id="expirationDate" name="expirationDate" placeholder="MM/YY" aria-label="Card Expiration Date" required>
|
|
</div>
|
|
<div>
|
|
<label for="cvv">CVV</label>
|
|
<input type="text" id="cvv" name="cvv" placeholder="CVV" aria-label="Card CVV" required>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn-continue" aria-label="Continue to Review Order">Continue</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="checkout-step" id="step3-review">
|
|
<h3>3. Review Items & Place Order</h3>
|
|
<div class="order-summary-placeholder">
|
|
<h4>Order Summary</h4>
|
|
<p>[Product 1 Name] x [Quantity] - [Price]</p>
|
|
<p>[Product 2 Name] x [Quantity] - [Price]</p>
|
|
<p>[Product 3 Name] x [Quantity] - [Price]</p>
|
|
<div class="summary-details">
|
|
<p>Subtotal: <span>[Subtotal Amount]</span></p>
|
|
<p>Shipping: <span>[Shipping Cost]</span></p>
|
|
<p>Tax: <span>[Tax Amount]</span></p>
|
|
<p><strong>Order Total: <span class="total-amount">[Total Amount]</span></strong></p>
|
|
</div>
|
|
<div class="delivery-info">
|
|
<h4>Delivery to:</h4>
|
|
<p>[Customer Name]</p>
|
|
<p>[Customer Address Line 1]</p>
|
|
<p>[Customer City, State, Zip]</p>
|
|
<p>Estimated Delivery: [Date Range]</p>
|
|
</div>
|
|
<div class="payment-info">
|
|
<h4>Payment Method:</h4>
|
|
<p>[Selected Payment Method (e.g., Credit Card ending in XXXX)]</p>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn-place-order" aria-label="Place Your Order">Place Your Order</button>
|
|
<p class="security-note">
|
|
<span aria-hidden="true">🔒</span> Secure transaction via SSL encryption. Your information is protected.
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Amazon</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:info@amazon.com">info@amazon.com</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="your_account.html">Your Account</a></li><li><a href="your_orders.html">Your Orders</a></li><li><a href="shipping_delivery.html">Shipping & Delivery</a></li><li><a href="returns_replacements.html">Returns & Replacements</a></li><li><a href="help.html">Help</a></li></ul><ul><li><a href="sell_on_amazon.html">Sell on Amazon</a></li><li><a href="amazon_associates.html">Amazon Associates</a></li><li><a href="careers.html">Careers</a></li><li><a href="gift_cards.html">Gift Cards</a></li><li><a href="amazon_app.html">Amazon App</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2025 Amazon. All rights reserved.</p><ul class="footer-2-links"><li><a href="privacy_policy.html">Privacy Policy</a></li><li><a href="conditions_of_use.html">Conditions of Use</a></li><li><a href="cookies_settings.html">Cookies Settings</a></li><li><a href="order_confirmation_page.html">Order Confirmation</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> (see https://g.co/ng/security#xss) |