Compare commits
No commits in common. "main" and "test10" have entirely different histories.
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)
|
||||||
335
connected_accounts.html
Normal file
335
connected_accounts.html
Normal file
@ -0,0 +1,335 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Connected Accounts</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Navbar</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<header class="navbar" role="navigation" aria-label="Main Navigation">
|
||||||
|
<a href="/" class="navbar-brand" aria-label="Your Financial CoPilot Home">
|
||||||
|
Financial<span>CoPilot</span>
|
||||||
|
</a>
|
||||||
|
<nav class="navbar-nav-wrapper">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a href="#dashboard" class="nav-link active">Dashboard</a></li>
|
||||||
|
<li class="nav-item"><a href="#accounts" class="nav-link">Accounts</a></li>
|
||||||
|
<li class="nav-item"><a href="#expenses" class="nav-link">Expenses</a></li>
|
||||||
|
<li class="nav-item"><a href="#forecast" class="nav-link">Forecast</a></li>
|
||||||
|
<li class="nav-item"><a href="#advice" class="nav-link">AI Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<div class="navbar-actions">
|
||||||
|
<a href="#login" class="btn btn-outline-primary">Log In</a>
|
||||||
|
<a href="#signup" class="btn btn-primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section>
|
||||||
|
<h1>Website Content Placeholder</h1>
|
||||||
|
<p>Scroll down to see the sticky navbar in action.</p>
|
||||||
|
<p>This area represents the main content of your financial management dashboard.</p>
|
||||||
|
<p>It would typically contain charts, transaction lists, and financial insights.</p>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>More Content</h2>
|
||||||
|
<p>Ensuring the layout is clean and responsive for various devices.</p>
|
||||||
|
<p>User experience is key for financial applications.</p>
|
||||||
|
</section>
|
||||||
|
<header class="page-header">
|
||||||
|
<div class="header-container">
|
||||||
|
<a href="#" class="header-logo">
|
||||||
|
<span class="logo-placeholder">[Your Logo/Icon]</span>
|
||||||
|
<span class="site-title">FinFlow</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="main-navigation">
|
||||||
|
<ul class="nav-list">
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Accounts</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Investments</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Advice</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Savings</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="action-button primary-button">Sign Up</button>
|
||||||
|
<button class="action-button secondary-button">Sign In</button>
|
||||||
|
<!-- For authenticated users, these might be: -->
|
||||||
|
<!-- <a href="#" class="user-avatar">[User Avatar]</a> -->
|
||||||
|
<!-- <button class="action-button notification-button">[Notifications]</button> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="mobile-menu-toggle" aria-label="Toggle navigation menu">
|
||||||
|
<span class="toggle-icon">[Menu Icon]</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section id="account-details-section" class="py-8 px-4 sm:px-6 lg:px-8">
|
||||||
|
<div class="max-w-7xl mx-auto">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-900 mb-6">Your Linked Accounts</h2>
|
||||||
|
|
||||||
|
<div class="bg-white shadow overflow-hidden rounded-lg">
|
||||||
|
<div class="p-4 sm:p-6 border-b border-gray-200 flex justify-between items-center">
|
||||||
|
<h3 class="text-lg leading-6 font-medium text-gray-900">Account Summary</h3>
|
||||||
|
<button type="button" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Add New Account
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="overflow-x-auto">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead class="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Name</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Institution</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Account Type</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Balance</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Updated</th>
|
||||||
|
<th scope="col" class="relative px-6 py-3">
|
||||||
|
<span class="sr-only">Actions</span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white divide-y divide-gray-200">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Everyday Checking</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 1234</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Bank of America</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
|
||||||
|
Checking
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
$2,450.75
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-27 10:30 AM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Growth Savings</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 5678</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Wells Fargo</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||||
|
Savings
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
$15,890.10
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-27 09:15 AM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Retirement Portfolio</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 9012</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Fidelity Investments</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
|
||||||
|
Investment
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
$123,456.78
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-26 05:00 PM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="text-sm font-medium text-gray-900">Travel Rewards Card</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-sm text-gray-500">**** 3456</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<div class="text-sm text-gray-900">Chase</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap">
|
||||||
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
|
||||||
|
Credit Card
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm text-gray-900">
|
||||||
|
-$789.00
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
2023-10-27 11:00 AM
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">View</a>
|
||||||
|
<span class="text-gray-300 mx-2">|</span>
|
||||||
|
<a href="#" class="text-red-600 hover:text-red-900">Unlink</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="add-account-section">
|
||||||
|
<div class="section-container">
|
||||||
|
<div class="add-account-prompt">
|
||||||
|
<h2 class="section-heading">Connect Your Financial Accounts</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Link your bank accounts and investments to start tracking expenses, forecasting savings, and receiving AI-driven investment advice.
|
||||||
|
</p>
|
||||||
|
<button type="button" class="add-account-button">
|
||||||
|
<span class="button-icon">+</span> Add New Account
|
||||||
|
</button>
|
||||||
|
<p class="security-note">
|
||||||
|
Your financial data is securely handled by industry-leading providers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="data-status-section" style="font-family: Arial, sans-serif; max-width: 700px; margin: 2rem auto; padding: 1.5rem; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
|
||||||
|
<header style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
|
||||||
|
<h2 style="font-size: 1.6rem; margin: 0;">Refresh Data Status</h2>
|
||||||
|
<p style="font-size: 0.9rem; margin: 0;">Last updated: <time datetime="2023-10-27T10:30:00Z">Oct 27, 2023, 10:30 AM</time></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: #f8f8f8; border-radius: 6px;">
|
||||||
|
<span style="font-size: 2rem; line-height: 1;">✔</span>
|
||||||
|
<p style="font-size: 1.2rem; font-weight: bold; margin: 0;">Your financial data is up to date.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem;">
|
||||||
|
<p style="font-size: 0.95rem; margin: 0; flex-grow: 1;">Next automatic refresh: <span style="font-weight: bold;">Oct 28, 2023, 03:00 AM</span>.</p>
|
||||||
|
<button style="padding: 0.8rem 1.5rem; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 1rem; font-weight: bold;">
|
||||||
|
Refresh Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #eee;">
|
||||||
|
<p style="font-size: 0.85rem; margin: 0;">Some accounts may require re-authentication. <a href="#" style="color: #007bff; text-decoration: none;">View details</a>.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#" class="footer-logo">
|
||||||
|
<img src="placeholder-logo.svg" alt="[Your Company Name] Logo">
|
||||||
|
<span class="sr-only">[Your Company Name]</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-tagline">Your intelligent financial companion.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Features Overview</a></li>
|
||||||
|
<li><a href="#">Expense Tracking</a></li>
|
||||||
|
<li><a href="#">Savings Forecasting</a></li>
|
||||||
|
<li><a href="#">AI Investment Advice</a></li>
|
||||||
|
<li><a href="#">Bank & Investment Linking</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Company</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">Press</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Support</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
<li><a href="#">Security</a></li>
|
||||||
|
<li><a href="#">API Status</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Legal</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Cookie Policy</a></li>
|
||||||
|
<li><a href="#">Disclosures</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="footer-social-connect">
|
||||||
|
<h3>Connect With Us</h3>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" class="social-icon" aria-label="Follow us on LinkedIn">
|
||||||
|
<!-- Placeholder SVG for LinkedIn -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2zM4 2.5a1.5 1.5 0 1 1 0 3A1.5 1.5 0 0 1 4 2.5z"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Follow us on Twitter">
|
||||||
|
<!-- Placeholder SVG for Twitter -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-6.814L4.99 21.75H1.68l7.73-8.825L1.254 2.25H8.08l4.714 6.236L18.244 2.25zm-.398 1.146L7.403 21.24h-1.39L16.602 3.396h1.242z"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="social-icon" aria-label="Follow us on Facebook">
|
||||||
|
<!-- Placeholder SVG for Facebook -->
|
||||||
|
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24"><path d="M14 13.5h2.5l1-4H14V6.75c0-1.033.45-1.75 1.803-1.75H18V2.97c-1.834-.234-3.483-.35-5.185-.35C9.57 2.62 7 5.166 7 9.556V13.5H3v4h4V22h4v-4h3.5v-4.5z"></path></svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="footer-copyright">© <span id="current-year">2023</span> [Your Company Name]. All rights reserved.</p>
|
||||||
|
<p class="footer-disclaimer">Investment advice provided by [Your Company Name] is for informational purposes only and does not constitute financial advice. Consult a professional advisor before making investment decisions.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
323
dashboard.html
Normal file
323
dashboard.html
Normal file
@ -0,0 +1,323 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Navbar</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<nav class="navbar" aria-label="Main navigation">
|
||||||
|
<a href="#" class="navbar-brand">
|
||||||
|
<span class="logo-icon">💰</span>
|
||||||
|
FinTrack
|
||||||
|
</a>
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a href="#dashboard" class="nav-link active" aria-current="page">Dashboard</a></li>
|
||||||
|
<li class="nav-item"><a href="#accounts" class="nav-link">Accounts</a></li>
|
||||||
|
<li class="nav-item"><a href="#expenses" class="nav-link">Expenses</a></li>
|
||||||
|
<li class="nav-item"><a href="#forecast" class="nav-link">Savings Forecast</a></li>
|
||||||
|
<li class="nav-item"><a href="#advice" class="nav-link">AI Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="navbar-actions">
|
||||||
|
<a href="#login" class="btn btn-secondary">Log In</a>
|
||||||
|
<a href="#signup" class="btn btn-primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main style="padding: 2rem; max-width: 1200px; margin: 2rem auto; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.05);">
|
||||||
|
<h1>Welcome to FinTrack</h1>
|
||||||
|
<p>This is placeholder content to demonstrate the navbar's responsiveness and sticky behavior. Scroll down to see the navbar remain fixed at the top.</p>
|
||||||
|
<p>FinTrack helps you connect your bank accounts and investments, track your spending habits, forecast your financial future, and receive personalized investment advice powered by AI.</p>
|
||||||
|
<div style="height: 1000px; background-color: #f9f9f9; border: 1px dashed #ccc; margin-top: 2rem; display: flex; justify-content: center; align-items: center; color: #888;">
|
||||||
|
<p>Scrollable content area</p>
|
||||||
|
</div>
|
||||||
|
<p>End of placeholder content.</p>
|
||||||
|
</main>
|
||||||
|
<header class="dashboard-header">
|
||||||
|
<div class="dashboard-header-container">
|
||||||
|
<div class="header-left">
|
||||||
|
<a href="#" class="site-logo" aria-label="FinTrackPro Home">FinTrackPro</a>
|
||||||
|
</div>
|
||||||
|
<div class="header-search">
|
||||||
|
<input type="text" placeholder="Search accounts, transactions, insights..." aria-label="Search">
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="btn btn-primary">Connect New Account</button>
|
||||||
|
<a href="#" class="icon-button notification-icon" aria-label="Notifications">
|
||||||
|
<span class="icon-placeholder">🔔</span>
|
||||||
|
<span class="notification-badge">3</span>
|
||||||
|
</a>
|
||||||
|
<div class="user-profile">
|
||||||
|
<a href="#" class="profile-link" aria-label="User Profile">
|
||||||
|
<span class="avatar-placeholder">👤</span>
|
||||||
|
<span class="username-display">John D.</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section class="account-summary-widget">
|
||||||
|
<div class="widget-header">
|
||||||
|
<h2>Account Summary</h2>
|
||||||
|
<button class="view-all-btn">View All Accounts</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="total-net-worth-card">
|
||||||
|
<p class="card-title">Total Net Worth</p>
|
||||||
|
<p class="balance-amount">$XX,XXX.XX</p>
|
||||||
|
<span class="balance-change-indicator positive">+X.XX% today</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="accounts-list">
|
||||||
|
<div class="account-item">
|
||||||
|
<div class="account-info">
|
||||||
|
<span class="account-icon bank-icon"></span>
|
||||||
|
<p class="account-name">Checking Account</p>
|
||||||
|
<span class="account-identifier">**** 1234</span>
|
||||||
|
</div>
|
||||||
|
<p class="account-balance">$X,XXX.XX</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="account-item">
|
||||||
|
<div class="account-info">
|
||||||
|
<span class="account-icon bank-icon"></span>
|
||||||
|
<p class="account-name">Savings Account</p>
|
||||||
|
<span class="account-identifier">**** 5678</span>
|
||||||
|
</div>
|
||||||
|
<p class="account-balance">$XX,XXX.XX</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="account-item">
|
||||||
|
<div class="account-info">
|
||||||
|
<span class="account-icon investment-icon"></span>
|
||||||
|
<p class="account-name">Investment Portfolio</p>
|
||||||
|
<span class="account-identifier">Brokerage</span>
|
||||||
|
</div>
|
||||||
|
<p class="account-balance">$XX,XXX.XX</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="account-item">
|
||||||
|
<div class="account-info">
|
||||||
|
<span class="account-icon credit-card-icon"></span>
|
||||||
|
<p class="account-name">Credit Card</p>
|
||||||
|
<span class="account-identifier">**** 9012</span>
|
||||||
|
</div>
|
||||||
|
<p class="account-balance">-$X,XXX.XX</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="widget-actions">
|
||||||
|
<button class="add-account-btn">+ Link New Account</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="recent-activity-feed">
|
||||||
|
<header class="activity-feed-header">
|
||||||
|
<h2 class="activity-feed-title">Recent Activity Feed</h2>
|
||||||
|
<a href="#" class="activity-feed-view-all">View All</a>
|
||||||
|
</header>
|
||||||
|
<ul class="activity-list">
|
||||||
|
<li class="activity-item">
|
||||||
|
<div class="activity-icon transaction-icon"></div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<p class="activity-description"><strong>Transaction:</strong> Groceries at FreshMarket</p>
|
||||||
|
<p class="activity-details">-$72.50 from Checking Account</p>
|
||||||
|
<time class="activity-timestamp" datetime="2023-10-26T15:30:00Z">2 hours ago</time>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="activity-item">
|
||||||
|
<div class="activity-icon investment-icon"></div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<p class="activity-description"><strong>Investment Buy:</strong> +3 shares of MSFT</p>
|
||||||
|
<p class="activity-details">-$980.00 from Investment Portfolio</p>
|
||||||
|
<time class="activity-timestamp" datetime="2023-10-26T10:00:00Z">Today, 10:00 AM</time>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="activity-item">
|
||||||
|
<div class="activity-icon forecast-icon"></div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<p class="activity-description"><strong>Savings Goal Update:</strong> On track for Q4 target</p>
|
||||||
|
<p class="activity-details">You've saved 75% of your vacation fund!</p>
|
||||||
|
<time class="activity-timestamp" datetime="2023-10-25T18:00:00Z">Yesterday, 6:00 PM</time>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="activity-item">
|
||||||
|
<div class="activity-icon advice-icon"></div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<p class="activity-description"><strong>AI Investment Advice:</strong> Rebalance recommended</p>
|
||||||
|
<p class="activity-details">Consider adjusting exposure to tech stocks</p>
|
||||||
|
<time class="activity-timestamp" datetime="2023-10-25T09:15:00Z">Yesterday, 9:15 AM</time>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="activity-item">
|
||||||
|
<div class="activity-icon account-icon"></div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<p class="activity-description"><strong>New Account Linked:</strong> Discover Credit Card</p>
|
||||||
|
<p class="activity-details">Account data imported successfully</p>
|
||||||
|
<time class="activity-timestamp" datetime="2023-10-24T16:45:00Z">October 24</time>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="activity-item">
|
||||||
|
<div class="activity-icon expense-icon"></div>
|
||||||
|
<div class="activity-content">
|
||||||
|
<p class="activity-description"><strong>Expense Categorized:</strong> Utilities - Internet Bill</p>
|
||||||
|
<p class="activity-details">-$65.00 from Checking Account</p>
|
||||||
|
<time class="activity-timestamp" datetime="2023-10-24T11:00:00Z">October 24</time>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Quick Actions Panel</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="quick-actions-panel" aria-labelledby="quick-actions-heading">
|
||||||
|
<header class="quick-actions-panel__header">
|
||||||
|
<h2 id="quick-actions-heading">Quick Actions</h2>
|
||||||
|
<button type="button">Manage All Tools</button>
|
||||||
|
</header>
|
||||||
|
<div class="quick-actions-panel__grid">
|
||||||
|
<article class="quick-action-card">
|
||||||
|
<span class="quick-action-card__icon" aria-hidden="true">💸</span> <!-- Money bag emoji for investments -->
|
||||||
|
<h3 class="quick-action-card__title">Link Accounts</h3>
|
||||||
|
<p class="quick-action-card__description">Connect your bank and investment accounts securely using Plaid.</p>
|
||||||
|
<a href="#link-accounts" class="quick-action-card__button">Connect Now</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="quick-action-card">
|
||||||
|
<span class="quick-action-card__icon" aria-hidden="true">💰</span> <!-- Money with wings emoji for expenses -->
|
||||||
|
<h3 class="quick-action-card__title">Track Expenses</h3>
|
||||||
|
<p class="quick-action-card__description">Categorize and visualize your spending habits.</p>
|
||||||
|
<a href="#track-expenses" class="quick-action-card__button">View Expenses</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="quick-action-card">
|
||||||
|
<span class="quick-action-card__icon" aria-hidden="true">📈</span> <!-- Chart with upwards trend emoji for savings -->
|
||||||
|
<h3 class="quick-action-card__title">Forecast Savings</h3>
|
||||||
|
<p class="quick-action-card__description">Project your future savings based on your income and spending.</p>
|
||||||
|
<a href="#forecast-savings" class="quick-action-card__button">Plan Savings</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="quick-action-card">
|
||||||
|
<span class="quick-action-card__icon" aria-hidden="true">🧠</span> <!-- Brain emoji for AI advice -->
|
||||||
|
<h3 class="quick-action-card__title">Get Investment Advice</h3>
|
||||||
|
<p class="quick-action-card__description">Receive personalized, AI-driven investment recommendations.</p>
|
||||||
|
<a href="#investment-advice" class="quick-action-card__button">Get Advice</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="quick-action-card">
|
||||||
|
<span class="quick-action-card__icon" aria-hidden="true">📃</span> <!-- Page with curl emoji for reports -->
|
||||||
|
<h3 class="quick-action-card__title">Generate Reports</h3>
|
||||||
|
<p class="quick-action-card__description">Create custom financial reports for analysis or tax purposes.</p>
|
||||||
|
<a href="#generate-reports" class="quick-action-card__button">Create Report</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="quick-action-card">
|
||||||
|
<span class="quick-action-card__icon" aria-hidden="true">📝</span> <!-- Memo emoji for budget -->
|
||||||
|
<h3 class="quick-action-card__title">Set Budgets</h3>
|
||||||
|
<p class="quick-action-card__description">Define spending limits for different categories and stay on track.</p>
|
||||||
|
<a href="#set-budgets" class="quick-action-card__button">Manage Budgets</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="savings-progress-widget">
|
||||||
|
<h2 class="widget-title">Savings Progress</h2>
|
||||||
|
|
||||||
|
<div class="goal-card">
|
||||||
|
<header class="goal-header">
|
||||||
|
<h3 class="goal-name">Emergency Fund</h3>
|
||||||
|
<p class="goal-target">Goal: <span class="goal-amount">$10,000</span></p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="progress-display">
|
||||||
|
<div class="current-amount-wrapper">
|
||||||
|
<span class="current-amount-value">$7,500</span>
|
||||||
|
<span class="current-amount-label">saved</span>
|
||||||
|
</div>
|
||||||
|
<div class="progress-bar-container">
|
||||||
|
<progress class="savings-progress-bar" value="75" max="100">75%</progress>
|
||||||
|
<span class="progress-percentage">75%</span>
|
||||||
|
</div>
|
||||||
|
<p class="goal-deadline">Target Date: Q4 2024</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="goal-insights">
|
||||||
|
<p class="insight-message">You're on track! Keep up the great work.</p>
|
||||||
|
<button class="cta-button">View Details</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="widget-footer">
|
||||||
|
<button class="footer-cta-button">Set New Goal</button>
|
||||||
|
<button class="footer-cta-button">Review All Goals</button>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-brand-info">
|
||||||
|
<a href="#" class="footer-logo">[Your Company Logo/Name]</a>
|
||||||
|
<p class="footer-tagline">Your financial future, simplified.</p>
|
||||||
|
<p class="footer-description">Connect bank accounts, track expenses, forecast savings, and get AI-driven investment advice.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Expense Tracking</a></li>
|
||||||
|
<li><a href="#">Savings Forecast</a></li>
|
||||||
|
<li><a href="#">AI Investment Advice</a></li>
|
||||||
|
<li><a href="#">Bank Linking</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Company</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Press</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group">
|
||||||
|
<h3>Support</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-nav-group footer-social">
|
||||||
|
<h3>Connect</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">[Social Icon - LinkedIn]</a></li>
|
||||||
|
<li><a href="#">[Social Icon - Twitter]</a></li>
|
||||||
|
<li><a href="#">[Social Icon - Facebook]</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="footer-copyright">© 2023 [Your Company Name]. All rights reserved.</p>
|
||||||
|
<p class="footer-disclaimer">Disclaimer: Investment advice provided is for informational purposes only and does not constitute financial advice. Please consult a qualified professional for personalized financial guidance.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
611
expense_tracking.html
Normal file
611
expense_tracking.html
Normal file
@ -0,0 +1,611 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Expense Tracking</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-container">
|
||||||
|
<a href="#" class="navbar-brand">FinTrackAI</a>
|
||||||
|
|
||||||
|
<button class="navbar-toggler" aria-label="Toggle navigation menu">
|
||||||
|
<span class="toggler-bar"></span>
|
||||||
|
<span class="toggler-bar"></span>
|
||||||
|
<span class="toggler-bar"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div class="navbar-collapse">
|
||||||
|
<ul class="navbar-nav">
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Accounts</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Expenses</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Forecast</a></li>
|
||||||
|
<li class="nav-item"><a href="#" class="nav-link">Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="navbar-actions">
|
||||||
|
<a href="#" class="btn btn-secondary">Sign In</a>
|
||||||
|
<a href="#" class="btn btn-primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<section id="expense-overview-header" class="expense-overview-section">
|
||||||
|
<div class="container">
|
||||||
|
<header class="expense-header-controls">
|
||||||
|
<h2 class="section-title">Expense Overview</h2>
|
||||||
|
<div class="date-range-selector">
|
||||||
|
<label for="expense-period-select" class="visually-hidden">Select Expense Period</label>
|
||||||
|
<select id="expense-period-select" class="select-period">
|
||||||
|
<option value="current-month">This Month</option>
|
||||||
|
<option value="last-month">Last Month</option>
|
||||||
|
<option value="last-3-months">Last 3 Months</option>
|
||||||
|
<option value="current-year">This Year</option>
|
||||||
|
<option value="custom">Custom Range</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="expense-summary-cards">
|
||||||
|
<div class="summary-card">
|
||||||
|
<p class="card-label">Total Spent</p>
|
||||||
|
<p class="card-value">$1,234.56</p>
|
||||||
|
<p class="card-description">as of October 25, 2023</p>
|
||||||
|
</div>
|
||||||
|
<div class="summary-card">
|
||||||
|
<p class="card-label">Remaining Budget</p>
|
||||||
|
<p class="card-value text-positive">$765.44</p>
|
||||||
|
<p class="card-description">of $2,000.00 monthly budget</p>
|
||||||
|
</div>
|
||||||
|
<div class="summary-card">
|
||||||
|
<p class="card-label">Largest Expense</p>
|
||||||
|
<p class="card-value">$350.00</p>
|
||||||
|
<p class="card-description">Groceries on Oct 22</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="expense-actions">
|
||||||
|
<button class="button button-primary">Add New Expense</button>
|
||||||
|
<button class="button button-secondary">View All Transactions</button>
|
||||||
|
<button class="button button-tertiary">Analyze Spending Patterns</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="transaction-list-section">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Transaction History</h2>
|
||||||
|
|
||||||
|
<div class="filters-controls">
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="date-range-filter" class="sr-only">Filter by Date Range</label>
|
||||||
|
<select id="date-range-filter" class="filter-select">
|
||||||
|
<option value="last-30-days">Last 30 Days</option>
|
||||||
|
<option value="this-month">This Month</option>
|
||||||
|
<option value="last-month">Last Month</option>
|
||||||
|
<option value="this-year">This Year</option>
|
||||||
|
<option value="custom">Custom Range</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="account-filter" class="sr-only">Filter by Account</label>
|
||||||
|
<select id="account-filter" class="filter-select">
|
||||||
|
<option value="all-accounts">All Accounts</option>
|
||||||
|
<option value="checking">Checking (...1234)</option>
|
||||||
|
<option value="savings">Savings (...5678)</option>
|
||||||
|
<option value="investment">Investment (...9012)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="filter-group">
|
||||||
|
<label for="category-filter" class="sr-only">Filter by Category</label>
|
||||||
|
<select id="category-filter" class="filter-select">
|
||||||
|
<option value="all-categories">All Categories</option>
|
||||||
|
<option value="food">Food & Dining</option>
|
||||||
|
<option value="housing">Housing</option>
|
||||||
|
<option value="transportation">Transportation</option>
|
||||||
|
<option value="utilities">Utilities</option>
|
||||||
|
<option value="income">Income</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-group">
|
||||||
|
<label for="transaction-search" class="sr-only">Search Transactions</label>
|
||||||
|
<input type="search" id="transaction-search" class="search-input" placeholder="Search transactions...">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="transaction-table-wrapper">
|
||||||
|
<table class="transaction-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="date-col">Date</th>
|
||||||
|
<th scope="col" class="description-col">Description</th>
|
||||||
|
<th scope="col" class="category-col">Category</th>
|
||||||
|
<th scope="col" class="account-col">Account</th>
|
||||||
|
<th scope="col" class="amount-col">Amount</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 26, 2023</td>
|
||||||
|
<td data-label="Description">Starbucks Coffee</td>
|
||||||
|
<td data-label="Category">Food & Dining</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$5.75</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 25, 2023</td>
|
||||||
|
<td data-label="Description">Groceries at Whole Foods</td>
|
||||||
|
<td data-label="Category">Groceries</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$82.30</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 25, 2023</td>
|
||||||
|
<td data-label="Description">Salary Deposit</td>
|
||||||
|
<td data-label="Category">Income</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="income">+$2,500.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 24, 2023</td>
|
||||||
|
<td data-label="Description">Netflix Subscription</td>
|
||||||
|
<td data-label="Category">Entertainment</td>
|
||||||
|
<td data-label="Account">Savings (...5678)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$19.99</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 23, 2023</td>
|
||||||
|
<td data-label="Description">Investment Purchase (AAPL)</td>
|
||||||
|
<td data-label="Category">Investments</td>
|
||||||
|
<td data-label="Account">Investment (...9012)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$500.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td data-label="Date">Oct 22, 2023</td>
|
||||||
|
<td data-label="Description">Utility Bill (Electricity)</td>
|
||||||
|
<td data-label="Category">Utilities</td>
|
||||||
|
<td data-label="Account">Checking (...1234)</td>
|
||||||
|
<td data-label="Amount" class="expense">-$75.50</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pagination-controls">
|
||||||
|
<button class="load-more-btn">Load More Transactions</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="category-breakdown-chart" class="section-padding">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Your Financial Categories at a Glance</h2>
|
||||||
|
<p class="section-description">Understand where your money is going with a detailed breakdown of your expenses and income categories.</p>
|
||||||
|
|
||||||
|
<div class="chart-controls">
|
||||||
|
<button class="control-button active">Last 30 Days</button>
|
||||||
|
<button class="control-button">This Quarter</button>
|
||||||
|
<button class="control-button">This Year</button>
|
||||||
|
<select class="control-select">
|
||||||
|
<option value="all-accounts">All Accounts</option>
|
||||||
|
<option value="checking">Checking</option>
|
||||||
|
<option value="credit-card">Credit Card</option>
|
||||||
|
<option value="investments">Investments</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-content-wrapper">
|
||||||
|
<div class="chart-area">
|
||||||
|
<p class="chart-placeholder-text">Placeholder for Dynamic Chart Visualization (e.g., Pie Chart, Bar Chart)</p>
|
||||||
|
<div class="chart-visual-placeholder"></div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-legend">
|
||||||
|
<h3>Category Details</h3>
|
||||||
|
<ul class="category-list">
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #FF6384;"></span>
|
||||||
|
<span class="category-name">Housing & Utilities</span>
|
||||||
|
<span class="category-value">$1,850.00 <span class="percentage">(38%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #36A2EB;"></span>
|
||||||
|
<span class="category-name">Food & Groceries</span>
|
||||||
|
<span class="category-value">$720.50 <span class="percentage">(15%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #FFCD56;"></span>
|
||||||
|
<span class="category-name">Transportation</span>
|
||||||
|
<span class="category-value">$500.00 <span class="percentage">(10%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #4BC0C0;"></span>
|
||||||
|
<span class="category-name">Shopping & Personal Care</span>
|
||||||
|
<span class="category-value">$650.00 <span class="percentage">(13%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #9966FF;"></span>
|
||||||
|
<span class="category-name">Entertainment & Leisure</span>
|
||||||
|
<span class="category-value">$400.00 <span class="percentage">(8%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #FF9F40;"></span>
|
||||||
|
<span class="category-name">Health & Wellness</span>
|
||||||
|
<span class="category-value">$280.00 <span class="percentage">(6%)</span></span>
|
||||||
|
</li>
|
||||||
|
<li class="category-item">
|
||||||
|
<span class="color-swatch" style="background-color: #C9CBCF;"></span>
|
||||||
|
<span class="category-name">Other Expenses</span>
|
||||||
|
<span class="category-value">$500.00 <span class="percentage">(10%)</span></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="legend-note">Data reflects spending from linked accounts during the selected period.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="budgeting-tool" class="section-container">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="section-title">Budgeting Tool</h2>
|
||||||
|
<p class="section-description">Take control of your finances. Link your bank accounts, track every expense, forecast your savings, and make smarter financial decisions.</p>
|
||||||
|
|
||||||
|
<div class="grid-layout">
|
||||||
|
<!-- Budget Overview Card -->
|
||||||
|
<div class="card budget-overview-card">
|
||||||
|
<h3 class="card-title">Current Budget Overview</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="metric-group">
|
||||||
|
<p class="metric-label">Income This Month:</p>
|
||||||
|
<p class="metric-value placeholder-income">$XXXX.XX</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-group">
|
||||||
|
<p class="metric-label">Expenses This Month:</p>
|
||||||
|
<p class="metric-value placeholder-expenses">$XXXX.XX</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-group remaining-budget">
|
||||||
|
<p class="metric-label">Remaining Budget:</p>
|
||||||
|
<p class="metric-value placeholder-remaining">$XXXX.XX</p>
|
||||||
|
</div>
|
||||||
|
<div class="chart-placeholder">
|
||||||
|
<p>[Placeholder: Visual Bar Chart - Income vs. Expenses]</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Expense Tracking Card -->
|
||||||
|
<div class="card expense-tracking-card">
|
||||||
|
<h3 class="card-title">Track Expenses</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<div class="input-form-placeholder">
|
||||||
|
<p>[Placeholder: Input fields for 'Amount', 'Category', 'Description', 'Date']</p>
|
||||||
|
<button class="button primary-button">Add Expense</button>
|
||||||
|
</div>
|
||||||
|
<h4 class="sub-title">Recent Transactions</h4>
|
||||||
|
<ul class="transaction-list">
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Groceries</span>
|
||||||
|
<span class="transaction-amount">-$XX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Rent Payment</span>
|
||||||
|
<span class="transaction-amount">-$XXX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Salary Deposit</span>
|
||||||
|
<span class="transaction-amount">+$XXXX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
<li class="transaction-item">
|
||||||
|
<span class="transaction-description">Utilities Bill</span>
|
||||||
|
<span class="transaction-amount">-$XX.XX</span>
|
||||||
|
<span class="transaction-date">MM/DD/YYYY</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<button class="button secondary-button">View All Transactions</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Savings Goals & Forecast Card -->
|
||||||
|
<div class="card savings-forecast-card">
|
||||||
|
<h3 class="card-title">Savings Goals & Forecast</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<ul class="goal-list">
|
||||||
|
<li class="goal-item">
|
||||||
|
<span class="goal-name">Down Payment</span>
|
||||||
|
<span class="goal-progress">Progress: XX% ($X,XXX / $XX,XXX)</span>
|
||||||
|
</li>
|
||||||
|
<li class="goal-item">
|
||||||
|
<span class="goal-name">Emergency Fund</span>
|
||||||
|
<span class="goal-progress">Progress: XX% ($X,XXX / $X,XXX)</span>
|
||||||
|
</li>
|
||||||
|
<li class="goal-item">
|
||||||
|
<span class="goal-name">Vacation Fund</span>
|
||||||
|
<span class="goal-progress">Progress: XX% ($XXX / $X,XXX)</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="chart-placeholder">
|
||||||
|
<p>[Placeholder: Line Chart - Savings Projection Over Time]</p>
|
||||||
|
</div>
|
||||||
|
<button class="button primary-button">Set New Goal</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Linked Accounts Card -->
|
||||||
|
<div class="card linked-accounts-card">
|
||||||
|
<h3 class="card-title">Linked Accounts</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Connect your financial institutions to automatically track income and expenses using Plaid or similar services.</p>
|
||||||
|
<button class="button primary-button connect-plaid-button">
|
||||||
|
<span class="icon-placeholder">[🔗]</span> Link New Account
|
||||||
|
</button>
|
||||||
|
<h4 class="sub-title">Your Linked Banks:</h4>
|
||||||
|
<ul class="account-list">
|
||||||
|
<li class="account-item">Bank of America <span class="status-indicator">[Active]</span></li>
|
||||||
|
<li class="account-item">Fidelity Investments <span class="status-indicator">[Active]</span></li>
|
||||||
|
<li class="account-item">Chase Bank <span class="status-indicator">[Active]</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI Budgeting Insights Card -->
|
||||||
|
<div class="card ai-insights-card">
|
||||||
|
<h3 class="card-title">Personalized Budgeting Advice</h3>
|
||||||
|
<div class="card-content">
|
||||||
|
<p>Our AI analyzes your spending habits and financial goals to provide tailored recommendations.</p>
|
||||||
|
<ul class="advice-list">
|
||||||
|
<li>"Consider reducing spending in 'Dining Out' by 15% this month for faster goal achievement."</li>
|
||||||
|
<li>"You have an opportunity to save an extra $XX by optimizing your 'Shopping' budget."</li>
|
||||||
|
<li>"Your projected savings goal is achievable X months earlier if you increase contributions by $XX."</li>
|
||||||
|
</ul>
|
||||||
|
<button class="button secondary-button">Get More Insights</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="expense-management" class="py-12 bg-gray-50 dark:bg-gray-800">
|
||||||
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-900 dark:text-white mb-8">Expense Filtering & Sorting</h2>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 mb-8">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Filter Expenses</h3>
|
||||||
|
<form class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="search-expenses" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Search by Merchant/Description</label>
|
||||||
|
<input type="search" id="search-expenses" name="search" placeholder="e.g., Starbucks, Rent" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="filter-category" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Category</label>
|
||||||
|
<select id="filter-category" name="category" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="">All Categories</option>
|
||||||
|
<option value="food">Food & Dining</option>
|
||||||
|
<option value="transport">Transportation</option>
|
||||||
|
<option value="bills">Bills & Utilities</option>
|
||||||
|
<option value="shopping">Shopping</option>
|
||||||
|
<option value="entertainment">Entertainment</option>
|
||||||
|
<option value="health">Health & Fitness</option>
|
||||||
|
<option value="housing">Housing</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="filter-account" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Account</label>
|
||||||
|
<select id="filter-account" name="account" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="">All Accounts</option>
|
||||||
|
<option value="checking">Checking Account (**** 1234)</option>
|
||||||
|
<option value="savings">Savings Account (**** 5678)</option>
|
||||||
|
<option value="credit">Credit Card (**** 9012)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-1 md:col-span-2 lg:col-span-1">
|
||||||
|
<label for="filter-start-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range (From)</label>
|
||||||
|
<input type="date" id="filter-start-date" name="startDate" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
<div class="col-span-1 md:col-span-2 lg:col-span-1">
|
||||||
|
<label for="filter-end-date" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Date Range (To)</label>
|
||||||
|
<input type="date" id="filter-end-date" name="endDate" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label for="filter-min-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Min Amount</label>
|
||||||
|
<input type="number" id="filter-min-amount" name="minAmount" placeholder="$0.00" min="0" step="0.01" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="filter-max-amount" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Max Amount</label>
|
||||||
|
<input type="number" id="filter-max-amount" name="maxAmount" placeholder="$1000.00" min="0" step="0.01" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-span-full flex justify-end space-x-3 mt-4">
|
||||||
|
<button type="reset" class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||||
|
Clear Filters
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||||
|
Apply Filters
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 mb-8">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Sort Expenses</h3>
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label for="sort-by" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort By</label>
|
||||||
|
<select id="sort-by" name="sortBy" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="date">Date</option>
|
||||||
|
<option value="amount">Amount</option>
|
||||||
|
<option value="category">Category</option>
|
||||||
|
<option value="merchant">Merchant</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label for="sort-order" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Sort Order</label>
|
||||||
|
<select id="sort-order" name="sortOrder" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
||||||
|
<option value="desc">Descending</option>
|
||||||
|
<option value="asc">Ascending</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg p-6 overflow-x-auto">
|
||||||
|
<h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Your Expenses</h3>
|
||||||
|
<div class="min-w-full">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<thead class="bg-gray-50 dark:bg-gray-800">
|
||||||
|
<tr>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Date</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Merchant</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Category</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Amount</th>
|
||||||
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Account</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-26</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Coffee Shop Name</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Food & Dining</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$5.50</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Checking</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-25</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Grocery Store Name</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Shopping</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$75.23</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Credit Card</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-24</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Electric Company</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Bills & Utilities</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$120.00</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Checking</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-23</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Online Streaming Service</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Entertainment</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$15.99</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Credit Card</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100">2023-10-22</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Gas Station</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Transportation</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">-$40.00</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300">Savings</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="mt-6 flex justify-between items-center" aria-label="Pagination">
|
||||||
|
<div class="hidden sm:block">
|
||||||
|
<p class="text-sm text-gray-700 dark:text-gray-300">
|
||||||
|
Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">50</span> results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 flex justify-between sm:justify-end">
|
||||||
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
|
Previous
|
||||||
|
</a>
|
||||||
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
|
||||||
|
Next
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<a href="#" class="footer-logo">
|
||||||
|
<!-- Placeholder for logo image or text -->
|
||||||
|
<span class="logo-text">FinTrack AI</span>
|
||||||
|
</a>
|
||||||
|
<p class="footer-description">
|
||||||
|
Your smart financial companion for tracking, forecasting, and investing.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-nav">
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Product</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">How It Works</a></li>
|
||||||
|
<li><a href="#">Expense Tracking</a></li>
|
||||||
|
<li><a href="#">Savings Forecast</a></li>
|
||||||
|
<li><a href="#">AI Investment Advice</a></li>
|
||||||
|
<li><a href="#">Security</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Company</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Press</a></li>
|
||||||
|
<li><a href="#">Developers (API)</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Support</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-nav-column">
|
||||||
|
<h3 class="footer-heading">Legal</h3>
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Disclaimer</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="footer-social">
|
||||||
|
<h3 class="footer-heading">Connect</h3>
|
||||||
|
<div class="social-icons">
|
||||||
|
<a href="#" aria-label="Facebook"><span class="icon-placeholder">Fb</span></a>
|
||||||
|
<a href="#" aria-label="Twitter"><span class="icon-placeholder">Tw</span></a>
|
||||||
|
<a href="#" aria-label="LinkedIn"><span class="icon-placeholder">Li</span></a>
|
||||||
|
<a href="#" aria-label="Instagram"><span class="icon-placeholder">Ig</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p class="footer-copyright">
|
||||||
|
© 2023 FinTrack AI. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
27
index.html
Normal file
27
index.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
|
||||||
|
<!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"><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"><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>
|
||||||
|
<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"><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"><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>
|
||||||
448
investment_advice.html
Normal file
448
investment_advice.html
Normal file
@ -0,0 +1,448 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Investment Advice</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Navbar</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<header class="navbar">
|
||||||
|
<a href="#" class="navbar__logo" aria-label="FinTech Platform Homepage">
|
||||||
|
<span class="navbar__logo-icon" aria-hidden="true"></span>
|
||||||
|
<span class="navbar__logo-text">FinTrack</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<nav class="navbar__nav-wrapper">
|
||||||
|
<ul class="navbar__nav-links">
|
||||||
|
<li><a href="#dashboard" class="active">Dashboard</a></li>
|
||||||
|
<li><a href="#accounts">Accounts</a></li>
|
||||||
|
<li><a href="#expenses">Expenses</a></li>
|
||||||
|
<li><a href="#savings">Savings</a></li>
|
||||||
|
<li><a href="#advice">Advice</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="navbar__actions">
|
||||||
|
<a href="#connect" class="navbar__button">Connect Account</a>
|
||||||
|
<div class="navbar__user-profile" aria-haspopup="true" aria-expanded="false" tabindex="0" role="button">
|
||||||
|
<span class="navbar__user-avatar" aria-label="User Avatar">JD</span>
|
||||||
|
<span class="navbar__user-name">John Doe</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="navbar__hamburger" aria-label="Toggle navigation menu">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
<main style="padding: 2rem; max-width: 1200px; margin: 20px auto; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
|
||||||
|
<h1>Welcome to FinTrack</h1>
|
||||||
|
<p>This is placeholder content for your main dashboard area.</p>
|
||||||
|
<p>Your financial overview, expense tracking, savings forecast, and AI-driven investment advice will appear here after connecting your accounts.</p>
|
||||||
|
<div style="height: 800px; background-color: #f9f9f9; border: 1px dashed #ccc; margin-top: 20px; display: flex; justify-content: center; align-items: center; color: #888;">
|
||||||
|
Wireframe Placeholder for Dashboard Content
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
// Simple JavaScript for hamburger menu toggle (for demonstration)
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const hamburger = document.querySelector('.navbar__hamburger');
|
||||||
|
const navLinks = document.querySelector('.navbar__nav-links');
|
||||||
|
|
||||||
|
hamburger.addEventListener('click', () => {
|
||||||
|
navLinks.classList.toggle('active');
|
||||||
|
hamburger.setAttribute('aria-expanded', navLinks.classList.contains('active'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close nav when a link is clicked (on mobile)
|
||||||
|
navLinks.querySelectorAll('a').forEach(link => {
|
||||||
|
link.addEventListener('click', () => {
|
||||||
|
if (navLinks.classList.contains('active')) {
|
||||||
|
navLinks.classList.remove('active');
|
||||||
|
hamburger.setAttribute('aria-expanded', 'false');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<section class="advice-header">
|
||||||
|
<div class="container">
|
||||||
|
<h1>AI-Driven Financial Insights</h1>
|
||||||
|
<p>Unlock personalized investment advice and strategic recommendations based on your linked accounts, expenses, and savings goals.</p>
|
||||||
|
<a href="#get-advice" class="button primary-button">Get My Personalized Advice</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="recommendation-card-section" style="padding: 4rem 1rem; background-color: #f8f8f8; font-family: Arial, sans-serif; text-align: center;">
|
||||||
|
<div style="max-width: 1200px; margin: 0 auto;">
|
||||||
|
<h2 style="font-size: 2.5rem; color: #333; margin-bottom: 1rem;">Your AI-Powered Financial Recommendations</h2>
|
||||||
|
<p style="font-size: 1.1rem; color: #666; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto;">
|
||||||
|
Based on your linked accounts and investment goals, our AI has generated personalized advice to help you grow your wealth.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #007bff; margin-bottom: 1rem;">Diversify Your Portfolio</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Consider allocating a portion of your funds to diversified ETFs to mitigate risk and capture broad market growth. Our analysis suggests specific sectors.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #007bff; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Explore Details
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #28a745; margin-bottom: 1rem;">Optimize Your Savings Rate</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Your current savings rate could be optimized for faster goal achievement. We recommend adjusting your monthly contributions to reach milestones sooner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #28a745; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Adjust Plan
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #ffc107; margin-bottom: 1rem;">Consider Alternative Investments</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Based on your risk tolerance, explore opportunities in real estate crowdfunding or peer-to-peer lending for potentially higher returns.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #ffc107; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Learn More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article style="background-color: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); text-align: left; display: flex; flex-direction: column; justify-content: space-between;">
|
||||||
|
<div>
|
||||||
|
<h3 style="font-size: 1.6rem; color: #17a2b8; margin-bottom: 1rem;">Rebalance Your Holdings</h3>
|
||||||
|
<p style="font-size: 1rem; color: #555; line-height: 1.6;">
|
||||||
|
Your portfolio may have drifted from its target asset allocation. We suggest rebalancing to maintain your desired risk-reward profile.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 1.5rem;">
|
||||||
|
<a href="#" style="display: inline-block; padding: 0.8rem 1.5rem; background-color: #17a2b8; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; transition: background-color 0.3s ease;">
|
||||||
|
Review Now
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Portfolio Performance</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="portfolio-performance-section" aria-labelledby="portfolio-performance-heading">
|
||||||
|
<h2 id="portfolio-performance-heading">Portfolio Performance</h2>
|
||||||
|
|
||||||
|
<div class="chart-controls">
|
||||||
|
<div class="time-range-buttons" role="group" aria-label="Select time range for chart">
|
||||||
|
<button type="button" class="active">1D</button>
|
||||||
|
<button type="button">1W</button>
|
||||||
|
<button type="button">1M</button>
|
||||||
|
<button type="button">3M</button>
|
||||||
|
<button type="button">1Y</button>
|
||||||
|
<button type="button">All</button>
|
||||||
|
</div>
|
||||||
|
<div class="view-selector">
|
||||||
|
<label for="chart-view-select" class="sr-only">Select chart view type</label>
|
||||||
|
<select id="chart-view-select" aria-label="Chart view type">
|
||||||
|
<option value="value">Portfolio Value</option>
|
||||||
|
<option value="gain-loss">Daily Gain/Loss</option>
|
||||||
|
<option value="allocation">Asset Allocation</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="chart-container" role="img" aria-label="Interactive chart showing portfolio performance over time">
|
||||||
|
<p class="chart-placeholder-text">Placeholder for interactive performance chart (e.g., Line Chart with D3.js or Chart.js)</p>
|
||||||
|
<!-- A real chart library (e.g., Chart.js, D3.js, Highcharts) would render here -->
|
||||||
|
<!-- Example: <canvas id="performanceChart"></canvas> or <svg id="performanceSVG"></svg> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="key-metrics">
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Current Value</p>
|
||||||
|
<p class="metric-value">$52,345.67</p>
|
||||||
|
<p class="metric-change positive">+1.23% ($634.50)</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Total Gain/Loss</p>
|
||||||
|
<p class="metric-value positive">+$7,890.12</p>
|
||||||
|
<p class="metric-change positive">+17.75% (All Time)</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Today's Change</p>
|
||||||
|
<p class="metric-value negative">-$123.45</p>
|
||||||
|
<p class="metric-change negative">-0.24%</p>
|
||||||
|
</div>
|
||||||
|
<div class="metric-card">
|
||||||
|
<p class="metric-label">Annualized Return</p>
|
||||||
|
<p class="metric-value positive">8.50%</p>
|
||||||
|
<p class="metric-change neutral">(Estimated)</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="risk-profile-assessment" class="py-12 bg-gray-50">
|
||||||
|
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 class="text-3xl font-extrabold text-gray-900 text-center mb-6">Your Risk Profile Assessment</h2>
|
||||||
|
<p class="text-lg text-gray-700 text-center mb-10">
|
||||||
|
Understand your investment comfort level to help us tailor personalized advice. Your responses will guide our AI in recommending suitable investment strategies.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form class="space-y-8 bg-white p-8 rounded-lg shadow-xl">
|
||||||
|
|
||||||
|
<!-- Question 1: Investment Horizon -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 1 of 5: Investment Horizon</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How long do you plan to invest your money before needing to withdraw it?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="horizon-short" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="horizon-short" class="ml-3 block text-base font-medium text-gray-700">Less than 3 years (Short-term)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="horizon-medium" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="horizon-medium" class="ml-3 block text-base font-medium text-gray-700">3-7 years (Medium-term)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="horizon-long" name="investment_horizon" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="horizon-long" class="ml-3 block text-base font-medium text-gray-700">More than 7 years (Long-term)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 2: Risk Tolerance for Loss -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 2 of 5: Risk Tolerance</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How would you react if your investment portfolio lost 20% of its value in a short period?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="loss-panic" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="loss-panic" class="ml-3 block text-base font-medium text-gray-700">Panic and sell immediately</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="loss-worry" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="loss-worry" class="ml-3 block text-base font-medium text-gray-700">Worried, but would wait for recovery</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="loss-buy" name="loss_reaction" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="loss-buy" class="ml-3 block text-base font-medium text-gray-700">See it as a buying opportunity</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 3: Financial Goals -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 3 of 5: Financial Goals</legend>
|
||||||
|
<p class="text-gray-700 mb-4">Which of the following best describes your primary financial goal?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="goal-preserve" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="goal-preserve" class="ml-3 block text-base font-medium text-gray-700">Capital preservation (low risk, low return)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="goal-growth" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="goal-growth" class="ml-3 block text-base font-medium text-gray-700">Balanced growth (moderate risk, moderate return)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="goal-aggressive" name="financial_goal" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="goal-aggressive" class="ml-3 block text-base font-medium text-gray-700">Aggressive growth (high risk, high return potential)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 4: Investment Knowledge -->
|
||||||
|
<fieldset class="border-b border-gray-200 pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 4 of 5: Investment Knowledge</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How would you describe your current knowledge of investment products and markets?</p>
|
||||||
|
<select id="investment-knowledge" name="investment_knowledge" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
|
||||||
|
<option value="">Please select...</option>
|
||||||
|
<option value="beginner">Beginner (Little to no knowledge)</option>
|
||||||
|
<option value="intermediate">Intermediate (Understand basic concepts)</option>
|
||||||
|
<option value="advanced">Advanced (Familiar with complex instruments)</option>
|
||||||
|
<option value="expert">Expert (Professionally involved)</option>
|
||||||
|
</select>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<!-- Question 5: Income Stability -->
|
||||||
|
<fieldset class="pb-8 pt-8">
|
||||||
|
<legend class="text-xl font-semibold text-gray-900 mb-4">Question 5 of 5: Income Stability</legend>
|
||||||
|
<p class="text-gray-700 mb-4">How stable is your current income and financial situation?</p>
|
||||||
|
<div class="mt-4 space-y-4">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="income-unstable" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="income-unstable" class="ml-3 block text-base font-medium text-gray-700">Very unstable (Income fluctuates significantly)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="income-moderate" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="income-moderate" class="ml-3 block text-base font-medium text-gray-700">Moderately stable (Some fluctuations, but manageable)</label>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<input id="income-stable" name="income_stability" type="radio" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300">
|
||||||
|
<label for="income-stable" class="ml-3 block text-base font-medium text-gray-700">Very stable (Consistent income, secure employment)</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="pt-8 flex justify-end">
|
||||||
|
<button type="submit" class="inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-lg font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
||||||
|
Get My Risk Profile
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="educational-resources" aria-labelledby="educational-resources-heading">
|
||||||
|
<div class="container">
|
||||||
|
<h2 id="educational-resources-heading">Empower Your Financial Journey with Knowledge</h2>
|
||||||
|
<p class="section-description">Dive into our comprehensive library of guides, articles, and insights designed to help you understand personal finance, investment strategies, and market trends.</p>
|
||||||
|
|
||||||
|
<nav class="resource-categories" aria-label="Educational Resource Categories">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#category-investing" class="category-link active">Investing Basics</a></li>
|
||||||
|
<li><a href="#category-savings" class="category-link">Savings & Budgeting</a></li>
|
||||||
|
<li><a href="#category-debt" class="category-link">Debt Management</a></li>
|
||||||
|
<li><a href="#category-ai" class="category-link">AI & Future Finance</a></li>
|
||||||
|
<li><a href="#category-glossary" class="category-link">Financial Glossary</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="resources-grid">
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trending-up"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Understanding Investment Risks</h3>
|
||||||
|
<p>Learn about different types of investment risks and how to manage them effectively for a balanced portfolio.</p>
|
||||||
|
<a href="#read-more-risk" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-book-open"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Beginner's Guide to Stock Market</h3>
|
||||||
|
<p>Start your journey into the stock market with this essential guide covering basics, terms, and first steps.</p>
|
||||||
|
<a href="#read-more-stocks" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-piggy-bank"><path d="M16 10a4 4 0 0 0-4-4V2a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a4 4 0 0 0 4-4v-4zm-4 4h0"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Building Your Emergency Fund</h3>
|
||||||
|
<p>Discover practical steps to build and maintain a robust emergency fund for financial security.</p>
|
||||||
|
<a href="#read-more-emergency" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-cpu"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect><rect x="9" y="9" width="6" height="6"></rect><line x1="9" y1="1" x2="9" y2="4"></line><line x1="15" y1="1" x2="15" y2="4"></line><line x1="9" y1="20" x2="9" y2="23"></line><line x1="15" y1="20" x2="15" y2="23"></line><line x1="20" y1="9" x2="23" y2="9"></line><line x1="20" y1="15" x2="23" y2="15"></line><line x1="1" y1="9" x2="4" y2="9"></line><line x1="1" y1="15" x2="4" y2="15"></line></svg>
|
||||||
|
</div>
|
||||||
|
<h3>How AI Boosts Your Portfolio</h3>
|
||||||
|
<p>Explore how artificial intelligence can analyze data and provide personalized investment advice.</p>
|
||||||
|
<a href="#read-more-ai" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg>
|
||||||
|
</div>
|
||||||
|
<h3>Debt Management Strategies</h3>
|
||||||
|
<p>Practical strategies to tackle debt, improve your credit score, and achieve financial freedom.</p>
|
||||||
|
<a href="#read-more-debt" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="resource-card">
|
||||||
|
<div class="resource-image-placeholder">
|
||||||
|
<svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pie-chart"><path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path><path d="M22 12A10 10 0 0 0 12 2v10z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<h3>The Power of Compound Interest</h3>
|
||||||
|
<p>Unpack the magic of compound interest and how it can significantly grow your wealth over time.</p>
|
||||||
|
<a href="#read-more-compound" class="read-more-link">Read More</a>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="call-to-action">
|
||||||
|
<p>Can't find what you're looking for? <a href="#contact-us">Suggest a topic</a> or <a href="#faqs">visit our FAQs</a>.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
<div class="footer-column footer-branding">
|
||||||
|
<a href="#" class="footer-logo">YourCompany</a>
|
||||||
|
<p class="footer-tagline">Empowering your financial future with smart insights.</p>
|
||||||
|
<div class="social-links">
|
||||||
|
<a href="#" aria-label="Link to Facebook"><span class="social-icon-placeholder">FB</span></a>
|
||||||
|
<a href="#" aria-label="Link to Twitter"><span class="social-icon-placeholder">TW</span></a>
|
||||||
|
<a href="#" aria-label="Link to LinkedIn"><span class="social-icon-placeholder">LI</span></a>
|
||||||
|
<a href="#" aria-label="Link to Instagram"><span class="social-icon-placeholder">IG</span></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="footer-column footer-nav">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Link Accounts</a></li>
|
||||||
|
<li><a href="#">Track Expenses</a></li>
|
||||||
|
<li><a href="#">Forecast Savings</a></li>
|
||||||
|
<li><a href="#">Investment Advice</a></li>
|
||||||
|
<li><a href="#">Security</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-column footer-nav">
|
||||||
|
<h3>Company</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Contact</a></li>
|
||||||
|
<li><a href="#">Press Kit</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-column footer-nav">
|
||||||
|
<h3>Support & Legal</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">Plaid & Data</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom-bar">
|
||||||
|
<p class="copyright-text">© 2023 YourCompany. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
275
login.html
Normal file
275
login.html
Normal file
@ -0,0 +1,275 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Navbar</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<header class="navbar">
|
||||||
|
<a href="#" class="navbar__logo">
|
||||||
|
<span class="navbar__logo-icon">💰</span>
|
||||||
|
FinTrack
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar__menu-and-auth">
|
||||||
|
<button class="navbar__menu-toggle" aria-expanded="false" aria-controls="main-navigation">
|
||||||
|
☰ <!-- Hamburger icon -->
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav class="navbar__nav-links" id="main-navigation">
|
||||||
|
<ul class="navbar__nav-links-list">
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#" class="active-link" aria-current="page">Dashboard</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Accounts</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Expenses</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Savings</a>
|
||||||
|
</li>
|
||||||
|
<li class="navbar__nav-item">
|
||||||
|
<a href="#">Advice</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="navbar__auth-buttons">
|
||||||
|
<a href="#" class="navbar__button navbar__button--secondary">Sign In</a>
|
||||||
|
<a href="#" class="navbar__button navbar__button--primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main style="padding: 2rem; text-align: center;">
|
||||||
|
<h1>Welcome to FinTrack</h1>
|
||||||
|
<p>Your ultimate financial management platform.</p>
|
||||||
|
<div style="background-color: white; border: 1px dashed var(--border-color); padding: 3rem; margin-top: 2rem; color: var(--text-light-color);">
|
||||||
|
Content Area Placeholder
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const menuToggle = document.querySelector('.navbar__menu-toggle');
|
||||||
|
const navLinks = document.getElementById('main-navigation');
|
||||||
|
const authButtons = document.querySelector('.navbar__auth-buttons'); // Select auth buttons for mobile toggle
|
||||||
|
|
||||||
|
if (menuToggle && navLinks && authButtons) {
|
||||||
|
menuToggle.addEventListener('click', () => {
|
||||||
|
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
|
||||||
|
menuToggle.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
navLinks.classList.toggle('is-open');
|
||||||
|
authButtons.classList.toggle('is-open'); // Toggle auth buttons visibility
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Login - Financial Dashboard</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="login-container" aria-labelledby="login-heading">
|
||||||
|
<h1 id="login-heading">Welcome Back!</h1>
|
||||||
|
<p>Log in to access your financial dashboard and insights.</p>
|
||||||
|
|
||||||
|
<form action="/login" method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" placeholder="your.email@example.com" required="" autocomplete="email">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="••••••••" required="" autocomplete="current-password">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Log In</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<a href="/forgot-password" class="forgot-password">Forgot Password?</a>
|
||||||
|
<p class="signup-link">Don't have an account? <a href="/signup">Sign Up</a></p>
|
||||||
|
</section>
|
||||||
|
<main class="forgot-password-section">
|
||||||
|
<div class="forgot-password-content">
|
||||||
|
<h1 class="forgot-password-title">Forgot Your Password?</h1>
|
||||||
|
<p class="forgot-password-description">
|
||||||
|
Enter your email address below and we'll send you a link to reset your password.
|
||||||
|
</p>
|
||||||
|
<form action="/reset-password" method="POST" class="forgot-password-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email" class="form-label">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" class="form-input" placeholder="e.g., user@example.com" required="" autocomplete="email">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="submit-button">Send Reset Link</button>
|
||||||
|
</form>
|
||||||
|
<div class="back-to-login">
|
||||||
|
<p>Remembered your password? <a href="/login">Back to Login</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<section class="signup-prompt">
|
||||||
|
<div class="signup-prompt__container">
|
||||||
|
<div class="signup-prompt__content">
|
||||||
|
<h2 class="signup-prompt__headline">Take Control of Your Financial Future</h2>
|
||||||
|
<p class="signup-prompt__description">
|
||||||
|
Link bank accounts, track expenses, forecast savings, and get AI-driven investment advice.
|
||||||
|
</p>
|
||||||
|
<ul class="signup-prompt__features">
|
||||||
|
<li>Securely connect all your financial accounts</li>
|
||||||
|
<li>Monitor spending and categorize transactions</li>
|
||||||
|
<li>Project savings growth and achieve financial goals</li>
|
||||||
|
<li>Receive personalized AI investment insights</li>
|
||||||
|
</ul>
|
||||||
|
<a href="/signup" class="signup-prompt__button">Start Your Free Journey</a>
|
||||||
|
</div>
|
||||||
|
<div class="signup-prompt__visual">
|
||||||
|
<div class="placeholder-graphic">
|
||||||
|
<!-- Placeholder for a dashboard or data visualization illustration -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="security-disclaimer" class="py-16 bg-gray-50 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
|
||||||
|
<div class="container mx-auto px-4 max-w-4xl">
|
||||||
|
<h2 class="text-4xl md:text-5xl font-bold text-center mb-10 text-indigo-700 dark:text-indigo-400">Security Disclaimer</h2>
|
||||||
|
|
||||||
|
<div class="space-y-8">
|
||||||
|
<p class="text-lg leading-relaxed text-center mb-8">
|
||||||
|
Your financial security is paramount. We employ industry-leading measures to protect your sensitive data and ensure a secure experience.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Data Encryption & Protection</h3>
|
||||||
|
<p class="leading-relaxed mb-4">
|
||||||
|
All data transmitted between your device and our servers, as well as data at rest, is encrypted using robust, bank-grade encryption protocols (e.g., AES-256). We utilize Secure Socket Layer (SSL/TLS) technology to ensure the confidentiality and integrity of your information during transit.
|
||||||
|
</p>
|
||||||
|
<p class="leading-relaxed">
|
||||||
|
Access to your data is strictly controlled, monitored, and requires multi-factor authentication for internal personnel. We conduct regular security audits and vulnerability assessments.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Financial Data Integration (Plaid & Similar APIs)</h3>
|
||||||
|
<p class="leading-relaxed mb-4">
|
||||||
|
We partner with reputable third-party financial data aggregators, such as Plaid, to securely connect to your bank accounts and investment portfolios.
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc pl-6 space-y-2 leading-relaxed">
|
||||||
|
<li>We never store your bank login credentials on our servers. These credentials are handled directly and securely by the financial data provider.</li>
|
||||||
|
<li>These providers use advanced encryption and security measures, are SOC 2 compliant, and employ robust fraud prevention systems.</li>
|
||||||
|
<li>You grant read-only access to your financial data. We cannot move money or initiate transactions on your behalf.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">Your Role in Security</h3>
|
||||||
|
<p class="leading-relaxed mb-4">
|
||||||
|
While we take extensive measures to protect your data, your vigilance is also crucial.
|
||||||
|
</p>
|
||||||
|
<ul class="list-disc pl-6 space-y-2 leading-relaxed">
|
||||||
|
<li>Use strong, unique passwords for your account.</li>
|
||||||
|
<li>Enable two-factor authentication (2FA) for an added layer of security.</li>
|
||||||
|
<li>Be cautious of phishing attempts and suspicious emails. We will never ask for your password via email.</li>
|
||||||
|
<li>Log out of your account when using shared or public computers.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-600">
|
||||||
|
<h3 class="text-2xl font-semibold mb-4 text-gray-900 dark:text-gray-100">AI-Driven Advice Disclaimer</h3>
|
||||||
|
<p class="leading-relaxed">
|
||||||
|
The AI-driven investment advice and financial forecasts provided on this platform are for informational and educational purposes only. They are based on algorithms and the data you provide, and do not constitute financial, investment, tax, or legal advice.
|
||||||
|
</p>
|
||||||
|
<p class="leading-relaxed mt-2">
|
||||||
|
Before making any financial decisions, including investments, we strongly recommend consulting with a qualified financial professional. Past performance is not indicative of future results. All investment carries risk.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-center text-lg leading-relaxed pt-4">
|
||||||
|
If you have any security concerns or questions, please do not hesitate to <a href="/contact" class="text-indigo-600 dark:text-indigo-300 hover:underline font-medium">contact our support team</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer">
|
||||||
|
<div class="footer-container">
|
||||||
|
|
||||||
|
<div class="footer-brand-info">
|
||||||
|
<a href="#" class="footer-logo-placeholder">YourFinTech Logo</a>
|
||||||
|
<p class="footer-tagline">
|
||||||
|
Your financial future, simplified. Track, forecast, and grow your wealth with AI-driven insights.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-links-grid">
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Product</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Features Overview</a></li>
|
||||||
|
<li><a href="#">How It Works</a></li>
|
||||||
|
<li><a href="#">Pricing Plans</a></li>
|
||||||
|
<li><a href="#">Security & Privacy</a></li>
|
||||||
|
<li><a href="#">Integrations (Plaid)</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Company</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">About Us</a></li>
|
||||||
|
<li><a href="#">Careers</a></li>
|
||||||
|
<li><a href="#">Blog</a></li>
|
||||||
|
<li><a href="#">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Support</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
<li><a href="#">Help Center</a></li>
|
||||||
|
<li><a href="#">Get Started Guide</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav class="footer-nav-group">
|
||||||
|
<h3>Legal</h3>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Privacy Policy</a></li>
|
||||||
|
<li><a href="#">Terms of Service</a></li>
|
||||||
|
<li><a href="#">AI Investment Disclaimer</a></li>
|
||||||
|
<li><a href="#">Cookie Policy</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footer-bottom-bar">
|
||||||
|
<div class="footer-social-links">
|
||||||
|
<a href="#" aria-label="Facebook"><span class="social-icon-placeholder">Fb</span></a>
|
||||||
|
<a href="#" aria-label="Twitter"><span class="social-icon-placeholder">Tw</span></a>
|
||||||
|
<a href="#" aria-label="LinkedIn"><span class="social-icon-placeholder">Li</span></a>
|
||||||
|
<a href="#" aria-label="Instagram"><span class="social-icon-placeholder">Ig</span></a>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copyright">© 2023 YourFinTech Inc. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
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)
|
||||||
281
sign_up.html
Normal file
281
sign_up.html
Normal file
@ -0,0 +1,281 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Sign Up</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page-wrapper">
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Navbar</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<nav class="navbar" role="navigation" aria-label="Main navigation">
|
||||||
|
<div class="navbar__header">
|
||||||
|
<a href="#" class="navbar__logo" aria-label="FinTech Platform Homepage">FinWise AI</a>
|
||||||
|
<button class="navbar__toggle" aria-controls="main-menu" aria-expanded="false" type="button">
|
||||||
|
☰ <!-- Hamburger icon -->
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<ul class="navbar__menu" id="main-menu">
|
||||||
|
<li class="navbar__item"><a href="#dashboard">Dashboard</a></li>
|
||||||
|
<li class="navbar__item"><a href="#accounts">Accounts</a></li>
|
||||||
|
<li class="navbar__item"><a href="#expenses">Expenses</a></li>
|
||||||
|
<li class="navbar__item"><a href="#forecast">Forecast</a></li>
|
||||||
|
<li class="navbar__item"><a href="#advice">AI Advice</a></li>
|
||||||
|
<li class="navbar__item"><a href="#support">Support</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="navbar__actions">
|
||||||
|
<a href="#login" class="navbar__button navbar__button--secondary">Log In</a>
|
||||||
|
<a href="#signup" class="navbar__button navbar__button--primary">Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const toggleButton = document.querySelector('.navbar__toggle');
|
||||||
|
const navMenu = document.querySelector('.navbar__menu');
|
||||||
|
const navActions = document.querySelector('.navbar__actions');
|
||||||
|
|
||||||
|
toggleButton.addEventListener('click', () => {
|
||||||
|
const isExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
|
||||||
|
toggleButton.setAttribute('aria-expanded', !isExpanded);
|
||||||
|
navMenu.classList.toggle('is-active');
|
||||||
|
navActions.classList.toggle('is-active'); /* Optional: show actions with menu */
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Registration Form</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section id="registration-form" class="registration-section">
|
||||||
|
<div class="registration-header">
|
||||||
|
<h1>Create Your Account</h1>
|
||||||
|
<p>Join us to link your finances, track spending, forecast savings, and receive AI-driven investment advice.</p>
|
||||||
|
</div>
|
||||||
|
<form action="#" method="POST">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="full-name">Full Name</label>
|
||||||
|
<input type="text" id="full-name" name="full_name" placeholder="John Doe" required="" autocomplete="name">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">Email Address</label>
|
||||||
|
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required="" autocomplete="email">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="Min. 8 characters" required="" minlength="8" autocomplete="new-password">
|
||||||
|
<p class="password-strength-indicator">Password strength: <span id="password-strength-text">Weak</span></p>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="confirm-password">Confirm Password</label>
|
||||||
|
<input type="password" id="confirm-password" name="confirm_password" placeholder="Re-enter your password" required="" autocomplete="new-password">
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-group">
|
||||||
|
<input type="checkbox" id="terms-privacy" name="terms_privacy" required="">
|
||||||
|
<label for="terms-privacy">I agree to the <a href="#terms">Terms of Service</a> and <a href="#privacy">Privacy Policy</a>.</label>
|
||||||
|
</div>
|
||||||
|
<button type="submit">Register Now</button>
|
||||||
|
</form>
|
||||||
|
<div class="login-link">
|
||||||
|
Already have an account? <a href="#login">Log In</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const passwordInput = document.getElementById('password');
|
||||||
|
const passwordStrengthText = document.getElementById('password-strength-text');
|
||||||
|
|
||||||
|
passwordInput.addEventListener('input', () => {
|
||||||
|
const password = passwordInput.value;
|
||||||
|
let strength = 'Weak';
|
||||||
|
let strengthClass = 'weak';
|
||||||
|
|
||||||
|
if (password.length >= 8) {
|
||||||
|
let score = 0;
|
||||||
|
if (/[A-Z]/.test(password)) score++;
|
||||||
|
if (/[a-z]/.test(password)) score++;
|
||||||
|
if (/[0-9]/.test(password)) score++;
|
||||||
|
if (/[^A-Za-z0-9]/.test(password)) score++;
|
||||||
|
|
||||||
|
if (score === 4 && password.length >= 12) {
|
||||||
|
strength = 'Strong';
|
||||||
|
strengthClass = 'strong';
|
||||||
|
} else if (score >= 2) {
|
||||||
|
strength = 'Medium';
|
||||||
|
strengthClass = 'medium';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
passwordStrengthText.textContent = strength;
|
||||||
|
passwordStrengthText.className = strengthClass;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<section class="privacy-consent-section">
|
||||||
|
<div class="container">
|
||||||
|
<header class="section-header">
|
||||||
|
<h1>Your Privacy Matters</h1>
|
||||||
|
<p>Welcome to [Your App Name]! To provide you with personalized financial insights and services, we need your consent regarding how we handle your data.</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<article class="privacy-details">
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>1. Data Collection</h2>
|
||||||
|
<p>We collect essential data to power your financial experience. This includes:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Bank Account and Investment Data:</strong> Accessed securely via Plaid API or similar financial data sources (e.g., transaction history, account balances, investment holdings).</li>
|
||||||
|
<li><strong>Personal Information:</strong> (e.g., name, email address) for account creation and communication.</li>
|
||||||
|
<li><strong>Usage Data:</strong> How you interact with our platform to improve services.</li>
|
||||||
|
</ul>
|
||||||
|
<p>We do NOT collect data that can identify you outside of our platform, nor do we sell your data to third parties for marketing purposes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>2. How We Use Your Data</h2>
|
||||||
|
<p>Your data is used solely to provide and improve the core services of [Your App Name]:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Expense Tracking & Budgeting:</strong> Categorize transactions and visualize spending.</li>
|
||||||
|
<li><strong>Savings Forecasting:</strong> Analyze your habits to predict future savings.</li>
|
||||||
|
<li><strong>AI-Driven Investment Advice:</strong> Generate personalized investment recommendations based on your financial profile.</li>
|
||||||
|
<li><strong>Service Improvement:</strong> Enhance app features, security, and user experience.</li>
|
||||||
|
<li><strong>Customer Support:</strong> Assist with any queries or issues you may have.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>3. Data Sharing & Third Parties</h2>
|
||||||
|
<p>We partner with trusted third-party services to deliver our functionalities:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Financial Data Providers (e.g., Plaid):</strong> To securely connect and retrieve your financial data from institutions. This data is encrypted and handled according to industry standards.</li>
|
||||||
|
<li><strong>Cloud Hosting Providers:</strong> To store and process your data securely.</li>
|
||||||
|
<li><strong>Analytics Services:</strong> (Anonymized) to understand app usage and improve features.</li>
|
||||||
|
</ul>
|
||||||
|
<p>We ensure all third-party partners adhere to strict data protection and privacy standards.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="privacy-point">
|
||||||
|
<h2>4. Your Rights & Control</h2>
|
||||||
|
<p>You have full control over your data:</p>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Access:</strong> Request a copy of your personal data we hold.</li>
|
||||||
|
<li><strong>Correction:</strong> Request corrections to inaccurate data.</li>
|
||||||
|
<li><strong>Deletion:</strong> Request the deletion of your account and associated data (subject to legal obligations).</li>
|
||||||
|
<li><strong>Withdraw Consent:</strong> You can withdraw your consent at any time, which may affect your ability to use certain features of the service.</li>
|
||||||
|
</ul>
|
||||||
|
<p>For more details, please review our comprehensive <a href="#privacy-policy" aria-label="Read our full privacy policy">Privacy Policy</a>.</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<footer class="privacy-actions">
|
||||||
|
<p>By clicking "Accept and Continue", you agree to our <a href="#terms-of-service" aria-label="Read our terms of service">Terms of Service</a> and the Privacy Consent outlined above. If you do not consent, you will not be able to use our service.</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<button type="submit" class="button button-primary">Accept and Continue</button>
|
||||||
|
<button type="button" class="button button-secondary">Decline</button>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<section class="terms-conditions-section" aria-labelledby="legal-information-heading">
|
||||||
|
<div class="container">
|
||||||
|
<!-- A visually hidden heading for accessibility, providing context for screen readers -->
|
||||||
|
<h2 id="legal-information-heading" style="position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;">Legal Information and Agreements</h2>
|
||||||
|
<p class="terms-text">
|
||||||
|
By continuing to use our platform, you acknowledge and agree to our comprehensive
|
||||||
|
<a href="#placeholder-terms-of-service" class="terms-link" aria-label="Read our Terms and Conditions">Terms and Conditions</a>
|
||||||
|
and our commitment to your privacy as outlined in our
|
||||||
|
<a href="#placeholder-privacy-policy" class="privacy-link" aria-label="Read our Privacy Policy">Privacy Policy</a>.
|
||||||
|
</p>
|
||||||
|
<p class="disclaimer">
|
||||||
|
<small>
|
||||||
|
Your financial data is handled with the highest standards of security and encryption. For detailed information on data privacy, security measures, and your rights, please review our full legal documentation linked above.
|
||||||
|
</small>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="login-prompt-section">
|
||||||
|
<div class="login-prompt-container">
|
||||||
|
<h2 class="login-prompt-heading">Welcome Back!</h2>
|
||||||
|
<p class="login-prompt-description">
|
||||||
|
Access your personalized financial dashboard and smart investment insights.
|
||||||
|
</p>
|
||||||
|
<form class="login-form">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email-address" class="form-label">Email Address</label>
|
||||||
|
<input type="email" id="email-address" name="email" placeholder="your.email@example.com" required="" class="form-input">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="password" class="form-label">Password</label>
|
||||||
|
<input type="password" id="password" name="password" placeholder="••••••••" required="" class="form-input">
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="login-button">Login</button>
|
||||||
|
<div class="form-links">
|
||||||
|
<a href="#" class="forgot-password-link">Forgot Password?</a>
|
||||||
|
<span class="separator">|</span>
|
||||||
|
<a href="#" class="signup-link">Don't have an account? Sign Up</a>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="footer-container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-grid">
|
||||||
|
<div class="footer-column footer-about">
|
||||||
|
<div class="footer-logo">Your Finance App Logo</div>
|
||||||
|
<p class="footer-description">Manage your money, forecast your future, and invest smarter with AI-driven insights.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-column">
|
||||||
|
<h3 class="footer-heading">Features</h3>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li class="footer-nav-item"><a href="#track-expenses" class="footer-link">Track Expenses</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#forecast-savings" class="footer-link">Forecast Savings</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#investment-advice" class="footer-link">Investment Advice</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#bank-linking" class="footer-link">Bank & Investment Linking</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-column">
|
||||||
|
<h3 class="footer-heading">Company</h3>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li class="footer-nav-item"><a href="#about-us" class="footer-link">About Us</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#careers" class="footer-link">Careers</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#contact-us" class="footer-link">Contact Us</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-column">
|
||||||
|
<h3 class="footer-heading">Legal</h3>
|
||||||
|
<ul class="footer-nav-list">
|
||||||
|
<li class="footer-nav-item"><a href="#privacy-policy" class="footer-link">Privacy Policy</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#terms-of-service" class="footer-link">Terms of Service</a></li>
|
||||||
|
<li class="footer-nav-item"><a href="#disclaimer" class="footer-link">Disclaimer</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<div class="footer-copyright">
|
||||||
|
<p>© 2023 Your Finance App. All rights reserved.</p>
|
||||||
|
<p class="footer-tech-info">Powered by Plaid and AI.</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-social-links">
|
||||||
|
<a href="#" class="footer-social-icon">Social Icon 1</a>
|
||||||
|
<a href="#" class="footer-social-icon">Social Icon 2</a>
|
||||||
|
<a href="#" class="footer-social-icon">Social Icon 3</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
document.body.style.display = 'none';
|
||||||
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
864
style.css
Normal file
864
style.css
Normal file
@ -0,0 +1,864 @@
|
|||||||
|
.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