Automated commit to test10 from Docker container
This commit is contained in:
risadmin_prod
commit
06054aab4a
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
Dockerfile
|
||||
365
cart_page.html
Normal file
365
cart_page.html
Normal file
@ -0,0 +1,365 @@
|
||||
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)
|
||||
290
checkout_page.html
Normal file
290
checkout_page.html
Normal file
@ -0,0 +1,290 @@
|
||||
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)
|
||||
28
index.html
Normal file
28
index.html
Normal file
@ -0,0 +1,28 @@
|
||||
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>Home</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>
|
||||
<div class="hero-2-wrapper"><section class="hero-2-centered-hero"><h2 class="hero-2-heading">Your Daily Dose of Deals & Discoveries</h2><p class="hero-2-description">Explore millions of products, from electronics to fashion, home goods to groceries. Enjoy fast shipping, competitive prices, and a secure shopping experience tailored just for you.</p><div class="hero-2-button-group"><button class="hero-2-btn hero-2-solid">Start Shopping</button><button class="hero-2-btn hero-2-outline">Today's Deals</button></div><div class="hero-2-image"><img class="hero-2-placeholder" src="https://images.unsplash.com/photo-1583167727779-915662aef3a8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjE3ODR8MHwxfHNlYXJjaHwxfHxvbmxpbmUlMjUyMHNob3BwaW5nJTJDJTI1MjBtYXJrZXRwbGFjZSUyQyUyNTIwcHJvZHVjdHMlMkMlMjUyMGRlYWxzJTJDJTI1MjBkZWxpdmVyeSUyQyUyNTIwZS1jb21tZXJjZXxlbnwwfHx8fDE3NTIzMjc3Njl8MA&ixlib=rb-4.1.0&q=80&w=1080" /></div></section></div>
|
||||
<div class="feature-6-wrapper"><section class="feature-6-section"><div class="feature-6-text"><p class="feature-6-tag">Unbeatable Selection</p><h1 class="feature-6-title">Your World, Delivered.</h1><p class="feature-6-subtitle">Explore a universe of products, from everyday necessities to unique finds. Our seamless shopping experience brings convenience, incredible value, and fast delivery right to your fingertips.</p><div class="feature-6-benefits"><div class="feature-6-benefit"><i class="fas fa-cube"></i><h3>Vast Product Range</h3><p>Find everything you need and more, with millions of products across countless categories.</p></div><div class="feature-6-benefit"><i class="fas fa-cube"></i><h3>Fast & Reliable Delivery</h3><p>Get your orders delivered quickly and securely, often with same-day or next-day options.</p></div></div><div class="feature-6-actions"><button class="feature-6-btn feature-6-primary">Start Shopping Now</button><a class="feature-6-btn-link">Create Account</a></div></div><div class="feature-6-image"><div class="feature-6-placeholder"></div></div></section></div>
|
||||
<div class="testimonial-1-wrapper"><div class="testimonial-1-container"><img class="testimonial-1-logo" src="webflow-logo.svg" alt="Webflow"></img><p class="testimonial-1-text">The selection on ShopCentral is unbelievable – I find everything from daily essentials to unique gifts. What truly stands out is the lightning-fast delivery and the seamless return process. My absolute favorite online marketplace!</p><div class="testimonial-1-author"><img class="testimonial-1-author-image" src="author-avatar.jpg" alt="Author Avatar"></img><div class="testimonial-1-author-info"><p class="testimonial-1-author-name">Maria S.</p><p class="testimonial-1-author-position">Online Shopping Enthusiast</p></div></div></div></div>
|
||||
⚠️ HTML API call failed.
|
||||
<div class="pricing-2-wrapper"><section class="pricing-2-section"><p class="pricing-2-tagline">Unlock More Savings</p><h2 class="pricing-2-heading">Choose Your Prime Membership</h2><p class="pricing-2-subheading">Discover exclusive benefits, faster shipping, and endless entertainment with Amazon Prime. Join millions of satisfied members today!</p><div class="pricing-2-toggle"><button class="pricing-2-btn pricing-2-btn-active">Monthly Billing</button><button class="pricing-2-btn">Annual Billing (Save 15%)</button></div><div class="pricing-2-grid"><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Prime Monthly</h3><p class="pricing-2-plan-subtitle">Flexible benefits, cancel anytime.</p><p class="pricing-2-price">$14.99/mo</p><hr class="pricing-2-divider"></hr><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ Fast, FREE Shipping on millions of items</li><li>✓ Unlimited streaming of Prime Video</li><li>✓ Ad-free access to 100 million songs with Amazon Music</li><li>✓ Exclusive Prime Day Deals</li><li>✓ Free games and in-game content with Prime Gaming</li><li>✓ Prime Reading: borrow eBooks, magazines, and more</li></ul><button class="pricing-2-cta">Start your Free Trial</button></div><div class="pricing-2-card"><i class="fas fa-cube pricing-2-icon"></i><h3 class="pricing-2-plan-title">Prime Annual</h3><p class="pricing-2-plan-subtitle">Best value for a full year of benefits.</p><p class="pricing-2-price">$139/year</p><hr class="pricing-2-divider"></hr><p class="pricing-2-includes">Includes:</p><ul class="pricing-2-feature-list"><li>✓ All Monthly Prime benefits included</li><li>✓ Significant savings compared to monthly plan</li><li>✓ Priority access to Lightning Deals</li><li>✓ Prime Try Before You Buy for fashion</li><li>✓ Unlimited photo storage with Amazon Photos</li><li>✓ Share benefits with household members</li></ul><button class="pricing-2-cta">Join Prime Annually</button></div></div></section></div>
|
||||
<div class="cta-3-wrapper"><section class="cta-3-section"><h2 class="cta-3-heading">Explore Millions of Products, Endless Possibilities</h2><p class="cta-3-description">From electronics to fashion, home essentials to books, find everything you love and need with fast delivery and great prices.</p><div class="cta-3-button-group"><button class="cta-3-btn cta-3-solid">Shop Now</button><button class="cta-3-btn cta-3-outline">Create Account</button></div></section></div>
|
||||
<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)
|
||||
215
order_confirmation_page.html
Normal file
215
order_confirmation_page.html
Normal file
@ -0,0 +1,215 @@
|
||||
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)
|
||||
401
product_detail_page.html
Normal file
401
product_detail_page.html
Normal file
@ -0,0 +1,401 @@
|
||||
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>Product Detail 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="product-gallery-section">
|
||||
<h2 class="sr-only">Product Image Gallery</h2>
|
||||
|
||||
<div class="product-gallery-wrapper">
|
||||
<!-- Thumbnail Navigation Column -->
|
||||
<div class="thumbnail-column">
|
||||
<ul class="thumbnail-list">
|
||||
<li class="thumbnail-item">
|
||||
<a href="#" class="thumbnail-link" data-main-src="https://via.placeholder.com/1000x1000/F0F0F0/000000?text=Product+Image+1" aria-label="View product image 1">
|
||||
<img src="https://via.placeholder.com/70x70/E0E0E0/000000?text=Thumb+1" alt="Product thumbnail 1" class="thumbnail-img">
|
||||
</a>
|
||||
</li>
|
||||
<li class="thumbnail-item active">
|
||||
<a href="#" class="thumbnail-link" data-main-src="https://via.placeholder.com/1000x1000/D0D0D0/000000?text=Product+Image+2" aria-label="View product image 2">
|
||||
<img src="https://via.placeholder.com/70x70/C0C0C0/000000?text=Thumb+2" alt="Product thumbnail 2" class="thumbnail-img">
|
||||
</a>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<a href="#" class="thumbnail-link" data-main-src="https://via.placeholder.com/1000x1000/B0B0B0/000000?text=Product+Image+3" aria-label="View product image 3">
|
||||
<img src="https://via.placeholder.com/70x70/A0A0A0/000000?text=Thumb+3" alt="Product thumbnail 3" class="thumbnail-img">
|
||||
</a>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<a href="#" class="thumbnail-link" data-main-src="https://via.placeholder.com/1000x1000/909090/FFFFFF?text=Product+Image+4" aria-label="View product image 4">
|
||||
<img src="https://via.placeholder.com/70x70/808080/FFFFFF?text=Thumb+4" alt="Product thumbnail 4" class="thumbnail-img">
|
||||
</a>
|
||||
</li>
|
||||
<li class="thumbnail-item">
|
||||
<a href="#" class="thumbnail-link" data-main-src="https://via.placeholder.com/1000x1000/707070/FFFFFF?text=Product+Image+5" aria-label="View product image 5">
|
||||
<img src="https://via.placeholder.com/70x70/606060/FFFFFF?text=Thumb+5" alt="Product thumbnail 5" class="thumbnail-img">
|
||||
</a>
|
||||
</li>
|
||||
<!-- Add more thumbnail items as needed -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Image Display Area -->
|
||||
<div class="main-image-area">
|
||||
<div class="main-image-container">
|
||||
<img id="mainProductImg" src="https://via.placeholder.com/1000x1000/D0D0D0/000000?text=Product+Image+2" alt="Large view of product image" class="current-main-image">
|
||||
<div class="zoom-lens" aria-hidden="true"></div> <!-- Placeholder for a zoom lens effect, typically controlled by JS/CSS -->
|
||||
</div>
|
||||
<!-- Navigation arrows for main image carousel (if applicable) -->
|
||||
<button class="gallery-nav-btn prev-btn" aria-label="Previous product image">❮</button>
|
||||
<button class="gallery-nav-btn next-btn" aria-label="Next product image">❯</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="product-information-section">
|
||||
<div class="product-visuals">
|
||||
<div class="main-image">
|
||||
<img src="https://via.placeholder.com/600x600/E0E0E0/333333?text=Product+Image" alt="Main Product Image Placeholder">
|
||||
</div>
|
||||
<div class="thumbnail-images">
|
||||
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb1" alt="Thumbnail 1">
|
||||
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb2" alt="Thumbnail 2">
|
||||
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb3" alt="Thumbnail 3">
|
||||
<img src="https://via.placeholder.com/100x100/F0F0F0/333333?text=Thumb4" alt="Thumbnail 4">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-main-details">
|
||||
<h1 class="product-title">Product Name Goes Here - A Fantastic Gadget with Many Features</h1>
|
||||
<div class="product-brand">
|
||||
<a href="#" class="brand-link">Visit the Brand Store</a>
|
||||
</div>
|
||||
<div class="product-rating-reviews">
|
||||
<span class="rating-stars" aria-label="4.5 out of 5 stars">★★★★☆</span>
|
||||
<span class="rating-value">4.5 out of 5</span>
|
||||
<a href="#" class="review-count">1,234 ratings</a>
|
||||
<span class="separator">|</span>
|
||||
<a href="#" class="answered-questions">50+ answered questions</a>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
|
||||
<div class="product-price-info">
|
||||
<p class="price-tag"><span class="price-label">Price:</span> <span class="current-price">$129.99</span></p>
|
||||
<p class="price-details">
|
||||
<span class="was-price">Was: <s>$159.99</s></span>
|
||||
<span class="savings">Save $30.00 (18%)</span>
|
||||
</p>
|
||||
<p class="shipping-returns">FREE Returns & FREE Shipping</p>
|
||||
</div>
|
||||
|
||||
<div class="product-availability">
|
||||
<p class="stock-status">In Stock.</p>
|
||||
<p class="seller-info">Ships from and sold by <a href="#">AwesomeSeller LLC</a>.</p>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
|
||||
<div class="product-variations">
|
||||
<div class="variation-group">
|
||||
<label for="style-select" class="variation-label">Style:</label>
|
||||
<select id="style-select" class="variation-dropdown">
|
||||
<option value="classic">Classic</option>
|
||||
<option value="modern">Modern</option>
|
||||
<option value="sport">Sport</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="variation-group">
|
||||
<label class="variation-label">Color:</label>
|
||||
<div class="color-options">
|
||||
<button class="color-option color-black selected" aria-label="Black"></button>
|
||||
<button class="color-option color-silver" aria-label="Silver"></button>
|
||||
<button class="color-option color-gold" aria-label="Gold"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
|
||||
<div class="product-features">
|
||||
<h3 class="features-heading">About this item:</h3>
|
||||
<ul class="feature-list">
|
||||
<li>High-quality material for durability and comfort during extended use.</li>
|
||||
<li>Ergonomic design ensures a comfortable grip and reduces fatigue.</li>
|
||||
<li>Seamless compatibility with various devices and operating systems (Windows, macOS, Linux).</li>
|
||||
<li>Long-lasting battery life (up to 60 hours) with quick 15-minute charging for 8 hours of use.</li>
|
||||
<li>Easy to set up and use right out of the box, no complex drivers needed.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-action-box">
|
||||
<div class="price-summary">
|
||||
<span class="buy-box-price">$129.99</span>
|
||||
</div>
|
||||
<p class="delivery-location">Deliver to [Your Location]</p>
|
||||
<p class="delivery-details">
|
||||
<span class="delivery-date">Fastest delivery: <span class="bold">Tomorrow, Oct 26</span></span>
|
||||
<span class="shipping-cost">FREE Shipping</span>
|
||||
</p>
|
||||
<p class="stock-status-box">In Stock</p>
|
||||
<div class="quantity-selector">
|
||||
<label for="quantity">Qty:</label>
|
||||
<select id="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>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10+</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="add-to-cart-button">Add to Cart</button>
|
||||
<button class="buy-now-button">Buy Now</button>
|
||||
<div class="secure-transaction-info">
|
||||
<img src="https://via.placeholder.com/20x20/F0F0F0/333333?text=🔒" alt="Secure transaction icon">
|
||||
<p>Secure transaction</p>
|
||||
</div>
|
||||
<hr class="divider">
|
||||
<button class="add-to-list-button">Add to List</button>
|
||||
</div>
|
||||
</section>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Add to Cart Section</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="add-to-cart-section-wrapper" aria-label="Add to cart section">
|
||||
<section class="add-to-cart-section">
|
||||
<div class="price-info">
|
||||
<p>Price: <span class="current-price">$[Current Price]</span></p>
|
||||
<p class="prime-delivery">Free Prime Delivery</p>
|
||||
<p class="vat-info">Incl. VAT</p>
|
||||
</div>
|
||||
|
||||
<div class="availability-info">
|
||||
<p class="in-stock">In stock.</p>
|
||||
</div>
|
||||
|
||||
<div class="delivery-info">
|
||||
<p>Deliver to [User's Location]</p>
|
||||
<p class="delivery-date">Estimated Delivery: <span class="delivery-date-placeholder">Friday, January 1, 2025</span></p>
|
||||
<p class="fastest-delivery">Order within <span class="countdown-placeholder">XX hrs XX mins</span> for fastest delivery.</p>
|
||||
<a href="#delivery-details" class="details-link">Details</a>
|
||||
</div>
|
||||
|
||||
<div class="quantity-selector">
|
||||
<label for="quantity">Quantity:</label>
|
||||
<select id="quantity" 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>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10+">10+</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="add-to-cart-actions">
|
||||
<button type="button" class="button add-to-cart-button">Add to Cart</button>
|
||||
<button type="button" class="button buy-now-button">Buy Now</button>
|
||||
</div>
|
||||
|
||||
<p class="secure-transaction">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
|
||||
<path d="M8 1a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H8zm0 2h4v4H8V3zM3 8v.5c0 .385.118.748.312 1.053l.412.825A1.5 1.5 0 0 0 5 11h6a1.5 1.5 0 0 0 1.276-.731l.412-.825A2 2 0 0 0 13 8.5V8h.5a.5.5 0 0 1 0 1H13v.5a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5V9H8.5a.5.5 0 0 1-.5.5h-.5a.5.5 0 0 1-.5-.5V9H3.5a.5.5 0 0 1-.5-.5V8H3zm5.5 1h-1V8h1v1z"/>
|
||||
</svg>
|
||||
Secure transaction
|
||||
</p>
|
||||
|
||||
<div class="separator"></div>
|
||||
|
||||
<a href="#delivery-options" class="delivery-options-link">Delivery options</a>
|
||||
<a href="#add-to-wishlist" class="add-to-wishlist">Add to Wishlist</a>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<section class="product-description-section">
|
||||
<div class="product-container">
|
||||
|
||||
<h1 class="product-title">Placeholder Product Title - Model XYZ with Advanced Features</h1>
|
||||
|
||||
<div class="product-rating-summary">
|
||||
<span class="stars" aria-label="4.5 out of 5 stars">★★★★☆</span>
|
||||
<a href="#customer-reviews" class="reviews-link">1,234 Ratings</a>
|
||||
<span class="brand-name">Brand: <a href="#">Awesome Brands Co.</a></span>
|
||||
</div>
|
||||
|
||||
<div class="product-key-features">
|
||||
<h2>About this item</h2>
|
||||
<ul>
|
||||
<li><strong>Superior Performance:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
|
||||
<li><strong>Durable Design:</strong> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
|
||||
<li><strong>Eco-Friendly Materials:</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</li>
|
||||
<li><strong>Easy to Use:</strong> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</li>
|
||||
<li><strong>Comprehensive Warranty:</strong> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="product-full-description">
|
||||
<h2>Product Description</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<p>Curabitur pretium tincidunt lacus, eget pretium tellus pretium eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel ante purus. Proin commodo felis sit amet lectus ultricies, eu tempor ipsum ultrices. Nam consectetur mi non erat elementum, non dictum metus feugiat.</p>
|
||||
<p>Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
|
||||
</div>
|
||||
|
||||
<div class="product-technical-specs">
|
||||
<h2>Technical Details</h2>
|
||||
<table class="specs-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">Item Weight</th>
|
||||
<td>1.5 lbs (0.68 kg)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Product Dimensions</th>
|
||||
<td>10 x 5 x 2 inches (25.4 x 12.7 x 5.08 cm)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">ASIN</th>
|
||||
<td>B09ABCDEFG</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Model Number</th>
|
||||
<td>PROD-XYZ-2023-V2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Manufacturer</th>
|
||||
<td>Manufacturer Corp. Global</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Date First Available</th>
|
||||
<td>January 1, 2023</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Color</th>
|
||||
<td>Matte Black</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Material</th>
|
||||
<td>Aerospace-grade Aluminum, Recycled Plastic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Battery Life</th>
|
||||
<td>Up to 10 hours</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">Connectivity</th>
|
||||
<td>Bluetooth 5.0, USB-C</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="customer-reviews-section">
|
||||
<div class="customer-reviews-container">
|
||||
<h2 class="section-title">Customer reviews</h2>
|
||||
|
||||
<div class="overall-rating-summary">
|
||||
<div class="stars-placeholder" aria-label="4.5 out of 5 stars">★★★★☆</div>
|
||||
<p class="average-rating">4.5 out of 5 stars</p>
|
||||
<a href="#" class="all-reviews-link">See all reviews ></a>
|
||||
</div>
|
||||
|
||||
<div class="reviews-list">
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="review-rating">
|
||||
<span class="stars-placeholder" aria-label="5 out of 5 stars">★★★★★</span>
|
||||
<h3 class="review-title">Fantastic quality and easy to use!</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-meta">
|
||||
<span class="reviewer-name">By Jane Doe</span>
|
||||
<span class="verified-purchase">Verified Purchase</span>
|
||||
<time datetime="2023-12-10" class="review-date">on December 10, 2023</time>
|
||||
</div>
|
||||
<div class="review-body">
|
||||
<p>I absolutely love this product! It arrived quickly, was well-packaged, and performs exactly as described. The build quality feels premium, and I had it set up in minutes. Highly recommend!</p>
|
||||
</div>
|
||||
<div class="review-footer">
|
||||
<button class="helpful-button">Helpful</button>
|
||||
<a href="#" class="report-link">Report abuse</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="review-rating">
|
||||
<span class="stars-placeholder" aria-label="4 out of 5 stars">★★★★☆</span>
|
||||
<h3 class="review-title">Good, but could be better</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-meta">
|
||||
<span class="reviewer-name">By John Smith</span>
|
||||
<span class="verified-purchase">Verified Purchase</span>
|
||||
<time datetime="2023-11-28" class="review-date">on November 28, 2023</time>
|
||||
</div>
|
||||
<div class="review-body">
|
||||
<p>The product is decent for the price. It does what it's supposed to, but I noticed a slight design flaw that could be improved. Overall, I'm satisfied but not amazed.</p>
|
||||
</div>
|
||||
<div class="review-footer">
|
||||
<button class="helpful-button">Helpful</button>
|
||||
<a href="#" class="report-link">Report abuse</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<div class="review-rating">
|
||||
<span class="stars-placeholder" aria-label="3 out of 5 stars">★★★☆☆</span>
|
||||
<h3 class="review-title">Average performance</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-meta">
|
||||
<span class="reviewer-name">By Alice Brown</span>
|
||||
<time datetime="2023-11-15" class="review-date">on November 15, 2023</time>
|
||||
</div>
|
||||
<div class="review-body">
|
||||
<p>It's an okay product. Nothing special. It gets the job done, but I expected a bit more given the description. Consider other options if you need top-tier performance.</p>
|
||||
</div>
|
||||
<div class="review-footer">
|
||||
<button class="helpful-button">Helpful</button>
|
||||
<a href="#" class="report-link">Report abuse</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="write-review-container">
|
||||
<button class="write-review-button">Write a customer review</button>
|
||||
</div>
|
||||
</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)
|
||||
402
product_listing_page.html
Normal file
402
product_listing_page.html
Normal file
@ -0,0 +1,402 @@
|
||||
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>Product Listing 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="category-header">
|
||||
<div class="category-header__container">
|
||||
<h1 class="category-header__title">Category Name Placeholder</h1>
|
||||
<p class="category-header__description">Discover a wide selection of products tailored to this category, featuring the latest trends and best sellers.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Filters</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="main-content-area">
|
||||
<aside class="product-filters" aria-label="Product Filters">
|
||||
<h2>Filter Results</h2>
|
||||
|
||||
<div class="filter-group category-filter">
|
||||
<h3>Department</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="checkbox" id="cat1" name="category" value="electronics">
|
||||
<label for="cat1">Electronics</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="cat2" name="category" value="books">
|
||||
<label for="cat2">Books</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="cat3" name="category" value="home-kitchen">
|
||||
<label for="cat3">Home & Kitchen</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="cat4" name="category" value="apparel">
|
||||
<label for="cat4">Apparel</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="cat5" name="category" value="sports-outdoors">
|
||||
<label for="cat5">Sports & Outdoors</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group brand-filter">
|
||||
<h3>Brand</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="checkbox" id="brand1" name="brand" value="brandx">
|
||||
<label for="brand1">Brand X</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="brand2" name="brand" value="brandy">
|
||||
<label for="brand2">Brand Y</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="brand3" name="brand" value="brandz">
|
||||
<label for="brand3">Brand Z</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="brand4" name="brand" value="another-brand">
|
||||
<label for="brand4">Another Brand</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group rating-filter">
|
||||
<h3>Avg. Customer Review</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" id="rating5" name="rating" value="5" checked>
|
||||
<label for="rating5">
|
||||
<span class="stars">★★★★★</span>
|
||||
<span class="rating-text">5 Stars</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="rating4up" name="rating" value="4up">
|
||||
<label for="rating4up">
|
||||
<span class="stars">★★★★☆</span>
|
||||
<span class="rating-text">& Up</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="rating3up" name="rating" value="3up">
|
||||
<label for="rating3up">
|
||||
<span class="stars">★★★☆☆</span>
|
||||
<span class="rating-text">& Up</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="rating2up" name="rating" value="2up">
|
||||
<label for="rating2up">
|
||||
<span class="stars">★★☆☆☆</span>
|
||||
<span class="rating-text">& Up</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group price-range-filter">
|
||||
<h3>Price</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" id="price1" name="price" value="under25">
|
||||
<label for="price1">Under $25</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="price2" name="price" value="25-50">
|
||||
<label for="price2">$25 to $50</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="price3" name="price" value="50-100">
|
||||
<label for="price3">$50 to $100</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="price4" name="price" value="100-200">
|
||||
<label for="price4">$100 to $200</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="price5" name="price" value="over200">
|
||||
<label for="price5">Over $200</label>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="price-input-group">
|
||||
<input type="number" id="minPrice" placeholder="Min" aria-label="Minimum Price">
|
||||
<span>-</span>
|
||||
<input type="number" id="maxPrice" placeholder="Max" aria-label="Maximum Price">
|
||||
<button type="button">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-group availability-filter">
|
||||
<h3>Availability</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="checkbox" id="inStock" name="availability" value="in-stock">
|
||||
<label for="inStock">In Stock</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="comingSoon" name="availability" value="coming-soon">
|
||||
<label for="comingSoon">Coming Soon</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Add more filter groups as needed for Amazon clone -->
|
||||
<div class="filter-group condition-filter">
|
||||
<h3>Condition</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" id="condNew" name="condition" value="new" checked>
|
||||
<label for="condNew">New</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" id="condUsed" name="condition" value="used">
|
||||
<label for="condUsed">Used</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="filter-group shipping-filter">
|
||||
<h3>Shipping Option</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<input type="checkbox" id="freeShipping" name="shipping" value="free">
|
||||
<label for="freeShipping">Free Shipping</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="primeEligible" name="shipping" value="prime">
|
||||
<label for="primeEligible">Prime Eligible</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<main class="main-product-display" aria-live="polite">
|
||||
<h2>Search Results for "Electronics"</h2>
|
||||
<p>Displaying 1-20 of 1,234 results</p>
|
||||
|
||||
<div class="product-grid-placeholder">
|
||||
<div class="product-card-placeholder">Product Card 1</div>
|
||||
<div class="product-card-placeholder">Product Card 2</div>
|
||||
<div class="product-card-placeholder">Product Card 3</div>
|
||||
<div class="product-card-placeholder">Product Card 4</div>
|
||||
<div class="product-card-placeholder">Product Card 5</div>
|
||||
<div class="product-card-placeholder">Product Card 6</div>
|
||||
<div class="product-card-placeholder">Product Card 7</div>
|
||||
<div class="product-card-placeholder">Product Card 8</div>
|
||||
</div>
|
||||
<!-- More product cards would go here -->
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
<section id="product-grid-section" class="py-16 bg-gray-100">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class="text-3xl font-bold text-center mb-10 text-gray-800">Explore Our Top Products</h2>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<!-- Product Card 1 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Product Name One</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★☆</span>
|
||||
<span class="text-gray-600 text-sm">(123 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$29.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 2 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Another Product Title</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★★</span>
|
||||
<span class="text-gray-600 text-sm">(45 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$49.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 3 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Awesome Gadget X</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★☆☆</span>
|
||||
<span class="text-gray-600 text-sm">(88 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$129.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 4 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Essential Kitchen Tool</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★☆</span>
|
||||
<span class="text-gray-600 text-sm">(201 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$19.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 5 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Stylish Backpack</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★★</span>
|
||||
<span class="text-gray-600 text-sm">(78 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$59.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 6 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Comfortable Headphones</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★☆</span>
|
||||
<span class="text-gray-600 text-sm">(305 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$79.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 7 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Smart Home Device</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★★</span>
|
||||
<span class="text-gray-600 text-sm">(150 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$99.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Product Card 8 -->
|
||||
<article class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
|
||||
<div class="w-full h-48 bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-gray-500 text-sm">Product Image Placeholder</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Durable Water Bottle</h3>
|
||||
<div class="flex items-center mb-2">
|
||||
<span class="text-yellow-500 mr-1">★★★★☆</span>
|
||||
<span class="text-gray-600 text-sm">(92 reviews)</span>
|
||||
</div>
|
||||
<p class="text-xl font-bold text-gray-800 mb-4">$14.99</p>
|
||||
<button class="w-full bg-orange-500 text-white py-2 rounded-md hover:bg-orange-600 transition-colors duration-300">Add to Cart</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="pagination-section" aria-labelledby="pagination-heading">
|
||||
<h2 id="pagination-heading" class="sr-only">Product Pagination</h2>
|
||||
|
||||
<div class="pagination-controls-top">
|
||||
<span class="pagination-summary">Showing 1 - 12 of 200 results</span>
|
||||
<div class="pagination-items-per-page">
|
||||
<label for="items-per-page" class="sr-only">Items per page</label>
|
||||
<select id="items-per-page" class="pagination-select">
|
||||
<option value="12">12 per page</option>
|
||||
<option value="24">24 per page</option>
|
||||
<option value="48">48 per page</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="pagination-nav" aria-label="Product page navigation">
|
||||
<ul class="pagination-list">
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link pagination-prev" aria-label="Previous Page">Previous</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link pagination-active" aria-current="page" aria-label="Page 1">1</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link" aria-label="Page 2">2</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link" aria-label="Page 3">3</a>
|
||||
</li>
|
||||
<li class="pagination-item pagination-ellipsis">
|
||||
<span>...</span>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link" aria-label="Page 10">10</a>
|
||||
</li>
|
||||
<li class="pagination-item">
|
||||
<a href="#" class="pagination-link pagination-next" aria-label="Next Page">Next</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="pagination-controls-bottom">
|
||||
<span class="pagination-summary-bottom">Need help? Visit the <a href="#" class="pagination-help-link">Help section</a></span>
|
||||
</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)
|
||||
834
style.css
Normal file
834
style.css
Normal file
@ -0,0 +1,834 @@
|
||||
.nav-1-wrapper {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.nav-1-navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 40px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.nav-1-logo {
|
||||
font-family: cursive;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-1-nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-1-nav-links li a {
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-1-dropdown i {
|
||||
font-size: 10px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.nav-1-nav-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-1-btn {
|
||||
padding: 6px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 2px solid #111;
|
||||
}
|
||||
|
||||
.nav-1-outline {
|
||||
background-color: transparent;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.nav-1-solid {
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.hero-2-wrapper {
|
||||
margin: 0;
|
||||
font-family: sans-serif;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hero-2-centered-hero {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.hero-2-heading {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hero-2-description {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-bottom: 24px;
|
||||
max-width: 700px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.hero-2-button-group {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.hero-2-btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hero-2-solid {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.hero-2-outline {
|
||||
background: transparent;
|
||||
border: 1px solid #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.hero-2-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
.hero-2-placeholder {
|
||||
background: #ccc;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
height: 300px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
/* ensures image doesn't overflow */
|
||||
}
|
||||
|
||||
|
||||
|
||||
.hero-2-placeholder img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
/* makes sure the image fills without distortion */
|
||||
display: block;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.feature-6-wrapper * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.feature-6-wrapper {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-6-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 80px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-6-bg-number {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
font-size: 220px;
|
||||
color: #f5f5f5;
|
||||
font-weight: 900;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
|
||||
.feature-6-text {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-6-tag {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feature-6-title {
|
||||
font-size: 48px;
|
||||
color: #000;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.1;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.feature-6-subtitle {
|
||||
font-size: 18px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.feature-6-benefits-vertical {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
margin-bottom: 48px;
|
||||
align-items: flex-start;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.feature-6-benefits-line {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 24px;
|
||||
bottom: 24px;
|
||||
width: 2px;
|
||||
background: #000;
|
||||
border-radius: 1px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.feature-6-benefit-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: flex-start;
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
|
||||
border-radius: 8px;
|
||||
padding: 24px 28px;
|
||||
z-index: 1;
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-6-benefit-card:hover {
|
||||
box-shadow: 0 6px 24px rgba(0,0,0,0.10);
|
||||
transform: translateY(-2px) scale(1.02);
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.feature-6-benefit-card i {
|
||||
font-size: 28px;
|
||||
color: #000;
|
||||
margin-top: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.feature-6-benefit-card h3 {
|
||||
font-size: 20px;
|
||||
color: #000;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.feature-6-benefit-card p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.feature-6-actions {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.feature-6-btn {
|
||||
padding: 12px 32px;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid #000;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.feature-6-btn:focus {
|
||||
outline: 2px solid #333;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.feature-6-btn:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.feature-6-btn-link {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.feature-6-btn-link:hover {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.feature-6-btn-icon {
|
||||
font-size: 18px;
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.feature-6-btn-link:hover .feature-6-btn-icon {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.feature-6-image {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feature-6-placeholder {
|
||||
width: 100%;
|
||||
max-width: 440px;
|
||||
height: 340px;
|
||||
background: linear-gradient(135deg, #fff 60%, #f5f5f5 100%);
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.feature-6-placeholder::before {
|
||||
content: "Visual Content";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #bbb;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1024px) {
|
||||
.feature-6-section {
|
||||
gap: 40px;
|
||||
padding: 60px 10px;
|
||||
}
|
||||
.feature-6-title {
|
||||
font-size: 40px;
|
||||
}
|
||||
.feature-6-placeholder {
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.feature-6-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
gap: 36px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
.feature-6-text {
|
||||
max-width: 100%;
|
||||
padding: 0 8vw;
|
||||
}
|
||||
.feature-6-benefits-vertical {
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
.feature-6-benefits-line {
|
||||
display: none;
|
||||
}
|
||||
.feature-6-image {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.feature-6-placeholder {
|
||||
height: 200px;
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.feature-6-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
.feature-6-subtitle {
|
||||
font-size: 15px;
|
||||
}
|
||||
.feature-6-text {
|
||||
padding: 0 2vw;
|
||||
}
|
||||
.feature-6-actions {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.feature-6-btn, .feature-6-btn-link {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-1-wrapper * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.testimonial-1-wrapper {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background-color: #ffffff;
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.testimonial-1-container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-1-logo {
|
||||
height: 24px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.testimonial-1-text {
|
||||
font-size: 18px;
|
||||
line-height: 1.6;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.testimonial-1-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.testimonial-1-author-image {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.testimonial-1-author-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
margin-bottom: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.testimonial-1-author-position {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.testimonial-1-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.testimonial-1-author-name {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.testimonial-1-author-position {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.testimonial-1-wrapper {
|
||||
padding: 40px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
padding: 40px;
|
||||
background-color: #fff;
|
||||
border-radius: 12px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.logo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.logo-item {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.pricing-2-wrapper {
|
||||
font-family: sans-serif;
|
||||
background: #fff;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pricing-2-section {
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.pricing-2-tagline {
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pricing-2-heading {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pricing-2-subheading {
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.pricing-2-toggle {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.pricing-2-btn {
|
||||
border: 1px solid #000;
|
||||
background: transparent;
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.pricing-2-btn-active {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.pricing-2-grid {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pricing-2-card {
|
||||
border: 1px solid #ccc;
|
||||
padding: 24px;
|
||||
max-width: 320px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pricing-2-icon {
|
||||
font-size: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-2-plan-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.pricing-2-plan-subtitle {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.pricing-2-price {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.pricing-2-price-small {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.pricing-2-divider {
|
||||
margin: 16px 0;
|
||||
border: none;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.pricing-2-includes {
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.pricing-2-feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.pricing-2-cta {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 12px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cta-3-wrapper {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #f5f3f0;
|
||||
}
|
||||
|
||||
.cta-3-section {
|
||||
background: #fff;
|
||||
padding: 80px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-3-heading {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.cta-3-description {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
max-width: 600px;
|
||||
margin: 0 auto 32px;
|
||||
}
|
||||
|
||||
.cta-3-button-group {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cta-3-btn {
|
||||
padding: 10px 24px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cta-3-solid {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cta-3-outline {
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
|
||||
.footer-2-wrapper {
|
||||
font-family: sans-serif;
|
||||
background: #F5F5F5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.footer-2-section {
|
||||
background: #fff;
|
||||
padding: 40px 30px 20px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer-2-top {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 40px;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.footer-2-left {
|
||||
flex: 1 1 300px;
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
.footer-2-left .logo {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-2-left p {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.footer-2-left a {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-2-social-icons {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.footer-2-social-icons i {
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-2-links-columns {
|
||||
flex: 2 1 400px;
|
||||
display: flex;
|
||||
gap: 80px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.footer-2-links-columns ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-2-links-columns ul li {
|
||||
margin-bottom: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-2-links-columns ul li a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.footer-2-bottom {
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
font-size: 13px;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.footer-2-bottom .footer-2-links {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-2-bottom .footer-2-links li a {
|
||||
text-decoration: none;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
382
user_account_dashboard.html
Normal file
382
user_account_dashboard.html
Normal file
@ -0,0 +1,382 @@
|
||||
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)
|
||||
Loading…
x
Reference in New Issue
Block a user