Hugging Face's logo

Spaces:
puwanath
/
anycoder-adadf141
Running

App Files Community
puwanath commited on
Commit
be9640f
·
verified ·
1 Parent(s): 6fcaa73

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +660 -411
index.html CHANGED
@@ -3,603 +3,852 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Sawasdee App | สวัสดี</title>
7
-
8
- <!-- Google Fonts: Khand for headings, Prompt for body -->
9
- <link rel="preconnect" href="https://fonts.googleapis.com">
10
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
- <link href="https://fonts.googleapis.com/css2?family=Khand:wght@300;500;700&family=Prompt:wght@300;400;600&display=swap" rel="stylesheet">
12
-
13
- <!-- FontAwesome for Icons -->
14
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
15
-
16
  <style>
17
  :root {
18
- --primary-color: #2c3e50;
19
- --accent-color: #e67e22; /* Thai Orange/Gold vibe */
20
- --success-color: #27ae60;
21
- --bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
22
- --card-shadow: 0 10px 20px rgba(0,0,0,0.1);
23
- --text-main: #333;
24
- --text-light: #666;
 
 
 
 
25
  }
26
 
27
  * {
28
  box-sizing: border-box;
29
  margin: 0;
30
  padding: 0;
 
31
  }
32
 
33
  body {
34
- font-family: 'Prompt', sans-serif;
35
- background: var(--bg-gradient);
36
- color: var(--text-main);
37
- min-height: 100vh;
38
  display: flex;
39
  flex-direction: column;
40
- align-items: center;
41
- padding: 20px;
42
  }
43
 
44
- /* Header & Footer */
45
  header {
46
- width: 100%;
47
- max-width: 1000px;
48
  display: flex;
49
  justify-content: space-between;
50
  align-items: center;
51
- margin-bottom: 30px;
52
- padding: 15px;
53
- background: white;
54
- border-radius: 15px;
55
- box-shadow: var(--card-shadow);
56
  }
57
 
58
- .logo {
59
  display: flex;
60
  align-items: center;
61
  gap: 10px;
62
- color: var(--primary-color);
63
- font-weight: 700;
64
  font-size: 1.5rem;
65
- font-family: 'Khand', sans-serif;
 
66
  }
67
 
68
- .logo i {
69
- color: var(--accent-color);
70
  }
71
 
72
- .time-display {
73
- font-family: 'Khand', sans-serif;
74
- font-size: 1.2rem;
75
- color: var(--primary-color);
76
- font-weight: 500;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  }
78
 
 
79
  main {
80
- width: 100%;
81
- max-width: 1000px;
82
  display: grid;
83
- grid-template-columns: 300px 1fr;
84
- gap: 25px;
85
- flex-grow: 1;
86
  }
87
 
88
- /* Sidebar / Profile Section */
89
- .sidebar {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  display: flex;
91
  flex-direction: column;
92
- gap: 25px;
93
  }
94
 
95
- .profile-card {
96
- background: white;
97
- padding: 30px;
98
- border-radius: 20px;
99
- text-align: center;
100
- box-shadow: var(--card-shadow);
101
- transition: transform 0.3s ease;
 
 
 
102
  }
103
 
104
- .profile-card:hover {
105
- transform: translateY(-5px);
 
 
106
  }
107
 
108
- .avatar {
109
- width: 100px;
110
- height: 100px;
111
- background: #eee;
112
- border-radius: 50%;
113
- margin: 0 auto 15px;
114
- display: flex;
115
- align-items: center;
116
- justify-content: center;
117
- font-size: 3rem;
118
- color: var(--accent-color);
119
- border: 4px solid var(--accent-color);
120
  }
121
 
122
- .user-info h2 {
123
- font-family: 'Khand', sans-serif;
124
- font-size: 1.5rem;
125
- margin-bottom: 5px;
 
126
  }
127
 
128
- .user-role {
129
- color: var(--text-light);
130
- font-size: 0.9rem;
131
  }
132
 
133
- .quote-box {
134
- background: #f8f9fa;
135
- padding: 20px;
136
- border-radius: 15px;
137
- border-left: 5px solid var(--accent-color);
138
- font-style: italic;
139
- text-align: center;
 
140
  }
141
 
142
- .quote-text {
143
- font-size: 1.1rem;
144
- line-height: 1.6;
 
 
 
145
  }
146
 
147
- .quote-author {
148
- margin-top: 10px;
149
- font-weight: 600;
150
- color: var(--accent-color);
151
- font-size: 0.9rem;
152
  }
153
 
154
- /* Main Content Area */
155
- .dashboard {
 
 
 
 
 
 
156
  display: flex;
157
  flex-direction: column;
158
- gap: 25px;
 
159
  }
160
 
161
- .welcome-section {
162
- background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
163
- padding: 40px;
164
- border-radius: 20px;
165
- color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
166
  text-align: center;
167
- box-shadow: var(--card-shadow);
168
  }
169
 
170
- .welcome-section h1 {
171
- font-family: 'Khand', sans-serif;
172
- font-size: 3rem;
173
- margin-bottom: 10px;
174
- text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
 
175
  }
176
 
177
- .welcome-section p {
178
- font-size: 1.2rem;
179
- opacity: 0.9;
 
 
 
180
  }
181
 
182
- /* Grid for Tools/Cards */
183
- .tools-grid {
184
- display: grid;
185
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
186
- gap: 20px;
187
  }
188
 
189
- .card {
190
- background: white;
191
- padding: 25px;
192
- border-radius: 15px;
193
- box-shadow: var(--card-shadow);
194
- transition: all 0.3s ease;
195
- cursor: pointer;
196
- position: relative;
197
- overflow: hidden;
198
  }
199
 
200
- .card:hover {
201
- transform: translateY(-5px);
202
- box-shadow: 0 15px 30px rgba(0,0,0,0.15);
 
203
  }
204
 
205
- .card-icon {
206
- font-size: 2.5rem;
207
- margin-bottom: 15px;
208
- color: var(--primary-color);
 
 
209
  }
210
 
211
- .card h3 {
212
- font-family: 'Khand', sans-serif;
213
- margin-bottom: 10px;
214
- color: var(--primary-color);
215
  }
216
 
217
- .card p {
218
  font-size: 0.95rem;
219
- color: var(--text-light);
 
220
  }
221
 
222
- /* Specific Card Styles */
223
- .card.todo-card {
224
- display: flex;
225
- flex-direction: column;
226
  }
227
 
228
- .todo-list {
229
- list-style: none;
230
- margin-top: 15px;
231
- max-height: 150px;
232
- overflow-y: auto;
233
- padding-right: 5px;
234
  }
235
 
236
- .todo-item {
237
  display: flex;
238
  align-items: center;
239
- padding: 8px 0;
240
- border-bottom: 1px solid #eee;
241
- transition: 0.2s;
242
  }
243
 
244
- .todo-item:hover {
245
- background-color: #f9f9f9;
 
 
 
 
 
 
 
 
 
 
246
  }
247
 
248
- .todo-item.completed span {
249
- text-decoration: line-through;
250
- color: #aaa;
251
  }
252
 
253
- .todo-item input[type="checkbox"] {
254
- margin-right: 10px;
255
- accent-color: var(--success-color);
256
- width: 18px;
257
- height: 18px;
258
  }
259
 
260
- .todo-item span {
261
- flex-grow: 1;
 
 
 
262
  font-size: 0.95rem;
263
  }
264
 
265
- .add-todo-group {
266
- display: flex;
267
- gap: 10px;
268
- margin-top: auto;
 
 
 
269
  }
270
 
271
- input[type="text"] {
272
- flex-grow: 1;
273
- padding: 10px;
274
- border: 1px solid #ddd;
275
- border-radius: 8px;
276
- font-family: 'Prompt', sans-serif;
277
  }
278
 
279
- button.add-btn {
280
- background-color: var(--success-color);
281
- color: white;
282
- border: none;
283
- padding: 10px 15px;
284
- border-radius: 8px;
285
  cursor: pointer;
286
  transition: 0.2s;
 
 
 
 
 
287
  }
288
 
289
- button.add-btn:hover {
290
- background-color: #219150;
 
291
  }
292
 
293
- /* Greeting Generator Section */
294
- .greeting-section {
295
- background: white;
296
- padding: 30px;
297
- border-radius: 20px;
298
- box-shadow: var(--card-shadow);
299
- text-align: center;
 
 
 
 
 
 
300
  }
301
 
302
- .greeting-display {
303
- min-height: 100px;
 
 
 
 
 
 
304
  display: flex;
305
- flex-direction: column;
306
  justify-content: center;
307
  align-items: center;
308
- margin-bottom: 20px;
309
- padding: 20px;
310
- background: #f8f9fa;
311
- border-radius: 10px;
312
  }
313
 
314
- .greeting-text {
315
- font-family: 'Khand', sans-serif;
316
- font-size: 2.5rem;
317
- color: var(--primary-color);
318
- margin-bottom: 10px;
319
  }
320
 
321
- .greeting-sub {
322
- color: var(--text-light);
323
- }
324
-
325
- .greeting-btn {
326
- background-color: var(--accent-color);
327
- color: white;
328
- border: none;
329
- padding: 12px 30px;
330
- font-size: 1.1rem;
331
- border-radius: 50px;
332
- cursor: pointer;
333
- transition: 0.3s;
334
- box-shadow: 0 4px 15px rgba(230, 126, 34, 0.4);
335
  }
336
 
337
- .greeting-btn:hover {
338
- background-color: #d35400;
339
- transform: scale(1.05);
 
 
 
340
  }
341
 
342
- /* Footer */
343
- footer {
344
- margin-top: 40px;
345
  text-align: center;
346
- width: 100%;
347
- max-width: 1000px;
 
348
  }
349
-
350
- .footer-content {
351
- background: white;
352
- padding: 20px;
353
- border-radius: 15px;
354
- box-shadow: var(--card-shadow);
355
  font-size: 0.9rem;
356
- color: var(--text-light);
357
  }
358
 
359
- .anycoder-link {
360
- color: var(--primary-color);
361
- text-decoration: none;
362
- font-weight: 700;
 
 
 
 
363
  }
364
-
365
- .anycoder-link:hover {
366
- text-decoration: underline;
 
 
 
367
  }
368
 
369
  /* Responsive Design */
 
 
 
 
 
 
370
  @media (max-width: 768px) {
371
  main {
372
  grid-template-columns: 1fr;
 
 
373
  }
374
 
375
- .welcome-section h1 {
376
- font-size: 2rem;
377
- }
378
 
379
- .greeting-text {
380
- font-size: 1.8rem;
 
 
 
 
 
381
  }
 
382
  }
383
  </style>
384
  </head>
385
  <body>
386
 
 
387
  <header>
388
- <div class="logo">
389
- <i class="fa-solid fa-hand-holding-heart"></i>
390
- <span>Sawasdee App</span>
 
 
 
391
  </div>
392
- <div class="time-display">
393
- <i class="fa-regular fa-clock"></i> <span id="clock">Loading...</span>
 
 
 
 
 
 
 
394
  </div>
395
  </header>
396
 
 
397
  <main>
398
- <!-- Left Sidebar -->
399
- <aside class="sidebar">
400
- <div class="profile-card">
401
- <div class="avatar">
402
- <i class="fa-solid fa-user"></i>
403
- </div>
404
- <div class="user-info">
405
- <h2>Korbsak</h2>
406
- <div class="user-role">App User / สวัสดีครับ</div>
407
- </div>
408
- <p style="margin-top: 15px; color: var(--text-light); font-size: 0.9rem;">
409
- Welcome to your daily dashboard.
410
- </p>
411
  </div>
 
412
 
413
- <div class="quote-box">
414
- <div class="quote-text">
415
- "ความสุขไม่ใช่จุดหมายปลายทาง แต่คือวิธีการเดินทาง"
416
- </div>
417
- <div class="quote-author">- ไม่ทราบผู้แต่ง</div>
 
 
 
 
 
418
  </div>
419
-
420
- <div class="card">
421
- <i class="fa-solid fa-calendar-days card-icon" style="color: var(--accent-color);"></i>
422
- <h3>Today's Date</h3>
423
- <p id="current-date">Loading date...</p>
424
  </div>
425
- </aside>
426
 
427
- <!-- Right Dashboard -->
428
- <section class="dashboard">
429
- <div class="welcome-section">
430
- <h1>สวัสดีครับ! (Sawasdee Krub)</h1>
431
- <p>A beautiful interface designed for a better digital experience.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
432
  </div>
433
 
434
- <div class="tools-grid">
435
- <div class="card">
436
- <i class="fa-solid fa-bolt card-icon" style="color: #f1c40f;"></i>
437
- <h3>Quick Tasks</h3>
438
- <p>Manage your daily activities efficiently.</p>
439
  </div>
440
- <div class="card">
441
- <i class="fa-solid fa-chart-pie card-icon" style="color: #9b59b6;"></i>
442
- <h3>Analytics</h3>
443
- <p>Track your productivity and habits.</p>
444
  </div>
445
- <div class="card">
446
- <i class="fa-solid fa-gear card-icon" style="color: #3498db;"></i>
447
- <h3>Settings</h3>
448
- <p>Customize your app preferences.</p>
449
  </div>
450
- </div>
451
 
452
- <!-- To-Do List Widget -->
453
- <div class="card todo-card">
454
- <div style="display: flex; justify-content: space-between; align-items: center;">
455
- <h3 style="margin:0; font-family: 'Khand';">My To-Do List</h3>
456
- <i class="fa-solid fa-list-check" style="color: var(--primary-color);"></i>
457
- </div>
458
- <ul class="todo-list" id="todo-list">
459
- <!-- Items will be added via JS -->
460
- </ul>
461
- <div class="add-todo-group">
462
- <input type="text" id="todo-input" placeholder="Add a new task...">
463
- <button class="add-btn" onclick="addTodo()"><i class="fa-solid fa-plus"></i></button>
464
  </div>
465
  </div>
 
 
466
 
467
- <!-- Greeting Generator Widget -->
468
- <div class="greeting-section">
469
- <h3 style="margin-bottom: 15px; font-family: 'Khand';">Thai Greeting Generator</h3>
470
- <div class="greeting-display">
471
- <div class="greeting-text" id="greeting-output">สวัสดีครับ (Sawasdee Krub)</div>
472
- <div class="greeting-sub">Click the button below to greet differently</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
473
  </div>
474
- <button class="greeting-btn" onclick="generateRandomGreeting()">
475
- <i class="fa-solid fa-rotate-right"></i> New Greeting
476
- </button>
477
  </div>
478
- </section>
479
- </main>
480
 
481
- <footer>
482
- <div class="footer-content">
483
- &copy; <span id="year"></span> Sawasdee App. All rights reserved. <br>
484
- Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">anycoder</a>
485
  </div>
486
- </footer>
487
 
488
  <script>
489
- // 1. Clock & Date Logic
490
- function updateClock() {
491
- const now = new Date();
492
-
493
- // Time
494
- let hours = now.getHours();
495
- let minutes = now.getMinutes();
496
- const ampm = hours >= 12 ? 'PM' : 'AM';
497
- hours = hours % 12;
498
- hours = hours ? hours : 12; // the hour '0' should be '12'
499
- minutes = minutes < 10 ? '0' + minutes : minutes;
500
-
501
- const timeString = `${hours}:${minutes} ${ampm}`;
502
- document.getElementById('clock').innerText = timeString;
503
-
504
- // Date
505
- const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
506
- const dateString = now.toLocaleDateString('th-TH', options);
507
- // Convert to Thai numerals for better look (Optional but nice)
508
- const thaiNumerals = ['0','1','2','3','4','5','6','7','8','9'];
509
- const convertedDate = dateString.replace(/[0-9]/g, x => thaiNumerals[x]);
510
-
511
- document.getElementById('current-date').innerText = convertedDate;
512
-
513
- document.getElementById('year').innerText = now.getFullYear();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
514
  }
515
 
516
- setInterval(updateClock, 1000);
517
- updateClock();
 
 
 
 
 
 
 
 
518
 
519
- // 2. To-Do List Logic
520
- const todoInput = document.getElementById('todo-input');
521
- const todoList = document.getElementById('todo-list');
 
 
 
522
 
523
- // Initial Data
524
- let todos = [
525
- { text: 'ทักทายผู้คน (Say Hello)', completed: false },
526
- { text: 'ดื่มน้ำให้พอ (Drink Water)', completed: true },
527
- { text: 'ทำงานที่สำคัญ (Focus Work)', completed: false }
528
- ];
 
 
529
 
530
- function renderTodos() {
531
- todoList.innerHTML = '';
532
- todos.forEach((todo, index) => {
533
- const li = document.createElement('li');
534
- li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
535
- li.innerHTML = `
536
- <input type="checkbox" ${todo.completed ? 'checked' : ''} onclick="toggleTodo(${index})">
537
- <span>${todo.text}</span>
538
- <i class="fa-solid fa-trash" style="color: #e74c3c; cursor: pointer;" onclick="deleteTodo(${index})"></i>
539
- `;
540
- todoList.appendChild(li);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
541
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
542
  }
543
 
544
- function addTodo() {
545
- const text = todoInput.value.trim();
546
- if (text) {
547
- todos.unshift({ text: text, completed: false });
548
- todoInput.value = '';
549
- renderTodos();
550
  }
551
  }
552
 
553
- function toggleTodo(index) {
554
- todos[index].completed = !todos[index].completed;
555
- renderTodos();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
556
  }
557
 
558
- function deleteTodo(index) {
559
- todos.splice(index, 1);
560
- renderTodos();
561
  }
562
 
563
- // Enter key support for todo
564
- todoInput.addEventListener('keypress', function (e) {
565
- if (e.key === 'Enter') {
566
- addTodo();
 
567
  }
568
- });
569
 
570
- renderTodos();
571
-
572
- // 3. Greeting Generator Logic
573
- const greetings = [
574
- { thai: "สวัสดีครับ", eng: "Hello (Krub)" },
575
- { thai: "สวัสดีค่ะ", eng: "Hello (Ka)" },
576
- { thai: "หวัดดีครับ", eng: "Hi there! (Krub)" },
577
- { thai: "ดีจังเลยครับ", eng: "That's great! (Krub)" },
578
- { thai: "ขอบคุณครับ", eng: "Thank you (Krub)" },
579
- { thai: "ลาก่อนครับ", eng: "Goodbye (Krub)" },
580
- { thai: "อรุณสวัสดิ์", eng: "Good Morning" },
581
- { thai: "สวัสดีตอนเย็น", eng: "Good Evening" }
582
- ];
583
 
584
- function generateRandomGreeting() {
585
- const randomIndex = Math.floor(Math.random() * greetings.length);
586
- const greeting = greetings[randomIndex];
587
-
588
- const outputDiv = document.getElementById('greeting-output');
589
-
590
- // Simple animation effect
591
- outputDiv.style.opacity = 0;
592
- outputDiv.style.transform = "scale(0.9)";
593
-
594
- setTimeout(() => {
595
- outputDiv.innerHTML = `${greeting.thai} <span style="font-size: 1.2rem; display:block; font-family:Prompt; color:#7f8c8d;">${greeting.eng}</span>`;
596
- outputDiv.style.opacity = 1;
597
- outputDiv.style.transform = "scale(1)";
598
- }, 200);
599
  }
600
 
601
- // Initialize with a random greeting on load
602
- generateRandomGreeting();
603
 
604
  </script>
605
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Smart POS - Modern Store</title>
 
 
 
 
 
 
 
 
 
7
  <style>
8
  :root {
9
+ --primary-color: #6366f1;
10
+ --primary-hover: #4f46e5;
11
+ --secondary-color: #ec4899;
12
+ --bg-color: #f3f4f6;
13
+ --card-bg: #ffffff;
14
+ --text-dark: #1f2937;
15
+ --text-light: #6b7280;
16
+ --success: #10b981;
17
+ --danger: #ef4444;
18
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
19
+ --radius: 12px;
20
  }
21
 
22
  * {
23
  box-sizing: border-box;
24
  margin: 0;
25
  padding: 0;
26
+ font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
27
  }
28
 
29
  body {
30
+ background-color: var(--bg-color);
31
+ color: var(--text-dark);
32
+ height: 100vh;
 
33
  display: flex;
34
  flex-direction: column;
35
+ overflow: hidden;
 
36
  }
37
 
38
+ /* Header */
39
  header {
40
+ background: var(--card-bg);
41
+ padding: 1rem 2rem;
42
  display: flex;
43
  justify-content: space-between;
44
  align-items: center;
45
+ box-shadow: var(--shadow);
46
+ z-index: 10;
 
 
 
47
  }
48
 
49
+ .brand {
50
  display: flex;
51
  align-items: center;
52
  gap: 10px;
 
 
53
  font-size: 1.5rem;
54
+ font-weight: 800;
55
+ color: var(--primary-color);
56
  }
57
 
58
+ .brand span {
59
+ color: var(--text-dark);
60
  }
61
 
62
+ .header-info {
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 20px;
66
+ }
67
+
68
+ .user-info {
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 10px;
72
+ font-size: 0.9rem;
73
+ color: var(--text-light);
74
+ }
75
+
76
+ .btn-logout {
77
+ background: var(--danger);
78
+ color: white;
79
+ border: none;
80
+ padding: 8px 16px;
81
+ border-radius: 6px;
82
+ cursor: pointer;
83
+ font-weight: 600;
84
+ transition: 0.2s;
85
+ }
86
+
87
+ .btn-logout:hover {
88
+ background: #dc2626;
89
  }
90
 
91
+ /* Main Layout */
92
  main {
 
 
93
  display: grid;
94
+ grid-template-columns: 300px 1fr 350px;
95
+ flex: 1;
96
+ overflow: hidden;
97
  }
98
 
99
+ /* Left: Categories */
100
+ .categories-panel {
101
+ background: var(--card-bg);
102
+ padding: 1.5rem;
103
+ border-right: 1px solid #e5e7eb;
104
+ overflow-y: auto;
105
+ }
106
+
107
+ .panel-title {
108
+ font-size: 1.2rem;
109
+ font-weight: 700;
110
+ margin-bottom: 1rem;
111
+ color: var(--text-dark);
112
+ }
113
+
114
+ .category-list {
115
  display: flex;
116
  flex-direction: column;
117
+ gap: 0.5rem;
118
  }
119
 
120
+ .cat-btn {
121
+ padding: 12px;
122
+ text-align: left;
123
+ background: transparent;
124
+ border: 1px solid #e5e7eb;
125
+ border-radius: var(--radius);
126
+ cursor: pointer;
127
+ transition: all 0.2s;
128
+ font-size: 1rem;
129
+ color: var(--text-light);
130
  }
131
 
132
+ .cat-btn:hover {
133
+ border-color: var(--primary-color);
134
+ color: var(--primary-color);
135
+ background: #f9fafb;
136
  }
137
 
138
+ .cat-btn.active {
139
+ background: var(--primary-color);
140
+ color: white;
141
+ border-color: var(--primary-color);
142
+ box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
 
 
 
 
 
 
 
143
  }
144
 
145
+ /* Center: Products Grid */
146
+ .products-panel {
147
+ padding: 2rem;
148
+ overflow-y: auto;
149
+ background: #f9fafb;
150
  }
151
 
152
+ .search-bar {
153
+ margin-bottom: 1.5rem;
154
+ position: relative;
155
  }
156
 
157
+ .search-input {
158
+ width: 100%;
159
+ padding: 12px 16px 12px 45px;
160
+ border-radius: var(--radius);
161
+ border: 1px solid #e5e7eb;
162
+ font-size: 1rem;
163
+ background: white;
164
+ box-shadow: var(--shadow);
165
  }
166
 
167
+ .search-icon {
168
+ position: absolute;
169
+ left: 15px;
170
+ top: 50%;
171
+ transform: translateY(-50%);
172
+ color: var(--text-light);
173
  }
174
 
175
+ .products-grid {
176
+ display: grid;
177
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
178
+ gap: 1.5rem;
 
179
  }
180
 
181
+ .product-card {
182
+ background: var(--card-bg);
183
+ border-radius: var(--radius);
184
+ padding: 1rem;
185
+ box-shadow: var(--shadow);
186
+ transition: transform 0.2s, box-shadow 0.2s;
187
+ cursor: pointer;
188
+ border: 1px solid transparent;
189
  display: flex;
190
  flex-direction: column;
191
+ align-items: center;
192
+ text-align: center;
193
  }
194
 
195
+ .product-card:hover {
196
+ transform: translateY(-5px);
197
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
198
+ border-color: var(--primary-color);
199
+ }
200
+
201
+ .product-img {
202
+ width: 100px;
203
+ height: 100px;
204
+ object-fit: cover;
205
+ border-radius: 50%;
206
+ margin-bottom: 1rem;
207
+ background: #e0e7ff;
208
+ }
209
+
210
+ .product-name {
211
+ font-weight: 600;
212
+ margin-bottom: 0.5rem;
213
+ font-size: 1.1rem;
214
+ white-space: nowrap;
215
+ overflow: hidden;
216
+ text-overflow: ellipsis;
217
+ width: 100%;
218
+ }
219
+
220
+ .product-price {
221
+ color: var(--success);
222
+ font-weight: 800;
223
+ font-size: 1.25rem;
224
+ margin-top: auto;
225
+ width: 100%;
226
  text-align: center;
 
227
  }
228
 
229
+ /* Right: Cart & Actions */
230
+ .cart-panel {
231
+ background: var(--card-bg);
232
+ border-left: 1px solid #e5e7eb;
233
+ display: flex;
234
+ flex-direction: column;
235
  }
236
 
237
+ .cart-header {
238
+ padding: 1.5rem;
239
+ border-bottom: 1px solid #e5e7eb;
240
+ display: flex;
241
+ justify-content: space-between;
242
+ align-items: center;
243
  }
244
 
245
+ .cart-title {
246
+ font-size: 1.2rem;
247
+ font-weight: 700;
 
 
248
  }
249
 
250
+ .cart-count {
251
+ background: var(--primary-color);
252
+ color: white;
253
+ padding: 2px 8px;
254
+ border-radius: 20px;
255
+ font-size: 0.8rem;
256
+ font-weight: 700;
 
 
257
  }
258
 
259
+ .cart-items {
260
+ flex: 1;
261
+ overflow-y: auto;
262
+ padding: 1.5rem;
263
  }
264
 
265
+ .cart-item {
266
+ display: flex;
267
+ align-items: center;
268
+ margin-bottom: 1rem;
269
+ padding-bottom: 1rem;
270
+ border-bottom: 1px solid #f3f4f6;
271
  }
272
 
273
+ .cart-item-info {
274
+ flex: 1;
 
 
275
  }
276
 
277
+ .cart-item-name {
278
  font-size: 0.95rem;
279
+ font-weight: 600;
280
+ margin-bottom: 4px;
281
  }
282
 
283
+ .cart-item-meta {
284
+ font-size: 0.85rem;
285
+ color: var(--text-light);
 
286
  }
287
 
288
+ .cart-item-price {
289
+ font-weight: 700;
290
+ color: var(--text-dark);
291
+ margin-left: 10px;
 
 
292
  }
293
 
294
+ .cart-controls {
295
  display: flex;
296
  align-items: center;
297
+ gap: 8px;
 
 
298
  }
299
 
300
+ .qty-btn {
301
+ width: 28px;
302
+ height: 28px;
303
+ border: 1px solid #e5e7eb;
304
+ background: white;
305
+ border-radius: 6px;
306
+ cursor: pointer;
307
+ display: flex;
308
+ align-items: center;
309
+ justify-content: center;
310
+ color: var(--text-light);
311
+ transition: 0.2s;
312
  }
313
 
314
+ .qty-btn:hover {
315
+ background: #f3f4f6;
316
+ color: var(--primary-color);
317
  }
318
 
319
+ .cart-footer {
320
+ padding: 1.5rem;
321
+ background: #f9fafb;
322
+ border-top: 1px solid #e5e7eb;
 
323
  }
324
 
325
+ .summary-row {
326
+ display: flex;
327
+ justify-content: space-between;
328
+ margin-bottom: 0.8rem;
329
+ color: var(--text-light);
330
  font-size: 0.95rem;
331
  }
332
 
333
+ .summary-row.total {
334
+ font-size: 1.5rem;
335
+ font-weight: 800;
336
+ color: var(--text-dark);
337
+ margin-top: 1rem;
338
+ padding-top: 1rem;
339
+ border-top: 2px dashed #e5e7eb;
340
  }
341
 
342
+ .action-buttons {
343
+ display: grid;
344
+ grid-template-columns: 1fr 1fr;
345
+ gap: 10px;
346
+ margin-top: 1rem;
 
347
  }
348
 
349
+ .btn {
350
+ padding: 14px;
351
+ border-radius: var(--radius);
352
+ font-size: 1rem;
353
+ font-weight: 700;
 
354
  cursor: pointer;
355
  transition: 0.2s;
356
+ border: none;
357
+ display: flex;
358
+ align-items: center;
359
+ justify-content: center;
360
+ gap: 8px;
361
  }
362
 
363
+ .btn-clear {
364
+ background: #f3f4f6;
365
+ color: var(--text-light);
366
  }
367
 
368
+ .btn-clear:hover {
369
+ background: #e5e7eb;
370
+ }
371
+
372
+ .btn-checkout {
373
+ background: var(--primary-color);
374
+ color: white;
375
+ box-shadow: 0 4px 6px rgba(99, 102, 241, 0.3);
376
+ }
377
+
378
+ .btn-checkout:hover {
379
+ background: var(--primary-hover);
380
+ transform: translateY(-1px);
381
  }
382
 
383
+ /* Modal */
384
+ .modal-overlay {
385
+ position: fixed;
386
+ top: 0;
387
+ left: 0;
388
+ width: 100%;
389
+ height: 100%;
390
+ background: rgba(0,0,0,0.5);
391
  display: flex;
 
392
  justify-content: center;
393
  align-items: center;
394
+ z-index: 100;
395
+ opacity: 0;
396
+ pointer-events: none;
397
+ transition: opacity 0.3s;
398
  }
399
 
400
+ .modal-overlay.active {
401
+ opacity: 1;
402
+ pointer-events: all;
 
 
403
  }
404
 
405
+ .modal {
406
+ background: white;
407
+ padding: 2rem;
408
+ border-radius: var(--radius);
409
+ width: 90%;
410
+ max-width: 500px;
411
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
412
+ text-align: center;
 
 
 
 
 
 
413
  }
414
 
415
+ .receipt {
416
+ background: #f8f9fa;
417
+ padding: 2rem;
418
+ margin: 20px 0;
419
+ border: 1px dashed #d1d5db;
420
+ text-align: left;
421
  }
422
 
423
+ .receipt-header {
 
 
424
  text-align: center;
425
+ border-bottom: 2px solid #d1d5db;
426
+ padding-bottom: 1rem;
427
+ margin-bottom: 1rem;
428
  }
429
+
430
+ .receipt-item {
431
+ display: flex;
432
+ justify-content: space-between;
433
+ margin-bottom: 0.5rem;
 
434
  font-size: 0.9rem;
 
435
  }
436
 
437
+ .receipt-total {
438
+ border-top: 2px solid #d1d5db;
439
+ margin-top: 1rem;
440
+ padding-top: 1rem;
441
+ display: flex;
442
+ justify-content: space-between;
443
+ font-weight: 800;
444
+ font-size: 1.2rem;
445
  }
446
+
447
+ .btn-print {
448
+ background: var(--success);
449
+ color: white;
450
+ width: 100%;
451
+ margin-top: 10px;
452
  }
453
 
454
  /* Responsive Design */
455
+ @media (max-width: 1024px) {
456
+ main {
457
+ grid-template-columns: 250px 1fr 300px;
458
+ }
459
+ }
460
+
461
  @media (max-width: 768px) {
462
  main {
463
  grid-template-columns: 1fr;
464
+ grid-template-rows: auto auto 1fr 250px;
465
+ overflow-y: auto;
466
  }
467
 
468
+ .categories-panel { order: 1; }
469
+ .products-panel { order: 2; }
470
+ .cart-panel { order: 3; }
471
 
472
+ .brand { font-size: 1.2rem; }
473
+ .header-info { display: none; } /* Hide user info on mobile for space */
474
+ }
475
+
476
+ @media (max-width: 480px) {
477
+ .products-grid {
478
+ grid-template-columns: repeat(2, 1fr);
479
  }
480
+ .brand span { display: none; }
481
  }
482
  </style>
483
  </head>
484
  <body>
485
 
486
+ <!-- Header -->
487
  <header>
488
+ <div class="brand">
489
+ <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
490
+ <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
491
+ <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
492
+ </svg>
493
+ Smart<span>POS</span>
494
  </div>
495
+ <div class="header-info">
496
+ <div class="user-info">
497
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
498
+ <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
499
+ <circle cx="12" cy="7" r="4"></circle>
500
+ </svg>
501
+ <span>พนักงาน: ปกรณ์ ปกรณ์</span>
502
+ </div>
503
+ <button class="btn-logout" onclick="logout()">ออกจากระบบ</button>
504
  </div>
505
  </header>
506
 
507
+ <!-- Main Content -->
508
  <main>
509
+ <!-- Left: Categories -->
510
+ <aside class="categories-panel">
511
+ <div class="panel-title">หมวดหมู่สินค้า</div>
512
+ <div class="category-list" id="categoryList">
513
+ <!-- Categories injected by JS -->
 
 
 
 
 
 
 
 
514
  </div>
515
+ </aside>
516
 
517
+ <!-- Center: Products -->
518
+ <section class="products-panel">
519
+ <div class="search-bar">
520
+ <span class="search-icon">
521
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
522
+ <circle cx="11" cy="11" r="8"></circle>
523
+ <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
524
+ </svg>
525
+ </span>
526
+ <input type="text" id="searchInput" class="search-input" placeholder="ค้นหาสินค้า (พิมพ์เพื่อค้นหา)...">
527
  </div>
528
+ <div class="products-grid" id="productsGrid">
529
+ <!-- Products injected by JS -->
 
 
 
530
  </div>
531
+ </section>
532
 
533
+ <!-- Right: Cart -->
534
+ <aside class="cart-panel">
535
+ <div class="cart-header">
536
+ <div class="cart-title">
537
+ ตะกร้าสินค้า <span id="cartCount" class="cart-count">0</span>
538
+ </div>
539
+ <button onclick="clearCart()" style="background:none; border:none; cursor:pointer; color:#ef4444; font-size:0.9rem;">
540
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
541
+ <polyline points="3 6 5 6 21 6"></polyline>
542
+ <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
543
+ </svg>
544
+ </button>
545
+ </div>
546
+
547
+ <div class="cart-items" id="cartItems">
548
+ <!-- Cart Items injected by JS -->
549
+ <div style="text-align: center; color: #9ca3af; margin-top: 3rem;">
550
+ <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5;">
551
+ <circle cx="9" cy="21" r="1"></circle>
552
+ <circle cx="20" cy="21" r="1"></circle>
553
+ <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
554
+ </svg>
555
+ <p style="margin-top: 1rem;">ยังไม่มีสินค้าในตะกร้า</p>
556
+ </div>
557
  </div>
558
 
559
+ <div class="cart-footer">
560
+ <div class="summary-row">
561
+ <span>จำนวนชิ้น</span>
562
+ <span id="summaryQty">0</span>
 
563
  </div>
564
+ <div class="summary-row">
565
+ <span>ส่วนลด</span>
566
+ <span>0.00 บาท</span>
 
567
  </div>
568
+ <div class="summary-row total">
569
+ <span>รวมทั้งสิ้น</span>
570
+ <span id="summaryTotal">0.00 บาท</span>
 
571
  </div>
 
572
 
573
+ <div class="action-buttons">
574
+ <button class="btn btn-clear" onclick="clearCart()">ยกเลิก</button>
575
+ <button class="btn btn-checkout" onclick="checkout()">
576
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
577
+ <circle cx="9" cy="21" r="1"></circle>
578
+ <circle cx="20" cy="21" r="1"></circle>
579
+ <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
580
+ </svg>
581
+ ชำระเงิน
582
+ </button>
 
 
583
  </div>
584
  </div>
585
+ </aside>
586
+ </main>
587
 
588
+ <!-- Checkout Modal -->
589
+ <div class="modal-overlay" id="checkoutModal">
590
+ <div class="modal">
591
+ <h2 style="color: var(--success); margin-bottom: 1rem;">ชำระเงินสำเร็จ!</h2>
592
+ <p>ขอบคุณที่ใช้บริการ</p>
593
+
594
+ <div class="receipt" id="receiptContent">
595
+ <div class="receipt-header">
596
+ <h3 style="font-size: 1.5rem; color: var(--primary-color);">Smart POS</h3>
597
+ <p style="font-size: 0.9rem; color: #6b7280;">123 ถนนสุขุมวิท แขวงคลองตัน เขตคลองเต็ง กรุงเทพฯ</p>
598
+ <p style="font-size: 0.9rem;">Tel: 02-123-4567</p>
599
+ <hr style="border: 0; border-top: 1px dashed #d1d5db; margin: 10px 0;">
600
+ <p style="font-size: 0.85rem;">วันที่: <span id="receiptDate"></span> เวลา: <span id="receiptTime"></span></p>
601
+ <p style="font-size: 0.85rem;">Cashier: ปกรณ์ ปกรณ์</p>
602
+ </div>
603
+ <div id="receiptItemsContainer">
604
+ <!-- Items injected here -->
605
+ </div>
606
+ <div class="receipt-total">
607
+ <span>ยอดรวม</span>
608
+ <span id="receiptTotalAmount">0.00</span>
609
+ </div>
610
+ <hr style="border: 0; border-top: 1px dashed #d1d5db; margin: 15px 0;">
611
+ <div style="text-align: center; font-size: 0.9rem; color: #6b7280;">
612
+ <p>Thank you for your business!</p>
613
+ <p>กรุณาตรวจสอบเงินทอนให้เรียบร้อย</p>
614
  </div>
 
 
 
615
  </div>
 
 
616
 
617
+ <button class="btn btn-print" onclick="printReceipt()">พิมพ์ใบเสร็จ</button>
618
+ <button class="btn btn-clear" style="margin-top: 10px;" onclick="closeModal()">เริ่มคำสั่งซื้อถัดไป</button>
 
 
619
  </div>
620
+ </div>
621
 
622
  <script>
623
+ // --- Data & State ---
624
+ const categories = [
625
+ { id: 'all', name: 'ทั้งหมด', icon: 'grid' },
626
+ { id: 'beverage', name: 'เครื่องดื่ม', icon: 'coffee' },
627
+ { id: 'snack', name: 'ของว่าง', icon: 'cookie' },
628
+ { id: 'meal', name: 'มื้อหลัก', icon: 'utensils' },
629
+ { id: 'dessert', name: 'ของหวาน', icon: 'ice-cream' }
630
+ ];
631
+
632
+ const products = [
633
+ { id: 1, name: 'กาแฟดำ', price: 45, category: 'beverage', img: 'https://placehold.co/150x150/3e2723/FFF?text=Black+Coffee' },
634
+ { id: 2, name: 'ชาเขียว', price: 55, category: 'beverage', img: 'https://placehold.co/150x150/1b5e20/FFF?text=Green+Tea' },
635
+ { id: 3, name: 'น้ำส้ม', price: 60, category: 'beverage', img: 'https://placehold.co/150x150/e65100/FFF?text=Orange+Juice' },
636
+ { id: 4, name: 'โซดา', price: 35, category: 'beverage', img: 'https://placehold.co/150x150/f44336/FFF?text=Soda' },
637
+ { id: 5, name: 'พิซซ่า', price: 199, category: 'meal', img: 'https://placehold.co/150x150/d32f2f/FFF?text=Pizza' },
638
+ { id: 6, name: 'ข้าวหมูแดง', price: 85, category: 'meal', img: 'https://placehold.co/150x150/b71c1c/FFF?text=Pork+Rice' },
639
+ { id: 7, name: 'สปาเกตตี้', price: 150, category: 'meal', img: 'https://placehold.co/150x150/ff6f00/FFF?text=Pasta' },
640
+ { id: 8, name: 'ไก่ทอด', price: 120, category: 'meal', img: 'https://placehold.co/150x150/fbc02d/FFF?text=Fried+Chicken' },
641
+ { id: 9, name: 'ชิฟฟ่อน', price: 75, category: 'dessert', img: 'https://placehold.co/150x150/ec407a/FFF?text=Cake' },
642
+ { id: 10, name: 'ไอศครีม', price: 50, category: 'dessert', img: 'https://placehold.co/150x150/9e9e9e/FFF?text=IceCream' },
643
+ { id: 11, name: 'คุกกี้ช็อก', price: 45, category: 'snack', img: 'https://placehold.co/150x150/3e2723/FFF?text=Cookies' },
644
+ { id: 12, name: 'มันฝรั่งทอด', price: 40, category: 'snack', img: 'https://placehold.co/150x150/fbc02d/FFF?text=Chips' }
645
+ ];
646
+
647
+ let cart = [];
648
+ let currentCategory = 'all';
649
+ let searchQuery = '';
650
+
651
+ // --- DOM Elements ---
652
+ const productsGrid = document.getElementById('productsGrid');
653
+ const categoryList = document.getElementById('categoryList');
654
+ const cartItems = document.getElementById('cartItems');
655
+ const cartCount = document.getElementById('cartCount');
656
+ const summaryQty = document.getElementById('summaryQty');
657
+ const summaryTotal = document.getElementById('summaryTotal');
658
+ const searchInput = document.getElementById('searchInput');
659
+ const checkoutModal = document.getElementById('checkoutModal');
660
+ const receiptContent = document.getElementById('receiptContent');
661
+
662
+ // --- Initialization ---
663
+ function init() {
664
+ renderCategories();
665
+ renderProducts();
666
+ updateCartUI();
667
+ }
668
+
669
+ // --- Render Functions ---
670
+ function renderCategories() {
671
+ categoryList.innerHTML = categories.map(cat => `
672
+ <button class="cat-btn ${currentCategory === cat.id ? 'active' : ''}"
673
+ onclick="filterByCategory('${cat.id}')">
674
+ <span style="margin-right:10px;">${getCategoryIcon(cat.icon)}</span>
675
+ ${cat.name}
676
+ </button>
677
+ `).join('');
678
  }
679
 
680
+ function getCategoryIcon(type) {
681
+ switch(type) {
682
+ case 'grid': return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>';
683
+ case 'coffee': return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg>';
684
+ case 'cookie': return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg>';
685
+ case 'utensils': return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"></path><path d="M7 2v20"></path><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3zm0 0v7"></path></svg>';
686
+ case 'ice-cream': return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2a3 3 0 0 1 3 3v12a3 3 0 0 1-6 0V5a3 3 0 0 1 3-3z"></path><path d="M8 2h8"></path><path d="M12 5v12"></path><path d="M8 22h8"></path></svg>';
687
+ default: return '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>';
688
+ }
689
+ }
690
 
691
+ function renderProducts() {
692
+ const filteredProducts = products.filter(product => {
693
+ const matchCategory = currentCategory === 'all' || product.category === currentCategory;
694
+ const matchSearch = product.name.toLowerCase().includes(searchQuery.toLowerCase());
695
+ return matchCategory && matchSearch;
696
+ });
697
 
698
+ productsGrid.innerHTML = filteredProducts.map(product => `
699
+ <div class="product-card" onclick="addToCart(${product.id})">
700
+ <img src="${product.img}" alt="${product.name}" class="product-img">
701
+ <div class="product-name">${product.name}</div>
702
+ <div class="product-price">${product.price.toFixed(2)} บาท</div>
703
+ </div>
704
+ `).join('');
705
+ }
706
 
707
+ // --- Cart Logic ---
708
+ function addToCart(productId) {
709
+ const product = products.find(p => p.id === productId);
710
+ if (!product) return;
711
+
712
+ const existingItem = cart.find(item => item.id === productId);
713
+
714
+ if (existingItem) {
715
+ existingItem.qty++;
716
+ } else {
717
+ cart.push({ ...product, qty: 1 });
718
+ }
719
+ updateCartUI();
720
+ }
721
+
722
+ function updateCartUI() {
723
+ cartCount.innerText = cart.length;
724
+ let totalQty = 0;
725
+ let totalPrice = 0;
726
+
727
+ if (cart.length === 0) {
728
+ cartItems.innerHTML = `
729
+ <div style="text-align: center; color: #9ca3af; margin-top: 3rem;">
730
+ <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5;">
731
+ <circle cx="9" cy="21" r="1"></circle>
732
+ <circle cx="20" cy="21" r="1"></circle>
733
+ <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
734
+ </svg>
735
+ <p style="margin-top: 1rem;">ยังไม่มีสินค้าในตะกร้า</p>
736
+ </div>`;
737
+ } else {
738
+ cartItems.innerHTML = cart.map(item => `
739
+ <div class="cart-item">
740
+ <img src="${item.img}" style="width:50px; height:50px; border-radius:8px; object-fit:cover; margin-right:10px;">
741
+ <div class="cart-item-info">
742
+ <div class="cart-item-name">${item.name}</div>
743
+ <div class="cart-item-meta">
744
+ <span style="color:var(--primary-color); font-weight:600;">${item.price.toFixed(2)} บาท</span> x
745
+ <span style="margin:0 5px;">${item.qty}</span>
746
+ </div>
747
+ </div>
748
+ <div class="cart-item-price">${(item.price * item.qty).toFixed(2)} บาท</div>
749
+
750
+ <div class="cart-controls">
751
+ <button class="qty-btn" onclick="changeQty(${item.id}, -1)">-</button>
752
+ <span style="font-weight:600; width:20px; text-align:center;">${item.qty}</span>
753
+ <button class="qty-btn" onclick="changeQty(${item.id}, 1)">+</button>
754
+ </div>
755
+ </div>
756
+ `).join('');
757
+ }
758
+
759
+ cart.forEach(item => {
760
+ totalQty += item.qty;
761
+ totalPrice += item.price * item.qty;
762
  });
763
+
764
+ summaryQty.innerText = totalQty;
765
+ summaryTotal.innerText = totalPrice.toFixed(2) + ' บาท';
766
+
767
+ // Store current total for receipt
768
+ document.getElementById('cartTotalValue')?.remove();
769
+ const totalSpan = document.createElement('span');
770
+ totalSpan.id = 'cartTotalValue';
771
+ totalSpan.innerText = totalPrice.toFixed(2);
772
+ summaryTotal.appendChild(totalSpan);
773
+ }
774
+
775
+ function changeQty(id, change) {
776
+ const itemIndex = cart.findIndex(item => item.id === id);
777
+ if (itemIndex > -1) {
778
+ cart[itemIndex].qty += change;
779
+ if (cart[itemIndex].qty <= 0) {
780
+ cart.splice(itemIndex, 1);
781
+ }
782
+ updateCartUI();
783
+ }
784
  }
785
 
786
+ function clearCart() {
787
+ if (confirm('ต้องการยกเลิกรายการทั้งหมดหรือไม่?')) {
788
+ cart = [];
789
+ updateCartUI();
 
 
790
  }
791
  }
792
 
793
+ // --- Checkout Logic ---
794
+ function checkout() {
795
+ if (cart.length === 0) {
796
+ alert('กรุณาเลือกสินค้าก่อนชำระเงิน');
797
+ return;
798
+ }
799
+
800
+ const totalAmount = cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
801
+
802
+ // Populate Receipt
803
+ const date = new Date();
804
+ document.getElementById('receiptDate').innerText = date.toLocaleDateString('th-TH');
805
+ document.getElementById('receiptTime').innerText = date.toLocaleTimeString('th-TH');
806
+
807
+ const itemsContainer = document.getElementById('receiptItemsContainer');
808
+ itemsContainer.innerHTML = cart.map(item => `
809
+ <div class="receipt-item">
810
+ <span>${item.name} x ${item.qty}</span>
811
+ <span>${(item.price * item.qty).toFixed(2)} บาท</span>
812
+ </div>
813
+ `).join('');
814
+
815
+ document.getElementById('receiptTotalAmount').innerText = totalAmount.toFixed(2) + ' บาท';
816
+
817
+ checkoutModal.classList.add('active');
818
+ }
819
+
820
+ function closeModal() {
821
+ checkoutModal.classList.remove('active');
822
+ cart = [];
823
+ updateCartUI();
824
  }
825
 
826
+ function printReceipt() {
827
+ window.print();
 
828
  }
829
 
830
+ function logout() {
831
+ if(confirm('คุณต้องการออกจากระบบใช่หรือไม่?')) {
832
+ alert('กำลังออกจากระบบ...');
833
+ // In a real app, this would redirect to login
834
+ window.location.href = "#";
835
  }
836
+ }
837
 
838
+ // --- Event Listeners ---
839
+ searchInput.addEventListener('input', (e) => {
840
+ searchQuery = e.target.value.toLowerCase();
841
+ renderProducts();
842
+ });
 
 
 
 
 
 
 
 
843
 
844
+ function filterByCategory(catId) {
845
+ currentCategory = catId;
846
+ renderCategories();
847
+ renderProducts();
 
 
 
 
 
 
 
 
 
 
 
848
  }
849
 
850
+ // Start the app
851
+ init();
852
 
853
  </script>
854
  </body>