377 lines
17 KiB
HTML
377 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>order_history</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-1-wrapper"><section class="text-1-section"><p class="text-1-tagline">Crafted with Passion</p><h2 class="text-1-heading">Discover Unique Handmade Treasures</h2><p class="text-1-description">Explore a curated collection of handcrafted goods made by talented artisans. From intricate jewelry to bespoke home decor, find one-of-a-kind items that tell a story and add a personal touch to your life.</p><div class="text-1-button-group"><button class="text-1-btn text-1-solid">Shop Now</button><button class="text-1-btn text-1-outline">Browse Categories</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 History</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Your Order History</h1>
|
||
|
|
|
||
|
|
<!-- Placeholder for header or navigation if applicable -->
|
||
|
|
<!-- <nav class="breadcrumbs">
|
||
|
|
<a href="#">Home</a> > <a href="#">My Account</a> > <span>Order History</span>
|
||
|
|
</nav> -->
|
||
|
|
|
||
|
|
<div class="order-list-header">
|
||
|
|
<div>Order ID</div>
|
||
|
|
<div>Order Date</div>
|
||
|
|
<div>Total</div>
|
||
|
|
<div>Status</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Sample Order Item 1 - Delivered -->
|
||
|
|
<article class="order-item">
|
||
|
|
<div class="order-summary" onclick="this.parentNode.classList.toggle('expanded')">
|
||
|
|
<div class="order-summary-left">
|
||
|
|
<h3>#1234567890</h3>
|
||
|
|
<p>Order Placed: January 15, 2024</p>
|
||
|
|
</div>
|
||
|
|
<div class="order-summary-right">
|
||
|
|
<span>Total: ₹2,499.00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-details">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<span class="item-name">Handmade Ceramic Mug - Blue Ocean</span>
|
||
|
|
<span class="item-quantity">Qty: 2</span>
|
||
|
|
<span class="item-price">₹999.00</span>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<span class="item-name">Artisanal Leather Journal - A5</span>
|
||
|
|
<span class="item-quantity">Qty: 1</span>
|
||
|
|
<span class="item-price">₹1,500.00</span>
|
||
|
|
</li>
|
||
|
|
<!-- Add more items as needed -->
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="order-footer">
|
||
|
|
<div>Payment Method: Credit Card (Stripe)</div>
|
||
|
|
<div class="status delivered">Status: Delivered</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Sample Order Item 2 - Pending -->
|
||
|
|
<article class="order-item">
|
||
|
|
<div class="order-summary" onclick="this.parentNode.classList.toggle('expanded')">
|
||
|
|
<div class="order-summary-left">
|
||
|
|
<h3>#0987654321</h3>
|
||
|
|
<p>Order Placed: February 28, 2024</p>
|
||
|
|
</div>
|
||
|
|
<div class="order-summary-right">
|
||
|
|
<span>Total: ₹850.00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-details">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<span class="item-name">Hand-painted Silk Scarf - Floral</span>
|
||
|
|
<span class="item-quantity">Qty: 1</span>
|
||
|
|
<span class="item-price">₹850.00</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="order-footer">
|
||
|
|
<div>Payment Method: UPI (Razorpay)</div>
|
||
|
|
<div class="status">Status: Pending</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Sample Order Item 3 - Cancelled -->
|
||
|
|
<article class="order-item">
|
||
|
|
<div class="order-summary" onclick="this.parentNode.classList.toggle('expanded')">
|
||
|
|
<div class="order-summary-left">
|
||
|
|
<h3>#5678901234</h3>
|
||
|
|
<p>Order Placed: March 10, 2024</p>
|
||
|
|
</div>
|
||
|
|
<div class="order-summary-right">
|
||
|
|
<span>Total: ₹1,200.00</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="order-details">
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<span class="item-name">Wooden Coasters Set - 4 pcs</span>
|
||
|
|
<span class="item-quantity">Qty: 1</span>
|
||
|
|
<span class="item-price">₹1,200.00</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="order-footer">
|
||
|
|
<div>Payment Method: Net Banking</div>
|
||
|
|
<div class="status cancelled">Status: Cancelled</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<!-- Example of an empty state for when there are no orders -->
|
||
|
|
<!-- Uncomment to see empty state -->
|
||
|
|
<!--
|
||
|
|
<div class="empty-state">
|
||
|
|
<h2>No Orders Yet!</h2>
|
||
|
|
<p>It looks like you haven't placed any orders with us. Start exploring our beautiful handmade crafts!</p>
|
||
|
|
<a href="/products">Shop Now</a>
|
||
|
|
</div>
|
||
|
|
-->
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Optional JavaScript for expanding/collapsing order details
|
||
|
|
// The inline onclick in order-summary already handles this for basic toggle.
|
||
|
|
// For more complex interactions, an event listener approach is better.
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const orderSummaries = document.querySelectorAll('.order-summary');
|
||
|
|
|
||
|
|
orderSummaries.forEach(summary => {
|
||
|
|
summary.addEventListener('click', () => {
|
||
|
|
const orderItem = summary.closest('.order-item');
|
||
|
|
orderItem.classList.toggle('expanded');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Order Filtering</title>
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<main class="order-filtering-container">
|
||
|
|
<h2>Your Order History</h2>
|
||
|
|
|
||
|
|
<aside class="order-filters">
|
||
|
|
<h3>Filter Orders</h3>
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="order-status">Order Status:</label>
|
||
|
|
<select id="order-status" name="order_status">
|
||
|
|
<option value="">All Statuses</option>
|
||
|
|
<option value="pending">Pending</option>
|
||
|
|
<option value="shipped">Shipped</option>
|
||
|
|
<option value="completed">Completed</option>
|
||
|
|
<option value="cancelled">Cancelled</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="date-from">Order Date From:</label>
|
||
|
|
<input type="date" id="date-from" name="date_from">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="date-to">Order Date To:</label>
|
||
|
|
<input type="date" id="date-to" name="date_to">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<label for="order-id-search">Search by Order ID:</label>
|
||
|
|
<input type="text" id="order-id-search" name="order_id_search" placeholder="e.g., #ORD12345">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<label>Price Range:</label>
|
||
|
|
<input type="range" id="price-range" name="price_range" min="0" max="1000" value="1000">
|
||
|
|
<p>Up to: <span id="price-display">$1000</span></p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="filter-group">
|
||
|
|
<button type="submit">Apply Filters</button>
|
||
|
|
<button type="reset" style="background-color: #6c757d; margin-top: 5px;">Clear Filters</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<section class="order-list">
|
||
|
|
<h3>Your Recent Orders</h3>
|
||
|
|
|
||
|
|
<article class="order-card">
|
||
|
|
<h4>
|
||
|
|
Order #ORD10001
|
||
|
|
<span class="status completed">Completed</span>
|
||
|
|
</h4>
|
||
|
|
<p><strong>Order Date:</strong> October 26, 2023</p>
|
||
|
|
<p><strong>Total Amount:</strong> $75.00</p>
|
||
|
|
<p><strong>Payment Method:</strong> Stripe</p>
|
||
|
|
<div class="order-items-summary">
|
||
|
|
Items: Craft Kit (x1), Watercolor Set (x1)
|
||
|
|
</div>
|
||
|
|
<div class="order-actions">
|
||
|
|
<a href="/order/ORD10001">View Details</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="order-card">
|
||
|
|
<h4>
|
||
|
|
Order #ORD10002
|
||
|
|
<span class="status shipped">Shipped</span>
|
||
|
|
</h4>
|
||
|
|
<p><strong>Order Date:</strong> October 20, 2023</p>
|
||
|
|
<p><strong>Total Amount:</strong> $45.50</p>
|
||
|
|
<p><strong>Payment Method:</strong> Razorpay</p>
|
||
|
|
<div class="order-items-summary">
|
||
|
|
Items: Hand-painted Mug (x2)
|
||
|
|
</div>
|
||
|
|
<div class="order-actions">
|
||
|
|
<a href="/order/ORD10002">Track Order</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="order-card">
|
||
|
|
<h4>
|
||
|
|
Order #ORD10003
|
||
|
|
<span class="status pending">Pending</span>
|
||
|
|
</h4>
|
||
|
|
<p><strong>Order Date:</strong> October 15, 2023</p>
|
||
|
|
<p><strong>Total Amount:</strong> $120.00</p>
|
||
|
|
<p><strong>Payment Method:</strong> PayPal</p>
|
||
|
|
<div class="order-items-summary">
|
||
|
|
Items: Custom Engraved Sign (x1)
|
||
|
|
</div>
|
||
|
|
<div class="order-actions">
|
||
|
|
<a href="/order/ORD10003">View Details</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="order-card">
|
||
|
|
<h4>
|
||
|
|
Order #ORD10004
|
||
|
|
<span class="status cancelled">Cancelled</span>
|
||
|
|
</h4>
|
||
|
|
<p><strong>Order Date:</strong> September 28, 2023</p>
|
||
|
|
<p><strong>Total Amount:</strong> $30.00</p>
|
||
|
|
<p><strong>Payment Method:</strong> Stripe</p>
|
||
|
|
<div class="order-items-summary">
|
||
|
|
Items: Macrame Wall Hanging (x1)
|
||
|
|
</div>
|
||
|
|
<div class="order-actions">
|
||
|
|
<a href="/order/ORD10004">View Details</a>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<nav class="pagination" aria-label="Order History Pagination">
|
||
|
|
<a href="#" aria-label="Previous Page">«</a>
|
||
|
|
<a href="#" class="active" aria-current="page">1</a>
|
||
|
|
<a href="#">2</a>
|
||
|
|
<a href="#">3</a>
|
||
|
|
<a href="#" aria-label="Next Page">»</a>
|
||
|
|
</nav>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// JavaScript for price range display (optional, for interactivity)
|
||
|
|
const priceRangeInput = document.getElementById('price-range');
|
||
|
|
const priceDisplaySpan = document.getElementById('price-display');
|
||
|
|
|
||
|
|
if (priceRangeInput && priceDisplaySpan) {
|
||
|
|
priceRangeInput.addEventListener('input', () => {
|
||
|
|
priceDisplaySpan.textContent = `$${priceRangeInput.value}`;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<section class="order-history-section">
|
||
|
|
<div class="container">
|
||
|
|
<h2 class="section-title">Your Recent Orders</h2>
|
||
|
|
<ul class="order-list">
|
||
|
|
<li class="order-item">
|
||
|
|
<div class="order-info">
|
||
|
|
<span class="order-id">#ORD-20231026-A1B2</span>
|
||
|
|
<span class="order-date">Placed on Oct 26, 2023</span>
|
||
|
|
<span class="order-total">Total: $<span class="placeholder-value">75.00</span></span>
|
||
|
|
</div>
|
||
|
|
<a href="/my-account/orders/ORD-20231026-A1B2" class="button view-details-link">View Details</a>
|
||
|
|
</li>
|
||
|
|
<li class="order-item">
|
||
|
|
<div class="order-info">
|
||
|
|
<span class="order-id">#ORD-20231020-C3D4</span>
|
||
|
|
<span class="order-date">Placed on Oct 20, 2023</span>
|
||
|
|
<span class="order-total">Total: $<span class="placeholder-value">120.50</span></span>
|
||
|
|
</div>
|
||
|
|
<a href="/my-account/orders/ORD-20231020-C3D4" class="button view-details-link">View Details</a>
|
||
|
|
</li>
|
||
|
|
<li class="order-item">
|
||
|
|
<div class="order-info">
|
||
|
|
<span class="order-id">#ORD-20231015-E5F6</span>
|
||
|
|
<span class="order-date">Placed on Oct 15, 2023</span>
|
||
|
|
<span class="order-total">Total: $<span class="placeholder-value">45.00</span></span>
|
||
|
|
</div>
|
||
|
|
<a href="/my-account/orders/ORD-20231015-E5F6" class="button view-details-link">View Details</a>
|
||
|
|
</li>
|
||
|
|
<!-- More order items can be added dynamically here -->
|
||
|
|
</ul>
|
||
|
|
<div class="all-orders-link-wrapper">
|
||
|
|
<a href="/my-account/orders" class="button primary-button">View All Order History</a>
|
||
|
|
</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>Pagination Section</title>
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<section class="pagination-section" aria-label="Product Page Navigation">
|
||
|
|
<nav class="pagination-nav" role="navigation">
|
||
|
|
<ul class="pagination-list">
|
||
|
|
<li class="pagination-item disabled">
|
||
|
|
<a href="#" class="pagination-link" aria-label="Previous Page">
|
||
|
|
<span aria-hidden="true">«</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="pagination-item active" aria-current="page">
|
||
|
|
<a href="#" class="pagination-link">1</a>
|
||
|
|
</li>
|
||
|
|
<li class="pagination-item">
|
||
|
|
<a href="#" class="pagination-link">2</a>
|
||
|
|
</li>
|
||
|
|
<li class="pagination-item">
|
||
|
|
<a href="#" class="pagination-link">3</a>
|
||
|
|
</li>
|
||
|
|
<li class="pagination-item">
|
||
|
|
<a href="#" class="pagination-link">4</a>
|
||
|
|
</li>
|
||
|
|
<li class="pagination-item">
|
||
|
|
<a href="#" class="pagination-link">5</a>
|
||
|
|
</li>
|
||
|
|
<li class="pagination-item">
|
||
|
|
<a href="#" class="pagination-link" aria-label="Next Page">
|
||
|
|
<span aria-hidden="true">»</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<div class="pagination-info">
|
||
|
|
Showing <span class="current-items">1-20</span> of <span class="total-items">100</span> products
|
||
|
|
</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">Handmade Haven</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Craft Lane, Artisan City NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1-800-CRAFTS-U</span><br></br><a href="mailto:info@relume.io">support@handmadehaven.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="#">Shop All</a></li><li><a href="#">New Arrivals</a></li><li><a href="#">Best Sellers</a></li><li><a href="#">About Us</a></li><li><a href="#">Gift Cards</a></li></ul><ul><li><a href="#">Help & FAQs</a></li><li><a href="#">Custom Creations</a></li><li><a href="#">Our Blog</a></li><li><a href="#">Become a Seller</a></li><li><a href="#">Contact Us</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Handmade Haven. All rights reserved.</p><ul class="footer-2-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>
|