337 lines
18 KiB
HTML
337 lines
18 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</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>Order Details Summary</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
<section class="order-summary-section" aria-labelledby="orderDetailsHeading">
|
|
<h2 id="orderDetailsHeading">Order Details Summary</h2>
|
|
|
|
<div class="order-header">
|
|
<div class="order-id">Order #<span id="orderId">ORD-20230412-876543</span></div>
|
|
<div class="order-date">Placed On: <time datetime="2023-04-12">April 12, 2023</time></div>
|
|
<div class="order-status">Status: <span class="status-badge delivered" id="orderStatus">Delivered</span></div>
|
|
</div>
|
|
|
|
<div class="order-items">
|
|
<h3>Items Ordered</h3>
|
|
<div class="product-item">
|
|
<img src="https://via.placeholder.com/80x80/f0f0f0/666666?text=Ring" alt="Elegant Diamond Ring">
|
|
<div class="product-info">
|
|
<h4>Elegant Diamond Ring</h4>
|
|
<p>SKU: DR-001 | Size: 7 | Material: 18K Gold</p>
|
|
</div>
|
|
<span class="product-quantity">Qty: 1</span>
|
|
<span class="product-price">₹125,000.00</span>
|
|
</div>
|
|
<div class="product-item">
|
|
<img src="https://via.placeholder.com/80x80/f0f0f0/666666?text=Necklace" alt="Classic Pearl Necklace">
|
|
<div class="product-info">
|
|
<h4>Classic Pearl Necklace</h4>
|
|
<p>SKU: PN-005 | Length: 18" | Material: Sterling Silver, Freshwater Pearl</p>
|
|
</div>
|
|
<span class="product-quantity">Qty: 1</span>
|
|
<span class="product-price">₹35,500.00</span>
|
|
</div>
|
|
<div class="product-item">
|
|
<img src="https://via.placeholder.com/80x80/f0f0f0/666666?text=Bangle" alt="Contemporary Gold Bangle">
|
|
<div class="product-info">
|
|
<h4>Contemporary Gold Bangle</h4>
|
|
<p>SKU: GB-010 | Size: S | Material: 22K Gold</p>
|
|
</div>
|
|
<span class="product-quantity">Qty: 2</span>
|
|
<span class="product-price">₹98,000.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="address-details">
|
|
<address class="address-card">
|
|
<h3>Shipping Address</h3>
|
|
<p><strong>John Doe</strong></p>
|
|
<p>123, Jewel Street</p>
|
|
<p>Diamond City, State, 12345</p>
|
|
<p>India</p>
|
|
<p>Phone: +91 98765 43210</p>
|
|
</address>
|
|
|
|
<address class="address-card">
|
|
<h3>Billing Address</h3>
|
|
<p><strong>John Doe</strong></p>
|
|
<p>123, Jewel Street</p>
|
|
<p>Diamond City, State, 12345</p>
|
|
<p>India</p>
|
|
<p>Phone: +91 98765 43210</p>
|
|
</address>
|
|
</div>
|
|
|
|
<div class="order-totals">
|
|
<h3>Order Summary</h3>
|
|
<div class="total-row">
|
|
<span>Subtotal (3 items)</span>
|
|
<span>₹258,500.00</span>
|
|
</div>
|
|
<div class="total-row">
|
|
<span>Shipping & Handling</span>
|
|
<span>₹500.00</span>
|
|
</div>
|
|
<div class="total-row">
|
|
<span>GST (18%)</span>
|
|
<span>₹46,530.00</span>
|
|
</div>
|
|
<div class="total-row">
|
|
<span>Discount</span>
|
|
<span>-₹10,000.00</span>
|
|
</div>
|
|
<div class="total-row">
|
|
<span>Grand Total</span>
|
|
<span>₹295,530.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="payment-method">
|
|
<p>Payment Method: <span id="paymentMethod">Credit Card (**** **** **** 1234)</span></p>
|
|
</div>
|
|
</section>
|
|
<section class="shipping-info-display">
|
|
<h2 class="shipping-info-title">Shipping Details</h2>
|
|
|
|
<div class="shipping-info-group recipient-info">
|
|
<h3 class="group-heading">Recipient Information</h3>
|
|
<dl class="detail-list">
|
|
<dt>Recipient Name:</dt>
|
|
<dd>Aarav Patel</dd>
|
|
|
|
<dt>Phone Number:</dt>
|
|
<dd>+91 98765 43210</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="shipping-info-group delivery-address">
|
|
<h3 class="group-heading">Delivery Address</h3>
|
|
<dl class="detail-list">
|
|
<dt>Address Line 1:</dt>
|
|
<dd>Plot No. 12, Jewellery Road</dd>
|
|
|
|
<dt>Address Line 2:</dt>
|
|
<dd>Near Gold Souk</dd>
|
|
|
|
<dt>City:</dt>
|
|
<dd>Mumbai</dd>
|
|
|
|
<dt>State / Province:</dt>
|
|
<dd>Maharashtra</dd>
|
|
|
|
<dt>Zip / Postal Code:</dt>
|
|
<dd>400001</dd>
|
|
|
|
<dt>Country:</dt>
|
|
<dd>India</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="shipping-info-group order-status">
|
|
<h3 class="group-heading">Order & Delivery Status</h3>
|
|
<dl class="detail-list">
|
|
<dt>Shipping Method:</dt>
|
|
<dd>Standard Delivery (5-7 Business Days)</dd>
|
|
|
|
<dt>Estimated Delivery:</dt>
|
|
<dd>July 25, 2024</dd>
|
|
|
|
<dt>Tracking Number:</dt>
|
|
<dd><a href="#" class="tracking-link">JP9876543210IN</a></dd>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
<section class="payment-confirmation-section">
|
|
<div class="container">
|
|
<div class="confirmation-header">
|
|
<span class="confirmation-icon">✓</span> <!-- Placeholder for a checkmark icon -->
|
|
<h1>Payment Confirmed!</h1>
|
|
<p class="lead-text">Thank you for your purchase. Your order has been successfully placed.</p>
|
|
</div>
|
|
|
|
<div class="confirmation-details">
|
|
<p>An email confirmation with details and a tracking link has been sent to <strong>[user.email@example.com]</strong>.</p>
|
|
|
|
<div class="order-summary-card">
|
|
<h2>Order Summary</h2>
|
|
<dl class="summary-list">
|
|
<dt>Order Number:</dt>
|
|
<dd>#ORD123456789</dd>
|
|
|
|
<dt>Order Date:</dt>
|
|
<dd>October 26, 2023</dd>
|
|
|
|
<dt>Payment Method:</dt>
|
|
<dd>Credit Card (**** **** **** 1234)</dd>
|
|
|
|
<dt>Total Amount:</dt>
|
|
<dd>₹ 24,999.00</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="delivery-info-card">
|
|
<h2>Delivery Information</h2>
|
|
<dl class="delivery-list">
|
|
<dt>Estimated Delivery:</dt>
|
|
<dd>Within 3-5 Business Days</dd>
|
|
|
|
<dt>Shipping Address:</dt>
|
|
<dd>
|
|
<address>
|
|
[User Name]<br>
|
|
[User Street Address]<br>
|
|
[User City], [User State] [User Postal Code]<br>
|
|
[User Country]
|
|
</address>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="confirmation-actions">
|
|
<h2>What's Next?</h2>
|
|
<ul class="action-list">
|
|
<li><a href="/order-history">View Order History</a></li>
|
|
<li><a href="/catalog">Continue Shopping</a></li>
|
|
<li><a href="/support">Need Help? Contact Support</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="next-steps-section">
|
|
<div class="container">
|
|
<h2 class="section-title">Your Next Steps</h2>
|
|
<p class="section-description">Thank you for your recent action! Here's what you can do next to ensure a smooth experience with your order.</p>
|
|
|
|
<div class="steps-grid">
|
|
<div class="step-item">
|
|
<div class="step-icon-placeholder">
|
|
<!-- Placeholder for Email Confirmation Icon -->
|
|
<span class="icon-placeholder">✉️</span>
|
|
</div>
|
|
<h3 class="step-title">1. Check Your Email</h3>
|
|
<p class="step-description">A detailed order confirmation has been sent to your registered email address. Please check your inbox (and spam folder).</p>
|
|
<a href="#" class="btn-secondary-ghost" aria-label="Review Email Confirmation Guide">Review Email Guide</a>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-icon-placeholder">
|
|
<!-- Placeholder for Order Tracking Icon -->
|
|
<span class="icon-placeholder">🚚</span>
|
|
</div>
|
|
<h3 class="step-title">2. Track Your Order</h3>
|
|
<p class="step-description">Monitor the real-time status of your order, from processing to dispatch and final delivery.</p>
|
|
<a href="/dashboard/orders" class="btn-secondary-ghost" aria-label="Go to Order History">Go to Order History</a>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-icon-placeholder">
|
|
<!-- Placeholder for Continue Shopping Icon -->
|
|
<span class="icon-placeholder">🛍️</span>
|
|
</div>
|
|
<h3 class="step-title">3. Explore More Jewelry</h3>
|
|
<p class="step-description">Discover our latest collections and exquisite new arrivals to find your next perfect piece.</p>
|
|
<a href="/catalog" class="btn-secondary-ghost" aria-label="Continue Browsing Catalog">Continue Shopping</a>
|
|
</div>
|
|
|
|
<div class="step-item">
|
|
<div class="step-icon-placeholder">
|
|
<!-- Placeholder for Support Contact Icon -->
|
|
<span class="icon-placeholder">📞</span>
|
|
</div>
|
|
<h3 class="step-title">4. Need Assistance?</h3>
|
|
<p class="step-description">Our dedicated customer support team is available to help with any questions or concerns.</p>
|
|
<a href="/contact" class="btn-secondary-ghost" aria-label="Contact Customer Support">Contact Support</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section id="customer-support" class="py-12 bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<h2 class="text-4xl font-bold text-center mb-8 text-gray-800">Customer Support</h2>
|
|
<p class="text-lg text-center text-gray-600 mb-12 max-w-3xl mx-auto">
|
|
Need assistance with your order, product information, or have a general inquiry? Our dedicated support team is here to help you.
|
|
</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
|
<!-- Contact Option: Live Chat -->
|
|
<div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
|
|
<div class="text-5xl text-gold-600 mb-4">💬</div>
|
|
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Live Chat</h3>
|
|
<p class="text-gray-600 mb-6">Connect with a support agent instantly for real-time assistance.</p>
|
|
<a href="#" class="btn btn-primary">Start Live Chat</a>
|
|
</div>
|
|
|
|
<!-- Contact Option: Email Support -->
|
|
<div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
|
|
<div class="text-5xl text-gold-600 mb-4">📧</div>
|
|
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Email Support</h3>
|
|
<p class="text-gray-600 mb-6">Send us an email with your questions. We aim to respond within 24 hours.</p>
|
|
<a href="mailto:support@jewelrystore.com" class="btn btn-secondary">support@jewelrystore.com</a>
|
|
</div>
|
|
|
|
<!-- Contact Option: Phone Support -->
|
|
<div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
|
|
<div class="text-5xl text-gold-600 mb-4">📞</div>
|
|
<h3 class="text-2xl font-semibold mb-2 text-gray-800">Phone Support</h3>
|
|
<p class="text-gray-600 mb-6">Call our dedicated support line during business hours.</p>
|
|
<a href="tel:+1234567890" class="btn btn-secondary">+1 (234) 567-890</a>
|
|
<p class="text-sm text-gray-500 mt-4">Mon-Fri: 9:00 AM - 6:00 PM EST</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Form Section -->
|
|
<div class="bg-white p-10 rounded-lg shadow-lg max-w-3xl mx-auto">
|
|
<h3 class="text-3xl font-semibold text-center mb-8 text-gray-800">Send Us a Message</h3>
|
|
<p class="text-center text-gray-600 mb-8">
|
|
Fill out the form below and we'll get back to you as soon as possible.
|
|
</p>
|
|
<form action="/submit-contact" method="POST" class="space-y-6">
|
|
<div>
|
|
<label for="name" class="block text-gray-700 text-sm font-medium mb-2">Your Name</label>
|
|
<input type="text" id="name" name="name" placeholder="John Doe" required="" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors">
|
|
</div>
|
|
<div>
|
|
<label for="email" class="block text-gray-700 text-sm font-medium mb-2">Your Email</label>
|
|
<input type="email" id="email" name="email" placeholder="john.doe@example.com" required="" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors">
|
|
</div>
|
|
<div>
|
|
<label for="subject" class="block text-gray-700 text-sm font-medium mb-2">Subject</label>
|
|
<input type="text" id="subject" name="subject" placeholder="Inquiry about Order #12345" required="" class="w-full px-4 py-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors">
|
|
</div>
|
|
<div>
|
|
<label for="message" class="block text-gray-700 text-sm font-medium mb-2">Your Message</label>
|
|
<textarea id="message" name="message" rows="6" placeholder="Please provide details about your request..." required="" class="w-full px-4 py-3 border border-gray-300 rounded-md resize-y focus:outline-none focus:ring-2 focus:ring-gold-500 transition-colors"></textarea>
|
|
</div>
|
|
<div class="text-center">
|
|
<button type="submit" class="btn btn-primary px-8 py-3 text-lg">Send Message</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<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">Gleam Jewels</h3><p class="footer-1-newsletter-text">Unlock exclusive sparkle! Join our newsletter for dazzling new arrivals, special offers, and styling tips.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Your email address"><button class="footer-1-subscribe-btn">Shine With Us</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Explore</h4><ul><li><a href="rings.html">Rings</a></li><li><a href="necklaces.html">Necklaces</a></li><li><a href="bangles.html">Bangles</a></li><li><a href="earrings.html">Earrings</a></li><li><a href="new_arrivals.html">New Arrivals</a></li></ul></div><div class="footer-1-column"><h4>Support</h4><ul><li><a href="about_us.html">About Us</a></li><li><a href="contact_us.html">Contact Us</a></li><li><a href="faq.html">FAQ</a></li><li><a href="shipping_returns.html">Shipping & Returns</a></li><li><a href="customer_dashboard.html">Customer Dashboard</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow 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>© 2025 Gleam Jewels. All rights reserved.</p><ul class="footer-1-links"><li><a href="product_detail.html">Product Detail</a></li><li><a href="order_confirmation.html">Order Confirmation</a></li><li><a href="admin_login.html">Admin Login</a></li><li><a href="admin_dashboard.html">Admin Dashboard</a></li><li><a href="admin_product_management.html">Admin Product Management</a></li><li><a href="admin_add_product.html">Admin Add Product</a></li><li><a href="admin_edit_product.html">Admin Edit Product</a></li><li><a href="admin_order_management.html">Admin Order Management</a></li><li><a href="admin_user_management.html">Admin User Management</a></li></ul></div></section></div>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Details Summary</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</div>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
document.body.style.display = 'none';
|
|
setTimeout(function() { document.body.style.display = ''; }, 10);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |