2025-08-04 11:44:00 +00:00
<!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" >
2025-08-05 06:00:54 +00:00
< meta charset = "UTF-8" >
2025-08-04 11:44:00 +00:00
< 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 >
2025-08-05 06:00:54 +00:00
< 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" / >
2025-08-04 11:44:00 +00:00
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
document.body.style.display = 'none';
setTimeout(function() { document.body.style.display = ''; }, 10);
});
< / script >
< / body >
< / html >
