VMenu-App/index.html at main · dayofpay/VMenu-App · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!doctype html>
<html lang="en">
<head>
  <!-- Meta -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover">
  <meta name="theme-color" content="#92E136">
  <meta name="author" content="V-Menu">
  <meta name="robots" content="index, follow">
  <meta name="description" content="Дигитално меню на обекта.">
  <meta property="og:title" content="Дигитално меню">
  <meta property="og:description" content="Поръчайте директно от нашето дигитално меню">
  <!-- <meta property="og:image" content=""> -->
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="">
  <!-- Favicons Icon -->
  <link rel="shortcut icon" type="image/x-icon" id="objectLogo" href="">

  <!-- Dynamically set the manifest file -->
  <script>
    const urlParams = new URLSearchParams(window.location.search);
    const objectId = Number(JSON.parse(localStorage.getItem('restaurantId'))) || 1;
    const tableId = Number(JSON.parse(localStorage.getItem('tableId'))) || 1;
    const manifestUrl = `https://v-menu.eu/api/manifest/${objectId}/${tableId}`;
    const objectLogo_API = `https://v-menu.eu/api/objectLogo/${objectId}`;
    const objectLogo = document.getElementById('objectLogo');
    fetch(objectLogo_API)
      .then(response => response.json())
      .then(data => {
        objectLogo.href = `https://v-menu.eu/uploads/${data.logo}`;
      });
    document.write('<link rel="manifest" href="' + manifestUrl + '">');
  </script>
  <!-- End of manifest script -->

  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">

  <!-- Global CSS -->
  <link href="/assets/vendor/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/assets/vendor/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css">
  <link rel="stylesheet" href="/assets/vendor/swiper/swiper-bundle.min.css">
  <!-- Stylesheets -->
  <link rel="stylesheet" type="text/css" href="/assets/css/style.css">
<style>
/* Hide all Google Translate branding elements */
body > .skiptranslate,
.goog-logo-link,
.goog-te-gadget span,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-gadget-icon,
.goog-te-spinner-pos,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight,
div#goog-gt- {
  display: none !important;
}

/* Reset gadget container */
.goog-te-gadget {
  color: transparent !important;
  font-size: 0 !important;
}

/* Beautiful select dropdown styling */
#google_translate_element select {
  /* Основни стилове */
  width: 100%;
  padding: 12px 52px 12px 16px;
  border: 2px solid rgba(168, 109, 46, 0.3);
  border-radius: 12px;
  background-color: #fff8ee;
  color: #a86d2e;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Кастомна стрелка */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a86d2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;

  /* Фокус стил */
  outline: none;
}

/* Ховер ефект */
#google_translate_element select:hover {
  border-color: rgba(168, 109, 46, 0.6);
  box-shadow: 0 2px 8px rgba(168, 109, 46, 0.1);
}

/* Фокус ефект */
#google_translate_element select:focus {
  border-color: #a86d2e;
  box-shadow: 0 0 0 3px rgba(168, 109, 46, 0.2);
}

/* Анимация при фокус */
@keyframes selectFocus {
  0% { box-shadow: 0 0 0 0 rgba(168, 109, 46, 0.2); }
  100% { box-shadow: 0 0 0 6px rgba(168, 109, 46, 0); }
}

#google_translate_element select:focus {
  animation: selectFocus 0.4s ease-out;
}

/* Дарк мод поддръжка */
@media (prefers-color-scheme: dark) {
  #google_translate_element select {
    background-color: #2a1a0a;
    color: #ffd8b4;
    border-color: rgba(168, 109, 46, 0.5);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffd8b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }

  #google_translate_element select:hover {
    border-color: rgba(168, 109, 46, 0.8);
  }
}
[data-no-translate], .quantity-control, .cart-item {
  -webkit-translate: no;
  translate: no;
}
body > div.VIpgJd-ZVi9od-aZ2wEe-wOHMyf.VIpgJd-ZVi9od-aZ2wEe-wOHMyf-ti6hGc {
  display: none !important;
}
/* Hover and focus states */
#google_translate_element select:hover {
  background-color: #4a3a30;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#google_translate_element select:focus {
  outline: none;
  background-color: #4a3a30;
  box-shadow: 0 0 0 2px #e8c9a9;
}

/* Dropdown options styling */
#google_translate_element select option {
  background: #3a2b21;
  color: #fff8ee;
  padding: 10px;
}

/* Modern scrollbar for dropdown */
#google_translate_element select::-webkit-scrollbar {
  width: 8px;
}

#google_translate_element select::-webkit-scrollbar-track {
  background: #2a1d15;
}

#google_translate_element select::-webkit-scrollbar-thumb {
  background: #e8c9a9;
  border-radius: 4px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #google_translate_element select {
    padding: 12px 16px;
    font-size: 16px;
  }

}

</style>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

</head>
<body data-theme-color="color-primary">
  <div id="root"></div>

  <script type="module" src="/src/main.jsx"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>


<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

  <script src="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons-react/dist/index.umd.min.js"></script>
</body>
</html>