Hugging Face's logo

Spaces:
SimpleSam
/
grocery-app
Running

App Files Community
SimpleSam commited on
Commit
0ba060b
·
verified ·
1 Parent(s): 050a064

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +934 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Grocery App
3
- emoji: 🚀
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: grocery-app
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,934 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>QuickBite - Food & Grocery Delivery</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
12
+ }
13
+ .food-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
16
+ }
17
+ .map-container {
18
+ height: 300px;
19
+ background-color: #e5e7eb;
20
+ border-radius: 0.75rem;
21
+ position: relative;
22
+ overflow: hidden;
23
+ }
24
+ .map-placeholder {
25
+ position: absolute;
26
+ top: 0;
27
+ left: 0;
28
+ width: 100%;
29
+ height: 100%;
30
+ display: flex;
31
+ align-items: center;
32
+ justify-content: center;
33
+ background-color: #e5e7eb;
34
+ color: #6b7280;
35
+ font-weight: 500;
36
+ }
37
+ .modal {
38
+ transition: opacity 0.3s ease, visibility 0.3s ease;
39
+ }
40
+ .modal-hidden {
41
+ opacity: 0;
42
+ visibility: hidden;
43
+ }
44
+ .cart-item-enter {
45
+ animation: slideIn 0.3s forwards;
46
+ }
47
+ .cart-item-exit {
48
+ animation: slideOut 0.3s forwards;
49
+ }
50
+ @keyframes slideIn {
51
+ from { transform: translateX(100%); opacity: 0; }
52
+ to { transform: translateX(0); opacity: 1; }
53
+ }
54
+ @keyframes slideOut {
55
+ from { transform: translateX(0); opacity: 1; }
56
+ to { transform: translateX(100%); opacity: 0; }
57
+ }
58
+ </style>
59
+ </head>
60
+ <body class="gradient-bg min-h-screen">
61
+ <!-- Navigation -->
62
+ <nav class="bg-white shadow-lg">
63
+ <div class="max-w-6xl mx-auto px-4">
64
+ <div class="flex justify-between items-center py-4">
65
+ <div class="flex items-center space-x-4">
66
+ <div class="text-2xl font-bold text-indigo-600">QuickBite</div>
67
+ <div class="hidden md:flex items-center space-x-1">
68
+ <a href="#" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Home</a>
69
+ <a href="#restaurants" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Restaurants</a>
70
+ <a href="#groceries" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Groceries</a>
71
+ <a href="#stores" class="py-2 px-3 text-gray-700 hover:text-indigo-600 transition">Nearby Stores</a>
72
+ </div>
73
+ </div>
74
+ <div class="flex items-center space-x-4">
75
+ <button onclick="toggleCart()" class="relative p-2 text-gray-700 hover:text-indigo-600">
76
+ <i class="fas fa-shopping-cart text-xl"></i>
77
+ <span id="cart-count" class="absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
78
+ </button>
79
+ <button id="auth-btn" onclick="toggleAuthModal()" class="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition">Login</button>
80
+ <button class="md:hidden p-2 text-gray-700" onclick="toggleMobileMenu()">
81
+ <i class="fas fa-bars text-xl"></i>
82
+ </button>
83
+ </div>
84
+ </div>
85
+ </div>
86
+ <!-- Mobile menu -->
87
+ <div id="mobile-menu" class="hidden md:hidden bg-white px-4 pb-4">
88
+ <a href="#" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Home</a>
89
+ <a href="#restaurants" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Restaurants</a>
90
+ <a href="#groceries" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Groceries</a>
91
+ <a href="#stores" class="block py-2 text-gray-700 hover:text-indigo-600 transition">Nearby Stores</a>
92
+ </div>
93
+ </nav>
94
+
95
+ <!-- Hero Section -->
96
+ <section class="py-16 px-4">
97
+ <div class="max-w-6xl mx-auto">
98
+ <div class="flex flex-col md:flex-row items-center">
99
+ <div class="md:w-1/2 mb-8 md:mb-0">
100
+ <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Food & Groceries Delivered to Your Door</h1>
101
+ <p class="text-lg text-gray-600 mb-6">Order from your favorite restaurants and grocery stores with just a few taps.</p>
102
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
103
+ <button class="bg-indigo-600 text-white px-6 py-3 rounded-md hover:bg-indigo-700 transition">Order Now</button>
104
+ <button class="border border-indigo-600 text-indigo-600 px-6 py-3 rounded-md hover:bg-indigo-50 transition">Download App</button>
105
+ </div>
106
+ </div>
107
+ <div class="md:w-1/2">
108
+ <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Food delivery" class="rounded-lg shadow-xl w-full">
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </section>
113
+
114
+ <!-- Search Section -->
115
+ <section class="py-8 px-4 bg-white">
116
+ <div class="max-w-6xl mx-auto">
117
+ <div class="bg-white rounded-lg shadow-md p-6">
118
+ <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-4">
119
+ <div class="flex-1 relative">
120
+ <input type="text" placeholder="Search for restaurants or groceries..." class="w-full p-4 pl-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
121
+ <i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
122
+ </div>
123
+ <div class="relative w-full md:w-auto">
124
+ <select class="w-full p-4 border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-2 focus:ring-indigo-500">
125
+ <option>All Categories</option>
126
+ <option>Restaurants</option>
127
+ <option>Groceries</option>
128
+ <option>Pharmacies</option>
129
+ </select>
130
+ <i class="fas fa-chevron-down absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
131
+ </div>
132
+ <button class="w-full md:w-auto bg-indigo-600 text-white px-6 py-4 rounded-lg hover:bg-indigo-700 transition">Search</button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </section>
137
+
138
+ <!-- Restaurants Section -->
139
+ <section id="restaurants" class="py-12 px-4">
140
+ <div class="max-w-6xl mx-auto">
141
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">Popular Restaurants</h2>
142
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
143
+ <!-- Restaurant Card 1 -->
144
+ <div class="bg-white rounded-lg shadow-md overflow-hidden food-card transition duration-300">
145
+ <img src="https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Restaurant" class="w-full h-48 object-cover">
146
+ <div class="p-4">
147
+ <div class="flex justify-between items-start">
148
+ <h3 class="text-xl font-semibold text-gray-800">Gourmet Haven</h3>
149
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">4.8 ★</span>
150
+ </div>
151
+ <p class="text-gray-600 mt-1">Italian, Mediterranean</p>
152
+ <div class="flex items-center mt-2 text-yellow-500">
153
+ <i class="fas fa-star"></i>
154
+ <i class="fas fa-star"></i>
155
+ <i class="fas fa-star"></i>
156
+ <i class="fas fa-star"></i>
157
+ <i class="fas fa-star-half-alt"></i>
158
+ </div>
159
+ <div class="mt-4 flex justify-between items-center">
160
+ <span class="text-gray-700">$10 - $30</span>
161
+ <button onclick="addToCart('Margherita Pizza', 12.99, 'Gourmet Haven')" class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Restaurant Card 2 -->
167
+ <div class="bg-white rounded-lg shadow-md overflow-hidden food-card transition duration-300">
168
+ <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Restaurant" class="w-full h-48 object-cover">
169
+ <div class="p-4">
170
+ <div class="flex justify-between items-start">
171
+ <h3 class="text-xl font-semibold text-gray-800">Spice Kingdom</h3>
172
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">4.5 ★</span>
173
+ </div>
174
+ <p class="text-gray-600 mt-1">Indian, Asian</p>
175
+ <div class="flex items-center mt-2 text-yellow-500">
176
+ <i class="fas fa-star"></i>
177
+ <i class="fas fa-star"></i>
178
+ <i class="fas fa-star"></i>
179
+ <i class="fas fa-star"></i>
180
+ <i class="far fa-star"></i>
181
+ </div>
182
+ <div class="mt-4 flex justify-between items-center">
183
+ <span class="text-gray-700">$8 - $25</span>
184
+ <button onclick="addToCart('Butter Chicken', 14.99, 'Spice Kingdom')" class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <!-- Restaurant Card 3 -->
190
+ <div class="bg-white rounded-lg shadow-md overflow-hidden food-card transition duration-300">
191
+ <img src="https://images.unsplash.com/photo-1544025162-d76694265947?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Restaurant" class="w-full h-48 object-cover">
192
+ <div class="p-4">
193
+ <div class="flex justify-between items-start">
194
+ <h3 class="text-xl font-semibold text-gray-800">Burger Junction</h3>
195
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">4.7 ★</span>
196
+ </div>
197
+ <p class="text-gray-600 mt-1">American, Fast Food</p>
198
+ <div class="flex items-center mt-2 text-yellow-500">
199
+ <i class="fas fa-star"></i>
200
+ <i class="fas fa-star"></i>
201
+ <i class="fas fa-star"></i>
202
+ <i class="fas fa-star"></i>
203
+ <i class="fas fa-star-half-alt"></i>
204
+ </div>
205
+ <div class="mt-4 flex justify-between items-center">
206
+ <span class="text-gray-700">$5 - $20</span>
207
+ <button onclick="addToCart('Classic Cheeseburger', 8.99, 'Burger Junction')" class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ <div class="mt-8 text-center">
213
+ <button class="border border-indigo-600 text-indigo-600 px-6 py-2 rounded-md hover:bg-indigo-50 transition">View All Restaurants</button>
214
+ </div>
215
+ </div>
216
+ </section>
217
+
218
+ <!-- Groceries Section -->
219
+ <section id="groceries" class="py-12 px-4 bg-gray-50">
220
+ <div class="max-w-6xl mx-auto">
221
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">Fresh Groceries</h2>
222
+ <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
223
+ <!-- Grocery Item 1 -->
224
+ <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
225
+ <img src="https://images.unsplash.com/photo-1589927986089-35812388d1b4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Apples" class="w-full h-32 object-contain mb-3">
226
+ <h3 class="font-medium text-gray-800">Fresh Apples</h3>
227
+ <p class="text-indigo-600 font-semibold mt-1">$2.99/lb</p>
228
+ <button onclick="addToCart('Fresh Apples', 2.99, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
229
+ </div>
230
+
231
+ <!-- Grocery Item 2 -->
232
+ <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
233
+ <img src="https://images.unsplash.com/photo-1573246123716-6b1782bfd499?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1370&q=80" alt="Milk" class="w-full h-32 object-contain mb-3">
234
+ <h3 class="font-medium text-gray-800">Organic Milk</h3>
235
+ <p class="text-indigo-600 font-semibold mt-1">$4.49</p>
236
+ <button onclick="addToCart('Organic Milk', 4.49, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
237
+ </div>
238
+
239
+ <!-- Grocery Item 3 -->
240
+ <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
241
+ <img src="https://images.unsplash.com/photo-1603569283847-aa6ba8a8a022?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bread" class="w-full h-32 object-contain mb-3">
242
+ <h3 class="font-medium text-gray-800">Whole Wheat Bread</h3>
243
+ <p class="text-indigo-600 font-semibold mt-1">$3.29</p>
244
+ <button onclick="addToCart('Whole Wheat Bread', 3.29, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
245
+ </div>
246
+
247
+ <!-- Grocery Item 4 -->
248
+ <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
249
+ <img src="https://images.unsplash.com/photo-1576186726115-4d51596775d1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Eggs" class="w-full h-32 object-contain mb-3">
250
+ <h3 class="font-medium text-gray-800">Free Range Eggs</h3>
251
+ <p class="text-indigo-600 font-semibold mt-1">$5.99/dozen</p>
252
+ <button onclick="addToCart('Free Range Eggs', 5.99, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
253
+ </div>
254
+
255
+ <!-- Grocery Item 5 -->
256
+ <div class="bg-white rounded-lg shadow-md p-4 text-center food-card transition duration-300">
257
+ <img src="https://images.unsplash.com/photo-1603048719535-4b6b68c23805?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chicken" class="w-full h-32 object-contain mb-3">
258
+ <h3 class="font-medium text-gray-800">Boneless Chicken</h3>
259
+ <p class="text-indigo-600 font-semibold mt-1">$7.99/lb</p>
260
+ <button onclick="addToCart('Boneless Chicken', 7.99, 'QuickMart')" class="mt-2 bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Add to Cart</button>
261
+ </div>
262
+ </div>
263
+ <div class="mt-8 text-center">
264
+ <button class="border border-indigo-600 text-indigo-600 px-6 py-2 rounded-md hover:bg-indigo-50 transition">Browse All Groceries</button>
265
+ </div>
266
+ </div>
267
+ </section>
268
+
269
+ <!-- Nearby Stores Section -->
270
+ <section id="stores" class="py-12 px-4">
271
+ <div class="max-w-6xl mx-auto">
272
+ <h2 class="text-3xl font-bold text-gray-800 mb-8">Nearby Stores</h2>
273
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
274
+ <!-- Map Section -->
275
+ <div class="map-container">
276
+ <div class="map-placeholder">
277
+ <div class="text-center">
278
+ <i class="fas fa-map-marker-alt text-4xl mb-2"></i>
279
+ <p>Interactive map showing nearby stores</p>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Store List -->
285
+ <div>
286
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
287
+ <div class="p-4 flex items-center">
288
+ <img src="https://images.unsplash.com/photo-1601593763799-41a03c5c5393?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="QuickMart" class="w-16 h-16 object-cover rounded-md">
289
+ <div class="ml-4 flex-1">
290
+ <h3 class="font-semibold text-gray-800">QuickMart</h3>
291
+ <p class="text-sm text-gray-600">0.5 miles away • Groceries, Household</p>
292
+ <div class="flex items-center mt-1">
293
+ <span class="text-yellow-500 text-sm">4.4 ★</span>
294
+ <span class="mx-2 text-gray-300">•</span>
295
+ <span class="text-sm text-gray-600">15-30 min delivery</span>
296
+ </div>
297
+ </div>
298
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Shop Now</button>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4">
303
+ <div class="p-4 flex items-center">
304
+ <img src="https://images.unsplash.com/photo-1604719312566-8912e4227c9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="FreshMarket" class="w-16 h-16 object-cover rounded-md">
305
+ <div class="ml-4 flex-1">
306
+ <h3 class="font-semibold text-gray-800">FreshMarket</h3>
307
+ <p class="text-sm text-gray-600">1.2 miles away • Organic, Produce</p>
308
+ <div class="flex items-center mt-1">
309
+ <span class="text-yellow-500 text-sm">4.7 ★</span>
310
+ <span class="mx-2 text-gray-300">•</span>
311
+ <span class="text-sm text-gray-600">20-40 min delivery</span>
312
+ </div>
313
+ </div>
314
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Shop Now</button>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
319
+ <div class="p-4 flex items-center">
320
+ <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="PharmaPlus" class="w-16 h-16 object-cover rounded-md">
321
+ <div class="ml-4 flex-1">
322
+ <h3 class="font-semibold text-gray-800">PharmaPlus</h3>
323
+ <p class="text-sm text-gray-600">0.8 miles away • Pharmacy, Essentials</p>
324
+ <div class="flex items-center mt-1">
325
+ <span class="text-yellow-500 text-sm">4.3 ★</span>
326
+ <span class="mx-2 text-gray-300">•</span>
327
+ <span class="text-sm text-gray-600">25-45 min delivery</span>
328
+ </div>
329
+ </div>
330
+ <button class="bg-indigo-600 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-700 transition">Shop Now</button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- How It Works Section -->
339
+ <section class="py-12 px-4 bg-gray-50">
340
+ <div class="max-w-6xl mx-auto">
341
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">How It Works</h2>
342
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
343
+ <div class="text-center">
344
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
345
+ <i class="fas fa-store text-indigo-600 text-2xl"></i>
346
+ </div>
347
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">1. Choose Store</h3>
348
+ <p class="text-gray-600">Browse restaurants and grocery stores near you</p>
349
+ </div>
350
+ <div class="text-center">
351
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
352
+ <i class="fas fa-utensils text-indigo-600 text-2xl"></i>
353
+ </div>
354
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">2. Select Items</h3>
355
+ <p class="text-gray-600">Add your favorite food or groceries to your cart</p>
356
+ </div>
357
+ <div class="text-center">
358
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
359
+ <i class="fas fa-truck text-indigo-600 text-2xl"></i>
360
+ </div>
361
+ <h3 class="text-xl font-semibold text-gray-800 mb-2">3. Fast Delivery</h3>
362
+ <p class="text-gray-600">Track your order as it's prepared and delivered</p>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </section>
367
+
368
+ <!-- Footer -->
369
+ <footer class="bg-gray-800 text-white py-12 px-4">
370
+ <div class="max-w-6xl mx-auto">
371
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
372
+ <div>
373
+ <h3 class="text-xl font-bold mb-4">QuickBite</h3>
374
+ <p class="text-gray-400">Food and groceries delivered to your door in minutes.</p>
375
+ <div class="flex space-x-4 mt-4">
376
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
377
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
378
+ <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
379
+ </div>
380
+ </div>
381
+ <div>
382
+ <h4 class="font-semibold mb-4">Company</h4>
383
+ <ul class="space-y-2">
384
+ <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
385
+ <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
386
+ <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
387
+ <li><a href="#" class="text-gray-400 hover:text-white">Press</a></li>
388
+ </ul>
389
+ </div>
390
+ <div>
391
+ <h4 class="font-semibold mb-4">Support</h4>
392
+ <ul class="space-y-2">
393
+ <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
394
+ <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
395
+ <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
396
+ <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
397
+ </ul>
398
+ </div>
399
+ <div>
400
+ <h4 class="font-semibold mb-4">Download App</h4>
401
+ <div class="space-y-3">
402
+ <button class="flex items-center bg-black text-white px-4 py-2 rounded-md w-full">
403
+ <i class="fab fa-apple text-2xl mr-2"></i>
404
+ <div class="text-left">
405
+ <div class="text-xs">Download on the</div>
406
+ <div class="font-semibold">App Store</div>
407
+ </div>
408
+ </button>
409
+ <button class="flex items-center bg-black text-white px-4 py-2 rounded-md w-full">
410
+ <i class="fab fa-google-play text-2xl mr-2"></i>
411
+ <div class="text-left">
412
+ <div class="text-xs">Get it on</div>
413
+ <div class="font-semibold">Google Play</div>
414
+ </div>
415
+ </button>
416
+ </div>
417
+ </div>
418
+ </div>
419
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
420
+ <p>© 2023 QuickBite. All rights reserved.</p>
421
+ </div>
422
+ </div>
423
+ </footer>
424
+
425
+ <!-- Shopping Cart Sidebar -->
426
+ <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-full md:w-96 bg-white shadow-xl transform translate-x-full transition-transform duration-300 z-50 overflow-y-auto">
427
+ <div class="p-6">
428
+ <div class="flex justify-between items-center mb-6">
429
+ <h2 class="text-xl font-bold">Your Cart</h2>
430
+ <button onclick="toggleCart()" class="text-gray-500 hover:text-gray-700">
431
+ <i class="fas fa-times"></i>
432
+ </button>
433
+ </div>
434
+
435
+ <div id="cart-items" class="space-y-4">
436
+ <!-- Cart items will be added here dynamically -->
437
+ <div class="text-center py-8 text-gray-500" id="empty-cart-message">
438
+ <i class="fas fa-shopping-cart text-4xl mb-2"></i>
439
+ <p>Your cart is empty</p>
440
+ </div>
441
+ </div>
442
+
443
+ <div class="border-t border-gray-200 mt-6 pt-4">
444
+ <div class="flex justify-between mb-2">
445
+ <span class="text-gray-600">Subtotal</span>
446
+ <span id="cart-subtotal" class="font-semibold">$0.00</span>
447
+ </div>
448
+ <div class="flex justify-between mb-2">
449
+ <span class="text-gray-600">Delivery Fee</span>
450
+ <span id="delivery-fee" class="font-semibold">$2.99</span>
451
+ </div>
452
+ <div class="flex justify-between mb-4">
453
+ <span class="text-gray-600">Tax</span>
454
+ <span id="cart-tax" class="font-semibold">$0.00</span>
455
+ </div>
456
+ <div class="flex justify-between text-lg font-bold">
457
+ <span>Total</span>
458
+ <span id="cart-total">$0.00</span>
459
+ </div>
460
+
461
+ <button id="checkout-btn" onclick="checkout()" class="w-full bg-indigo-600 text-white py-3 rounded-md mt-6 hover:bg-indigo-700 transition disabled:opacity-50" disabled>
462
+ Proceed to Checkout
463
+ </button>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ <div id="cart-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleCart()"></div>
468
+
469
+ <!-- Auth Modal -->
470
+ <div id="auth-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
471
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4">
472
+ <div class="p-6">
473
+ <div class="flex justify-between items-center mb-6">
474
+ <h2 class="text-xl font-bold" id="auth-modal-title">Login</h2>
475
+ <button onclick="toggleAuthModal()" class="text-gray-500 hover:text-gray-700">
476
+ <i class="fas fa-times"></i>
477
+ </button>
478
+ </div>
479
+
480
+ <div id="login-form">
481
+ <div class="mb-4">
482
+ <label for="login-email" class="block text-gray-700 mb-2">Email</label>
483
+ <input type="email" id="login-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
484
+ </div>
485
+ <div class="mb-6">
486
+ <label for="login-password" class="block text-gray-700 mb-2">Password</label>
487
+ <input type="password" id="login-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
488
+ </div>
489
+ <button onclick="login()" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Login</button>
490
+ <p class="text-center mt-4 text-gray-600">
491
+ Don't have an account?
492
+ <button onclick="showRegisterForm()" class="text-indigo-600 hover:underline">Register</button>
493
+ </p>
494
+ </div>
495
+
496
+ <div id="register-form" class="hidden">
497
+ <div class="mb-4">
498
+ <label for="register-name" class="block text-gray-700 mb-2">Full Name</label>
499
+ <input type="text" id="register-name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
500
+ </div>
501
+ <div class="mb-4">
502
+ <label for="register-email" class="block text-gray-700 mb-2">Email</label>
503
+ <input type="email" id="register-email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
504
+ </div>
505
+ <div class="mb-4">
506
+ <label for="register-password" class="block text-gray-700 mb-2">Password</label>
507
+ <input type="password" id="register-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
508
+ </div>
509
+ <div class="mb-6">
510
+ <label for="register-confirm-password" class="block text-gray-700 mb-2">Confirm Password</label>
511
+ <input type="password" id="register-confirm-password" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
512
+ </div>
513
+ <button onclick="register()" class="w-full bg-indigo-600 text-white py-2 rounded-md hover:bg-indigo-700 transition">Register</button>
514
+ <p class="text-center mt-4 text-gray-600">
515
+ Already have an account?
516
+ <button onclick="showLoginForm()" class="text-indigo-600 hover:underline">Login</button>
517
+ </p>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+ <div id="auth-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="toggleAuthModal()"></div>
523
+
524
+ <!-- Checkout Modal -->
525
+ <div id="checkout-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
526
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 max-h-[90vh] overflow-y-auto">
527
+ <div class="p-6">
528
+ <div class="flex justify-between items-center mb-6">
529
+ <h2 class="text-xl font-bold">Checkout</h2>
530
+ <button onclick="closeCheckoutModal()" class="text-gray-500 hover:text-gray-700">
531
+ <i class="fas fa-times"></i>
532
+ </button>
533
+ </div>
534
+
535
+ <div class="mb-6">
536
+ <h3 class="font-semibold mb-2">Delivery Address</h3>
537
+ <div class="flex items-center space-x-2 mb-2">
538
+ <input type="radio" id="home-address" name="address" checked>
539
+ <label for="home-address">Home: 123 Main St, Apt 4B, New York, NY 10001</label>
540
+ </div>
541
+ <div class="flex items-center space-x-2">
542
+ <input type="radio" id="work-address" name="address">
543
+ <label for="work-address">Work: 456 Business Ave, Floor 12, New York, NY 10005</label>
544
+ </div>
545
+ <button class="text-indigo-600 text-sm mt-2 hover:underline">Add new address</button>
546
+ </div>
547
+
548
+ <div class="mb-6">
549
+ <h3 class="font-semibold mb-2">Delivery Time</h3>
550
+ <select class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
551
+ <option>ASAP (20-30 min)</option>
552
+ <option>Schedule for later</option>
553
+ </select>
554
+ </div>
555
+
556
+ <div class="mb-6">
557
+ <h3 class="font-semibold mb-2">Delivery Instructions</h3>
558
+ <textarea class="w-full p-3 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Add delivery instructions (optional)"></textarea>
559
+ </div>
560
+
561
+ <div class="mb-6">
562
+ <h3 class="font-semibold mb-2">Payment Method</h3>
563
+ <div class="space-y-2">
564
+ <div class="flex items-center space-x-2 p-3 border border-gray-300 rounded-md">
565
+ <input type="radio" id="credit-card" name="payment" checked>
566
+ <label for="credit-card" class="flex-1">Credit/Debit Card</label>
567
+ <i class="fab fa-cc-visa text-2xl text-blue-800"></i>
568
+ <i class="fab fa-cc-mastercard text-2xl text-red-600"></i>
569
+ </div>
570
+ <div class="flex items-center space-x-2 p-3 border border-gray-300 rounded-md">
571
+ <input type="radio" id="paypal" name="payment">
572
+ <label for="paypal" class="flex-1">PayPal</label>
573
+ <i class="fab fa-paypal text-2xl text-blue-700"></i>
574
+ </div>
575
+ <div class="flex items-center space-x-2 p-3 border border-gray-300 rounded-md">
576
+ <input type="radio" id="apple-pay" name="payment">
577
+ <label for="apple-pay" class="flex-1">Apple Pay</label>
578
+ <i class="fab fa-apple text-2xl"></i>
579
+ </div>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="border-t border-gray-200 pt-4 mb-6">
584
+ <div class="flex justify-between mb-2">
585
+ <span class="text-gray-600">Subtotal</span>
586
+ <span id="checkout-subtotal" class="font-semibold">$0.00</span>
587
+ </div>
588
+ <div class="flex justify-between mb-2">
589
+ <span class="text-gray-600">Delivery Fee</span>
590
+ <span id="checkout-delivery" class="font-semibold">$2.99</span>
591
+ </div>
592
+ <div class="flex justify-between mb-2">
593
+ <span class="text-gray-600">Tax</span>
594
+ <span id="checkout-tax" class="font-semibold">$0.00</span>
595
+ </div>
596
+ <div class="flex justify-between text-lg font-bold">
597
+ <span>Total</span>
598
+ <span id="checkout-total">$0.00</span>
599
+ </div>
600
+ </div>
601
+
602
+ <button onclick="placeOrder()" class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 transition">
603
+ Place Order
604
+ </button>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ <div id="checkout-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="closeCheckoutModal()"></div>
609
+
610
+ <!-- Order Confirmation Modal -->
611
+ <div id="confirmation-modal" class="fixed inset-0 flex items-center justify-center z-50 modal modal-hidden">
612
+ <div class="bg-white rounded-lg shadow-xl w-full max-w-md mx-4 text-center p-8">
613
+ <div class="mb-6">
614
+ <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
615
+ <i class="fas fa-check text-green-600 text-2xl"></i>
616
+ </div>
617
+ <h2 class="text-2xl font-bold mb-2">Order Confirmed!</h2>
618
+ <p class="text-gray-600">Your order has been placed successfully.</p>
619
+ </div>
620
+
621
+ <div class="bg-gray-50 rounded-lg p-4 mb-6">
622
+ <div class="flex justify-between mb-2">
623
+ <span class="text-gray-600">Order #</span>
624
+ <span class="font-semibold">QB-284759</span>
625
+ </div>
626
+ <div class="flex justify-between mb-2">
627
+ <span class="text-gray-600">Estimated Delivery</span>
628
+ <span class="font-semibold">25-35 minutes</span>
629
+ </div>
630
+ <div class="flex justify-between">
631
+ <span class="text-gray-600">Total</span>
632
+ <span class="font-semibold" id="confirmation-total">$0.00</span>
633
+ </div>
634
+ </div>
635
+
636
+ <button onclick="closeConfirmationModal()" class="w-full bg-indigo-600 text-white py-3 rounded-md hover:bg-indigo-700 transition">
637
+ Track My Order
638
+ </button>
639
+ </div>
640
+ </div>
641
+ <div id="confirmation-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden" onclick="closeConfirmationModal()"></div>
642
+
643
+ <script>
644
+ // Cart functionality
645
+ let cart = [];
646
+ let isLoggedIn = false;
647
+ let currentUser = null;
648
+
649
+ // Mobile menu toggle
650
+ function toggleMobileMenu() {
651
+ const menu = document.getElementById('mobile-menu');
652
+ menu.classList.toggle('hidden');
653
+ }
654
+
655
+ // Shopping cart toggle
656
+ function toggleCart() {
657
+ const sidebar = document.getElementById('cart-sidebar');
658
+ const overlay = document.getElementById('cart-overlay');
659
+ sidebar.classList.toggle('translate-x-full');
660
+ overlay.classList.toggle('hidden');
661
+
662
+ // Update cart totals when opening
663
+ if (!sidebar.classList.contains('translate-x-full')) {
664
+ updateCartTotals();
665
+ }
666
+ }
667
+
668
+ // Add item to cart
669
+ function addToCart(itemName, price, storeName) {
670
+ const item = {
671
+ id: Date.now(),
672
+ name: itemName,
673
+ price: price,
674
+ store: storeName,
675
+ quantity: 1
676
+ };
677
+
678
+ cart.push(item);
679
+ updateCartUI();
680
+ updateCartCount();
681
+
682
+ // Show cart if it's hidden
683
+ const sidebar = document.getElementById('cart-sidebar');
684
+ if (sidebar.classList.contains('translate-x-full')) {
685
+ toggleCart();
686
+ }
687
+ }
688
+
689
+ // Update cart item quantity
690
+ function updateQuantity(itemId, change) {
691
+ const itemIndex = cart.findIndex(item => item.id === itemId);
692
+ if (itemIndex !== -1) {
693
+ cart[itemIndex].quantity += change;
694
+
695
+ // Remove item if quantity is 0 or less
696
+ if (cart[itemIndex].quantity <= 0) {
697
+ cart.splice(itemIndex, 1);
698
+ }
699
+
700
+ updateCartUI();
701
+ updateCartCount();
702
+ }
703
+ }
704
+
705
+ // Update cart UI
706
+ function updateCartUI() {
707
+ const cartItemsContainer = document.getElementById('cart-items');
708
+ const emptyCartMessage = document.getElementById('empty-cart-message');
709
+
710
+ if (cart.length === 0) {
711
+ emptyCartMessage.classList.remove('hidden');
712
+ cartItemsContainer.innerHTML = '';
713
+ document.getElementById('checkout-btn').disabled = true;
714
+ return;
715
+ }
716
+
717
+ emptyCartMessage.classList.add('hidden');
718
+
719
+ let html = '';
720
+ cart.forEach(item => {
721
+ html += `
722
+ <div class="cart-item-enter flex justify-between items-center p-3 bg-gray-50 rounded-md">
723
+ <div>
724
+ <h4 class="font-medium">${item.name}</h4>
725
+ <p class="text-sm text-gray-600">${item.store}</p>
726
+ <div class="flex items-center mt-2">
727
+ <button onclick="updateQuantity(${item.id}, -1)" class="w-6 h-6 flex items-center justify-center bg-gray-200 rounded-md hover:bg-gray-300">
728
+ <i class="fas fa-minus text-xs"></i>
729
+ </button>
730
+ <span class="mx-2">${item.quantity}</span>
731
+ <button onclick="updateQuantity(${item.id}, 1)" class="w-6 h-6 flex items-center justify-center bg-gray-200 rounded-md hover:bg-gray-300">
732
+ <i class="fas fa-plus text-xs"></i>
733
+ </button>
734
+ </div>
735
+ </div>
736
+ <div class="text-right">
737
+ <p class="font-semibold">$${(item.price * item.quantity).toFixed(2)}</p>
738
+ <button onclick="removeItem(${item.id})" class="text-red-500 text-sm hover:text-red-700 mt-1">
739
+ <i class="fas fa-trash-alt"></i> Remove
740
+ </button>
741
+ </div>
742
+ </div>
743
+ `;
744
+ });
745
+
746
+ cartItemsContainer.innerHTML = html;
747
+ document.getElementById('checkout-btn').disabled = false;
748
+ }
749
+
750
+ // Remove item from cart
751
+ function removeItem(itemId) {
752
+ cart = cart.filter(item => item.id !== itemId);
753
+ updateCartUI();
754
+ updateCartCount();
755
+ }
756
+
757
+ // Update cart count in navbar
758
+ function updateCartCount() {
759
+ const count = cart.reduce((total, item) => total + item.quantity, 0);
760
+ document.getElementById('cart-count').textContent = count;
761
+ }
762
+
763
+ // Update cart totals
764
+ function updateCartTotals() {
765
+ const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
766
+ const tax = subtotal * 0.08; // 8% tax
767
+ const deliveryFee = 2.99;
768
+ const total = subtotal + tax + deliveryFee;
769
+
770
+ document.getElementById('cart-subtotal').textContent = `$${subtotal.toFixed(2)}`;
771
+ document.getElementById('cart-tax').textContent = `$${tax.toFixed(2)}`;
772
+ document.getElementById('cart-total').textContent = `$${total.toFixed(2)}`;
773
+
774
+ // Also update checkout modal totals if open
775
+ if (!document.getElementById('checkout-modal').classList.contains('modal-hidden')) {
776
+ document.getElementById('checkout-subtotal').textContent = `$${subtotal.toFixed(2)}`;
777
+ document.getElementById('checkout-tax').textContent = `$${tax.toFixed(2)}`;
778
+ document.getElementById('checkout-total').textContent = `$${total.toFixed(2)}`;
779
+ }
780
+ }
781
+
782
+ // Auth modal toggle
783
+ function toggleAuthModal() {
784
+ const modal = document.getElementById('auth-modal');
785
+ const overlay = document.getElementById('auth-overlay');
786
+ modal.classList.toggle('modal-hidden');
787
+ overlay.classList.toggle('hidden');
788
+ }
789
+
790
+ // Show register form
791
+ function showRegisterForm() {
792
+ document.getElementById('login-form').classList.add('hidden');
793
+ document.getElementById('register-form').classList.remove('hidden');
794
+ document.getElementById('auth-modal-title').textContent = 'Register';
795
+ }
796
+
797
+ // Show login form
798
+ function showLoginForm() {
799
+ document.getElementById('register-form').classList.add('hidden');
800
+ document.getElementById('login-form').classList.remove('hidden');
801
+ document.getElementById('auth-modal-title').textContent = 'Login';
802
+ }
803
+
804
+ // Login function
805
+ function login() {
806
+ const email = document.getElementById('login-email').value;
807
+ const password = document.getElementById('login-password').value;
808
+
809
+ if (!email || !password) {
810
+ alert('Please enter both email and password');
811
+ return;
812
+ }
813
+
814
+ // In a real app, you would validate credentials with a backend
815
+ isLoggedIn = true;
816
+ currentUser = {
817
+ email: email,
818
+ name: 'User Name' // This would come from backend in a real app
819
+ };
820
+
821
+ document.getElementById('auth-btn').textContent = 'My Account';
822
+ toggleAuthModal();
823
+
824
+ // Clear form fields
825
+ document.getElementById('login-email').value = '';
826
+ document.getElementById('login-password').value = '';
827
+ }
828
+
829
+ // Register function
830
+ function register() {
831
+ const name = document.getElementById('register-name').value;
832
+ const email = document.getElementById('register-email').value;
833
+ const password = document.getElementById('register-password').value;
834
+ const confirmPassword = document.getElementById('register-confirm-password').value;
835
+
836
+ if (!name || !email || !password || !confirmPassword) {
837
+ alert('Please fill in all fields');
838
+ return;
839
+ }
840
+
841
+ if (password !== confirmPassword) {
842
+ alert('Passwords do not match');
843
+ return;
844
+ }
845
+
846
+ // In a real app, you would send this data to a backend
847
+ isLoggedIn = true;
848
+ currentUser = {
849
+ email: email,
850
+ name: name
851
+ };
852
+
853
+ document.getElementById('auth-btn').textContent = 'My Account';
854
+ toggleAuthModal();
855
+
856
+ // Clear form fields
857
+ document.getElementById('register-name').value = '';
858
+ document.getElementById('register-email').value = '';
859
+ document.getElementById('register-password').value = '';
860
+ document.getElementById('register-confirm-password').value = '';
861
+
862
+ // Switch back to login form for next time
863
+ showLoginForm();
864
+ }
865
+
866
+ // Checkout function
867
+ function checkout() {
868
+ if (!isLoggedIn) {
869
+ toggleAuthModal();
870
+ return;
871
+ }
872
+
873
+ updateCartTotals();
874
+
875
+ // Also update checkout modal totals
876
+ const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
877
+ const tax = subtotal * 0.08;
878
+ const deliveryFee = 2.99;
879
+ const total = subtotal + tax + deliveryFee;
880
+
881
+ document.getElementById('checkout-subtotal').textContent = `$${subtotal.toFixed(2)}`;
882
+ document.getElementById('checkout-tax').textContent = `$${tax.toFixed(2)}`;
883
+ document.getElementById('checkout-total').textContent = `$${total.toFixed(2)}`;
884
+
885
+ // Show checkout modal
886
+ const modal = document.getElementById('checkout-modal');
887
+ const overlay = document.getElementById('checkout-overlay');
888
+ modal.classList.remove('modal-hidden');
889
+ overlay.classList.remove('hidden');
890
+ }
891
+
892
+ // Close checkout modal
893
+ function closeCheckoutModal() {
894
+ const modal = document.getElementById('checkout-modal');
895
+ const overlay = document.getElementById('checkout-overlay');
896
+ modal.classList.add('modal-hidden');
897
+ overlay.classList.add('hidden');
898
+ }
899
+
900
+ // Place order function
901
+ function placeOrder() {
902
+ // In a real app, you would send the order to a backend
903
+ closeCheckoutModal();
904
+
905
+ // Update confirmation modal with order total
906
+ const subtotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0);
907
+ const tax = subtotal * 0.08;
908
+ const deliveryFee = 2.99;
909
+ const total = subtotal + tax + deliveryFee;
910
+
911
+ document.getElementById('confirmation-total').textContent = `$${total.toFixed(2)}`;
912
+
913
+ // Show confirmation modal
914
+ const modal = document.getElementById('confirmation-modal');
915
+ const overlay = document.getElementById('confirmation-overlay');
916
+ modal.classList.remove('modal-hidden');
917
+ overlay.classList.remove('hidden');
918
+
919
+ // Clear cart
920
+ cart = [];
921
+ updateCartUI();
922
+ updateCartCount();
923
+ }
924
+
925
+ // Close confirmation modal
926
+ function closeConfirmationModal() {
927
+ const modal = document.getElementById('confirmation-modal');
928
+ const overlay = document.getElementById('confirmation-overlay');
929
+ modal.classList.add('modal-hidden');
930
+ overlay.classList.add('hidden');
931
+ }
932
+ </script>
933
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SimpleSam/grocery-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
934
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ generate an app that users can order food and groceries, view nearby stores and restaurants, choose transporter, register, login and pay