source: src/index.html

main
Last change on this file was a4ca79c, checked in by Georgi Paunkov <paunkovgeorgi@…>, 4 days ago

Initial commit
  • Property mode set to 100644
File size: 15.0 KB
RevLine 
[a4ca79c]1<!DOCTYPE html>
2<html lang="mk">
3<head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>POS</title>
7 <link rel="preconnect" href="https://fonts.googleapis.com">
8 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9 <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
10 <link rel="stylesheet" href="styles.css" />
11</head>
12<body>
13
14<header class="titlebar" data-tauri-drag-region>
15 <div class="titlebar__brand" data-tauri-drag-region>
16 <span class="titlebar__mark">POS</span>
17 <span class="titlebar__name" id="tb-restaurant-name"></span>
18 </div>
19 <div class="titlebar__session" id="tb-session" hidden>
20 <span class="titlebar__user" id="tb-user-name">—</span>
21 <span class="titlebar__role" id="tb-user-role">—</span>
22 <button class="btn btn--ghost btn--sm" id="btn-logout">Одјава</button>
23 </div>
24 <div class="titlebar__controls">
25 <button class="win-btn" id="win-min" title="Минимизирај" aria-label="Минимизирај">
26 <svg viewBox="0 0 10 10"><rect x="1" y="4.5" width="8" height="1"/></svg>
27 </button>
28 <button class="win-btn" id="win-max" title="Максимизирај" aria-label="Максимизирај">
29 <svg viewBox="0 0 10 10"><rect x="1.5" y="1.5" width="7" height="7" fill="none" stroke="currentColor" stroke-width="1"/></svg>
30 </button>
31 <button class="win-btn win-btn--danger" id="win-close" title="Затвори" aria-label="Затвори">
32 <svg viewBox="0 0 10 10"><line x1="1" y1="1" x2="9" y2="9" stroke="currentColor" stroke-width="1.2"/><line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" stroke-width="1.2"/></svg>
33 </button>
34 </div>
35</header>
36
37<div class="toast-stack" id="toast-stack" aria-live="polite"></div>
38
39<main class="view view--login" id="view-login">
40 <div class="login-card">
41 <div class="login-card__mark">◆</div>
42 <h1 class="login-card__title">Најава на смена</h1>
43 <p class="login-card__subtitle">Внесете го вашиот персонален ПИН</p>
44
45 <div class="pin-display" id="pin-display">
46 <span class="pin-dot" data-i="0"></span>
47 <span class="pin-dot" data-i="1"></span>
48 <span class="pin-dot" data-i="2"></span>
49 <span class="pin-dot" data-i="3"></span>
50 <span class="pin-dot" data-i="4"></span>
51 <span class="pin-dot" data-i="5"></span>
52 </div>
53 <p class="login-error" id="login-error"></p>
54
55 <div class="keypad">
56 <button class="keypad__key" data-key="1">1</button>
57 <button class="keypad__key" data-key="2">2</button>
58 <button class="keypad__key" data-key="3">3</button>
59 <button class="keypad__key" data-key="4">4</button>
60 <button class="keypad__key" data-key="5">5</button>
61 <button class="keypad__key" data-key="6">6</button>
62 <button class="keypad__key" data-key="7">7</button>
63 <button class="keypad__key" data-key="8">8</button>
64 <button class="keypad__key" data-key="9">9</button>
65 <button class="keypad__key keypad__key--fn" data-key="clear">Бриши</button>
66 <button class="keypad__key" data-key="0">0</button>
67 <button class="keypad__key keypad__key--fn" data-key="back">⌫</button>
68 </div>
69
70 <button class="btn btn--primary btn--block" id="btn-login">
71 <span id="btn-login-label">Најави се</span>
72 </button>
73 </div>
74</main>
75
76<div class="shell" id="shell" hidden>
77
78 <nav class="sidebar">
79 <div class="sidebar__group">
80 <button class="nav-item" data-view="tables">
81 <svg class="nav-item__icon" viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="8" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/><rect x="13" y="13" width="8" height="8" rx="1.5"/></svg>
82 <span>Маси</span>
83 </button>
84 <button class="nav-item" data-view="kitchen">
85 <svg class="nav-item__icon" viewBox="0 0 24 24"><path d="M4 4h16v4H4z"/><path d="M6 8v12h12V8"/><path d="M10 12v4M14 12v4"/></svg>
86 <span>Кујна</span>
87 </button>
88 </div>
89
90 <div class="sidebar__group sidebar__group--admin" id="nav-admin-group">
91 <div class="sidebar__label">Управување</div>
92 <button class="nav-item" data-view="inventory">
93 <svg class="nav-item__icon" viewBox="0 0 24 24"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/><path d="M12 11v10"/></svg>
94 <span>Залихи</span>
95 </button>
96 <button class="nav-item" data-view="reports">
97 <svg class="nav-item__icon" viewBox="0 0 24 24"><path d="M4 20V10M11 20V4M18 20v-7"/></svg>
98 <span>Извештаи</span>
99 </button>
100 <button class="nav-item" data-view="products">
101 <svg class="nav-item__icon" viewBox="0 0 24 24"><path d="M20 7l-8-4-8 4 8 4 8-4z"/><path d="M4 7v10l8 4 8-4V7"/></svg>
102 <span>Мени</span>
103 </button>
104 <button class="nav-item" data-view="employees">
105 <svg class="nav-item__icon" viewBox="0 0 24 24"><circle cx="9" cy="8" r="3.2"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="18" cy="8" r="2.5"/><path d="M16 14.5c2.6.3 4.6 2.5 5 5.5"/></svg>
106 <span>Вработени</span>
107 </button>
108 <button class="nav-item" data-view="settings">
109 <svg class="nav-item__icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 13.5a7.6 7.6 0 000-3l2-1.5-2-3.4-2.3.9a7.6 7.6 0 00-2.6-1.5L14 2.5h-4l-.5 2.5a7.6 7.6 0 00-2.6 1.5l-2.3-.9-2 3.4L4.6 10.5a7.6 7.6 0 000 3l-2 1.5 2 3.4 2.3-.9c.75.66 1.63 1.17 2.6 1.5l.5 2.5h4l.5-2.5a7.6 7.6 0 002.6-1.5l2.3.9 2-3.4-2-1.5z"/></svg>
110 <span>Поставки</span>
111 </button>
112 </div>
113
114 <div class="sidebar__footer">
115 <div class="sidebar__clock" id="sidebar-clock">--:--</div>
116 </div>
117 </nav>
118
119 <div class="content">
120
121 <section class="view-panel" id="panel-tables">
122 <div class="panel-head">
123 <div>
124 <h2 class="panel-title">Маси</h2>
125 <p class="panel-subtitle">Изберете маса за да отворите или продолжите нарачка</p>
126 </div>
127 <div class="legend">
128 <span class="legend__item"><i class="dot dot--free"></i> Слободна</span>
129 <span class="legend__item"><i class="dot dot--occupied"></i> Зафатена</span>
130 <span class="legend__item"><i class="dot dot--reserved"></i> Резервирана</span>
131 </div>
132 </div>
133 <div class="tables-grid" id="tables-grid"></div>
134 </section>
135
136 <section class="view-panel" id="panel-order">
137 <div class="order-layout">
138 <div class="order-menu">
139 <div class="panel-head panel-head--tight">
140 <div>
141 <button class="btn btn--ghost btn--sm" id="btn-back-to-tables">← Маси</button>
142 <h2 class="panel-title" id="order-table-title">Маса —</h2>
143 </div>
144 </div>
145 <div class="category-tabs" id="category-tabs"></div>
146 <div class="product-grid" id="product-grid"></div>
147 </div>
148
149 <aside class="order-cart">
150 <div class="order-cart__head">
151 <h3>Сметка</h3>
152 <span class="chip" id="order-status-chip">—</span>
153 </div>
154 <div class="order-cart__items" id="cart-items">
155 <p class="empty-hint">Нема ставки во нарачката</p>
156 </div>
157 <div class="order-cart__summary">
158 <div class="summary-row summary-row--total">
159 <span>Вкупно</span>
160 <span id="cart-total">0.00</span>
161 </div>
162 </div>
163 <div class="order-cart__actions">
164 <button class="btn btn--primary btn--block" id="btn-pay">Наплати</button>
165 </div>
166 </aside>
167 </div>
168 </section>
169
170 <section class="view-panel" id="panel-kitchen">
171 <div class="panel-head">
172 <div>
173 <h2 class="panel-title">Кујна</h2>
174 <p class="panel-subtitle">Активни нарачки во реално време</p>
175 </div>
176 <button class="btn btn--ghost btn--sm" id="btn-refresh-kitchen">Освежи</button>
177 </div>
178 <div class="kitchen-grid" id="kitchen-grid"></div>
179 </section>
180
181 <section class="view-panel" id="panel-inventory">
182 <div class="panel-head">
183 <div>
184 <h2 class="panel-title">Залихи</h2>
185 <p class="panel-subtitle">Моментална состојба на производи</p>
186 </div>
187 <div class="panel-head__tools">
188 <input type="search" id="inventory-search" class="search-input" placeholder="Пребарај производ…" />
189 <label class="switch">
190 <input type="checkbox" id="toggle-low-stock" />
191 <span>Прикажи само критични</span>
192 </label>
193 </div>
194 </div>
195 <div class="table-wrap">
196 <table class="data-table" id="inventory-table">
197 <thead>
198 <tr><th>Производ</th><th>Количина</th><th>Мин. залиха</th><th>Статус</th><th></th></tr>
199 </thead>
200 <tbody></tbody>
201 </table>
202 </div>
203 </section>
204
205 <section class="view-panel" id="panel-reports">
206 <div class="panel-head">
207 <div>
208 <h2 class="panel-title">Извештаи</h2>
209 <p class="panel-subtitle">Преглед на продажба и перформанси</p>
210 </div>
211 <button class="btn btn--primary btn--sm" id="btn-z-report">Затвори смена (Z-извештај)</button>
212 </div>
213
214 <div class="stat-cards">
215 <div class="stat-card">
216 <span class="stat-card__label">Денешна продажба</span>
217 <span class="stat-card__value" id="stat-today-sales">—</span>
218 </div>
219 <div class="stat-card">
220 <span class="stat-card__label">Денешни нарачки</span>
221 <span class="stat-card__value" id="stat-today-orders">—</span>
222 </div>
223 <div class="stat-card">
224 <span class="stat-card__label">Најпродаван производ</span>
225 <span class="stat-card__value stat-card__value--sm" id="stat-best-product">—</span>
226 </div>
227 </div>
228
229 <div class="report-grid">
230 <div class="report-block">
231 <h3>Перформанси на вработени</h3>
232 <div class="table-wrap">
233 <table class="data-table" id="employee-perf-table">
234 <thead><tr><th>Вработен</th><th>Нарачки</th><th>Вкупно</th></tr></thead>
235 <tbody></tbody>
236 </table>
237 </div>
238 </div>
239
240 <div class="report-block">
241 <h3>Пребарување сметки</h3>
242 <form class="inline-form" id="search-orders-form">
243 <input type="text" id="search-query" placeholder="Број на фактура / вработен" />
244 <input type="date" id="search-start" />
245 <input type="date" id="search-end" />
246 <button class="btn btn--secondary btn--sm" type="submit">Пребарај</button>
247 </form>
248 <div class="table-wrap">
249 <table class="data-table" id="search-orders-table">
250 <thead><tr><th>Фактура</th><th>Датум</th><th>Вработен</th><th>Износ</th></tr></thead>
251 <tbody></tbody>
252 </table>
253 </div>
254 </div>
255 </div>
256 </section>
257
258 <section class="view-panel" id="panel-products">
259 <div class="panel-head">
260 <div>
261 <h2 class="panel-title">Мени</h2>
262 <p class="panel-subtitle">Категории и производи</p>
263 </div>
264 </div>
265
266 <div class="admin-grid">
267 <div class="admin-block">
268 <div class="admin-block__head">
269 <h3>Категории</h3>
270 <button class="btn btn--primary btn--sm" id="btn-new-category">+ Нова категорија</button>
271 </div>
272 <div class="table-wrap">
273 <table class="data-table" id="categories-table">
274 <thead><tr><th>Име</th><th>Опис</th><th></th></tr></thead>
275 <tbody></tbody>
276 </table>
277 </div>
278 </div>
279
280 <div class="admin-block">
281 <div class="admin-block__head">
282 <h3>Производи</h3>
283 <div class="admin-block__head-tools">
284 <input type="search" id="product-search" class="search-input" placeholder="Пребарај производ…" />
285 <button class="btn btn--primary btn--sm" id="btn-new-product">+ Нов производ</button>
286 </div>
287 </div>
288 <div class="table-wrap">
289 <table class="data-table" id="products-table">
290 <thead><tr><th>Име</th><th>Категорија</th><th>Цена</th><th></th></tr></thead>
291 <tbody></tbody>
292 </table>
293 </div>
294 </div>
295 </div>
296 </section>
297
298 <section class="view-panel" id="panel-employees">
299 <div class="panel-head">
300 <div>
301 <h2 class="panel-title">Вработени</h2>
302 <p class="panel-subtitle">Персонал и улоги</p>
303 </div>
304 <button class="btn btn--primary btn--sm" id="btn-new-employee">+ Нов вработен</button>
305 </div>
306 <div class="table-wrap">
307 <table class="data-table" id="employees-table">
308 <thead><tr><th>Име</th><th>Улога</th><th>Статус</th><th></th></tr></thead>
309 <tbody></tbody>
310 </table>
311 </div>
312 </section>
313
314 <section class="view-panel" id="panel-settings">
315 <div class="panel-head">
316 <div>
317 <h2 class="panel-title">Поставки</h2>
318 <p class="panel-subtitle">Општи податоци за ресторанот</p>
319 </div>
320 </div>
321 <form class="settings-form" id="settings-form">
322 <label class="field">
323 <span>Име на ресторан</span>
324 <input type="text" id="set-restaurant-name" required />
325 </label>
326 <label class="field">
327 <span>ДДВ стапка (%)</span>
328 <input type="number" step="0.01" min="0" id="set-vat-rate" required />
329 </label>
330 <label class="field">
331 <span>Валута</span>
332 <input type="text" id="set-currency" maxlength="6" required />
333 </label>
334 <label class="field field--wide">
335 <span>Конфигурација на печатач</span>
336 <input type="text" id="set-printer-config" />
337 </label>
338 <button class="btn btn--primary" type="submit">Зачувај поставки</button>
339 </form>
340 </section>
341
342 </div>
343</div>
344
345<div class="modal-overlay" id="modal-overlay" hidden>
346 <div class="modal" id="modal-root"></div>
347</div>
348
349<script src="main.js?v=1"></script>
350</body>
351</html>
Note: See TracBrowser for help on using the repository browser.