| | <!DOCTYPE html> |
| | <html lang="en" class="dark"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Order Confirmation - YourHand.co</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <style> |
| | .gradient-text { |
| | background: linear-gradient(90deg, #d946ef 0%, #a855f7 100%); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| | .checkmark { |
| | width: 100px; |
| | height: 100px; |
| | border-radius: 50%; |
| | display: block; |
| | stroke-width: 5; |
| | stroke: #a855f7; |
| | stroke-miterlimit: 10; |
| | margin: 0 auto; |
| | animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both; |
| | } |
| | @keyframes fill { |
| | 100% { |
| | box-shadow: inset 0px 0px 0px 50px rgba(168, 85, 247, 0.1); |
| | } |
| | } |
| | @keyframes scale { |
| | 0%, 100% { |
| | transform: none; |
| | } |
| | 50% { |
| | transform: scale3d(1.1, 1.1, 1); |
| | } |
| | } |
| | </style> |
| | </head> |
| | <body class="bg-gray-900 text-gray-100 min-h-screen"> |
| | <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3"> |
| | <div class="max-w-7xl mx-auto flex items-center justify-between"> |
| | <div class="flex items-center space-x-2"> |
| | <i data-feather="hand" class="text-primary-500 w-8 h-8"></i> |
| | <span class="text-2xl font-bold gradient-text">YourHand.co</span> |
| | </div> |
| | <a href="index.html" class="text-primary-500 hover:text-primary-400 transition"> |
| | Continue Shopping |
| | </a> |
| | </div> |
| | </nav> |
| |
|
| | <section class="max-w-4xl mx-auto py-16 px-4 text-center"> |
| | <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> |
| | <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/> |
| | <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> |
| | </svg> |
| | |
| | <h1 class="text-4xl font-bold mt-8 mb-4">Order Confirmed!</h1> |
| | <p class="text-xl text-gray-300 mb-8">Thank you for your purchase</p> |
| | |
| | <div class="bg-gray-800 rounded-xl p-8 max-w-lg mx-auto mb-8 text-left"> |
| | <h2 class="text-2xl font-bold mb-6">Order Details</h2> |
| | |
| | <div class="flex justify-between mb-2"> |
| | <span class="text-gray-400">Order Number</span> |
| | <span class="font-mono">#ORD-${Math.floor(100000 + Math.random() * 900000)}</span> |
| | </div> |
| | <div class="flex justify-between mb-2"> |
| | <span class="text-gray-400">Date</span> |
| | <span>${new Date().toLocaleDateString()}</span> |
| | </div> |
| | <div class="flex justify-between mb-2"> |
| | <span class="text-gray-400">Payment Method</span> |
| | <span class="flex items-center"> |
| | <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/stripe/stripe-original.svg" class="w-5 h-5 mr-2" /> |
| | Stripe |
| | </span> |
| | </div> |
| | <div class="flex justify-between text-lg font-bold mt-4 pt-4 border-t border-gray-700"> |
| | <span>Total</span> |
| | <span class="gradient-text">$${(Math.random() * 100 + 50).toFixed(2)}</span> |
| | </div> |
| | </div> |
| | |
| | <div class="flex flex-col sm:flex-row gap-4 justify-center"> |
| | <a href="index.html" class="bg-primary-500 hover:bg-primary-600 text-white font-bold py-3 px-6 rounded-lg transition"> |
| | Continue Shopping |
| | </a> |
| | <a href="order-history.html" class="bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition"> |
| | View Order History |
| | </a> |
| | </div> |
| | </section> |
| |
|
| | <script> |
| | feather.replace(); |
| | |
| | |
| | document.addEventListener('DOMContentLoaded', () => { |
| | const circle = document.querySelector('.checkmark__circle'); |
| | const check = document.querySelector('.checkmark__check'); |
| | |
| | circle.style.strokeDasharray = '166'; |
| | circle.style.strokeDashoffset = '166'; |
| | circle.style.animation = 'stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards'; |
| | |
| | check.style.strokeDasharray = '48'; |
| | check.style.strokeDashoffset = '48'; |
| | check.style.animation = 'stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards'; |
| | }); |
| | </script> |
| | </body> |
| | </html> |
