203 lines
10 KiB
HTML
203 lines
10 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 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">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="success-message-section">
|
|
<div class="success-message-container">
|
|
<div class="success-icon-placeholder">
|
|
<!-- Placeholder for a checkmark or success icon -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-8.98"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h2 class="success-heading">Order Placed Successfully!</h2>
|
|
<p class="success-text">Your order <strong class="order-id-placeholder">#123456</strong> has been confirmed and will be shipped soon. You will receive an email confirmation shortly.</p>
|
|
<div class="success-actions">
|
|
<a href="#" class="button primary-button">View Order Details</a>
|
|
<a href="#" class="button secondary-button">Continue Shopping</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="order-details-section">
|
|
<div class="container">
|
|
<div class="order-details-card">
|
|
<header class="order-header">
|
|
<div class="order-id-status">
|
|
<h2 class="order-id">Order ID: <strong>#ORD123456789</strong></h2>
|
|
<p class="order-status">Status: <span class="status-delivered">Delivered</span></p>
|
|
</div>
|
|
<p class="order-date">Ordered on: Jan 15, 2024</p>
|
|
</header>
|
|
|
|
<div class="order-summary">
|
|
<div class="summary-block">
|
|
<h3>Delivery Address</h3>
|
|
<p><strong>[Customer Name]</strong></p>
|
|
<p>[Street Address Line 1]</p>
|
|
<p>[Street Address Line 2 (Optional)]</p>
|
|
<p>[City], [State] - [Pincode]</p>
|
|
<p>Phone: [Mobile Number]</p>
|
|
</div>
|
|
<div class="summary-block">
|
|
<h3>Payment Information</h3>
|
|
<p><strong>Payment Method:</strong> Cash on Delivery (COD)</p>
|
|
<p><strong>Total Amount:</strong> ₹12,999.00</p>
|
|
<p><strong>Payment Status:</strong> Paid</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-items">
|
|
<h3>Items in Your Order</h3>
|
|
<div class="order-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/80" alt="Product 1 Placeholder">
|
|
</div>
|
|
<div class="item-info">
|
|
<h4>[Product Name 1]</h4>
|
|
<p>Quantity: 1</p>
|
|
<p>Seller: [Seller Name 1]</p>
|
|
</div>
|
|
<div class="item-price-qty">
|
|
<p class="item-price">₹7,999.00</p>
|
|
<p class="item-delivery-status">Delivered on Jan 20, 2024</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="order-item">
|
|
<div class="item-image">
|
|
<img src="https://via.placeholder.com/80" alt="Product 2 Placeholder">
|
|
</div>
|
|
<div class="item-info">
|
|
<h4>[Product Name 2 with Longer Title]</h4>
|
|
<p>Quantity: 2</p>
|
|
<p>Seller: [Seller Name 2]</p>
|
|
</div>
|
|
<div class="item-price-qty">
|
|
<p class="item-price">₹2,500.00 x 2 = ₹5,000.00</p>
|
|
<p class="item-delivery-status">Delivered on Jan 20, 2024</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="order-actions">
|
|
<a href="#" class="btn btn-primary">Download Invoice</a>
|
|
<a href="#" class="btn btn-secondary">Need Help?</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="order-track-section">
|
|
<div class="order-track-container">
|
|
<h2 class="order-track-title">Track Your Order</h2>
|
|
<p class="order-track-description">
|
|
Quickly check the status of your recent order. Enter your Order ID below or explore your complete order history.
|
|
</p>
|
|
<div class="order-track-form-group">
|
|
<label for="order-id-input" class="sr-only">Order ID</label>
|
|
<input type="text" id="order-id-input" placeholder="e.g., FLP123456789" aria-label="Enter your Order ID" class="order-track-input">
|
|
<button type="submit" class="order-track-button">Track Now</button>
|
|
</div>
|
|
<div class="order-track-history-link-wrapper">
|
|
<p>Looking for older orders? <a href="/my-orders" class="order-track-history-link">View Order History</a></p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="customer-support-info" class="customer-support-section">
|
|
<div class="container">
|
|
<h1 class="section-title">Customer Support & Help Center</h1>
|
|
|
|
<div class="search-help-container">
|
|
<form action="#" method="get" class="search-help-form">
|
|
<input type="search" placeholder="Search for help topics, orders, or FAQs..." aria-label="Search help topics">
|
|
<button type="submit">Search</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="help-topics-grid">
|
|
<div class="topic-card">
|
|
<h2 class="card-title">Order & Delivery</h2>
|
|
<p class="card-description">Track your order, modify delivery details, or report missing items.</p>
|
|
<a href="#" class="card-link">Manage Orders</a>
|
|
</div>
|
|
<div class="topic-card">
|
|
<h2 class="card-title">Returns & Refunds</h2>
|
|
<p class="card-description">Initiate a return, check refund status, or understand our policy.</p>
|
|
<a href="#" class="card-link">View Policy</a>
|
|
</div>
|
|
<div class="topic-card">
|
|
<h2 class="card-title">Payments & Wallet</h2>
|
|
<p class="card-description">Issues with payment methods, transactions, or digital wallet top-ups.</p>
|
|
<a href="#" class="card-link">Payment Help</a>
|
|
</div>
|
|
<div class="topic-card">
|
|
<h2 class="card-title">Cancellations</h2>
|
|
<p class="card-description">How to cancel an order or specific items from your purchase.</p>
|
|
<a href="#" class="card-link">Cancel Order</a>
|
|
</div>
|
|
<div class="topic-card">
|
|
<h2 class="card-title">Product Issues</h2>
|
|
<p class="card-description">Report a defective, damaged, or incorrect product received.</p>
|
|
<a href="#" class="card-link">Report Issue</a>
|
|
</div>
|
|
<div class="topic-card">
|
|
<h2 class="card-title">Account & Login</h2>
|
|
<p class="card-description">Help with account settings, password resets, or security concerns.</p>
|
|
<a href="#" class="card-link">Account Help</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="additional-support-section">
|
|
<h2 class="subsection-title">Need more help?</h2>
|
|
<div class="contact-options-list">
|
|
<div class="contact-option-item">
|
|
<h3 class="option-title">FAQs & Self-Help</h3>
|
|
<p class="option-description">Browse our comprehensive list of frequently asked questions.</p>
|
|
<a href="#" class="option-link">Explore FAQs</a>
|
|
</div>
|
|
<div class="contact-option-item">
|
|
<h3 class="option-title">Contact Us Directly</h3>
|
|
<p class="option-description">Speak to our support team via chat, email, or phone call.</p>
|
|
<a href="#" class="option-link">Get in Touch</a>
|
|
</div>
|
|
<div class="contact-option-item">
|
|
<h3 class="option-title">Service Centers</h3>
|
|
<p class="option-description">Locate authorized service centers for product repairs and support.</p>
|
|
<a href="#" class="option-link">Find Nearest</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="delivery-section">
|
|
<div class="delivery-header">
|
|
<h4 class="delivery-title">Estimated Delivery</h4>
|
|
</div>
|
|
<div class="delivery-details">
|
|
<div class="delivery-date-container">
|
|
<span class="delivery-icon-placeholder">📦</span> <!-- Placeholder for a package icon -->
|
|
<p class="delivery-date">
|
|
<strong class="date-range">DD MMM - DD MMM</strong>
|
|
</p>
|
|
</div>
|
|
<p class="delivery-note">Usually delivered in <span class="delivery-days">X-Y days</span>.</p>
|
|
<!-- Further details could go here, e.g., "Cash on Delivery available" -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |