382 lines
20 KiB
HTML
382 lines
20 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>User Account Dashboard</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="amzn-profile-summary">
|
|
<h1 class="amzn-profile-summary__greeting">Welcome, <span class="amzn-profile-summary__username">[User Name]</span>!</h1>
|
|
|
|
<div class="amzn-profile-summary__grid">
|
|
<a href="#" class="amzn-summary-card">
|
|
<div class="amzn-summary-card__icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M10 20H8V4h2v16zm6 0h-2V4h2v16zm-4 0h-2V4h2v16z"/></svg>
|
|
</div>
|
|
<h2 class="amzn-summary-card__title">Your Orders</h2>
|
|
<p class="amzn-summary-card__description">Track, return, or buy things again</p>
|
|
</a>
|
|
|
|
<a href="#" class="amzn-summary-card">
|
|
<div class="amzn-summary-card__icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M12 11.5a2.5 2.5 0 0 1 5 0V12h-5v-.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm0 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
|
|
</div>
|
|
<h2 class="amzn-summary-card__title">Login & Security</h2>
|
|
<p class="amzn-summary-card__description">Edit login, name, and mobile number</p>
|
|
</a>
|
|
|
|
<a href="#" class="amzn-summary-card">
|
|
<div class="amzn-summary-card__icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-12v4h4v-4h-4zm0-2h4c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2h-4c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2z"/></svg>
|
|
</div>
|
|
<h2 class="amzn-summary-card__title">Your Addresses</h2>
|
|
<p class="amzn-summary-card__description">Edit addresses for orders and gifts</p>
|
|
</a>
|
|
|
|
<a href="#" class="amzn-summary-card">
|
|
<div class="amzn-summary-card__icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4V8h16v10zm-2-6h-4v-4h4v4z"/></svg>
|
|
</div>
|
|
<h2 class="amzn-summary-card__title">Payment Options</h2>
|
|
<p class="amzn-summary-card__description">Edit or add payment methods</p>
|
|
</a>
|
|
|
|
<a href="#" class="amzn-summary-card">
|
|
<div class="amzn-summary-card__icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9V7h2v10zm4 0h-2V7h2v10z"/></svg>
|
|
</div>
|
|
<h2 class="amzn-summary-card__title">Prime Membership</h2>
|
|
<p class="amzn-summary-card__description">Manage your Prime benefits</p>
|
|
</a>
|
|
|
|
<a href="#" class="amzn-summary-card">
|
|
<div class="amzn-summary-card__icon">
|
|
<svg viewBox="0 0 24 24" fill="currentColor" width="48" height="48"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm0-4h-2V7h2v8z"/></svg>
|
|
</div>
|
|
<h2 class="amzn-summary-card__title">Contact Us</h2>
|
|
<p class="amzn-summary-card__description">Need help? Get in touch</p>
|
|
</a>
|
|
</div>
|
|
</section>
|
|
<section class="order-history-section">
|
|
<h1>Your Orders</h1>
|
|
|
|
<div class="order-controls">
|
|
<nav class="order-filters">
|
|
<a href="#" class="filter-link active">Orders</a>
|
|
<a href="#" class="filter-link">Buy Again</a>
|
|
<a href="#" class="filter-link">Not Yet Shipped</a>
|
|
<a href="#" class="filter-link">Cancelled Orders</a>
|
|
</nav>
|
|
<div class="search-filter-group">
|
|
<form class="order-search-form">
|
|
<input type="text" placeholder="Search all orders" class="search-input">
|
|
<button type="submit" class="search-button">Search</button>
|
|
</form>
|
|
<div class="order-time-filter">
|
|
<label for="time-period" class="visually-hidden">Filter by time period</label>
|
|
<select id="time-period" class="time-period-select">
|
|
<option value="last30days">Last 30 days</option>
|
|
<option value="last90days">Last 90 days</option>
|
|
<option value="2024">2024</option>
|
|
<option value="2023">2023</option>
|
|
<option value="archived">Archived Orders</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-list">
|
|
<!-- Order Item 1 -->
|
|
<article class="order-card">
|
|
<header class="order-summary">
|
|
<div class="order-info-group">
|
|
<div class="order-info-item">
|
|
<span class="label">ORDER PLACED</span>
|
|
<span class="value">January 15, 2024</span>
|
|
</div>
|
|
<div class="order-info-item">
|
|
<span class="label">TOTAL</span>
|
|
<span class="value">$99.99</span>
|
|
</div>
|
|
<div class="order-info-item">
|
|
<span class="label">SHIP TO</span>
|
|
<a href="#" class="value ship-to-link">John Doe</a>
|
|
</div>
|
|
</div>
|
|
<div class="order-id">
|
|
ORDER # 123-4567890-1234567
|
|
</div>
|
|
</header>
|
|
<div class="order-details">
|
|
<div class="order-status">
|
|
Delivered January 17, 2024
|
|
</div>
|
|
<ul class="order-items-list">
|
|
<li class="order-item">
|
|
<div class="product-image-placeholder"></div>
|
|
<div class="product-info">
|
|
<h3 class="product-title">Product Name One - Short Description</h3>
|
|
<p class="product-seller">Sold by: Vendor XYZ</p>
|
|
<p class="product-price">$49.99</p>
|
|
<div class="item-actions">
|
|
<button class="button-primary">Buy it again</button>
|
|
<a href="#" class="link-secondary">View your item</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="order-item">
|
|
<div class="product-image-placeholder"></div>
|
|
<div class="product-info">
|
|
<h3 class="product-title">Product Name Two - Another Item</h3>
|
|
<p class="product-seller">Sold by: Vendor ABC</p>
|
|
<p class="product-price">$50.00</p>
|
|
<div class="item-actions">
|
|
<button class="button-primary">Buy it again</button>
|
|
<a href="#" class="link-secondary">View your item</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<footer class="order-actions">
|
|
<a href="#" class="button-secondary">View order details</a>
|
|
<a href="#" class="button-secondary">Return or replace items</a>
|
|
<a href="#" class="button-secondary">Get product support</a>
|
|
</footer>
|
|
</article>
|
|
|
|
<!-- Order Item 2 -->
|
|
<article class="order-card">
|
|
<header class="order-summary">
|
|
<div class="order-info-group">
|
|
<div class="order-info-item">
|
|
<span class="label">ORDER PLACED</span>
|
|
<span class="value">December 01, 2023</span>
|
|
</div>
|
|
<div class="order-info-item">
|
|
<span class="label">TOTAL</span>
|
|
<span class="value">$24.50</span>
|
|
</div>
|
|
<div class="order-info-item">
|
|
<span class="label">SHIP TO</span>
|
|
<a href="#" class="value ship-to-link">Jane Doe</a>
|
|
</div>
|
|
</div>
|
|
<div class="order-id">
|
|
ORDER # 987-6543210-9876543
|
|
</div>
|
|
</header>
|
|
<div class="order-details">
|
|
<div class="order-status">
|
|
Shipped
|
|
<a href="#" class="track-link">Track package</a>
|
|
</div>
|
|
<ul class="order-items-list">
|
|
<li class="order-item">
|
|
<div class="product-image-placeholder"></div>
|
|
<div class="product-info">
|
|
<h3 class="product-title">Single Product Item for Order 2</h3>
|
|
<p class="product-seller">Sold by: Another Vendor</p>
|
|
<p class="product-price">$24.50</p>
|
|
<div class="item-actions">
|
|
<button class="button-primary">Buy it again</button>
|
|
<a href="#" class="link-secondary">View your item</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<footer class="order-actions">
|
|
<a href="#" class="button-secondary">View order details</a>
|
|
<a href="#" class="button-secondary">Return or replace items</a>
|
|
</footer>
|
|
</article>
|
|
|
|
<!-- No Orders Found Placeholder (Initially hidden by CSS) -->
|
|
<div class="no-orders-found" style="display: none;">
|
|
<p>Looking for an order?</p>
|
|
<p>We can help you find past orders that you placed within a certain timeframe.</p>
|
|
<button class="button-primary">Search for orders</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="address-management-section">
|
|
<div class="am-container">
|
|
<h2 class="am-section-title">Your Addresses</h2>
|
|
|
|
<div class="am-addresses-grid">
|
|
<!-- Add New Address Card -->
|
|
<div class="am-address-card am-add-new-card">
|
|
<a href="#" class="am-add-link">
|
|
<div class="am-add-icon">+</div>
|
|
<span class="am-add-text">Add new address</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Existing Address Card 1 -->
|
|
<div class="am-address-card am-existing-card">
|
|
<p class="am-address-name">John Doe</p>
|
|
<p class="am-address-line">123 Main St</p>
|
|
<p class="am-address-line">Apt 4B</p>
|
|
<p class="am-address-line">Anytown, CA 90210</p>
|
|
<p class="am-address-phone">Phone: 555-123-4567</p>
|
|
<div class="am-address-actions">
|
|
<button class="am-btn am-btn-edit">Edit</button>
|
|
<button class="am-btn am-btn-delete">Delete</button>
|
|
<button class="am-btn am-btn-default am-active-default">Default</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing Address Card 2 -->
|
|
<div class="am-address-card am-existing-card">
|
|
<p class="am-address-name">Jane Smith</p>
|
|
<p class="am-address-line">456 Oak Ave</p>
|
|
<p class="am-address-line">Suite 100</p>
|
|
<p class="am-address-line">Sometown, NY 10001</p>
|
|
<p class="am-address-phone">Phone: 555-987-6543</p>
|
|
<div class="am-address-actions">
|
|
<button class="am-btn am-btn-edit">Edit</button>
|
|
<button class="am-btn am-btn-delete">Delete</button>
|
|
<button class="am-btn am-btn-default">Set as Default</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Existing Address Card 3 -->
|
|
<div class="am-address-card am-existing-card">
|
|
<p class="am-address-name">Acme Corp</p>
|
|
<p class="am-address-line">789 Pine Ln</p>
|
|
<p class="am-address-line">Building Z</p>
|
|
<p class="am-address-line">Bizville, TX 77001</p>
|
|
<p class="am-address-phone">Phone: 555-111-2222</p>
|
|
<div class="am-address-actions">
|
|
<button class="am-btn am-btn-edit">Edit</button>
|
|
<button class="am-btn am-btn-delete">Delete</button>
|
|
<button class="am-btn am-btn-default">Set as Default</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="payment-methods-section">
|
|
<div class="container">
|
|
<h2>Your Payment Methods</h2>
|
|
|
|
<div class="payment-methods-list">
|
|
<h3>Your Cards</h3>
|
|
<div class="card-item default">
|
|
<div class="card-details">
|
|
<span class="card-icon placeholder-icon">💳</span>
|
|
<span class="card-type">Visa</span>
|
|
<span class="card-number-masked">**** 1234</span>
|
|
<span class="card-expiry">Expires 12/25</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<span class="default-badge">Default</span>
|
|
<a href="#" class="action-link">Edit</a>
|
|
<a href="#" class="action-link">Remove</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-item">
|
|
<div class="card-details">
|
|
<span class="card-icon placeholder-icon">💳</span>
|
|
<span class="card-type">Mastercard</span>
|
|
<span class="card-number-masked">**** 5678</span>
|
|
<span class="card-expiry">Expires 08/26</span>
|
|
</div>
|
|
<div class="card-actions">
|
|
<a href="#" class="action-link">Set as Default</a>
|
|
<a href="#" class="action-link">Edit</a>
|
|
<a href="#" class="action-link">Remove</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="add-payment-method">
|
|
<h3>Add a New Payment Method</h3>
|
|
<form class="add-card-form">
|
|
<div class="form-group">
|
|
<label for="cardNumber">Card Number</label>
|
|
<input type="text" id="cardNumber" name="cardNumber" placeholder="xxxx xxxx xxxx xxxx" autocomplete="cc-number">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cardName">Name on Card</label>
|
|
<input type="text" id="cardName" name="cardName" placeholder="Full Name" autocomplete="cc-name">
|
|
</div>
|
|
<div class="form-group-row">
|
|
<div class="form-group">
|
|
<label for="expiryDate">Expiration Date</label>
|
|
<input type="text" id="expiryDate" name="expiryDate" placeholder="MM/YY" autocomplete="cc-exp">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="cvv">CVV</label>
|
|
<input type="text" id="cvv" name="cvv" placeholder="123" autocomplete="cc-csc">
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="button primary-button">Add Card</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="other-payment-options">
|
|
<h3>Other Payment Options</h3>
|
|
<ul class="option-list">
|
|
<li><a href="#">Add a Gift Card</a></li>
|
|
<li><a href="#">Link Bank Account (UPI/Net Banking)</a></li>
|
|
<li><a href="#">Manage EMI Options</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="customer-service-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Need Help?</h2>
|
|
<div class="help-links-grid">
|
|
<nav class="help-column">
|
|
<h3>Your Account</h3>
|
|
<ul>
|
|
<li><a href="#your-orders">Your Orders</a></li>
|
|
<li><a href="#returns-replacements">Returns & Replacements</a></li>
|
|
<li><a href="#manage-content-devices">Manage Your Content and Devices</a></li>
|
|
<li><a href="#customer-service">Customer Service</a></li>
|
|
<li><a href="#manage-payment-methods">Manage Your Payment Methods</a></li>
|
|
</ul>
|
|
</nav>
|
|
<nav class="help-column">
|
|
<h3>Help Topics</h3>
|
|
<ul>
|
|
<li><a href="#shipping-delivery">Shipping & Delivery</a></li>
|
|
<li><a href="#payment-options">Payment Options</a></li>
|
|
<li><a href="#prime-membership">Prime Membership</a></li>
|
|
<li><a href="#gift-cards">Gift Cards</a></li>
|
|
<li><a href="#accessibility">Accessibility</a></li>
|
|
</ul>
|
|
</nav>
|
|
<nav class="help-column">
|
|
<h3>Quick Links</h3>
|
|
<ul>
|
|
<li><a href="#track-your-package">Track Your Package</a></li>
|
|
<li><a href="#return-items">Return Items</a></li>
|
|
<li><a href="#contact-us">Contact Us</a></li>
|
|
<li><a href="#forgot-password">Forgot Password</a></li>
|
|
<li><a href="#sitemap">Site Map</a></li>
|
|
</ul>
|
|
</nav>
|
|
</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) |