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>Products - 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 <style>11 .product-card:hover {12 transform: translateY(-5px);13 box-shadow: 0 10px 25px rgba(106, 13, 173, 0.2);14 }15 .category-btn.active {16 background-color: #6A0DAD;17 color: white;18 }19 </style>20</head>21<body class="bg-light-purple">22 <!-- Navigation -->23 <nav class="bg-farm-purple shadow-lg">24 <div class="max-w-6xl mx-auto px-4">25 <div class="flex justify-between">26 <div class="flex space-x-7">27 <div>28 <a href="index.html" class="flex items-center py-4 px-2">29 <span class="font-semibold text-white text-3xl">Purple Pastures</span>30 </a>31 </div>32 </div>33 <div class="hidden md:flex items-center space-x-1">34 <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>35 <a href="products.html" class="py-4 px-2 text-sun-yellow font-semibold border-b-4 border-sun-yellow">Products</a>36 <a href="cart.html" class="py-4 px-2 text-white font-semibold hover:text-sun-yellow border-b-4 border-farm-purple hover:border-sun-yellow">Cart</a>37 <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>38 <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>39 </div>40 <div class="md:hidden flex items-center">41 <button class="outline-none mobile-menu-button">42 <i data-feather="menu" class="text-white"></i>43 </button>44 </div>45 </div>46 </div>47 </nav>48 49 <!-- Product Categories -->50 <section class="py-8 bg-white">51 <div class="container mx-auto px-6">52 <div class="flex flex-wrap justify-center gap-4">53 <button class="category-btn active px-4 py-2 rounded-full border border-farm-purple text-farm-purple hover:bg-farm-purple hover:text-white transition">54 All Products55 </button>56 <button class="category-btn px-4 py-2 rounded-full border border-farm-purple text-farm-purple hover:bg-farm-purple hover:text-white transition">57 Vegetables58 </button>59 <button class="category-btn px-4 py-2 rounded-full border border-farm-purple text-farm-purple hover:bg-farm-purple hover:text-white transition">60 Fruits61 </button>62 <button class="category-btn px-4 py-2 rounded-full border border-farm-purple text-farm-purple hover:bg-farm-purple hover:text-white transition">63 Dairy64 </button>65 <button class="category-btn px-4 py-2 rounded-full border border-farm-purple text-farm-purple hover:bg-farm-purple hover:text-white transition">66 Eggs67 </button>68 </div>69 </div>70 </section>71 72 <!-- Products Grid -->73 <section class="py-12">74 <div class="container mx-auto px-6">75 <h2 class="text-3xl font-bold text-center text-farm-purple mb-12">Our Farm-Fresh Selection</h2>76 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">77 <!-- Product 1 -->78 <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">79 <img src="http://static.photos/food/640x360/10" alt="Organic Eggplant" class="w-full h-48 object-cover">80 <div class="p-6">81 <div class="flex justify-between items-start">82 <h3 class="text-xl font-semibold text-gray-800 mb-2">Organic Eggplant</h3>83 <span class="bg-farm-purple text-white text-xs px-2 py-1 rounded">VEGETABLES</span>84 </div>85 <p class="text-gray-600 mb-4">Deep purple, glossy eggplants grown with organic methods.</p>86 <div class="flex justify-between items-center">87 <span class="text-xl font-bold text-farm-purple">$2.99/lb</span>88 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800 add-to-cart" 89 data-name="Organic Eggplant" 90 data-price="2.99" 91 data-image="http://static.photos/food/640x360/10">92 Add to Cart93 </button>94 </div>95 </div>96 </div>97 98 <!-- Product 2 -->99 <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">100 <img src="http://static.photos/food/640x360/11" alt="Purple Potatoes" class="w-full h-48 object-cover">101 <div class="p-6">102 <div class="flex justify-between items-start">103 <h3 class="text-xl font-semibold text-gray-800 mb-2">Purple Potatoes</h3>104 <span class="bg-farm-purple text-white text-xs px-2 py-1 rounded">VEGETABLES</span>105 </div>106 <p class="text-gray-600 mb-4">Heirloom purple potatoes with vibrant color and rich flavor.</p>107 <div class="flex justify-between items-center">108 <span class="text-xl font-bold text-farm-purple">$3.49/lb</span>109 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800 add-to-cart" 110 data-name="Purple Potatoes" 111 data-price="3.49" 112 data-image="http://static.photos/food/640x360/11">113 Add to Cart114 </button>115 </div>116 </div>117 </div>118 119 <!-- Product 3 -->120 <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">121 <img src="http://static.photos/food/640x360/12" alt="Lavender Honey" class="w-full h-48 object-cover">122 <div class="p-6">123 <div class="flex justify-between items-start">124 <h3 class="text-xl font-semibold text-gray-800 mb-2">Lavender Honey</h3>125 <span class="bg-farm-purple text-white text-xs px-2 py-1 rounded">SPECIALTY</span>126 </div>127 <p class="text-gray-600 mb-4">Artisanal honey from bees that feed on our lavender fields.</p>128 <div class="flex justify-between items-center">129 <span class="text-xl font-bold text-farm-purple">$8.99/jar</span>130 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800 add-to-cart" 131 data-name="Lavender Honey" 132 data-price="8.99" 133 data-image="http://static.photos/food/640x360/12">134 Add to Cart135 </button>136 </div>137 </div>138 </div>139 140 <!-- Product 4 -->141 <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">142 <img src="http://static.photos/food/640x360/13" alt="Purple Kale" class="w-full h-48 object-cover">143 <div class="p-6">144 <div class="flex justify-between items-start">145 <h3 class="text-xl font-semibold text-gray-800 mb-2">Purple Kale</h3>146 <span class="bg-farm-purple text-white text-xs px-2 py-1 rounded">VEGETABLES</span>147 </div>148 <p class="text-gray-600 mb-4">Nutrient-packed kale with beautiful purple-tinged leaves.</p>149 <div class="flex justify-between items-center">150 <span class="text-xl font-bold text-farm-purple">$4.29/bunch</span>151 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800 add-to-cart" 152 data-name="Purple Kale" 153 data-price="4.29" 154 data-image="http://static.photos/food/640x360/13">155 Add to Cart156 </button>157 </div>158 </div>159 </div>160 161 <!-- Product 5 -->162 <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">163 <img src="http://static.photos/food/640x360/14" alt="Blackberries" class="w-full h-48 object-cover">164 <div class="p-6">165 <div class="flex justify-between items-start">166 <h3 class="text-xl font-semibold text-gray-800 mb-2">Blackberries</h3>167 <span class="bg-farm-purple text-white text-xs px-2 py-1 rounded">FRUITS</span>168 </div>169 <p class="text-gray-600 mb-4">Juicy, sweet blackberries picked at peak ripeness.</p>170 <div class="flex justify-between items-center">171 <span class="text-xl font-bold text-farm-purple">$5.99/pint</span>172 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800 add-to-cart" 173 data-name="Blackberries" 174 data-price="5.99" 175 data-image="http://static.photos/food/640x360/14">176 Add to Cart177 </button>178 </div>179 </div>180 </div>181 182 <!-- Product 6 -->183 <div class="product-card bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300">184 <img src="http://static.photos/food/640x360/15" alt="Goat Cheese" class="w-full h-48 object-cover">185 <div class="p-6">186 <div class="flex justify-between items-start">187 <h3 class="text-xl font-semibold text-gray-800 mb-2">Goat Cheese</h3>188 <span class="bg-farm-purple text-white text-xs px-2 py-1 rounded">DAIRY</span>189 </div>190 <p class="text-gray-600 mb-4">Creamy, artisanal goat cheese from our happy goats.</p>191 <div class="flex justify-between items-center">192 <span class="text-xl font-bold text-farm-purple">$6.49/8oz</span>193 <button class="px-4 py-2 bg-farm-purple text-white rounded hover:bg-purple-800 add-to-cart" 194 data-name="Goat Cheese" 195 data-price="6.49" 196 data-image="http://static.photos/food/640x360/15">197 Add to Cart198 </button>199 </div>200 </div>201 </div>202 </div>203 </div>204 </section>205 206 <script>207 // Category filter functionality208 document.querySelectorAll('.category-btn').forEach(btn => {209 btn.addEventListener('click', function() {210 document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));211 this.classList.add('active');212 // Filtering logic would go here213 });214 });215 216 // Cart functionality217 document.querySelectorAll('.add-to-cart').forEach(btn => {218 btn.addEventListener('click', function() {219 const product = {220 name: this.dataset.name,221 price: parseFloat(this.dataset.price),222 image: this.dataset.image223 };224 225 let cart = JSON.parse(localStorage.getItem('cart')) || [];226 cart.push(product);227 localStorage.setItem('cart', JSON.stringify(cart));228 229 // Show a confirmation230 alert(`${product.name} added to cart!`);231 });232 });233 </script>234 <script>feather.replace();</script>235</body>236</html>