| <!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> |
