Ebilchuk/undefined
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Your Cart - Purple Pastures</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10</head>11<body class="bg-light-purple">12 <!-- Navigation -->13 <nav class="bg-farm-purple shadow-lg">14 <div class="max-w-6xl mx-auto px-4">15 <div class="flex justify-between">16 <div class="flex space-x-7">17 <div>18 <a href="index.html" class="flex items-center py-4 px-2">19 <span class="font-semibold text-white text-3xl">Purple Pastures</span>20 </a>21 </div>22 </div>23 <div class="hidden md:flex items-center space-x-1">24 <a href="index.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Home</a>25 <a href="products.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Products</a>26 <a href="cart.html" class="py-4 px-2 text-sun-yellow font-semibold border-b-4 border-sun-yellow">Cart</a>27 <a href="about.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">About</a>28 <a href="contact.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Contact</a>29 </div>30 <div class="md:hidden flex items-center">31 <button class="outline-none mobile-menu-button">32 <i data-feather="menu" class="text-white"></i>33 </button>34 </div>35 </div>36 </div>37 </nav>38 39 <!-- Cart Section -->40 <section class="py-12">41 <div class="container mx-auto px-6">42 <h2 class="text-3xl font-bold text-center text-farm-purple mb-8">Your Shopping Cart</h2>43 44 <div class="flex flex-col md:flex-row gap-8">45 <!-- Cart Items -->46 <div class="md:w-2/3">47 <div class="bg-white rounded-lg shadow-md p-6">48 <div id="cart-items" class="divide-y">49 <!-- Cart items will be inserted here by JavaScript -->50 <div class="text-center py-8">51 <i data-feather="shopping-cart" class="w-16 h-16 mx-auto text-gray-300 mb-4"></i>52 <p class="text-gray-500">Your cart is empty</p>53 </div>54 </div>55 </div>56 </div>57 58 <!-- Order Summary -->59 <div class="md:w-1/3">60 <div class="bg-white rounded-lg shadow-md p-6">61 <h3 class="text-xl font-semibold text-farm-purple mb-4">Order Summary</h3>62 63 <div class="flex justify-between mb-2">64 <span class="text-gray-600">Subtotal</span>65 <span id="subtotal" class="font-medium">$0.00</span>66 </div>67 <div class="flex justify-between mb-2">68 <span class="text-gray-600">Delivery</span>69 <span class="font-medium">$5.00</span>70 </div>71 <div class="border-t pt-2 mt-2">72 <div class="flex justify-between font-bold text-lg">73 <span>Total</span>74 <span id="total">$5.00</span>75 </div>76 </div>77 78 <button id="checkout-btn" class="w-full mt-6 px-6 py-3 bg-farm-purple text-white rounded hover:bg-purple-800 disabled:bg-gray-400 disabled:cursor-not-allowed" disabled>79 Proceed to Checkout80 </button>81 </div>82 </div>83 </div>84 </div>85 </section>86 87 <script>88 document.addEventListener('DOMContentLoaded', function() {89 const cart = JSON.parse(localStorage.getItem('cart')) || [];90 const cartItemsEl = document.getElementById('cart-items');91 const subtotalEl = document.getElementById('subtotal');92 const totalEl = document.getElementById('total');93 const checkoutBtn = document.getElementById('checkout-btn');94 95 if (cart.length > 0) {96 cartItemsEl.innerHTML = '';97 let subtotal = 0;98 99 cart.forEach((item, index) => {100 subtotal += item.price;101 102 const itemEl = document.createElement('div');103 itemEl.className = 'py-4 flex items-center';104 itemEl.innerHTML = `105 <img src="${item.image}" alt="${item.name}" class="w-16 h-16 object-cover rounded mr-4">106 <div class="flex-grow">107 <h4 class="font-medium">${item.name}</h4>108 <p class="text-gray-600">$${item.price.toFixed(2)}</p>109 </div>110 <button class="remove-item text-red-500 hover:text-red-700" data-index="${index}">111 <i data-feather="trash-2"></i>112 </button>113 `;114 cartItemsEl.appendChild(itemEl);115 });116 117 subtotalEl.textContent = `$${subtotal.toFixed(2)}`;118 totalEl.textContent = `$${(subtotal + 5).toFixed(2)}`;119 checkoutBtn.disabled = false;120 121 // Add event listeners to remove buttons122 document.querySelectorAll('.remove-item').forEach(btn => {123 btn.addEventListener('click', function() {124 const index = parseInt(this.dataset.index);125 cart.splice(index, 1);126 localStorage.setItem('cart', JSON.stringify(cart));127 location.reload();128 });129 });130 }131 132 // Checkout button functionality133 checkoutBtn.addEventListener('click', function() {134 // In a real application, this would redirect to a checkout page135 alert('Proceeding to checkout! This would connect to a payment processor in a real application.');136 localStorage.removeItem('cart');137 location.reload();138 });139 140 feather.replace();141 });142 </script>143</body>144</html>