215 lines
9.6 KiB
HTML
215 lines
9.6 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>Order Confirmation 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>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Confirmation</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<section class="confirmation-section" aria-labelledby="confirmation-heading">
|
|
<h1 id="confirmation-heading">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
Order Confirmed!
|
|
</h1>
|
|
<p>Thank you for your purchase. Your order has been successfully placed.</p>
|
|
<p>You will receive an email confirmation shortly with details of your order.</p>
|
|
|
|
<div class="confirmation-details">
|
|
<h2>Order Summary</h2>
|
|
<dl>
|
|
<dt>Order Number:</dt>
|
|
<dd>#123-4567890-1234567</dd>
|
|
|
|
<dt>Estimated Delivery:</dt>
|
|
<dd>Wednesday, August 14th</dd>
|
|
|
|
<dt>Ship To:</dt>
|
|
<dd>John Doe<br>123 Main Street<br>Anytown, USA 12345</dd>
|
|
|
|
<dt>Total Amount:</dt>
|
|
<dd>$125.99</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="confirmation-actions">
|
|
<a href="#" class="button">View Order Details</a>
|
|
<a href="#" class="button secondary">Continue Shopping</a>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<section class="order-details-summary">
|
|
<h2>Order Details Summary</h2>
|
|
|
|
<div class="order-info-block">
|
|
<h3>Order Information</h3>
|
|
<dl>
|
|
<dt>Order ID:</dt>
|
|
<dd>#123-4567890-1234567</dd>
|
|
|
|
<dt>Order Date:</dt>
|
|
<dd>January 15, 2024</dd>
|
|
|
|
<dt>Order Status:</dt>
|
|
<dd>Shipped</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="order-addresses-payment-group">
|
|
<div class="address-block">
|
|
<h3>Shipping Address</h3>
|
|
<address>
|
|
<p>Placeholder Name</p>
|
|
<p>123 Main Street</p>
|
|
<p>Anytown, USA 12345</p>
|
|
<p>Phone: (555) 123-4567</p>
|
|
</address>
|
|
</div>
|
|
|
|
<div class="address-block">
|
|
<h3>Billing Address</h3>
|
|
<address>
|
|
<p>Placeholder Name</p>
|
|
<p>123 Main Street</p>
|
|
<p>Anytown, USA 12345</p>
|
|
<p>Phone: (555) 123-4567</p>
|
|
</address>
|
|
</div>
|
|
|
|
<div class="payment-method-block">
|
|
<h3>Payment Method</h3>
|
|
<p>Visa **** **** **** 1234</p>
|
|
<p>Expires 12/26</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-items-section">
|
|
<h3>Items in Your Order</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Product</th>
|
|
<th>Quantity</th>
|
|
<th>Price</th>
|
|
<th>Subtotal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Placeholder Product Name 1</td>
|
|
<td>1</td>
|
|
<td>$19.99</td>
|
|
<td>$19.99</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Placeholder Product Name 2 (Longer Title Example for Responsiveness)</td>
|
|
<td>2</td>
|
|
<td>$9.99</td>
|
|
<td>$19.98</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Placeholder Product Name 3</td>
|
|
<td>1</td>
|
|
<td>$5.00</td>
|
|
<td>$5.00</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="order-summary-totals">
|
|
<h3>Order Summary</h3>
|
|
<dl>
|
|
<dt>Items Subtotal:</dt>
|
|
<dd>$44.97</dd>
|
|
|
|
<dt>Shipping & Handling:</dt>
|
|
<dd>$5.99</dd>
|
|
|
|
<dt>Estimated Tax:</dt>
|
|
<dd>$3.60</dd>
|
|
|
|
<dt class="total-label">Order Total:</dt>
|
|
<dd class="total-amount"><strong>$54.56</strong></dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="order-actions">
|
|
<p>Need help with this order? <a href="#">Visit our Help Center</a></p>
|
|
<p><a href="#">Track Package</a> | <a href="#">Write a Product Review</a></p>
|
|
</div>
|
|
</section>
|
|
<section class="delivery-info-section">
|
|
<h2 class="delivery-info-heading">Estimated Delivery Information</h2>
|
|
<div class="delivery-info-details">
|
|
<div class="delivery-info-group">
|
|
<p class="delivery-info-label">Estimated Arrival:</p>
|
|
<p class="delivery-info-value">
|
|
<span class="delivery-date-highlight">Tuesday, October 26</span>
|
|
<span class="delivery-note">(Usually arrives within 3-5 business days after shipping)</span>
|
|
</p>
|
|
</div>
|
|
<div class="delivery-info-group">
|
|
<p class="delivery-info-label">Shipping to:</p>
|
|
<p class="delivery-info-value delivery-address-placeholder">
|
|
<span class="address-line">Full Name Placeholder</span><br>
|
|
<span class="address-line">123 Main Street</span><br>
|
|
<span class="address-line">Anytown, ST 12345</span>
|
|
</p>
|
|
<a href="#" class="delivery-action-link">Change Address</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="order-tracking-section">
|
|
<div class="order-tracking-container">
|
|
<h2 class="order-tracking-heading">Track Your Order</h2>
|
|
<p class="order-tracking-description">Stay updated on the delivery status of your recent purchases. Find out where your package is right now!</p>
|
|
<a href="#" class="order-tracking-button" role="button">Track Your Package Now</a>
|
|
</div>
|
|
</section>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Continue Shopping Prompt</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<section class="continue-shopping-prompt" aria-labelledby="promptHeading">
|
|
<h2 id="promptHeading">Your item has been added to cart.</h2>
|
|
<p>You have 1 item in your cart. What would you like to do next?</p>
|
|
<div class="actions">
|
|
<button type="button" class="button-primary">Proceed to checkout (1 item)</button>
|
|
<button type="button" class="button-secondary">Continue shopping</button>
|
|
</div>
|
|
</section>
|
|
</body>
|
|
</html>
|
|
<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) |