MrHouse111 commited on
Commit
39cae06
·
verified ·
1 Parent(s): 41a3a54

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +839 -38
  2. prompts.txt +1 -0
index.html CHANGED
@@ -1,41 +1,842 @@
1
  <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>My app</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <meta charset="utf-8">
 
 
7
  <style>
8
- body {
9
- display: flex;
10
- justify-content: center;
11
- align-items: center;
12
- overflow: hidden;
13
- height: 100dvh;
14
- font-family: "Arial", sans-serif;
15
- text-align: center;
16
- }
17
- .arrow {
18
- position: absolute;
19
- bottom: 32px;
20
- left: 0px;
21
- width: 100px;
22
- transform: rotate(30deg);
23
- }
24
- h1 {
25
- font-size: 50px;
26
- }
27
- h1 span {
28
- color: #acacac;
29
- font-size: 32px;
30
- }
 
 
 
 
 
31
  </style>
32
- </head>
33
- <body>
34
- <h1>
35
- <span>I'm ready to work,</span><br />
36
- Ask me anything.
37
- </h1>
38
- <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
39
- <script></script>
40
- <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=MrHouse111/programeri" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
41
- </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>Šta Klopati</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
+ .hide-scrollbar {
11
+ -ms-overflow-style: none;
12
+ scrollbar-width: none;
13
+ }
14
+ .hide-scrollbar::-webkit-scrollbar {
15
+ display: none;
16
+ }
17
+ body {
18
+ background-color: #121212;
19
+ color: white;
20
+ font-family: sans-serif;
21
+ }
22
+ .radio-player {
23
+ transition: all 0.3s ease;
24
+ }
25
+ .radio-player.open {
26
+ transform: translateY(0);
27
+ }
28
+ .radio-player.closed {
29
+ transform: translateY(100%);
30
+ }
31
+ .fade-in {
32
+ animation: fadeIn 0.3s ease-in;
33
+ }
34
+ @keyframes fadeIn {
35
+ from { opacity: 0; }
36
+ to { opacity: 1; }
37
+ }
38
  </style>
39
+ </head>
40
+ <body>
41
+ <div id="app" class="min-h-screen">
42
+ <!-- Cities Screen -->
43
+ <div id="cities-screen" class="flex flex-col items-center justify-center min-h-screen pt-16">
44
+ <div class="fixed top-0 right-0 p-4 flex gap-4 z-50">
45
+ <button onclick="showRadio()" class="text-gray-400 hover:text-[#00bfa5] transition-colors" aria-label="Otvori radio">
46
+ <i class="fas fa-radio text-2xl"></i>
47
+ </button>
48
+ <button onclick="showChatScreen()" class="text-gray-400 hover:text-[#00bfa5] transition-colors">
49
+ <i class="fas fa-comments text-2xl"></i>
50
+ </button>
51
+ <button onclick="showFavorites()" class="text-gray-400 hover:text-[#00bfa5] transition-colors">
52
+ <i class="fas fa-heart text-2xl"></i>
53
+ </button>
54
+ <button onclick="showScreen('loyalty')" class="text-gray-400 hover:text-[#00bfa5] transition-colors">
55
+ <i class="fas fa-gift text-2xl"></i>
56
+ </button>
57
+ <button onclick="showScreen('profile')" class="text-gray-400 hover:text-[#00bfa5] transition-colors">
58
+ <i class="fas fa-user text-2xl"></i>
59
+ </button>
60
+ </div>
61
+
62
+ <h1 class="text-4xl md:text-6xl font-serif mb-8">Šta Klopati</h1>
63
+ <img src="https://ucarecdn.com/84e97dda-5149-45c9-910a-8ee1fcb5bf35/-/format/auto/" alt="Šta Klopati Logo" class="w-[120px] h-[120px] rounded-full mb-12">
64
+
65
+ <div class="flex flex-col gap-6 w-full max-w-xs">
66
+ <button onclick="selectCity('Nova Pazova')" class="group relative bg-gradient-to-r from-[#00bfa5] to-[#00a693] py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95">
67
+ <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 rounded-lg transition-opacity"></div>
68
+ <div class="flex items-center justify-center gap-3">
69
+ <i class="fas fa-map-marker-alt"></i>
70
+ <span>Nova Pazova</span>
71
+ </div>
72
+ </button>
73
+
74
+ <button onclick="selectCity('Stara Pazova')" class="group relative bg-gradient-to-r from-[#00bfa5] to-[#00a693] py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95">
75
+ <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 rounded-lg transition-opacity"></div>
76
+ <div class="flex items-center justify-center gap-3">
77
+ <i class="fas fa-map-marker-alt"></i>
78
+ <span>Stara Pazova</span>
79
+ </div>
80
+ </button>
81
+
82
+ <button onclick="selectCity('Banovci')" class="group relative bg-gradient-to-r from-[#00bfa5] to-[#00a693] py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95">
83
+ <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 rounded-lg transition-opacity"></div>
84
+ <div class="flex items-center justify-center gap-3">
85
+ <i class="fas fa-map-marker-alt"></i>
86
+ <span>Banovci</span>
87
+ </div>
88
+ </button>
89
+ </div>
90
+ </div>
91
+
92
+ <!-- Restaurants Screen -->
93
+ <div id="restaurants-screen" class="hidden p-4">
94
+ <div class="flex justify-between items-center mb-6">
95
+ <button onclick="showScreen('cities')" class="text-[#00bfa5] flex items-center">
96
+ <i class="fas fa-city mr-2"></i>
97
+ Promeni grad
98
+ </button>
99
+ <h2 id="current-city" class="text-2xl"></h2>
100
+ </div>
101
+
102
+ <div id="restaurants-loading" class="flex justify-center items-center p-8 hidden">
103
+ <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00bfa5]"></div>
104
+ </div>
105
+
106
+ <div id="restaurants-error" class="text-red-500 p-4 text-center bg-[#2a2a2a] rounded-lg hidden">
107
+ <i class="fas fa-exclamation-circle text-2xl mb-2"></i>
108
+ <p id="error-message"></p>
109
+ <button onclick="loadRestaurants()" class="mt-4 px-4 py-2 bg-[#00bfa5] rounded-lg text-white hover:bg-[#00a693]">
110
+ Pokušaj ponovo
111
+ </button>
112
+ </div>
113
+
114
+ <div id="restaurants-container" class="grid gap-4 hidden"></div>
115
+
116
+ <div id="no-restaurants" class="text-center text-gray-400 p-8 bg-[#2a2a2a] rounded-lg hidden">
117
+ <i class="fas fa-store-alt-slash text-4xl mb-4"></i>
118
+ <p id="no-restaurants-message"></p>
119
+ </div>
120
+ </div>
121
+
122
+ <!-- Menu Screen -->
123
+ <div id="menu-screen" class="hidden pb-20 relative min-h-screen">
124
+ <div class="sticky top-0 bg-[#121212] z-10 p-4 border-b border-gray-800">
125
+ <div class="flex items-center justify-between mb-4">
126
+ <button onclick="showScreen('restaurants')" class="text-[#00bfa5] flex items-center">
127
+ <i class="fas fa-arrow-left mr-2"></i> Nazad
128
+ </button>
129
+ <h2 id="restaurant-name" class="text-xl font-semibold"></h2>
130
+ <div class="w-8"></div>
131
+ </div>
132
+
133
+ <div class="flex items-center text-sm text-gray-400">
134
+ <div class="flex items-center">
135
+ <i class="far fa-clock mr-2"></i>
136
+ <span id="restaurant-hours"></span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div id="menu-loading" class="flex justify-center items-center p-8 hidden">
142
+ <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00bfa5]"></div>
143
+ </div>
144
+
145
+ <div id="menu-error" class="text-red-500 p-4 text-center bg-[#2a2a2a] rounded-lg m-4 hidden">
146
+ <i class="fas fa-exclamation-circle text-2xl mb-2"></i>
147
+ <p id="menu-error-message"></p>
148
+ <button onclick="loadRestaurantMenu()" class="mt-4 px-4 py-2 bg-[#00bfa5] rounded-lg text-white hover:bg-[#00a693]">
149
+ Pokušaj ponovo
150
+ </button>
151
+ </div>
152
+
153
+ <div id="menu-content" class="hidden">
154
+ <div class="sticky top-[72px] bg-[#121212] z-10 border-b border-gray-800">
155
+ <div class="overflow-x-auto hide-scrollbar">
156
+ <div id="categories-container" class="flex p-2 space-x-2 min-w-max"></div>
157
+ </div>
158
+ </div>
159
+
160
+ <div id="menu-items-container" class="p-4"></div>
161
+ </div>
162
+
163
+ <div id="no-menu" class="text-center text-gray-400 p-8 hidden">
164
+ <p>Meni nije dostupan</p>
165
+ </div>
166
+
167
+ <a id="call-restaurant" href="#" class="fixed bottom-6 right-6 bg-[#00bfa5] w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-[#00a693] transition-colors z-40">
168
+ <i class="fas fa-phone text-white text-2xl"></i>
169
+ </a>
170
+ </div>
171
+
172
+ <!-- Loyalty Screen -->
173
+ <div id="loyalty-screen" class="hidden min-h-screen bg-[#121212] p-4">
174
+ <div class="sticky top-0 bg-[#121212] z-10 pb-4">
175
+ <button onclick="showScreen('cities')" class="text-[#00bfa5] flex items-center mb-4">
176
+ <i class="fas fa-arrow-left mr-2"></i> Nazad
177
+ </button>
178
+ <h2 class="text-2xl font-semibold mb-2">Loyalty Program</h2>
179
+ <div class="bg-[#2a2a2a] p-4 rounded-lg mb-4">
180
+ <div class="flex items-center justify-between">
181
+ <div>
182
+ <p class="text-gray-400">Vaši poeni</p>
183
+ <p class="text-3xl font-bold text-[#00bfa5]">0</p>
184
+ </div>
185
+ <i class="fas fa-star text-[#00bfa5] text-4xl"></i>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <div id="rewards-container" class="grid gap-4"></div>
191
+ </div>
192
+
193
+ <!-- Profile Screen -->
194
+ <div id="profile-screen" class="hidden min-h-screen bg-[#121212] p-4">
195
+ <div class="sticky top-0 bg-[#121212] z-10 pb-4">
196
+ <button onclick="showScreen('cities')" class="text-[#00bfa5] flex items-center mb-4">
197
+ <i class="fas fa-arrow-left mr-2"></i> Nazad
198
+ </button>
199
+ <h2 class="text-2xl font-semibold mb-4">Vaš Profil</h2>
200
+ </div>
201
+
202
+ <div class="space-y-4">
203
+ <div class="bg-[#2a2a2a] p-4 rounded-lg">
204
+ <div class="flex items-center space-x-4">
205
+ <div class="w-20 h-20 bg-[#3a3a3a] rounded-full flex items-center justify-center">
206
+ <i class="fas fa-user text-3xl text-[#00bfa5]"></i>
207
+ </div>
208
+ <div>
209
+ <h3 class="text-xl font-medium">Korisnik</h3>
210
+ <p class="text-gray-400">ID: anonymous</p>
211
+ </div>
212
+ </div>
213
+ </div>
214
+
215
+ <div class="bg-[#2a2a2a] p-4 rounded-lg">
216
+ <h3 class="text-lg font-medium mb-3">Vaša Dostignuća</h3>
217
+ <div class="grid grid-cols-3 gap-3">
218
+ <div class="p-3 rounded-lg text-center bg-[#3a3a3a]">
219
+ <i class="fas fa-circle text-gray-400 text-2xl mb-2"></i>
220
+ <p class="text-sm">Prvi Pregled</p>
221
+ </div>
222
+ <div class="p-3 rounded-lg text-center bg-[#3a3a3a]">
223
+ <i class="fas fa-circle text-gray-400 text-2xl mb-2"></i>
224
+ <p class="text-sm">Redovan Korisnik</p>
225
+ </div>
226
+ <div class="p-3 rounded-lg text-center bg-[#3a3a3a]">
227
+ <i class="fas fa-circle text-gray-400 text-2xl mb-2"></i>
228
+ <p class="text-sm">Gurman</p>
229
+ </div>
230
+ <div class="p-3 rounded-lg text-center bg-[#3a3a3a]">
231
+ <i class="fas fa-circle text-gray-400 text-2xl mb-2"></i>
232
+ <p class="text-sm">Društvenjak</p>
233
+ </div>
234
+ <div class="p-3 rounded-lg text-center bg-[#3a3a3a]">
235
+ <i class="fas fa-circle text-gray-400 text-2xl mb-2"></i>
236
+ <p class="text-sm">Ekspert</p>
237
+ </div>
238
+ <div class="p-3 rounded-lg text-center bg-[#00bfa5] bg-opacity-20">
239
+ <i class="fas fa-check-circle text-[#00bfa5] text-2xl mb-2"></i>
240
+ <p class="text-sm">Foodie</p>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="bg-[#2a2a2a] p-4 rounded-lg">
246
+ <h3 class="text-lg font-medium mb-3">Omiljene Kategorije</h3>
247
+ <div class="flex flex-wrap gap-2">
248
+ <span class="bg-[#3a3a3a] px-3 py-1 rounded-full text-sm">Roštilj</span>
249
+ <span class="bg-[#3a3a3a] px-3 py-1 rounded-full text-sm">Pica</span>
250
+ <span class="bg-[#3a3a3a] px-3 py-1 rounded-full text-sm">Salate</span>
251
+ </div>
252
+ </div>
253
+
254
+ <div class="bg-[#2a2a2a] p-4 rounded-lg">
255
+ <h3 class="text-lg font-medium mb-3">Posećeni Restorani</h3>
256
+ <div class="space-y-2">
257
+ <div class="flex items-center justify-between">
258
+ <span>Caribic</span>
259
+ <i class="fas fa-check text-[#00bfa5]"></i>
260
+ </div>
261
+ <div class="flex items-center justify-between">
262
+ <span>Dukat</span>
263
+ <i class="fas fa-check text-[#00bfa5]"></i>
264
+ </div>
265
+ <div class="flex items-center justify-between">
266
+ <span>Kod Žike</span>
267
+ <i class="fas fa-check text-[#00bfa5]"></i>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+
274
+ <!-- Chat Screen -->
275
+ <div id="chat-screen" class="hidden fixed inset-0 bg-[#121212] z-50 flex flex-col">
276
+ <div class="bg-[#2a2a2a] px-4 py-3 flex items-center justify-between border-b border-gray-700">
277
+ <div class="flex items-center">
278
+ <button onclick="hideChatScreen()" class="mr-3 text-gray-400 hover:text-white">
279
+ <i class="fas fa-arrow-left text-lg"></i>
280
+ </button>
281
+ <div>
282
+ <h2 class="text-lg font-semibold">Grupni Chat</h2>
283
+ <p id="chat-stats" class="text-sm text-gray-400">0 poruka • 0 učesnika</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-4"></div>
289
+
290
+ <div class="bg-[#2a2a2a] p-3 border-t border-gray-700">
291
+ <div id="emoji-picker" class="hidden absolute bottom-20 right-4 bg-[#3a3a3a] rounded-lg shadow-xl p-2">
292
+ <div class="grid grid-cols-8 gap-2">
293
+ <button onclick="addEmoji('😊')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">😊</button>
294
+ <button onclick="addEmoji('😂')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">😂</button>
295
+ <button onclick="addEmoji('❤️')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">❤️</button>
296
+ <button onclick="addEmoji('👍')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">👍</button>
297
+ <button onclick="addEmoji('😍')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">😍</button>
298
+ <button onclick="addEmoji('🎉')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">🎉</button>
299
+ <button onclick="addEmoji('👋')" class="text-2xl hover:bg-[#4a4a2a] p-2 rounded-lg transition-colors">👋</button>
300
+ <button onclick="addEmoji('🤔')" class="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors">🤔</button>
301
+ </div>
302
+ </div>
303
+
304
+ <form onsubmit="sendMessage(event)" class="flex items-center gap-2">
305
+ <div class="flex-1 relative">
306
+ <input id="message-input" type="text" placeholder="Napišite poruku..." class="w-full bg-[#3a3a3a] rounded-full px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00bfa5]">
307
+ <button type="button" onclick="toggleEmojiPicker()" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-[#00bfa5] hover:text-[#00a693]">
308
+ <i class="fas fa-smile text-xl"></i>
309
+ </button>
310
+ </div>
311
+
312
+ <button type="submit" class="p-2 bg-[#00bfa5] text-white rounded-full hover:bg-[#00a693] transition-colors">
313
+ <i class="fas fa-paper-plane text-xl"></i>
314
+ </button>
315
+ </form>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- Favorites Modal -->
320
+ <div id="favorites-modal" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4">
321
+ <div class="bg-[#2a2a2a] rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden">
322
+ <div class="p-4 border-b border-gray-700 flex justify-between items-center sticky top-0 bg-[#2a2a2a]">
323
+ <h2 class="text-xl font-semibold flex items-center">
324
+ <i class="fas fa-heart text-red-500 mr-2"></i>
325
+ Omiljena jela
326
+ </h2>
327
+ <button onclick="hideFavorites()" class="text-gray-400 hover:text-white transition-colors">
328
+ <i class="fas fa-times"></i>
329
+ </button>
330
+ </div>
331
+
332
+ <div class="p-4 overflow-y-auto" style="max-height: calc(80vh - 70px)">
333
+ <div id="no-favorites" class="text-center py-8 text-gray-400">
334
+ <i class="far fa-heart text-4xl mb-3"></i>
335
+ <p>Nemate označenih omiljenih jela</p>
336
+ <p class="text-sm mt-2">
337
+ Označite srce pored jela da ga dodate u omiljene
338
+ </p>
339
+ </div>
340
+
341
+ <div id="favorites-container" class="space-y-3 hidden"></div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+
346
+ <!-- Radio Player -->
347
+ <div id="radio-player" class="fixed bottom-0 left-0 right-0 bg-[#2a2a2a] p-4 shadow-lg radio-player closed">
348
+ <div class="flex items-center justify-between">
349
+ <div class="flex items-center space-x-4">
350
+ <button id="play-pause-btn" onclick="toggleRadio()" class="bg-[#00bfa5] text-white w-12 h-12 rounded-full flex items-center justify-center">
351
+ <i id="play-pause-icon" class="fas fa-play"></i>
352
+ </button>
353
+ <div>
354
+ <h3 class="font-medium">Radio Šta Klopati</h3>
355
+ <p class="text-sm text-gray-400">Uživo</p>
356
+ </div>
357
+ </div>
358
+ <button onclick="hideRadio()" class="text-gray-400 hover:text-white">
359
+ <i class="fas fa-times"></i>
360
+ </button>
361
+ </div>
362
+ <audio id="radio-stream" src="https://stream.example.com/radio"></audio>
363
+ </div>
364
+ </div>
365
+
366
+ <script>
367
+ // App state
368
+ const state = {
369
+ user: { id: "anonymous" },
370
+ selectedCity: "",
371
+ selectedRestaurant: null,
372
+ activeCategory: "",
373
+ favoriteItems: {},
374
+ points: 0,
375
+ messages: [],
376
+ restaurants: {
377
+ "Nova Pazova": [
378
+ { id: 1, name: "Restoran 1", hours: "08:00 - 23:00", phone: "011 1234567", status: true },
379
+ { id: 2, name: "Restoran 2", hours: "09:00 - 22:00", phone: "011 7654321", status: false }
380
+ ],
381
+ "Stara Pazova": [
382
+ { id: 3, name: "Restoran 3", hours: "07:00 - 24:00", phone: "011 1111111", status: true }
383
+ ],
384
+ "Banovci": [
385
+ { id: 4, name: "Restoran 4", hours: "10:00 - 20:00", phone: "011 2222222", status: true }
386
+ ]
387
+ },
388
+ menuData: {
389
+ "1": {
390
+ menu: {
391
+ "Roštilj": [
392
+ { name: "Ćevapi", description: "10 komada sa lukom", portion: "300g", price: "800" },
393
+ { name: "Pljeskavica", description: "Domaća pljeskavica", portion: "400g", price: "900" }
394
+ ],
395
+ "Pica": [
396
+ { name: "Margarita", description: "Paradajz sos, kačkavalj", portion: "30cm", price: "1000" },
397
+ { name: "Capricciosa", description: "Paradajz sos, kačkavalj, šunka, pečurke", portion: "30cm", price: "1200" }
398
+ ],
399
+ "Salate": [
400
+ { name: "Šopska salata", description: "Paradajz, krastavac, luk, sir", portion: "300g", price: "500" }
401
+ ]
402
+ }
403
+ },
404
+ "2": {
405
+ menu: {
406
+ "Roštilj": [
407
+ { name: "Vešalica", description: "Domaća vešalica", portion: "300g", price: "850" }
408
+ ],
409
+ "Pice": [
410
+ { name: "Quattro Formaggi", description: "4 vrste sira", portion: "30cm", price: "1100" }
411
+ ]
412
+ }
413
+ }
414
+ },
415
+ rewards: [
416
+ { id: 1, description: "10% popusta na sledeću porudžbinu", points: 100 },
417
+ { id: 2, description: "Besplatno piće uz obrok", points: 150 },
418
+ { id: 3, description: "Besplatna dostava", points: 200 },
419
+ { id: 4, description: "Besplatan obrok", points: 500 }
420
+ ],
421
+ isRadioPlaying: false
422
+ };
423
+
424
+ // Initialize the app
425
+ document.addEventListener('DOMContentLoaded', function() {
426
+ // Load rewards
427
+ renderRewards();
428
+
429
+ // Check for last selected city
430
+ const lastCity = localStorage.getItem('lastSelectedCity');
431
+ if (lastCity) {
432
+ state.selectedCity = lastCity;
433
+ showScreen('restaurants');
434
+ document.getElementById('current-city').textContent = lastCity;
435
+ }
436
+ });
437
+
438
+ // Screen navigation
439
+ function showScreen(screen) {
440
+ document.querySelectorAll('[id$="-screen"]').forEach(el => {
441
+ el.classList.add('hidden');
442
+ });
443
+ document.getElementById(`${screen}-screen`).classList.remove('hidden');
444
+ }
445
+
446
+ function showChatScreen() {
447
+ document.getElementById('chat-screen').classList.remove('hidden');
448
+ renderMessages();
449
+ }
450
+
451
+ function hideChatScreen() {
452
+ document.getElementById('chat-screen').classList.add('hidden');
453
+ showScreen('cities');
454
+ }
455
+
456
+ // City selection
457
+ function selectCity(city) {
458
+ state.selectedCity = city;
459
+ localStorage.setItem('lastSelectedCity', city);
460
+ document.getElementById('current-city').textContent = city;
461
+ showScreen('restaurants');
462
+ loadRestaurants();
463
+ }
464
+
465
+ // Restaurants
466
+ function loadRestaurants() {
467
+ const loadingEl = document.getElementById('restaurants-loading');
468
+ const errorEl = document.getElementById('restaurants-error');
469
+ const containerEl = document.getElementById('restaurants-container');
470
+ const noRestaurantsEl = document.getElementById('no-restaurants');
471
+
472
+ loadingEl.classList.remove('hidden');
473
+ errorEl.classList.add('hidden');
474
+ containerEl.classList.add('hidden');
475
+ noRestaurantsEl.classList.add('hidden');
476
+
477
+ // Simulate API call
478
+ setTimeout(() => {
479
+ loadingEl.classList.add('hidden');
480
+
481
+ if (!state.restaurants[state.selectedCity] || state.restaurants[state.selectedCity].length === 0) {
482
+ document.getElementById('no-restaurants-message').textContent =
483
+ `Trenutno nema dostupnih restorana u ${state.selectedCity}`;
484
+ noRestaurantsEl.classList.remove('hidden');
485
+ return;
486
+ }
487
+
488
+ renderRestaurants();
489
+ containerEl.classList.remove('hidden');
490
+ }, 1000);
491
+ }
492
+
493
+ function renderRestaurants() {
494
+ const container = document.getElementById('restaurants-container');
495
+ container.innerHTML = '';
496
+
497
+ state.restaurants[state.selectedCity].forEach(restaurant => {
498
+ const restaurantEl = document.createElement('div');
499
+ restaurantEl.className = 'bg-[#2a2a2a] p-4 rounded-lg cursor-pointer hover:bg-[#3a3a3a] transition-all duration-200';
500
+ restaurantEl.innerHTML = `
501
+ <div class="flex justify-between items-start">
502
+ <div class="flex-1">
503
+ <h3 class="text-xl mb-2">${restaurant.name}</h3>
504
+ <div class="space-y-1 text-sm">
505
+ <p class="text-gray-400">${restaurant.hours}</p>
506
+ <p class="text-gray-400">${restaurant.phone}</p>
507
+ </div>
508
+ </div>
509
+ <div class="ml-4">
510
+ <div class="px-3 py-1 rounded-full text-sm font-medium ${
511
+ restaurant.status ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500"
512
+ }">
513
+ ${restaurant.status ? "Otvoreno" : "Zatvoreno"}
514
+ </div>
515
+ </div>
516
+ </div>
517
+ `;
518
+ restaurantEl.addEventListener('click', () => selectRestaurant(restaurant));
519
+ container.appendChild(restaurantEl);
520
+ });
521
+ }
522
+
523
+ function selectRestaurant(restaurant) {
524
+ state.selectedRestaurant = restaurant;
525
+ document.getElementById('restaurant-name').textContent = restaurant.name;
526
+ document.getElementById('restaurant-hours').textContent = restaurant.hours;
527
+ document.getElementById('call-restaurant').href = `tel:${restaurant.phone}`;
528
+ showScreen('menu');
529
+ loadRestaurantMenu();
530
+ }
531
+
532
+ // Menu
533
+ function loadRestaurantMenu() {
534
+ const loadingEl = document.getElementById('menu-loading');
535
+ const errorEl = document.getElementById('menu-error');
536
+ const menuContentEl = document.getElementById('menu-content');
537
+ const noMenuEl = document.getElementById('no-menu');
538
+
539
+ loadingEl.classList.remove('hidden');
540
+ errorEl.classList.add('hidden');
541
+ menuContentEl.classList.add('hidden');
542
+ noMenuEl.classList.add('hidden');
543
+
544
+ // Simulate API call
545
+ setTimeout(() => {
546
+ loadingEl.classList.add('hidden');
547
+
548
+ if (!state.menuData[state.selectedRestaurant.id]) {
549
+ noMenuEl.classList.remove('hidden');
550
+ return;
551
+ }
552
+
553
+ renderMenu();
554
+ menuContentEl.classList.remove('hidden');
555
+ }, 1000);
556
+ }
557
+
558
+ function renderMenu() {
559
+ const menu = state.menuData[state.selectedRestaurant.id].menu;
560
+ const categoriesContainer = document.getElementById('categories-container');
561
+ const itemsContainer = document.getElementById('menu-items-container');
562
+
563
+ // Render categories
564
+ categoriesContainer.innerHTML = '';
565
+ Object.keys(menu).forEach(category => {
566
+ const button = document.createElement('button');
567
+ button.className = `px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${
568
+ state.activeCategory === category || (!state.activeCategory && category === Object.keys(menu)[0])
569
+ ? "bg-[#00bfa5] text-white"
570
+ : "bg-[#2a2a2a] text-gray-300 hover:bg-[#3a3a3a]"
571
+ }`;
572
+
573
+ // Add icons based on category
574
+ let icon = '';
575
+ if (category === "Roštilj") icon = '<i class="fas fa-fire mr-2"></i>';
576
+ if (category === "Prilozi") icon = '<i class="fas fa-utensils mr-2"></i>';
577
+ if (category === "Salate") icon = '<i class="fas fa-leaf mr-2"></i>';
578
+ if (category === "Pića") icon = '<i class="fas fa-glass-martini mr-2"></i>';
579
+
580
+ button.innerHTML = `${icon}${category}`;
581
+ button.addEventListener('click', () => {
582
+ state.activeCategory = category;
583
+ renderMenuItems(category);
584
+ // Update active button
585
+ document.querySelectorAll('#categories-container button').forEach(btn => {
586
+ btn.className = btn.className.replace('bg-[#00bfa5] text-white', 'bg-[#2a2a2a] text-gray-300 hover:bg-[#3a3a3a]');
587
+ });
588
+ button.className = button.className.replace('bg-[#2a2a2a] text-gray-300 hover:bg-[#3a3a3a]', 'bg-[#00bfa5] text-white');
589
+ });
590
+ categoriesContainer.appendChild(button);
591
+ });
592
+
593
+ // Render items for first category if none selected
594
+ const categoryToShow = state.activeCategory || Object.keys(menu)[0];
595
+ renderMenuItems(categoryToShow);
596
+ }
597
+
598
+ function renderMenuItems(category) {
599
+ const itemsContainer = document.getElementById('menu-items-container');
600
+ const menu = state.menuData[state.selectedRestaurant.id].menu;
601
+ itemsContainer.innerHTML = '';
602
+
603
+ menu[category].forEach((item, index) => {
604
+ const key = `${state.selectedRestaurant.name}-${item.name}`;
605
+ const isFavorite = state.favoriteItems[key] || false;
606
+
607
+ const itemEl = document.createElement('div');
608
+ itemEl.className = 'bg-[#2a2a2a] rounded-lg p-4 hover:bg-[#3a3a3a] transition-colors duration-200 mb-3';
609
+ itemEl.innerHTML = `
610
+ <div class="flex justify-between items-start">
611
+ <div class="flex-1">
612
+ <h4 class="text-lg font-medium mb-1">${item.name}</h4>
613
+ <div class="space-y-1">
614
+ ${item.description ? `<p class="text-sm text-gray-400">${item.description}</p>` : ''}
615
+ ${item.portion ? `<p class="text-sm text-gray-400 flex items-center"><i class="fas fa-weight mr-2"></i>${item.portion}</p>` : ''}
616
+ </div>
617
+ </div>
618
+ <div class="flex flex-col items-end ml-4">
619
+ <span class="text-[#00bfa5] font-semibold mb-2">${item.price} RSD</span>
620
+ <button class="text-2xl transition-colors duration-200 hover:scale-110">
621
+ <i class="fas fa-heart ${isFavorite ? 'text-red-500' : 'text-gray-400'}"></i>
622
+ </button>
623
+ </div>
624
+ </div>
625
+ `;
626
+
627
+ // Add favorite toggle
628
+ const favButton = itemEl.querySelector('button');
629
+ favButton.addEventListener('click', (e) => {
630
+ e.stopPropagation();
631
+ toggleFavorite(key);
632
+ favButton.innerHTML = `<i class="fas fa-heart ${state.favoriteItems[key] ? 'text-red-500' : 'text-gray-400'}"></i>`;
633
+ });
634
+
635
+ itemsContainer.appendChild(itemEl);
636
+ });
637
+ }
638
+
639
+ // Favorites
640
+ function toggleFavorite(key) {
641
+ state.favoriteItems[key] = !state.favoriteItems[key];
642
+ localStorage.setItem('favoriteItems', JSON.stringify(state.favoriteItems));
643
+ }
644
+
645
+ function showFavorites() {
646
+ document.getElementById('favorites-modal').classList.remove('hidden');
647
+ renderFavorites();
648
+ }
649
+
650
+ function hideFavorites() {
651
+ document.getElementById('favorites-modal').classList.add('hidden');
652
+ }
653
+
654
+ function renderFavorites() {
655
+ const container = document.getElementById('favorites-container');
656
+ const noFavoritesEl = document.getElementById('no-favorites');
657
+
658
+ const favorites = Object.entries(state.favoriteItems).filter(([, isFavorite]) => isFavorite);
659
+
660
+ if (favorites.length === 0) {
661
+ container.classList.add('hidden');
662
+ noFavoritesEl.classList.remove('hidden');
663
+ return;
664
+ }
665
+
666
+ container.innerHTML = '';
667
+ noFavoritesEl.classList.add('hidden');
668
+ container.classList.remove('hidden');
669
+
670
+ favorites.forEach(([key]) => {
671
+ const [restaurant, item] = key.split('-');
672
+ const favoriteEl = document.createElement('div');
673
+ favoriteEl.className = 'bg-[#3a3a3a] rounded-lg p-3 flex justify-between items-center group hover:bg-[#4a4a4a] transition-colors';
674
+ favoriteEl.innerHTML = `
675
+ <div>
676
+ <p class="font-medium">${item}</p>
677
+ <p class="text-sm text-gray-400">${restaurant}</p>
678
+ </div>
679
+ <button class="text-red-500 opacity-75 group-hover:opacity-100 transition-opacity">
680
+ <i class="fas fa-heart"></i>
681
+ </button>
682
+ `;
683
+
684
+ // Add remove favorite
685
+ const removeBtn = favoriteEl.querySelector('button');
686
+ removeBtn.addEventListener('click', () => {
687
+ toggleFavorite(key);
688
+ renderFavorites();
689
+ });
690
+
691
+ container.appendChild(favoriteEl);
692
+ });
693
+ }
694
+
695
+ // Loyalty
696
+ function renderRewards() {
697
+ const container = document.getElementById('rewards-container');
698
+ container.innerHTML = '';
699
+
700
+ state.rewards.forEach(reward => {
701
+ const rewardEl = document.createElement('div');
702
+ rewardEl.className = 'bg-[#2a2a2a] p-4 rounded-lg';
703
+ rewardEl.innerHTML = `
704
+ <div class="flex justify-between items-center">
705
+ <div>
706
+ <h3 class="text-lg font-medium mb-1">${reward.description}</h3>
707
+ <p class="text-sm text-gray-400">Potrebno poena: ${reward.points}</p>
708
+ </div>
709
+ <button class="px-4 py-2 rounded-lg ${
710
+ state.points >= reward.points
711
+ ? "bg-[#00bfa5] text-white"
712
+ : "bg-gray-600 text-gray-400"
713
+ }">
714
+ Aktiviraj
715
+ </button>
716
+ </div>
717
+ `;
718
+
719
+ const button = rewardEl.querySelector('button');
720
+ if (state.points < reward.points) {
721
+ button.disabled = true;
722
+ } else {
723
+ button.addEventListener('click', () => {
724
+ alert("Nagrada je uspešno aktivirana!");
725
+ });
726
+ }
727
+
728
+ container.appendChild(rewardEl);
729
+ });
730
+ }
731
+
732
+ // Chat
733
+ function renderMessages() {
734
+ const container = document.getElementById('chat-messages');
735
+ container.innerHTML = '';
736
+
737
+ state.messages.forEach((msg, index) => {
738
+ const isFirstInGroup = index === 0 || state.messages[index - 1].user_id !== msg.user_id;
739
+ const isLastInGroup = index === state.messages.length - 1 || state.messages[index + 1].user_id !== msg.user_id;
740
+
741
+ const messageEl = document.createElement('div');
742
+ messageEl.className = `flex ${
743
+ msg.user_id === state.user.id ? "justify-end" : "justify-start"
744
+ }`;
745
+
746
+ messageEl.innerHTML = `
747
+ <div class="max-w-[80%] ${!isLastInGroup ? 'mb-1' : 'mb-3'}">
748
+ ${isFirstInGroup ? `
749
+ <div class="text-sm mb-1 ${
750
+ msg.user_id === state.user.id
751
+ ? "text-right text-gray-300"
752
+ : "text-gray-300"
753
+ }">
754
+ ${msg.user_id === state.user.id ? "Vi" : `Korisnik ${msg.user_id.slice(0, 4)}`}
755
+ </div>
756
+ ` : ''}
757
+ <div class="rounded-2xl px-4 py-2 ${
758
+ msg.user_id === state.user.id
759
+ ? "bg-[#00bfa5] text-white rounded-tr-none"
760
+ : "bg-[#3a3a3a] text-gray-200 rounded-tl-none"
761
+ }">
762
+ <p class="text-[15px] leading-tight">${msg.message}</p>
763
+ <div class="text-[11px] opacity-70 mt-1">
764
+ ${new Date(msg.created_at).toLocaleTimeString([], {
765
+ hour: "2-digit",
766
+ minute: "2-digit"
767
+ })}
768
+ </div>
769
+ </div>
770
+ </div>
771
+ `;
772
+
773
+ container.appendChild(messageEl);
774
+ });
775
+
776
+ // Scroll to bottom
777
+ container.scrollTop = container.scrollHeight;
778
+
779
+ // Update stats
780
+ document.getElementById('chat-stats').textContent =
781
+ `${state.messages.length} poruka • ${
782
+ new Set(state.messages.map(m => m.user_id)).size
783
+ } učesnika`;
784
+ }
785
+
786
+ function sendMessage(e) {
787
+ e.preventDefault();
788
+ const input = document.getElementById('message-input');
789
+ const message = input.value.trim();
790
+
791
+ if (!message) return;
792
+
793
+ const newMessage = {
794
+ message,
795
+ user_id: state.user.id,
796
+ created_at: new Date().toISOString()
797
+ };
798
+
799
+ state.messages.push(newMessage);
800
+ input.value = '';
801
+ renderMessages();
802
+ }
803
+
804
+ function toggleEmojiPicker() {
805
+ const picker = document.getElementById('emoji-picker');
806
+ picker.classList.toggle('hidden');
807
+ }
808
+
809
+ function addEmoji(emoji) {
810
+ const input = document.getElementById('message-input');
811
+ input.value += emoji;
812
+ document.getElementById('emoji-picker').classList.add('hidden');
813
+ }
814
+
815
+ // Radio
816
+ function showRadio() {
817
+ document.getElementById('radio-player').classList.remove('closed');
818
+ document.getElementById('radio-player').classList.add('open');
819
+ }
820
+
821
+ function hideRadio() {
822
+ document.getElementById('radio-player').classList.remove('open');
823
+ document.getElementById('radio-player').classList.add('closed');
824
+ }
825
+
826
+ function toggleRadio() {
827
+ const audio = document.getElementById('radio-stream');
828
+ const icon = document.getElementById('play-pause-icon');
829
+
830
+ if (state.isRadioPlaying) {
831
+ audio.pause();
832
+ icon.className = 'fas fa-play';
833
+ } else {
834
+ audio.play();
835
+ icon.className = 'fas fa-pause';
836
+ }
837
+
838
+ state.isRadioPlaying = !state.isRadioPlaying;
839
+ }
840
+ </script>
841
+ <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=MrHouse111/programeri" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
842
+ </html>
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ saljem ti trenutni kod od WEB verzije aplikacije, ti treba celu aplikaciju da prebacis u android apk format. : "use client"; import React from "react"; import RadioPlayer from "../components/radio-player"; import { useUpload } from "../utilities/runtime-helpers"; function MainComponent() { const [user, setUser] = useState({ id: "anonymous" }); const [userLoading, setUserLoading] = useState(false); const [activeScreen, setActiveScreen] = useState("cities"); const [selectedCity, setSelectedCity] = useState(""); const [selectedRestaurant, setSelectedRestaurant] = useState(""); const [activeCategory, setActiveCategory] = useState(""); const [isRestaurantOpen, setIsRestaurantOpen] = useState(false); const [touchStart, setTouchStart] = useState(null); const [touchEnd, setTouchEnd] = useState(null); const [error, setError] = useState(null); const [upload, { loading }] = useUpload(); const [reviews, setReviews] = useState({}); const [newReview, setNewReview] = useState({ text: "", image: null }); const [isAdmin, setIsAdmin] = useState(false); const [pendingReviews, setPendingReviews] = useState([]); const [reviewStatus, setReviewStatus] = useState({}); const [favoriteItems, setFavoriteItems] = useState({}); const [showFavorites, setShowFavorites] = useState(false); const [points, setPoints] = useState(0); const [currentImageIndex, setCurrentImageIndex] = useState(0); const [showGallery, setShowGallery] = useState(false); const [showChat, setShowChat] = useState(false); const [showRadio, setShowRadio] = useState(false); const [messages, setMessages] = useState([]); const [newMessage, setNewMessage] = useState(""); const [chatLoading, setChatLoading] = useState(false); const [typingUsers, setTypingUsers] = useState({}); const [showEmojiPicker, setShowEmojiPicker] = useState(false); const [restaurants, setRestaurants] = useState({}); const [restaurantsLoading, setLoading] = useState(false); const [searchQuery, setSearchQuery] = useState(""); const [restaurantStatus, setRestaurantStatus] = useState({}); const [userPreferences, setUserPreferences] = useState({ badges: { "Prvi Pregled": false, "Redovan Korisnik": false, Gurman: false, Društvenjak: false, Ekspert: false, Foodie: true, }, favoriteCategories: ["Roštilj", "Pica", "Salate"], visitedRestaurants: ["Caribic", "Dukat", "Kod Žike"], }); const rewards = [ { id: 1, description: "10% popusta na sledeću porudžbinu", points: 100 }, { id: 2, description: "Besplatno piće uz obrok", points: 150 }, { id: 3, description: "Besplatna dostava", points: 200 }, { id: 4, description: "Besplatan obrok", points: 500 }, ]; const [menuData, setMenuData] = useState(null); const [menuLoading, setMenuLoading] = useState(false); const [menuError, setMenuError] = useState(null); const [lastSelectedCity, setLastSelectedCity] = useState(() => { return localStorage.getItem("lastSelectedCity") || ""; }); const [debugInfo, setDebugInfo] = useState({}); useEffect(() => { if (lastSelectedCity) { setSelectedCity(lastSelectedCity); setActiveScreen("restaurants"); loadRestaurants(lastSelectedCity); } }, []); useEffect(() => { const loadMessages = async () => { try { setChatLoading(true); const response = await fetch("/api/db/user-reviews", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `chat_messages` ORDER BY created_at DESC LIMIT 50", }), }); const messages = await response.json(); setMessages(messages.reverse()); } catch (error) { console.error("Error loading messages:", error); } finally { setChatLoading(false); } }; if (showChat) { loadMessages(); } }, [showChat]); const loadRestaurantMenu = async (restaurantId) => { try { setMenuLoading(true); setMenuError(null); const response = await fetch("/api/get-restaurant-menu", { method: "POST", body: JSON.stringify({ restaurantId }), }); if (!response.ok) { throw new Error("Problem sa učitavanjem menija"); } const data = await response.json(); setMenuData(data); } catch (err) { console.error("Greška pri učitavanju menija:", err); setMenuError("Nije moguće učitati meni. Molimo pokušajte ponovo."); } finally { setMenuLoading(false); } }; const checkRestaurantStatus = async (restaurantId) => { try { const response = await fetch("/api/check-restaurant-status", { method: "POST", body: JSON.stringify({ restaurantId }), }); const data = await response.json(); return data.isOpen; } catch (error) { console.error("Error checking restaurant status:", error); return null; } }; const loadRestaurants = async (city) => { try { setLoading(true); setError(null); const response = await fetch("/api/get-restaurants-by-city", { method: "POST", body: JSON.stringify({ city }), }); if (!response.ok) { throw new Error(`Error loading restaurants: ${response.status}`); } const data = await response.json(); const statuses = {}; await Promise.all( data.restaurants.map(async (restaurant) => { statuses[restaurant.id] = await checkRestaurantStatus(restaurant.id); }) ); setRestaurantStatus(statuses); setRestaurants((prev) => ({ ...prev, [city]: data.restaurants, })); } catch (err) { console.error("Error loading restaurants:", err); setError("Nije moguće učitati restorane. Molimo pokušajte ponovo."); } finally { setLoading(false); } }; const renderChat = () => { if (!showChat) return null; return ( <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"> <div className="bg-[#2a2a2a] rounded-lg max-w-md w-full max-h-[80vh] flex flex-col"> <div className="p-4 border-b border-gray-700 flex justify-between items-center"> <h2 className="text-xl font-semibold flex items-center"> <i className="fas fa-comments text-[#00bfa5] mr-2"></i> Chat </h2> <button onClick={() => setShowChat(false)} className="text-gray-400 hover:text-white transition-colors" > <i className="fas fa-times"></i> </button> </div> <div className="flex-1 overflow-y-auto p-4 space-y-4"> {messages.map((msg, index) => ( <div key={index} className={`flex ${ msg.user_id === user.id ? "justify-end" : "justify-start" }`} > <div className={`max-w-[80%] rounded-lg p-3 ${ msg.user_id === user.id ? "bg-[#00bfa5] text-white" : "bg-[#3a3a3a] text-gray-200" }`} > <div className="text-sm opacity-75 mb-1"> {msg.user_id === user.id ? "Vi" : "Korisnik"} </div> <p>{msg.message}</p> <div className="text-xs opacity-50 text-right mt-1"> {new Date(msg.created_at).toLocaleTimeString()} </div> </div> </div> ))} {chatLoading && ( <div className="flex justify-center"> <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00bfa5]"></div> </div> )} </div> <div className="p-4 border-t border-gray-700"> <form onSubmit={async (e) => { e.preventDefault(); if (!newMessage.trim()) return; const messageData = { message: newMessage, user_id: user.id, created_at: new Date().toISOString(), }; try { setChatLoading(true); await fetch("/api/db/user-reviews", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_messages` (message, user_id, created_at) VALUES (?, ?, ?)", values: [ messageData.message, messageData.user_id, messageData.created_at, ], }), }); setMessages((prev) => [...prev, messageData]); setNewMessage(""); const response = await fetch("/api/db/user-reviews", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `chat_messages` ORDER BY created_at DESC LIMIT 50", }), }); const newMessages = await response.json(); setMessages(newMessages.reverse()); } catch (error) { console.error("Error sending message:", error); } finally { setChatLoading(false); } }} className="flex gap-2" > <input type="text" value={newMessage} onChange={(e) => setNewMessage(e.target.value)} placeholder="Napišite poruku..." className="flex-1 bg-[#3a3a3a] rounded-lg px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00bfa5]" /> <button type="submit" disabled={chatLoading || !newMessage.trim()} className="bg-[#00bfa5] text-white px-4 py-2 rounded-lg disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#00a693] transition-colors" > <i className="fas fa-paper-plane"></i> </button> </form> </div> </div> </div> ); }; return ( <div className="min-h-screen bg-[#121212] text-white" role="main"> {activeScreen === "cities" && ( <div className="flex flex-col items-center justify-center min-h-screen pt-16"> <div className="fixed top-0 right-0 p-4 flex gap-4 z-50"> <button onClick={() => setShowRadio(true)} className="text-gray-400 hover:text-[#00bfa5] transition-colors" aria-label="Otvori radio" > <i className="fas fa-radio text-2xl"></i> </button> <button onClick={() => { setShowChat(true); setActiveScreen("chat"); }} className="text-gray-400 hover:text-[#00bfa5] transition-colors" > <i className="fas fa-comments text-2xl"></i> </button> <button onClick={() => setShowFavorites(true)} className="text-gray-400 hover:text-[#00bfa5] transition-colors" > <i className="fas fa-heart text-2xl"></i> </button> <button onClick={() => setActiveScreen("loyalty")} className="text-gray-400 hover:text-[#00bfa5] transition-colors" > <i className="fas fa-gift text-2xl"></i> </button> <button onClick={() => setActiveScreen("profile")} className="text-gray-400 hover:text-[#00bfa5] transition-colors" > <i className="fas fa-user text-2xl"></i> </button> </div> <h1 className="text-4xl md:text-6xl font-serif mb-8">Šta Klopati</h1> <img src="https://ucarecdn.com/84e97dda-5149-45c9-910a-8ee1fcb5bf35/-/format/auto/" alt="Šta Klopati Logo" className="w-[120px] h-[120px] rounded-full mb-12" /> <div className="flex flex-col gap-6 w-full max-w-xs"> <button onClick={() => { setSelectedCity("Nova Pazova"); setActiveScreen("restaurants"); loadRestaurants("Nova Pazova"); localStorage.setItem("lastSelectedCity", "Nova Pazova"); setLastSelectedCity("Nova Pazova"); }} className="group relative bg-gradient-to-r from-[#00bfa5] to-[#00a693] py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95" > <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 rounded-lg transition-opacity"></div> <div className="flex items-center justify-center gap-3"> <i className="fas fa-map-marker-alt"></i> <span>Nova Pazova</span> </div> </button> <button onClick={() => { setSelectedCity("Stara Pazova"); setActiveScreen("restaurants"); loadRestaurants("Stara Pazova"); localStorage.setItem("lastSelectedCity", "Stara Pazova"); setLastSelectedCity("Stara Pazova"); }} className="group relative bg-gradient-to-r from-[#00bfa5] to-[#00a693] py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95" > <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 rounded-lg transition-opacity"></div> <div className="flex items-center justify-center gap-3"> <i className="fas fa-map-marker-alt"></i> <span>Stara Pazova</span> </div> </button> <button onClick={() => { setSelectedCity("Banovci"); setActiveScreen("restaurants"); loadRestaurants("Banovci"); localStorage.setItem("lastSelectedCity", "Banovci"); setLastSelectedCity("Banovci"); }} className="group relative bg-gradient-to-r from-[#00bfa5] to-[#00a693] py-4 px-8 rounded-lg text-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl active:scale-95" > <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 rounded-lg transition-opacity"></div> <div className="flex items-center justify-center gap-3"> <i className="fas fa-map-marker-alt"></i> <span>Banovci</span> </div> </button> </div> </div> )} {activeScreen === "restaurants" && ( <div className="p-4"> <div className="flex justify-between items-center mb-6"> <button onClick={() => { setActiveScreen("cities"); localStorage.removeItem("lastSelectedCity"); setLastSelectedCity(""); }} className="text-[#00bfa5] flex items-center" > <i className="fas fa-city mr-2"></i> Promeni grad </button> <h2 className="text-2xl">{selectedCity}</h2> </div> {restaurantsLoading ? ( <div className="flex justify-center items-center p-8"> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00bfa5]"></div> </div> ) : error ? ( <div className="text-red-500 p-4 text-center bg-[#2a2a2a] rounded-lg"> <i className="fas fa-exclamation-circle text-2xl mb-2"></i> <p>{error}</p> <button onClick={() => loadRestaurants(selectedCity)} className="mt-4 px-4 py-2 bg-[#00bfa5] rounded-lg text-white hover:bg-[#00a693]" > Pokušaj ponovo </button> </div> ) : restaurants[selectedCity]?.length > 0 ? ( <div className="grid gap-4"> {restaurants[selectedCity] .filter((restaurant) => restaurant.name .toLowerCase() .includes(searchQuery.toLowerCase()) ) .map((restaurant, index) => ( <div key={index} className="bg-[#2a2a2a] p-4 rounded-lg cursor-pointer hover:bg-[#3a3a3a] transition-all duration-200" onClick={() => { setSelectedRestaurant(restaurant); setActiveScreen("menu"); loadRestaurantMenu(restaurant.id); }} > <div className="flex justify-between items-start"> <div className="flex-1"> <h3 className="text-xl mb-2">{restaurant.name}</h3> <div className="space-y-1 text-sm"> <p className="text-gray-400">{restaurant.hours}</p> <p className="text-gray-400">{restaurant.phone}</p> </div> </div> <div className="ml-4"> {restaurantStatus[restaurant.id] !== null && ( <div className={`px-3 py-1 rounded-full text-sm font-medium ${ restaurantStatus[restaurant.id] ? "bg-green-500/10 text-green-500" : "bg-red-500/10 text-red-500" }`} > {restaurantStatus[restaurant.id] ? "Otvoreno" : "Zatvoreno"} </div> )} </div> </div> </div> ))} </div> ) : ( <div className="text-center text-gray-400 p-8 bg-[#2a2a2a] rounded-lg"> <i className="fas fa-store-alt-slash text-4xl mb-4"></i> <p>Trenutno nema dostupnih restorana u {selectedCity}</p> </div> )} </div> )} {activeScreen === "menu" && selectedRestaurant && ( <div className="pb-20 relative min-h-screen"> <div className="sticky top-0 bg-[#121212] z-10 p-4 border-b border-gray-800"> <div className="flex items-center justify-between mb-4"> <button onClick={() => setActiveScreen("restaurants")} className="text-[#00bfa5] flex items-center" > <i className="fas fa-arrow-left mr-2"></i> Nazad </button> <h2 className="text-xl font-semibold"> {selectedRestaurant.name} </h2> <div className="w-8"></div> </div> <div className="flex items-center text-sm text-gray-400"> <div className="flex items-center"> <i className="far fa-clock mr-2"></i> <span>{selectedRestaurant.hours}</span> </div> </div> </div> {menuLoading ? ( <div className="flex justify-center items-center p-8"> <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#00bfa5]"></div> </div> ) : menuError ? ( <div className="text-red-500 p-4 text-center bg-[#2a2a2a] rounded-lg m-4"> <i className="fas fa-exclamation-circle text-2xl mb-2"></i> <p>{menuError}</p> <button onClick={() => loadRestaurantMenu(selectedRestaurant.id)} className="mt-4 px-4 py-2 bg-[#00bfa5] rounded-lg text-white hover:bg-[#00a693]" > Pokušaj ponovo </button> </div> ) : menuData ? ( <> <div className="sticky top-[72px] bg-[#121212] z-10 border-b border-gray-800"> <div className="overflow-x-auto hide-scrollbar"> <div className="flex p-2 space-x-2 min-w-max"> {Object.keys(menuData.menu).map((category) => ( <button key={category} onClick={() => setActiveCategory(category)} className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-200 ${ activeCategory === category ? "bg-[#00bfa5] text-white" : "bg-[#2a2a2a] text-gray-300 hover:bg-[#3a3a3a]" }`} > {category === "Roštilj" && ( <i className="fas fa-fire mr-2"></i> )} {category === "Prilozi" && ( <i className="fas fa-utensils mr-2"></i> )} {category === "Salate" && ( <i className="fas fa-leaf mr-2"></i> )} {category === "Pića" && ( <i className="fas fa-glass-martini mr-2"></i> )} {category} </button> ))} </div> </div> </div> <div className="p-4"> <div className="grid gap-3"> {menuData.menu[ activeCategory || Object.keys(menuData.menu)[0] ]?.map((item, index) => ( <div key={index} className="bg-[#2a2a2a] rounded-lg p-4 hover:bg-[#3a3a3a] transition-colors duration-200" > <div className="flex justify-between items-start"> <div className="flex-1"> <h4 className="text-lg font-medium mb-1"> {item.name} </h4> <div className="space-y-1"> {item.description && ( <p className="text-sm text-gray-400"> {item.description} </p> )} {item.portion && ( <p className="text-sm text-gray-400 flex items-center"> <i className="fas fa-weight mr-2"></i> {item.portion} </p> )} </div> </div> <div className="flex flex-col items-end ml-4"> <span className="text-[#00bfa5] font-semibold mb-2"> {item.price} RSD </span> <button onClick={(e) => { e.stopPropagation(); const key = `${selectedRestaurant.name}-${item.name}`; setFavoriteItems((prev) => ({ ...prev, [key]: !prev[key], })); }} className="text-2xl transition-colors duration-200 hover:scale-110" > <i className={`fas fa-heart ${ favoriteItems[ `${selectedRestaurant.name}-${item.name}` ] ? "text-red-500" : "text-gray-400" }`} ></i> </button> </div> </div> </div> ))} </div> </div> </> ) : ( <div className="text-center text-gray-400 p-8"> <p>Meni nije dostupan</p> </div> )} <a href={`tel:${selectedRestaurant.phone}`} className="fixed bottom-6 right-6 bg-[#00bfa5] w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-[#00a693] transition-colors z-40" > <i className="fas fa-phone text-white text-2xl"></i> </a> </div> )} {activeScreen === "loyalty" && ( <div className="min-h-screen bg-[#121212] p-4"> <div className="sticky top-0 bg-[#121212] z-10 pb-4"> <button onClick={() => setActiveScreen("cities")} className="text-[#00bfa5] flex items-center mb-4" > <i className="fas fa-arrow-left mr-2"></i> Nazad </button> <h2 className="text-2xl font-semibold mb-2">Loyalty Program</h2> <div className="bg-[#2a2a2a] p-4 rounded-lg mb-4"> <div className="flex items-center justify-between"> <div> <p className="text-gray-400">Vaši poeni</p> <p className="text-3xl font-bold text-[#00bfa5]">{points}</p> </div> <i className="fas fa-star text-[#00bfa5] text-4xl"></i> </div> </div> </div> <div className="grid gap-4"> {rewards.map((reward) => ( <div key={reward.id} className="bg-[#2a2a2a] p-4 rounded-lg"> <div className="flex justify-between items-center"> <div> <h3 className="text-lg font-medium mb-1"> {reward.description} </h3> <p className="text-sm text-gray-400"> Potrebno poena: {reward.points} </p> </div> <button disabled={points < reward.points || reward.claimed} onClick={() => { alert("Nagrada je uspešno aktivirana!"); }} className={`px-4 py-2 rounded-lg ${ points >= reward.points && !reward.claimed ? "bg-[#00bfa5] text-white" : "bg-gray-600 text-gray-400" }`} > {reward.claimed ? "Iskorišćeno" : "Aktiviraj"} </button> </div> </div> ))} </div> </div> )} {activeScreen === "profile" && ( <div className="min-h-screen bg-[#121212] p-4"> <div className="sticky top-0 bg-[#121212] z-10 pb-4"> <button onClick={() => setActiveScreen("cities")} className="text-[#00bfa5] flex items-center mb-4" > <i className="fas fa-arrow-left mr-2"></i> Nazad </button> <h2 className="text-2xl font-semibold mb-4">Vaš Profil</h2> </div> <div className="space-y-4"> <div className="bg-[#2a2a2a] p-4 rounded-lg"> <div className="flex items-center space-x-4"> <div className="w-20 h-20 bg-[#3a3a3a] rounded-full flex items-center justify-center"> <i className="fas fa-user text-3xl text-[#00bfa5]"></i> </div> <div> <h3 className="text-xl font-medium">Korisnik</h3> <p className="text-gray-400">ID: {user.id}</p> </div> </div> </div> <div className="bg-[#2a2a2a] p-4 rounded-lg"> <h3 className="text-lg font-medium mb-3">Vaša Dostignuća</h3> <div className="grid grid-cols-3 gap-3"> {Object.entries(userPreferences.badges).map( ([badge, earned], index) => ( <div key={index} className={`p-3 rounded-lg text-center ${ earned ? "bg-[#00bfa5] bg-opacity-20" : "bg-[#3a3a3a]" }`} > <i className={`fas fa-${ earned ? "check-circle text-[#00bfa5]" : "circle text-gray-400" } text-2xl mb-2`} ></i> <p className="text-sm">{badge}</p> </div> ) )} </div> </div> <div className="bg-[#2a2a2a] p-4 rounded-lg"> <h3 className="text-lg font-medium mb-3">Omiljene Kategorije</h3> <div className="flex flex-wrap gap-2"> {userPreferences.favoriteCategories.map((category, index) => ( <span key={index} className="bg-[#3a3a3a] px-3 py-1 rounded-full text-sm" > {category} </span> ))} </div> </div> <div className="bg-[#2a2a2a] p-4 rounded-lg"> <h3 className="text-lg font-medium mb-3">Posećeni Restorani</h3> <div className="space-y-2"> {userPreferences.visitedRestaurants.map((restaurant, index) => ( <div key={index} className="flex items-center justify-between" > <span>{restaurant}</span> <i className="fas fa-check text-[#00bfa5]"></i> </div> ))} </div> </div> </div> </div> )} {activeScreen === "chat" && ( <div className="fixed inset-0 bg-[#121212] z-50 flex flex-col"> <div className="bg-[#2a2a2a] px-4 py-3 flex items-center justify-between border-b border-gray-700"> <div className="flex items-center"> <button onClick={() => { setShowChat(false); setActiveScreen("cities"); }} className="mr-3 text-gray-400 hover:text-white" > <i className="fas fa-arrow-left text-lg"></i> </button> <div> <h2 className="text-lg font-semibold">Grupni Chat</h2> <p className="text-sm text-gray-400"> {messages.length} poruka •{" "} {new Set(messages.map((m) => m.user_id)).size} učesnika </p> </div> </div> </div> <div className="flex-1 overflow-y-auto p-4 space-y-4" id="chat-messages" > {messages.map((msg, index) => { const isFirstInGroup = index === 0 || messages[index - 1].user_id !== msg.user_id; const isLastInGroup = index === messages.length - 1 || messages[index + 1].user_id !== msg.user_id; return ( <div key={index} className={`flex ${ msg.user_id === user.id ? "justify-end" : "justify-start" }`} > <div className={`max-w-[80%] ${ !isLastInGroup ? "mb-1" : "mb-3" }`} > {isFirstInGroup && ( <div className={`text-sm mb-1 ${ msg.user_id === user.id ? "text-right text-gray-300" : "text-gray-300" }`} > {msg.user_id === user.id ? "Vi" : `Korisnik ${msg.user_id.slice(0, 4)}`} </div> )} <div className={`rounded-2xl px-4 py-2 ${ msg.user_id === user.id ? "bg-[#00bfa5] text-white rounded-tr-none" : "bg-[#3a3a3a] text-gray-200 rounded-tl-none" }`} > <p className="text-[15px] leading-tight">{msg.message}</p> <div className="text-[11px] opacity-70 mt-1"> {new Date(msg.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", })} </div> </div> </div> </div> ); })} {Object.keys(typingUsers).length > 0 && ( <div className="flex items-center space-x-2 text-gray-400 text-sm"> <div className="flex space-x-1"> <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div> <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-100"></div> <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-200"></div> </div> <span> {Object.keys(typingUsers).length === 1 ? `${Object.keys(typingUsers)[0]} kuca...` : `${Object.keys(typingUsers).length} korisnika kucaju...`} </span> </div> )} </div> <div className="bg-[#2a2a2a] p-3 border-t border-gray-700"> {showEmojiPicker && ( <div className="absolute bottom-20 right-4 bg-[#3a3a3a] rounded-lg shadow-xl p-2"> <div className="grid grid-cols-8 gap-2"> {[ "😊", "😂", "❤️", "👍", "😍", "🎉", "👋", "🤔", "😅", "🙌", "🤷‍♂️", "🔥", "👏", "💪", "🙏", "✨", ].map((emoji) => ( <button key={emoji} onClick={() => { setNewMessage((prev) => prev + emoji); setShowEmojiPicker(false); }} className="text-2xl hover:bg-[#4a4a4a] p-2 rounded-lg transition-colors" > {emoji} </button> ))} </div> </div> )} <form onSubmit={async (e) => { e.preventDefault(); if (!newMessage.trim()) return; const messageData = { message: newMessage, user_id: user.id, created_at: new Date().toISOString(), }; try { setChatLoading(true); await fetch("/api/db/user-reviews", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `chat_messages` (message, user_id, created_at) VALUES (?, ?, ?)", values: [ messageData.message, messageData.user_id, messageData.created_at, ], }), }); setMessages((prev) => [...prev, messageData]); setNewMessage(""); setTypingUsers((prev) => { const newTyping = { ...prev }; delete newTyping[user.id]; return newTyping; }); const chatContainer = document.getElementById("chat-messages"); chatContainer.scrollTop = chatContainer.scrollHeight; } catch (error) { console.error("Error sending message:", error); alert("Greška pri slanju poruke. Pokušajte ponovo."); } finally { setChatLoading(false); } }} className="flex items-center gap-2" > <div className="flex-1 relative"> <input type="text" value={newMessage} onChange={(e) => { setNewMessage(e.target.value); if (e.target.value) { setTypingUsers((prev) => ({ ...prev, [user.id]: true })); setTimeout(() => { setTypingUsers((prev) => { const newTyping = { ...prev }; delete newTyping[user.id]; return newTyping; }); }, 2000); } }} placeholder="Napišite poruku..." className="w-full bg-[#3a3a3a] rounded-full px-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00bfa5]" /> <button type="button" onClick={() => setShowEmojiPicker(!showEmojiPicker)} className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-[#00bfa5] hover:text-[#00a693]" > <i className="fas fa-smile text-xl"></i> </button> </div> <button type="submit" disabled={chatLoading || !newMessage.trim()} className="p-2 bg-[#00bfa5] text-white rounded-full disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#00a693] transition-colors" > <i className="fas fa-paper-plane text-xl"></i> </button> </form> </div> </div> )} {showFavorites && ( <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4"> <div className="bg-[#2a2a2a] rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden"> <div className="p-4 border-b border-gray-700 flex justify-between items-center sticky top-0 bg-[#2a2a2a]"> <h2 className="text-xl font-semibold flex items-center"> <i className="fas fa-heart text-red-500 mr-2"></i> Omiljena jela </h2> <button onClick={() => setShowFavorites(false)} className="text-gray-400 hover:text-white transition-colors" > <i className="fas fa-times"></i> </button> </div> <div className="p-4 overflow-y-auto" style={{ maxHeight: "calc(80vh - 70px)" }} > {Object.entries(favoriteItems).filter( ([, isFavorite]) => isFavorite ).length === 0 ? ( <div className="text-center py-8 text-gray-400"> <i className="far fa-heart text-4xl mb-3"></i> <p>Nemate označenih omiljenih jela</p> <p className="text-sm mt-2"> Označite srce pored jela da ga dodate u omiljene </p> </div> ) : ( <div className="space-y-3"> {Object.entries(favoriteItems).map(([key, isFavorite]) => { if (!isFavorite) return null; const [restaurant, item] = key.split("-"); return ( <div key={key} className="bg-[#3a3a3a] rounded-lg p-3 flex justify-between items-center group hover:bg-[#4a4a4a] transition-colors" > <div> <p className="font-medium">{item}</p> <p className="text-sm text-gray-400">{restaurant}</p> </div> <button onClick={() => setFavoriteItems((prev) => ({ ...prev, [key]: false, })) } className="text-red-500 opacity-75 group-hover:opacity-100 transition-opacity" > <i className="fas fa-heart"></i> </button> </div> ); })} </div> )} </div> </div> </div> )} {showRadio && ( <RadioPlayer isOpen={showRadio} onClose={() => setShowRadio(false)} /> )} <style jsx global>{` .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } `}</style> </div> ); } export default MainComponent;