| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Checkout | ShopSphere</title> |
| | <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | </head> |
| | <body class="bg-gray-50"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="py-8 px-4 max-w-7xl mx-auto"> |
| | <div class="flex flex-col md:flex-row gap-8"> |
| | |
| | <div class="md:w-2/3"> |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden"> |
| | <div class="px-6 py-4 border-b"> |
| | <h2 class="text-xl font-bold">Checkout</h2> |
| | </div> |
| | |
| | |
| | <div class="px-6 py-4 border-b"> |
| | <div class="flex justify-between items-center"> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">1</div> |
| | <span class="text-xs mt-1 font-medium">Shipping</span> |
| | </div> |
| | <div class="h-1 flex-1 bg-indigo-600 mx-2"></div> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center font-bold">2</div> |
| | <span class="text-xs mt-1 font-medium">Payment</span> |
| | </div> |
| | <div class="h-1 flex-1 bg-gray-200 mx-2"></div> |
| | <div class="flex flex-col items-center"> |
| | <div class="w-8 h-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center font-bold">3</div> |
| | <span class="text-xs mt-1 font-medium">Review</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="p-6"> |
| | <h3 class="text-lg font-medium mb-4">Shipping Address</h3> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| | <div> |
| | <label for="first-name" class="block text-sm font-medium text-gray-700 mb-1">First Name</label> |
| | <input type="text" id="first-name" class="input-field w-full"> |
| | </div> |
| | <div> |
| | <label for="last-name" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label> |
| | <input type="text" id="last-name" class="input-field w-full"> |
| | </div> |
| | </div> |
| | |
| | <div class="mb-4"> |
| | <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Street Address</label> |
| | <input type="text" id="address" class="input-field w-full"> |
| | </div> |
| | |
| | <div class="mb-4"> |
| | <label for="address2" class="block text-sm font-medium text-gray-700 mb-1">Apt, Suite, etc. (Optional)</label> |
| | <input type="text" id="address2" class="input-field w-full"> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> |
| | <div> |
| | <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country</label> |
| | <select id="country" class="input-field w-full"> |
| | <option>United States</option> |
| | <option>Canada</option> |
| | <option>United Kingdom</option> |
| | <option>Australia</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label for="state" class="block text-sm font-medium text-gray-700 mb-1">State/Region</label> |
| | <select id="state" class="input-field w-full"> |
| | <option>California</option> |
| | <option>New York</option> |
| | <option>Texas</option> |
| | <option>Florida</option> |
| | </select> |
| | </div> |
| | <div> |
| | <label for="zip" class="block text-sm font-medium text-gray-700 mb-1">ZIP/Postal Code</label> |
| | <input type="text" id="zip" class="input-field w-full"> |
| | </div> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number</label> |
| | <input type="tel" id="phone" class="input-field w-full"> |
| | </div> |
| | |
| | <h3 class="text-lg font-medium mb-4">Shipping Method</h3> |
| | |
| | <div class="space-y-3 mb-6"> |
| | <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-indigo-500"> |
| | <input type="radio" name="shipping" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"> |
| | <div class="ml-3"> |
| | <span class="block text-sm font-medium text-gray-700">Standard Shipping</span> |
| | <span class="block text-sm text-gray-500">3-5 business days • $5.99</span> |
| | </div> |
| | </label> |
| | <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-indigo-500"> |
| | <input type="radio" name="shipping" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"> |
| | <div class="ml-3"> |
| | <span class="block text-sm font-medium text-gray-700">Express Shipping</span> |
| | <span class="block text-sm text-gray-500">1-2 business days • $12.99</span> |
| | </div> |
| | </label> |
| | <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:border-indigo-500"> |
| | <input type="radio" name="shipping" class="h-4 w-4 text-indigo-600 border-gray-300 focus:ring-indigo-500"> |
| | <div class="ml-3"> |
| | <span class="block text-sm font-medium text-gray-700">Free Shipping</span> |
| | <span class="block text-sm text-gray-500">5-7 business days • Free</span> |
| | </div> |
| | </label> |
| | </div> |
| | |
| | <div class="flex justify-between pt-4 border-t border-gray-200"> |
| | <a href="/cart.html" class="text-indigo-600 hover:text-indigo-800 font-medium flex items-center"> |
| | <i data-feather="arrow-left" class="mr-2 w-4 h-4"></i> |
| | Back to Cart |
| | </a> |
| | <a href="/checkout-payment.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-md font-medium transition duration-300"> |
| | Continue to Payment |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="md:w-1/3"> |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden sticky top-24"> |
| | <div class="px-6 py-4 border-b"> |
| | <h2 class="text-xl font-bold">Order Summary</h2> |
| | </div> |
| | <div class="p-6"> |
| | <div class="space-y-4"> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Subtotal (3 items)</span> |
| | <span class="font-medium">$287.96</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Shipping</span> |
| | <span class="font-medium">$5.99</span> |
| | </div> |
| | <div class="flex justify-between"> |
| | <span class="text-gray-600">Tax</span> |
| | <span class="font-medium">$23.04</span> |
| | </div> |
| | <div class="flex justify-between border-t border-gray-200 pt-4"> |
| | <span class="text-lg font-bold">Order Total</span> |
| | <span class="text-lg font-bold">$316.99</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="border-t border-gray-200 p-6"> |
| | <h3 class="font-medium mb-4">Items (3)</h3> |
| | <div class="space-y-4"> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 w-16 h-16 bg-gray-100 rounded-md overflow-hidden"> |
| | <img src="http://static.photos/technology/200x200/1" alt="Product" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="text-sm font-medium">Wireless Headphones</h4> |
| | <p class="text-sm text-gray-500">1 × $99.99</p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 w-16 h-16 bg-gray-100 rounded-md overflow-hidden"> |
| | <img src="http://static.photos/technology/200x200/2" alt="Product" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="text-sm font-medium">Bluetooth Speaker</h4> |
| | <p class="text-sm text-gray-500">2 × $59.99</p> |
| | </div> |
| | </div> |
| | <div class="flex"> |
| | <div class="flex-shrink-0 w-16 h-16 bg-gray-100 rounded-md overflow-hidden"> |
| | <img src="http://static.photos/technology/200x200/3" alt="Product" class="w-full h-full object-cover"> |
| | </div> |
| | <div class="ml-4"> |
| | <h4 class="text-sm font-medium">Wireless Earbuds</h4> |
| | <p class="text-sm text-gray-500">1 × $67.99</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-lg shadow-md overflow-hidden mt-6"> |
| | <div class="px-6 py-4 border-b"> |
| | <h2 class="text-xl font-bold">Promo Code</h2> |
| | </div> |
| | <div class="p-6"> |
| | <div class="flex items-center justify-between bg-green-50 p-3 rounded-md"> |
| | <div class="flex items-center"> |
| | <i data-feather="check-circle" class="text-green-500 mr-2"></i> |
| | <span class="font-medium">SUMMER20</span> |
| | </div> |
| | <span class="text-green-600 font-medium">-$20.00</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </main> |
| | |
| | <custom-footer></custom-footer> |
| | |
| | <script src="components/navbar.js"></script> |
| | <script src="components/footer.js"></script> |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
