276 lines
16 KiB
HTML
276 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>user_dashboard</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Artisan Haven</div><ul class="nav-1-nav-links"><li><a href="home.html">Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Shop Crafts</a></li><li><a href="faq.html">FAQs</a></li><li class="nav-1-dropdown"><a href="#">More<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">Log In</button><button class="nav-1-btn nav-1-solid">Sign Up</button></div></nav></div>
|
|
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Handcrafted with Heart</p><h2 class="text-2-heading">Unearth Authentic Handmade Treasures</h2><p class="text-2-description">Explore a curated collection of unique, handcrafted goods made with passion and precision. From charming decor to personalized gifts, find pieces that tell a story and add warmth to your life.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Explore Our Collections</button><button class="text-2-btn text-2-outline">Discover Our Story</button></div></section></div>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Summary</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<div class="order-summary-container">
|
|
<header class="order-summary-header">
|
|
<h1>Your Order Summary</h1>
|
|
<p>Please review your order before confirming your purchase.</p>
|
|
</header>
|
|
|
|
<section class="order-section order-details">
|
|
<h2>Order Details</h2>
|
|
<div class="order-items">
|
|
<article class="order-item">
|
|
<div class="order-item-thumbnail" aria-hidden="true">Image</div>
|
|
<div class="order-item-details">
|
|
<h3>Hand-painted Ceramic Mug</h3>
|
|
<p>Quantity: 1 | Color: Blue | Size: Standard</p>
|
|
</div>
|
|
<div class="order-item-price">$24.99</div>
|
|
</article>
|
|
|
|
<article class="order-item">
|
|
<div class="order-item-thumbnail" aria-hidden="true">Image</div>
|
|
<div class="order-item-details">
|
|
<h3>Embroidered Tote Bag</h3>
|
|
<p>Quantity: 2 | Design: Floral | Material: Canvas</p>
|
|
</div>
|
|
<div class="order-item-price">$59.98</div>
|
|
</article>
|
|
|
|
<article class="order-item">
|
|
<div class="order-item-thumbnail" aria-hidden="true">Image</div>
|
|
<div class="order-item-details">
|
|
<h3>Artisanal Soap Bar Set</h3>
|
|
<p>Quantity: 1 | Scent: Lavender & Rose | Pack: 3</p>
|
|
</div>
|
|
<div class="order-item-price">$18.50</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="order-section order-summary-pricing">
|
|
<h2>Pricing Summary</h2>
|
|
<div class="summary-row">
|
|
<span>Subtotal:</span>
|
|
<span>$103.47</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Shipping:</span>
|
|
<span>$7.50</span>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>Discount:</span>
|
|
<span>-$5.00</span>
|
|
</div>
|
|
<div class="summary-row total">
|
|
<span>Order Total:</span>
|
|
<span>$105.97</span>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="order-section order-info">
|
|
<h2>Delivery & Payment</h2>
|
|
<div class="shipping-address">
|
|
<h3>Shipping Address</h3>
|
|
<address>
|
|
<p><strong>John Doe</strong></p>
|
|
<p>123 Craft Lane</p>
|
|
<p>Artisanal City, AC 98765</p>
|
|
<p>United States</p>
|
|
<p>Phone: (555) 123-4567</p>
|
|
</address>
|
|
</div>
|
|
<div class="payment-method">
|
|
<h3>Payment Method</h3>
|
|
<p><strong>Credit Card:</strong> **** **** **** 4242</p>
|
|
<p><strong>Payment Gateway:</strong> Stripe</p>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="order-actions">
|
|
<a href="#" class="btn-checkout">Proceed to Payment ($105.97)</a>
|
|
</footer>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
<section class="recent-orders-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Your Recent Orders</h2>
|
|
<div class="orders-table-wrapper">
|
|
<table class="orders-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Order ID</th>
|
|
<th>Date</th>
|
|
<th>Total</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Order ID">#ODR78901</td>
|
|
<td data-label="Date">2023-10-26</td>
|
|
<td data-label="Total">$125.00</td>
|
|
<td data-label="Status"><span class="status-badge status-delivered">Delivered</span></td>
|
|
<td data-label="Actions"><a href="/orders/ODR78901" class="btn-view-details">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID">#ODR78902</td>
|
|
<td data-label="Date">2023-10-25</td>
|
|
<td data-label="Total">$50.00</td>
|
|
<td data-label="Status"><span class="status-badge status-processing">Processing</span></td>
|
|
<td data-label="Actions"><a href="/orders/ODR78902" class="btn-view-details">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID">#ODR78903</td>
|
|
<td data-label="Date">2023-10-24</td>
|
|
<td data-label="Total">$200.00</td>
|
|
<td data-label="Status"><span class="status-badge status-shipped">Shipped</span></td>
|
|
<td data-label="Actions"><a href="/orders/ODR78903" class="btn-view-details">View Details</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Order ID">#ODR78904</td>
|
|
<td data-label="Date">2023-10-23</td>
|
|
<td data-label="Total">$75.50</td>
|
|
<td data-label="Status"><span class="status-badge status-cancelled">Cancelled</span></td>
|
|
<td data-label="Actions"><a href="/orders/ODR78904" class="btn-view-details">View Details</a></td>
|
|
</tr>
|
|
<!-- Example of a 'No Orders' state, to be toggled by JS/backend logic -->
|
|
<!--
|
|
<tr>
|
|
<td colspan="5" class="no-orders-message">You haven't placed any orders yet. Start browsing our crafts!</td>
|
|
</tr>
|
|
-->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="view-all-orders-link">
|
|
<a href="/order-history" class="btn btn-primary">View All Orders History</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="nav-1-wrapper"><nav class="nav-1-navbar"><div class="nav-1-logo">Crafted Gems</div><ul class="nav-1-nav-links"><li><a href="home.html">Shop Home</a></li><li><a href="about.html">Our Story</a></li><li><a href="contact.html">Get In Touch</a></li><li><a href="services.html">Gift Ideas</a></li><li><a href="faq.html">Help & FAQs</a></li><li class="nav-1-dropdown"><a href="#">Discover<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 Up</button><button class="nav-1-btn nav-1-solid">Shop Now</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>Account Settings Overview</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="account-settings-overview">
|
|
<header>
|
|
<h1>Account Settings Overview</h1>
|
|
</header>
|
|
|
|
<section class="settings-grid" aria-labelledby="settings-sections-heading">
|
|
<h2 id="settings-sections-heading" style="clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;">Manage your account details and preferences</h2>
|
|
|
|
<div class="setting-card" role="group" aria-labelledby="profile-settings-heading">
|
|
<h2 id="profile-settings-heading">Profile Information</h2>
|
|
<p>Update your personal details like name, email, and shipping address.</p>
|
|
<a href="#edit-profile" class="action-link">Edit Profile</a>
|
|
</div>
|
|
|
|
<div class="setting-card" role="group" aria-labelledby="security-settings-heading">
|
|
<h2 id="security-settings-heading">Security & Password</h2>
|
|
<p>Change your password and manage your account security settings.</p>
|
|
<a href="#change-password" class="action-link">Manage Security</a>
|
|
</div>
|
|
|
|
<div class="setting-card" role="group" aria-labelledby="payment-settings-heading">
|
|
<h2 id="payment-settings-heading">Payment Methods</h2>
|
|
<p>Add, edit, or remove your saved payment methods for faster checkout.</p>
|
|
<a href="#manage-payments" class="action-link">Manage Payments</a>
|
|
</div>
|
|
|
|
<div class="setting-card" role="group" aria-labelledby="address-book-heading">
|
|
<h2 id="address-book-heading">Address Book</h2>
|
|
<p>View and manage your saved shipping and billing addresses.</p>
|
|
<a href="#manage-addresses" class="action-link">Manage Addresses</a>
|
|
</div>
|
|
|
|
<div class="setting-card" role="group" aria-labelledby="notifications-heading">
|
|
<h2 id="notifications-heading">Notification Preferences</h2>
|
|
<p>Control the types of emails and notifications you receive from us.</p>
|
|
<a href="#manage-notifications" class="action-link">Manage Preferences</a>
|
|
</div>
|
|
|
|
<div class="setting-card" role="group" aria-labelledby="privacy-settings-heading">
|
|
<h2 id="privacy-settings-heading">Privacy Settings</h2>
|
|
<p>Review and adjust your privacy settings regarding data usage.</p>
|
|
<a href="#manage-privacy" class="action-link">Manage Privacy</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="order-history" aria-labelledby="order-history-heading">
|
|
<h2 id="order-history-heading">Your Recent Orders</h2>
|
|
<div class="order-list">
|
|
<!-- Example Order Item 1 -->
|
|
<div class="order-item">
|
|
<div>
|
|
<span class="order-id">Order #ABCD12345</span>
|
|
<p class="order-date">Placed on: Jan 15, 2024</p>
|
|
</div>
|
|
<div>
|
|
<p class="order-total">Total: $75.50</p>
|
|
<span class="order-status completed">Completed</span>
|
|
</div>
|
|
<a href="#order-details-12345" class="view-details-link">View Details</a>
|
|
</div>
|
|
|
|
<!-- Example Order Item 2 -->
|
|
<div class="order-item">
|
|
<div>
|
|
<span class="order-id">Order #EFGH67890</span>
|
|
<p class="order-date">Placed on: Feb 01, 2024</p>
|
|
</div>
|
|
<div>
|
|
<p class="order-total">Total: $42.00</p>
|
|
<span class="order-status shipped">Shipped</span>
|
|
</div>
|
|
<a href="#order-details-67890" class="view-details-link">View Details</a>
|
|
</div>
|
|
|
|
<!-- Example Order Item 3 -->
|
|
<div class="order-item">
|
|
<div>
|
|
<span class="order-id">Order #IJKL11223</span>
|
|
<p class="order-date">Placed on: Mar 10, 2024</p>
|
|
</div>
|
|
<div>
|
|
<p class="order-total">Total: $120.99</p>
|
|
<span class="order-status pending">Pending</span>
|
|
</div>
|
|
<a href="#order-details-11223" class="view-details-link">View Details</a>
|
|
</div>
|
|
|
|
<!-- Placeholder for no orders -->
|
|
<!--
|
|
<div class="no-orders">
|
|
<p>You haven't placed any orders yet. Start browsing our <a href="#products">products</a>!</p>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Crafted Wonders</h3><p class="footer-1-newsletter-text">Be the first to discover new handcrafted treasures and exclusive offers!</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"></input><button class="footer-1-subscribe-btn">Sign Up</button></div><p class="footer-1-privacy-note"><span>By signing up, you agree to our </span><a href="#">Privacy Policy</a><span> and consent to receive marketing emails.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="#">Shop All Crafts</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Featured Collections</a></li><li><a href="#">Gift Ideas</a></li><li><a href="#">Our Artisans</a></li></ul></div><div class="footer-1-column"><h4>Customer Care</h4><ul><li><a href="#">Contact Us</a></li><li><a href="#">Shipping Information</a></li><li><a href="#">Returns & Exchanges</a></li><li><a href="#">Order Tracking</a></li><li><a href="#">FAQs</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Connect With Us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2024 Crafted Wonders. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|
</body>
|
|
</html> |