Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Checkout</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto p-8"> | |
| <h1 class="text-2xl font-bold mb-4">Checkout</h1> | |
| <div id="cart-summary" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-2">Cart Summary</h2> | |
| <table class="table-auto w-full"> | |
| <thead> | |
| <tr> | |
| <th class="px-4 py-2">Product</th> | |
| <th class="px-4 py-2">Name</th> | |
| <th class="px-4 py-2">Quantity</th> | |
| <th class="px-4 py-2">Price</th> | |
| </tr> | |
| </thead> | |
| <tbody id="cart-items"> | |
| </tbody> | |
| </table> | |
| <div class="mt-4 font-bold"> | |
| Total: <span id="cart-total"></span> | |
| </div> | |
| </div> | |
| <div id="shipping-info" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-2">Shipping Information</h2> | |
| <form id="shipping-form" class="max-w-lg"> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Name:</label> | |
| <input type="text" id="name" name="name" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="address" class="block text-gray-700 text-sm font-bold mb-2">Address:</label> | |
| <input type="text" id="address" name="address" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="city" class="block text-gray-700 text-sm font-bold mb-2">City:</label> | |
| <input type="text" id="city" name="city" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="zip" class="block text-gray-700 text-sm font-bold mb-2">Zip Code:</label> | |
| <input type="text" id="zip" name="zip" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| </form> | |
| </div> | |
| <div id="payment-info" class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-2">Payment Information</h2> | |
| <form id="payment-form" class="max-w-lg"> | |
| <div class="mb-4"> | |
| <label for="card-number" class="block text-gray-700 text-sm font-bold mb-2">Card Number:</label> | |
| <input type="text" id="card-number" name="card-number" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="expiry" class="block text-gray-700 text-sm font-bold mb-2">Expiry Date:</label> | |
| <input type="text" id="expiry" name="expiry" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="cvv" class="block text-gray-700 text-sm font-bold mb-2">CVV:</label> | |
| <input type="text" id="cvv" name="cvv" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"> | |
| </div> | |
| </form> | |
| </div> | |
| <button id="place-order" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Place Order</button> | |
| <div id="confirmation-message" class="mt-8 text-green-500 font-bold hidden"> | |
| Your order has been placed! | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function () { | |
| const cartItems = JSON.parse(localStorage.getItem('cart')) || []; | |
| const cartItemsContainer = document.getElementById('cart-items'); | |
| const cartTotalElement = document.getElementById('cart-total'); | |
| const placeOrderButton = document.getElementById('place-order'); | |
| const confirmationMessage = document.getElementById('confirmation-message'); | |
| let cartTotal = 0; | |
| cartItems.forEach(item => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td class="px-4 py-2"><img src="${item.image}" alt="${item.name}" class="w-16 h-16"></td> | |
| <td class="px-4 py-2">${item.name}</td> | |
| <td class="px-4 py-2">${item.quantity}</td> | |
| <td class="px-4 py-2">$${item.price * item.quantity}</td> | |
| `; | |
| cartItemsContainer.appendChild(row); | |
| cartTotal += item.price * item.quantity; | |
| }); | |
| cartTotalElement.textContent = '$' + cartTotal; | |
| placeOrderButton.addEventListener('click', function () { | |
| confirmationMessage.classList.remove('hidden'); | |
| localStorage.removeItem('cart'); | |
| cartItemsContainer.innerHTML = ''; | |
| cartTotalElement.textContent = '$0'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |