290 lines
15 KiB
HTML
290 lines
15 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>Checkout 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="shipping-address-section">
|
||
|
|
<h2 class="section-title">Shipping Address</h2>
|
||
|
|
<form class="address-form">
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="fullName">Full Name</label>
|
||
|
|
<input type="text" id="fullName" name="fullName" placeholder="John Doe" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="phoneNumber">Phone Number</label>
|
||
|
|
<input type="tel" id="phoneNumber" name="phoneNumber" placeholder="e.g., +1 234 567 8900" required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="addressLine1">Address Line 1</label>
|
||
|
|
<input type="text" id="addressLine1" name="addressLine1" placeholder="Street number and name, P.O. Box, etc." required>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="addressLine2">Address Line 2 (Optional)</label>
|
||
|
|
<input type="text" id="addressLine2" name="addressLine2" placeholder="Apartment, suite, unit, building, floor, etc.">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group col-half">
|
||
|
|
<label for="city">City</label>
|
||
|
|
<input type="text" id="city" name="city" placeholder="New York" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-half">
|
||
|
|
<label for="state">State/Province/Region</label>
|
||
|
|
<input type="text" id="state" name="state" placeholder="NY" required>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-row">
|
||
|
|
<div class="form-group col-half">
|
||
|
|
<label for="zipCode">ZIP/Postal Code</label>
|
||
|
|
<input type="text" id="zipCode" name="zipCode" placeholder="10001" required>
|
||
|
|
</div>
|
||
|
|
<div class="form-group col-half">
|
||
|
|
<label for="country">Country</label>
|
||
|
|
<select id="country" name="country" required>
|
||
|
|
<option value="">Select a country</option>
|
||
|
|
<option value="US">United States</option>
|
||
|
|
<option value="CA">Canada</option>
|
||
|
|
<option value="GB">United Kingdom</option>
|
||
|
|
<option value="AU">Australia</option>
|
||
|
|
<option value="DE">Germany</option>
|
||
|
|
<!-- Add more countries as needed -->
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="deliveryInstructions">Delivery Instructions (Optional)</label>
|
||
|
|
<textarea id="deliveryInstructions" name="deliveryInstructions" rows="3" placeholder="e.g., Leave package at front door, ring doorbell once."></textarea>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button type="submit" class="button-primary">Deliver to this address</button>
|
||
|
|
</form>
|
||
|
|
</section>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Payment Method Section</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="payment-method-section" aria-labelledby="payment-section-title">
|
||
|
|
<h2 id="payment-section-title">Your payment methods</h2>
|
||
|
|
|
||
|
|
<div class="payment-options" role="radiogroup" aria-label="Choose a payment method">
|
||
|
|
<!-- Payment Method Card 1 (Selected) -->
|
||
|
|
<label class="payment-option-card selected" tabindex="0">
|
||
|
|
<input type="radio" name="payment_method" value="visa_1234" checked aria-labelledby="visa_1234_label">
|
||
|
|
<div class="payment-option-content">
|
||
|
|
<h3 id="visa_1234_label">Visa ending in 1234</h3>
|
||
|
|
<p>Default payment method</p>
|
||
|
|
<div class="card-details">
|
||
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Visa_Inc._logo.svg/2560px-Visa_Inc._logo.svg.png" alt="Visa logo">
|
||
|
|
<span>Expires 08/2026</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<!-- Payment Method Card 2 -->
|
||
|
|
<label class="payment-option-card" tabindex="0">
|
||
|
|
<input type="radio" name="payment_method" value="mastercard_5678" aria-labelledby="mastercard_5678_label">
|
||
|
|
<div class="payment-option-content">
|
||
|
|
<h3 id="mastercard_5678_label">Mastercard ending in 5678</h3>
|
||
|
|
<p>Credit card</p>
|
||
|
|
<div class="card-details">
|
||
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Mastercard-logo.svg/2560px-Mastercard-logo.svg.png" alt="Mastercard logo">
|
||
|
|
<span>Expires 12/2028</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<!-- Payment Method Card 3 -->
|
||
|
|
<label class="payment-option-card" tabindex="0">
|
||
|
|
<input type="radio" name="payment_method" value="amex_9012" aria-labelledby="amex_9012_label">
|
||
|
|
<div class="payment-option-content">
|
||
|
|
<h3 id="amex_9012_label">American Express ending in 9012</h3>
|
||
|
|
<p>Credit card</p>
|
||
|
|
<div class="card-details">
|
||
|
|
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/American_Express_logo.svg/2560px-American_Express_logo.svg.png" alt="American Express logo">
|
||
|
|
<span>Expires 03/2027</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
|
||
|
|
<!-- Payment Method Card 4 (Placeholder - Wireframe Friendly) -->
|
||
|
|
<label class="payment-option-card" tabindex="0">
|
||
|
|
<input type="radio" name="payment_method" value="placeholder_bank" aria-labelledby="placeholder_bank_label">
|
||
|
|
<div class="payment-option-content">
|
||
|
|
<h3 id="placeholder_bank_label">Bank Account (**** **** **** 3456)</h3>
|
||
|
|
<p>Checking account</p>
|
||
|
|
<div class="card-details">
|
||
|
|
<img src="https://via.placeholder.com/20x20/cccccc/ffffff?text=Bank" alt="Bank icon placeholder">
|
||
|
|
<span>Primary bank account</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-actions">
|
||
|
|
<button class="add-method-button" type="button">Add a new payment method</button>
|
||
|
|
<button type="button">Set as default</button>
|
||
|
|
<button type="button">Edit selected method</button>
|
||
|
|
<button type="button">Delete selected method</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<section class="order-review-section">
|
||
|
|
<div class="order-review-container">
|
||
|
|
<h2 class="section-title">Review your order</h2>
|
||
|
|
|
||
|
|
<div class="review-details-grid">
|
||
|
|
<div class="shipping-info review-card">
|
||
|
|
<h3 class="card-title">Shipping address</h3>
|
||
|
|
<div class="address-details">
|
||
|
|
<p>John Doe</p>
|
||
|
|
<p>123 Main Street</p>
|
||
|
|
<p>Anytown, WA 98001</p>
|
||
|
|
<p>United States</p>
|
||
|
|
<p>Phone: 555-123-4567</p>
|
||
|
|
</div>
|
||
|
|
<a href="#" class="change-link">Change</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="payment-info review-card">
|
||
|
|
<h3 class="card-title">Payment method</h3>
|
||
|
|
<div class="payment-details">
|
||
|
|
<p>Visa ending in **** 1234</p>
|
||
|
|
<p>Billing address: Same as shipping</p>
|
||
|
|
</div>
|
||
|
|
<a href="#" class="change-link">Change</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="items-summary-flex">
|
||
|
|
<div class="order-items-list">
|
||
|
|
<h3 class="section-subtitle">Items in your order</h3>
|
||
|
|
<div class="product-list-item">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="https://via.placeholder.com/80/cccccc/000000?text=Product" alt="Product Image Placeholder">
|
||
|
|
</div>
|
||
|
|
<div class="product-details">
|
||
|
|
<p class="product-name">Product Name Placeholder - Long Description That Might Wrap Over Multiple Lines</p>
|
||
|
|
<p class="product-price">$29.99</p>
|
||
|
|
<p class="product-quantity">Qty: 1</p>
|
||
|
|
<p class="in-stock">In Stock</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="product-list-item">
|
||
|
|
<div class="product-image">
|
||
|
|
<img src="https://via.placeholder.com/80/cccccc/000000?text=Product2" alt="Product Image Placeholder 2">
|
||
|
|
</div>
|
||
|
|
<div class="product-details">
|
||
|
|
<p class="product-name">Another Product Name Placeholder</p>
|
||
|
|
<p class="product-price">$12.50</p>
|
||
|
|
<p class="product-quantity">Qty: 2</p>
|
||
|
|
<p class="in-stock">In Stock</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- More product-list-item divs can be added here -->
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="order-summary-card">
|
||
|
|
<h3 class="card-title">Order Summary</h3>
|
||
|
|
<div class="summary-details">
|
||
|
|
<p><span>Items:</span> <span class="summary-value">$54.99</span></p>
|
||
|
|
<p><span>Shipping & handling:</span> <span class="summary-value">$7.99</span></p>
|
||
|
|
<p><span>Total before tax:</span> <span class="summary-value">$62.98</span></p>
|
||
|
|
<p><span>Estimated tax to be collected:</span> <span class="summary-value">$4.50</span></p>
|
||
|
|
<hr class="summary-divider">
|
||
|
|
<p class="order-total"><span>Order total:</span> <span class="summary-value">$67.48</span></p>
|
||
|
|
</div>
|
||
|
|
<button class="place-order-button">Place your order</button>
|
||
|
|
<p class="policy-text">By placing your order, you agree to Amazon's <a href="#">privacy notice</a> and <a href="#">conditions of use</a>.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Place Order Section</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<section class="place-order-container" aria-labelledby="placeOrderHeading">
|
||
|
|
<h2 id="placeOrderHeading">Place Your Order</h2>
|
||
|
|
|
||
|
|
<div class="order-summary">
|
||
|
|
<h3>Order Summary</h3>
|
||
|
|
<dl>
|
||
|
|
<dt>Items:</dt>
|
||
|
|
<dd>$[Item_Subtotal]</dd>
|
||
|
|
|
||
|
|
<dt>Shipping & handling:</dt>
|
||
|
|
<dd>$[Shipping_Cost]</dd>
|
||
|
|
|
||
|
|
<dt>Estimated tax:</dt>
|
||
|
|
<dd>$[Estimated_Tax]</dd>
|
||
|
|
|
||
|
|
<dt class="total-price">Order total:</dt>
|
||
|
|
<dd class="total-price">$[Total_Amount]</dd>
|
||
|
|
</dl>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="shipping-payment-info">
|
||
|
|
<h3>Shipping and Payment</h3>
|
||
|
|
<p><strong>Shipping to:</strong> [Customer_Name], [Shipping_Address_Line_1], [City], [State] [Zip_Code]</p>
|
||
|
|
<p><strong>Payment method:</strong> [Payment_Method_Type] ending in [Last_4_Digits]</p>
|
||
|
|
<p><strong>Estimated delivery:</strong> [Estimated_Delivery_Date]</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="place-order-button-wrapper">
|
||
|
|
<button type="submit" class="place-order-button" aria-label="Place your order">Place your order</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="disclaimer">
|
||
|
|
By placing your order, you agree to Amazon's <a href="#" target="_blank">privacy notice</a> and <a href="#" target="_blank">conditions of use</a>.
|
||
|
|
</p>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<footer>
|
||
|
|
<div class="footer-legal-section">
|
||
|
|
<div class="footer-links-wrapper">
|
||
|
|
<ul class="footer-legal-list">
|
||
|
|
<li><a href="#" class="footer-link">Conditions of Use</a></li>
|
||
|
|
<li><a href="#" class="footer-link">Privacy Notice</a></li>
|
||
|
|
<li><a href="#" class="footer-link">Your Ads Privacy Choices</a></li>
|
||
|
|
<li><a href="#" class="footer-link">Cookies & Internet Advertising</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="footer-copyright">
|
||
|
|
<p>© 1996-2023, Amazon Clone Inc. or its affiliates</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
<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)
|