423 lines
22 KiB
HTML
423 lines
22 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard 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">Flipkart</div><ul class="nav-1-nav-links"><li><a href="index.html">Home</a></li><li><a href="product_listing_page.html">Product Listing Page</a></li><li><a href="cart_page.html">Cart Page</a></li><li><a href="login_page.html">Login Page</a></li><li><a href="dashboard_page.html">Dashboard Page</a></li><li><a href="signup_page.html">Signup Page</a></li></ul><div class="nav-1-nav-actions"><button class="nav-1-btn nav-1-outline">Join</button><button class="nav-1-btn nav-1-solid">Start</button></div></nav></div>
|
|
<section class="user-profile-card-section">
|
|
<div class="profile-card-header">
|
|
<div class="profile-avatar-wrapper">
|
|
<img src="https://via.placeholder.com/120x120?text=Profile" alt="User Profile Picture" class="profile-avatar">
|
|
</div>
|
|
<h3 class="profile-username">John Doe</h3>
|
|
<p class="profile-email-text">john.doe@example.com</p>
|
|
</div>
|
|
|
|
<nav class="profile-card-navigation">
|
|
<ul class="profile-nav-list">
|
|
<li class="profile-nav-item">
|
|
<a href="#my-orders" class="profile-nav-link current">
|
|
<span class="nav-icon-placeholder">📦</span> My Orders
|
|
</a>
|
|
</li>
|
|
<li class="profile-nav-item">
|
|
<a href="#wishlist" class="profile-nav-link">
|
|
<span class="nav-icon-placeholder">❤️</span> Wishlist
|
|
</a>
|
|
</li>
|
|
<li class="profile-nav-item">
|
|
<a href="#addresses" class="profile-nav-link">
|
|
<span class="nav-icon-placeholder">🏠</span> My Addresses
|
|
</a>
|
|
</li>
|
|
<li class="profile-nav-item">
|
|
<a href="#payment-methods" class="profile-nav-link">
|
|
<span class="nav-icon-placeholder">💳</span> Payment Methods
|
|
</a>
|
|
</li>
|
|
<li class="profile-nav-item">
|
|
<a href="#account-settings" class="profile-nav-link">
|
|
<span class="nav-icon-placeholder">⚙️</span> Account Settings
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="profile-card-actions">
|
|
<button class="profile-action-button primary">Edit Profile</button>
|
|
<button class="profile-action-button secondary">Logout</button>
|
|
</div>
|
|
</section>
|
|
<section class="order-history-section">
|
|
<div class="container">
|
|
<header class="order-history-header">
|
|
<h2 class="order-history-title">Your Order History</h2>
|
|
<p class="order-history-subtitle">Track your past orders and their details.</p>
|
|
</header>
|
|
|
|
<div class="order-history-filters-sort">
|
|
<div class="filter-group">
|
|
<label for="order-status-filter" class="filter-label">Filter by Status:</label>
|
|
<select id="order-status-filter" class="filter-select">
|
|
<option value="all">All Orders</option>
|
|
<option value="delivered">Delivered</option>
|
|
<option value="shipped">Shipped</option>
|
|
<option value="processing">Processing</option>
|
|
<option value="cancelled">Cancelled</option>
|
|
<option value="returned">Returned</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="order-time-filter" class="filter-label">Order placed in:</label>
|
|
<select id="order-time-filter" class="filter-select">
|
|
<option value="last-3-months">Last 3 Months</option>
|
|
<option value="2023">2023</option>
|
|
<option value="2022">2022</option>
|
|
<option value="all-time">All Time</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-history-table-responsive">
|
|
<table class="order-history-table">
|
|
<caption class="sr-only">List of your past orders</caption>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Order ID</th>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Total</th>
|
|
<th scope="col">Status</th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Order ID" class="order-id">#ORD123456789</td>
|
|
<td data-label="Date" class="order-date"><time datetime="2023-10-26">Oct 26, 2023</time></td>
|
|
<td data-label="Total" class="order-total">$125.00</td>
|
|
<td data-label="Status" class="order-status status-delivered">Delivered</td>
|
|
<td data-label="Actions" class="order-actions"><a href="/orders/ORD123456789" class="btn btn-primary view-details-btn">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID" class="order-id">#ORD987654321</td>
|
|
<td data-label="Date" class="order-date"><time datetime="2023-10-20">Oct 20, 2023</time></td>
|
|
<td data-label="Total" class="order-total">$75.50</td>
|
|
<td data-label="Status" class="order-status status-shipped">Shipped</td>
|
|
<td data-label="Actions" class="order-actions"><a href="/orders/ORD987654321" class="btn btn-primary view-details-btn">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID" class="order-id">#ORD112233445</td>
|
|
<td data-label="Date" class="order-date"><time datetime="2023-10-15">Oct 15, 2023</time></td>
|
|
<td data-label="Total" class="order-total">$200.00</td>
|
|
<td data-label="Status" class="order-status status-processing">Processing</td>
|
|
<td data-label="Actions" class="order-actions"><a href="/orders/ORD112233445" class="btn btn-primary view-details-btn">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID" class="order-id">#ORD554433221</td>
|
|
<td data-label="Date" class="order-date"><time datetime="2023-09-30">Sep 30, 2023</time></td>
|
|
<td data-label="Total" class="order-total">$45.99</td>
|
|
<td data-label="Status" class="order-status status-delivered">Delivered</td>
|
|
<td data-label="Actions" class="order-actions"><a href="/orders/ORD554433221" class="btn btn-primary view-details-btn">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID" class="order-id">#ORD678901234</td>
|
|
<td data-label="Date" class="order-date"><time datetime="2023-09-25">Sep 25, 2023</time></td>
|
|
<td data-label="Total" class="order-total">$30.00</td>
|
|
<td data-label="Status" class="order-status status-cancelled">Cancelled</td>
|
|
<td data-label="Actions" class="order-actions"><a href="/orders/ORD678901234" class="btn btn-primary view-details-btn">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID" class="order-id">#ORD001122334</td>
|
|
<td data-label="Date" class="order-date"><time datetime="2023-09-10">Sep 10, 2023</time></td>
|
|
<td data-label="Total" class="order-total">$88.25</td>
|
|
<td data-label="Status" class="order-status status-returned">Returned</td>
|
|
<td data-label="Actions" class="order-actions"><a href="/orders/ORD001122334" class="btn btn-primary view-details-btn">View Details</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<nav class="order-history-pagination" aria-label="Order history pagination">
|
|
<a href="#" class="pagination-link pagination-prev" aria-label="Previous page">Previous</a>
|
|
<span class="pagination-item pagination-current">1</span>
|
|
<a href="#" class="pagination-link">2</a>
|
|
<a href="#" class="pagination-link">3</a>
|
|
<span class="pagination-item pagination-ellipsis">...</span>
|
|
<a href="#" class="pagination-link">10</a>
|
|
<a href="#" class="pagination-link pagination-next" aria-label="Next page">Next</a>
|
|
</nav>
|
|
|
|
<div class="no-orders-message" style="display: none;">
|
|
<p>You haven't placed any orders yet. Start shopping to see your history here!</p>
|
|
<a href="/shop" class="btn btn-primary start-shopping-btn">Browse Products</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="wishlist-section">
|
|
<div class="container">
|
|
<h2>Wishlist / Saved Items (<span class="item-count">3</span> items)</h2>
|
|
|
|
<div class="wishlist-items-grid">
|
|
<article class="wishlist-item-card">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image" alt="Placeholder Product Image">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3>Product Name Placeholder 1</h3>
|
|
<p class="item-price">₹1,299</p>
|
|
<p class="item-original-price">₹2,500 <span class="discount">(48% off)</span></p>
|
|
<p class="item-delivery">Delivery by Thu, May 30</p>
|
|
</div>
|
|
<div class="item-actions">
|
|
<button class="action-button move-to-cart">Move to Cart</button>
|
|
<button class="action-button remove-item">Remove</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="wishlist-item-card">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image" alt="Placeholder Product Image">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3>Product Name Placeholder 2 - A Slightly Longer Title For Context</h3>
|
|
<p class="item-price">₹499</p>
|
|
<p class="item-original-price">₹999 <span class="discount">(50% off)</span></p>
|
|
<p class="item-delivery">Delivery by Mon, May 27</p>
|
|
</div>
|
|
<div class="item-actions">
|
|
<button class="action-button move-to-cart">Move to Cart</button>
|
|
<button class="action-button remove-item">Remove</button>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="wishlist-item-card">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/150x150?text=Product+Image" alt="Placeholder Product Image">
|
|
</div>
|
|
<div class="item-details">
|
|
<h3>Product Name Placeholder 3</h3>
|
|
<p class="item-price">₹7,999</p>
|
|
<p class="item-original-price">₹10,000 <span class="discount">(20% off)</span></p>
|
|
<p class="item-delivery">Delivery by Fri, May 31</p>
|
|
</div>
|
|
<div class="item-actions">
|
|
<button class="action-button move-to-cart">Move to Cart</button>
|
|
<button class="action-button remove-item">Remove</button>
|
|
</div>
|
|
</article>
|
|
|
|
<div class="empty-wishlist-message">
|
|
<p>Your Wishlist is empty!</p>
|
|
<p>Add items you like to keep them saved here.</p>
|
|
<a href="#" class="continue-shopping-button">Continue Shopping</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="address-management-section">
|
|
<div class="address-management-header">
|
|
<h2 class="section-title">My Addresses</h2>
|
|
<button class="add-address-button">+ Add New Address</button>
|
|
</div>
|
|
|
|
<div class="address-list-container">
|
|
<div class="address-card">
|
|
<div class="address-meta">
|
|
<h3 class="address-name">John Doe</h3>
|
|
<span class="address-type">Home</span>
|
|
</div>
|
|
<address class="address-details">
|
|
123 Main Street<br>
|
|
Apt 4B<br>
|
|
Anytown, CA 90210<br>
|
|
USA
|
|
</address>
|
|
<p class="address-phone">Phone: +1 (555) 123-4567</p>
|
|
<div class="address-actions">
|
|
<button class="action-button edit-button">Edit</button>
|
|
<button class="action-button delete-button">Delete</button>
|
|
<button class="action-button default-button is-default">Default</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="address-card">
|
|
<div class="address-meta">
|
|
<h3 class="address-name">Jane Smith</h3>
|
|
<span class="address-type">Work</span>
|
|
</div>
|
|
<address class="address-details">
|
|
456 Business Avenue<br>
|
|
Suite 100<br>
|
|
Metropolis, NY 10001<br>
|
|
USA
|
|
</address>
|
|
<p class="address-phone">Phone: +1 (555) 987-6543</p>
|
|
<div class="address-actions">
|
|
<button class="action-button edit-button">Edit</button>
|
|
<button class="action-button delete-button">Delete</button>
|
|
<button class="action-button default-button">Set as Default</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="no-addresses-message" style="display: none;">
|
|
<p>You have no saved addresses yet. Click "Add New Address" to get started.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Account Settings</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<div class="container">
|
|
<aside class="sidebar" role="navigation" aria-label="Account Navigation">
|
|
<div class="sidebar-header">
|
|
<img src="https://via.placeholder.com/48/CCCCCC/FFFFFF?text=P" alt="User Profile Picture">
|
|
<div>
|
|
<p>Hello,</p>
|
|
<strong>[User Name]</strong>
|
|
</div>
|
|
</div>
|
|
<nav class="sidebar-nav">
|
|
<ul>
|
|
<li>
|
|
<a href="#orders">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 18H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2zM5 8v8h14V8H5zm8 4h3v2h-3v-2zm-5 0h3v2H8v-2z"></path></svg>
|
|
My Orders
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#account-settings" class="active">
|
|
<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 2zm0 3c1.38 0 2.5 1.12 2.5 2.5S13.38 10 12 10 9.5 8.88 9.5 7.5 10.62 5 12 5zm0 14.2c-2.67 0-5.26-1.55-6.52-4.1C6.71 12.06 9.2 11.2 12 11.2s5.29.86 6.52 2.9C17.26 15.65 14.67 17.2 12 17.2z"></path></svg>
|
|
Account Settings
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#wishlist">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
|
|
Wishlist
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#notifications">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V9c0-3.07-1.63-5.64-4.5-6.32V2.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.18C7.64 3.36 6 5.93 6 9v7l-2 2v1h16v-1l-2-2zm-2 1H8v-7c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v7z"></path></svg>
|
|
Notifications
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#payments">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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 14H4v-6h16v6zm0-10H4V6h16v2z"></path></svg>
|
|
Payments
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#logout">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"></path></svg>
|
|
Logout
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</aside>
|
|
|
|
<main class="main-content" role="main">
|
|
<h1 id="account-settings">Account Settings</h1>
|
|
|
|
<section id="profile-information">
|
|
<h2>Profile Information</h2>
|
|
<div class="grid">
|
|
<div class="form-group">
|
|
<label for="firstName">First Name</label>
|
|
<input type="text" id="firstName" name="firstName" value="[Current First Name]" placeholder="Enter your first name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="lastName">Last Name</label>
|
|
<input type="text" id="lastName" name="lastName" value="[Current Last Name]" placeholder="Enter your last name">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email Address</label>
|
|
<input type="email" id="email" name="email" value="[Current Email]" placeholder="Enter your email address">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="mobile">Mobile Number</label>
|
|
<input type="tel" id="mobile" name="mobile" value="[Current Mobile]" placeholder="Enter your mobile number">
|
|
</div>
|
|
</div>
|
|
<button type="submit">Save Changes</button>
|
|
<div class="info-box">
|
|
<ul>
|
|
<li><strong>Note:</strong> Email and mobile can be updated.</li>
|
|
<li><strong>Verification:</strong> A verification link/OTP will be sent to the new contact details.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="password-management">
|
|
<h2>Password Management</h2>
|
|
<div class="grid">
|
|
<div class="form-group">
|
|
<label for="currentPassword">Current Password</label>
|
|
<input type="password" id="currentPassword" name="currentPassword" placeholder="Enter current password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="newPassword">New Password</label>
|
|
<input type="password" id="newPassword" name="newPassword" placeholder="Enter new password">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Confirm New Password</label>
|
|
<input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm new password">
|
|
</div>
|
|
</div>
|
|
<button type="submit">Change Password</button>
|
|
<a href="#" class="action-link">Forgot Password?</a>
|
|
</section>
|
|
|
|
<section id="address-management">
|
|
<h2>Address Management</h2>
|
|
<p>Manage your saved delivery addresses.</p>
|
|
<button type="button">View/Manage Addresses</button>
|
|
<div class="info-box">
|
|
<ul>
|
|
<li><strong>Default Address:</strong> [Placeholder for default address]</li>
|
|
<li><strong>Saved Addresses:</strong> [Number of saved addresses] addresses.</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="preferences">
|
|
<h2>Preferences</h2>
|
|
<div class="form-group">
|
|
<label for="notification-pref">Email Notification Preferences:</label>
|
|
<input type="checkbox" id="notification-pref" name="notification-pref" checked=""> Receive marketing emails and updates
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="sms-pref">SMS Notification Preferences:</label>
|
|
<input type="checkbox" id="sms-pref" name="sms-pref"> Receive SMS updates and offers
|
|
</div>
|
|
<button type="submit">Update Preferences</button>
|
|
</section>
|
|
|
|
<section id="deactivate-account">
|
|
<h2>Deactivate Account</h2>
|
|
<p>If you wish to temporarily deactivate your account, you can do so here.</p>
|
|
<button type="button" style="background-color: #f44336;">Deactivate Account</button>
|
|
<div class="info-box">
|
|
<p><strong>Warning:</strong> Deactivating your account will hide your profile and activity. You can reactivate it by logging back in.</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |