Spaces:
Running
Running
Add 2 files
Browse files- index.html +839 -38
- prompts.txt +1 -0
index.html
CHANGED
|
@@ -1,41 +1,842 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
<
|
| 5 |
-
<meta name="viewport" content="width=device-width, initial-scale=1.0"
|
| 6 |
-
<
|
|
|
|
|
|
|
| 7 |
<style>
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 31 |
</style>
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
<
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
<
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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;
|