Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Order Confirmation</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.6s ease-out forwards; | |
| } | |
| .delay-1 { animation-delay: 0.2s; } | |
| .delay-2 { animation-delay: 0.4s; } | |
| .delay-3 { animation-delay: 0.6s; } | |
| .delay-4 { animation-delay: 0.8s; } | |
| .delay-5 { animation-delay: 1s; } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .tracking-bar { | |
| height: 6px; | |
| background: linear-gradient(90deg, #4f46e5 0%, #10b981 100%); | |
| width: 25%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <div class="max-w-2xl mx-auto my-8 bg-white rounded-xl overflow-hidden shadow-lg"> | |
| <!-- Header with logo and order confirmation --> | |
| <div class="gradient-bg p-8 text-center"> | |
| <div class="animate-fade-in"> | |
| <div class="w-24 h-24 mx-auto bg-white rounded-full shadow-md flex items-center justify-center mb-6"> | |
| <i class="fas fa-check-circle text-5xl text-emerald-500"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Order Confirmed!</h1> | |
| <p class="text-gray-600 mb-6">Thank you for your purchase, <span class="font-semibold">Alex Johnson</span>!</p> | |
| <div class="bg-white rounded-lg p-4 inline-block shadow-sm"> | |
| <p class="text-sm text-gray-500">Order #</p> | |
| <p class="text-xl font-mono font-bold text-gray-800">W42-9X8P-77BQ</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order summary --> | |
| <div class="p-8 animate-fade-in delay-1"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-box-open text-emerald-500 mr-3"></i> | |
| Order Summary | |
| </h2> | |
| <div class="space-y-4 mb-8"> | |
| <!-- Product 1 --> | |
| <div class="product-card transition-all duration-300 flex items-center p-4 border rounded-lg hover:border-emerald-200"> | |
| <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800">Premium Wireless Headphones</h3> | |
| <p class="text-sm text-gray-500">Color: Black</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-semibold text-gray-800">$199.99</p> | |
| <p class="text-sm text-gray-500">Qty: 1</p> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="product-card transition-all duration-300 flex items-center p-4 border rounded-lg hover:border-emerald-200"> | |
| <div class="w-20 h-20 bg-gray-100 rounded-lg overflow-hidden mr-4"> | |
| <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="Product" class="w-full h-full object-cover"> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="font-medium text-gray-800">Smartphone Stand</h3> | |
| <p class="text-sm text-gray-500">Material: Bamboo</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="font-semibold text-gray-800">$24.99</p> | |
| <p class="text-sm text-gray-500">Qty: 2</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order totals --> | |
| <div class="border-t pt-6 animate-fade-in delay-2"> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span class="font-medium">$249.97</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Shipping</span> | |
| <span class="font-medium">Free</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span class="text-gray-600">Tax</span> | |
| <span class="font-medium">$20.00</span> | |
| </div> | |
| </div> | |
| <div class="flex justify-between border-t pt-4"> | |
| <span class="text-lg font-semibold">Total</span> | |
| <span class="text-lg font-bold text-emerald-600">$269.97</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shipping info --> | |
| <div class="bg-gray-50 p-8 animate-fade-in delay-3"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-truck text-indigo-500 mr-3"></i> | |
| Shipping Information | |
| </h2> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <p class="font-medium text-gray-800">Alex Johnson</p> | |
| <p class="text-gray-600">123 Main Street</p> | |
| <p class="text-gray-600">Apt 4B</p> | |
| <p class="text-gray-600">New York, NY 10001</p> | |
| <p class="text-gray-600">United States</p> | |
| <p class="text-gray-600 mt-2">Phone: (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-credit-card text-purple-500 mr-3"></i> | |
| Payment Method | |
| </h2> | |
| <div class="bg-white p-4 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-6 bg-gray-200 rounded mr-3 flex items-center justify-center"> | |
| <i class="fab fa-cc-visa text-blue-800"></i> | |
| </div> | |
| <p class="font-medium text-gray-800">VISA ending in 4242</p> | |
| </div> | |
| <p class="text-gray-600">Billing address matches shipping</p> | |
| <p class="text-gray-600 mt-2">Payment processed on July 15, 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Order tracking --> | |
| <div class="p-8 animate-fade-in delay-4"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-map-marker-alt text-amber-500 mr-3"></i> | |
| Order Tracking | |
| </h2> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> | |
| <span>Order placed</span> | |
| <span>Shipped</span> | |
| <span>In transit</span> | |
| <span>Delivered</span> | |
| </div> | |
| <div class="bg-gray-200 rounded-full overflow-hidden h-2 mb-2"> | |
| <div class="tracking-bar rounded-full h-full"></div> | |
| </div> | |
| <p class="text-sm text-gray-600">Your order is being processed and will ship within 24 hours.</p> | |
| </div> | |
| <button class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> | |
| <i class="fas fa-external-link-alt mr-2"></i> | |
| Track Your Order | |
| </button> | |
| </div> | |
| <!-- Footer with CTA --> | |
| <div class="gradient-bg p-8 text-center animate-fade-in delay-5"> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-4">Need help with your order?</h3> | |
| <p class="text-gray-600 mb-6">We're here to help! Contact our customer support team for any questions.</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="#" class="bg-white text-indigo-600 hover:bg-indigo-50 font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> | |
| <i class="fas fa-headset mr-2"></i> | |
| Contact Support | |
| </a> | |
| <a href="#" class="bg-white text-gray-800 hover:bg-gray-100 font-medium py-2 px-6 rounded-lg transition duration-300 flex items-center"> | |
| <i class="fas fa-shopping-bag mr-2"></i> | |
| Shop Again | |
| </a> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-200"> | |
| <div class="flex justify-center space-x-6 mb-4"> | |
| <a href="#" class="text-gray-500 hover:text-indigo-500"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-500"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-500"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-500 hover:text-indigo-500"> | |
| <i class="fab fa-pinterest"></i> | |
| </a> | |
| </div> | |
| <p class="text-sm text-gray-500">© 2023 YourBrand. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=WizardImon/order-confirmation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |