Hugging Face's logo

Spaces:
phong10
/
anycoder-c6d4a70a
Running

App Files Community
phong10 commited on
Commit
78bf830
·
verified ·
1 Parent(s): 2c20352

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +683 -19
index.html CHANGED
@@ -1,19 +1,683 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Hoa Tươi Thanh Ngọc – Phan Văn Hân | TP. Hồ Chí Minh</title>
7
+ <meta name="description" content="Cửa hàng hoa tươi chất lượng cao tại Bình Thạnh. Chuyên thiết kế hoa sinh nhật, khai trương, sự kiện.">
8
+
9
+ <!-- Fonts & Icons -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+
13
+ <style>
14
+ /* --- CSS VARIABLES & RESET --- */
15
+ :root {
16
+ --primary: #d63384; /* Rose Pink */
17
+ --primary-light: #fce4ec;
18
+ --secondary: #2e7d32; /* Fresh Green */
19
+ --accent: #ffc107; /* Star Yellow */
20
+ --dark: #1a1a1a;
21
+ --light: #fdfbf7; /* Cream White */
22
+ --white: #ffffff;
23
+ --gray: #666;
24
+ --light-gray: #f0f2f5;
25
+ --shadow: 0 10px 30px rgba(0,0,0,0.08);
26
+ --radius: 16px;
27
+ --transition: all 0.3s ease;
28
+ }
29
+
30
+ * {
31
+ margin: 0;
32
+ padding: 0;
33
+ box-sizing: border-box;
34
+ }
35
+
36
+ body {
37
+ font-family: 'Plus Jakarta Sans', sans-serif;
38
+ background-color: var(--light);
39
+ color: var(--dark);
40
+ line-height: 1.6;
41
+ overflow-x: hidden;
42
+ }
43
+
44
+ h1, h2, h3 {
45
+ font-family: 'Playfair Display', serif;
46
+ color: var(--dark);
47
+ }
48
+
49
+ a { text-decoration: none; color: inherit; }
50
+ ul { list-style: none; }
51
+
52
+ /* --- HEADER & ANYCODER CREDIT --- */
53
+ header {
54
+ background: var(--white);
55
+ padding: 15px 5%;
56
+ display: flex;
57
+ justify-content: space-between;
58
+ align-items: center;
59
+ position: sticky;
60
+ top: 0;
61
+ z-index: 1000;
62
+ box-shadow: 0 2px 15px rgba(0,0,0,0.05);
63
+ }
64
+
65
+ .brand {
66
+ font-size: 1.5rem;
67
+ font-weight: 700;
68
+ color: var(--primary);
69
+ display: flex;
70
+ align-items: center;
71
+ gap: 10px;
72
+ }
73
+
74
+ .anycoder-link {
75
+ font-size: 0.75rem;
76
+ color: var(--gray);
77
+ font-weight: 500;
78
+ border: 1px solid var(--light-gray);
79
+ padding: 5px 12px;
80
+ border-radius: 20px;
81
+ transition: var(--transition);
82
+ }
83
+
84
+ .anycoder-link:hover {
85
+ background: var(--dark);
86
+ color: var(--white);
87
+ border-color: var(--dark);
88
+ }
89
+
90
+ /* --- HERO SECTION --- */
91
+ .hero {
92
+ position: relative;
93
+ height: 60vh;
94
+ min-height: 400px;
95
+ background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1487530811176-3780de880c2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');
96
+ background-size: cover;
97
+ background-position: center;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ text-align: center;
102
+ color: var(--white);
103
+ padding: 0 20px;
104
+ }
105
+
106
+ .hero-content h1 {
107
+ font-size: 3rem;
108
+ margin-bottom: 10px;
109
+ text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
110
+ }
111
+
112
+ .hero-content p {
113
+ font-size: 1.2rem;
114
+ margin-bottom: 30px;
115
+ font-weight: 500;
116
+ }
117
+
118
+ .btn-group {
119
+ display: flex;
120
+ gap: 15px;
121
+ justify-content: center;
122
+ flex-wrap: wrap;
123
+ }
124
+
125
+ .btn {
126
+ padding: 12px 30px;
127
+ border-radius: 50px;
128
+ font-weight: 600;
129
+ cursor: pointer;
130
+ transition: var(--transition);
131
+ display: inline-flex;
132
+ align-items: center;
133
+ gap: 8px;
134
+ }
135
+
136
+ .btn-primary {
137
+ background: var(--primary);
138
+ color: var(--white);
139
+ border: 2px solid var(--primary);
140
+ }
141
+
142
+ .btn-primary:hover {
143
+ background: transparent;
144
+ color: var(--white);
145
+ }
146
+
147
+ .btn-outline {
148
+ background: transparent;
149
+ color: var(--white);
150
+ border: 2px solid var(--white);
151
+ }
152
+
153
+ .btn-outline:hover {
154
+ background: var(--white);
155
+ color: var(--primary);
156
+ }
157
+
158
+ /* --- STATUS BAR --- */
159
+ .status-bar {
160
+ background: var(--white);
161
+ padding: 20px 5%;
162
+ display: flex;
163
+ justify-content: center;
164
+ gap: 40px;
165
+ flex-wrap: wrap;
166
+ border-bottom: 1px solid var(--light-gray);
167
+ position: relative;
168
+ margin-top: -30px;
169
+ z-index: 10;
170
+ width: 90%;
171
+ margin-left: auto;
172
+ margin-right: auto;
173
+ border-radius: var(--radius);
174
+ box-shadow: var(--shadow);
175
+ }
176
+
177
+ .status-item {
178
+ display: flex;
179
+ align-items: center;
180
+ gap: 12px;
181
+ }
182
+
183
+ .status-icon {
184
+ width: 40px;
185
+ height: 40px;
186
+ background: var(--primary-light);
187
+ color: var(--primary);
188
+ border-radius: 50%;
189
+ display: flex;
190
+ align-items: center;
191
+ justify-content: center;
192
+ font-size: 1.1rem;
193
+ }
194
+
195
+ .status-text h4 { font-size: 0.9rem; color: var(--gray); font-weight: 500; }
196
+ .status-text span { font-weight: 700; color: var(--dark); }
197
+
198
+ .rating-badge {
199
+ background: #fff8e1;
200
+ color: #f57f17;
201
+ padding: 2px 8px;
202
+ border-radius: 4px;
203
+ font-size: 0.8rem;
204
+ font-weight: bold;
205
+ margin-left: 5px;
206
+ }
207
+
208
+ /* --- MAIN CONTAINER --- */
209
+ .container {
210
+ max-width: 1200px;
211
+ margin: 50px auto;
212
+ padding: 0 20px;
213
+ display: grid;
214
+ grid-template-columns: 2fr 1fr;
215
+ gap: 30px;
216
+ }
217
+
218
+ /* --- ABOUT & SERVICES --- */
219
+ .section-card {
220
+ background: var(--white);
221
+ padding: 30px;
222
+ border-radius: var(--radius);
223
+ box-shadow: 0 5px 20px rgba(0,0,0,0.03);
224
+ margin-bottom: 30px;
225
+ }
226
+
227
+ .section-title {
228
+ font-size: 1.5rem;
229
+ margin-bottom: 20px;
230
+ display: flex;
231
+ align-items: center;
232
+ gap: 10px;
233
+ }
234
+
235
+ .section-title i { color: var(--primary); }
236
+
237
+ .about-text {
238
+ color: var(--gray);
239
+ margin-bottom: 20px;
240
+ }
241
+
242
+ .services-grid {
243
+ display: grid;
244
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
245
+ gap: 15px;
246
+ margin-top: 20px;
247
+ }
248
+
249
+ .service-item {
250
+ background: var(--light);
251
+ padding: 15px;
252
+ border-radius: 12px;
253
+ text-align: center;
254
+ border: 1px solid transparent;
255
+ transition: var(--transition);
256
+ }
257
+
258
+ .service-item:hover {
259
+ border-color: var(--primary);
260
+ transform: translateY(-3px);
261
+ }
262
+
263
+ .service-icon {
264
+ font-size: 1.5rem;
265
+ color: var(--secondary);
266
+ margin-bottom: 10px;
267
+ }
268
+
269
+ /* --- SIDEBAR (Contact Info) --- */
270
+ .sidebar-card {
271
+ background: var(--white);
272
+ border-radius: var(--radius);
273
+ box-shadow: var(--shadow);
274
+ overflow: hidden;
275
+ position: sticky;
276
+ top: 100px;
277
+ }
278
+
279
+ .map-placeholder {
280
+ height: 200px;
281
+ background: #e5e3df;
282
+ background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=8+Phan+Văn+Hân,+Bình+Thạnh,+TP+HCM&zoom=15&size=600x300&key=YOUR_KEY_HERE'); /* Placeholder only */
283
+ background-size: cover;
284
+ position: relative;
285
+ }
286
+
287
+ .map-overlay {
288
+ position: absolute;
289
+ bottom: 10px;
290
+ left: 10px;
291
+ background: rgba(255,255,255,0.9);
292
+ padding: 5px 10px;
293
+ border-radius: 5px;
294
+ font-size: 0.8rem;
295
+ font-weight: 600;
296
+ }
297
+
298
+ .contact-info {
299
+ padding: 25px;
300
+ }
301
+
302
+ .info-row {
303
+ display: flex;
304
+ align-items: flex-start;
305
+ gap: 15px;
306
+ margin-bottom: 20px;
307
+ padding-bottom: 20px;
308
+ border-bottom: 1px solid var(--light-gray);
309
+ }
310
+
311
+ .info-row:last-child { border-bottom: none; margin-bottom: 0; }
312
+
313
+ .info-icon {
314
+ color: var(--primary);
315
+ font-size: 1.2rem;
316
+ margin-top: 3px;
317
+ }
318
+
319
+ .info-content h4 { font-size: 0.9rem; color: var(--gray); margin-bottom: 4px; }
320
+ .info-content p { font-weight: 600; font-size: 1rem; }
321
+
322
+ .action-btn {
323
+ display: block;
324
+ width: 100%;
325
+ padding: 12px;
326
+ text-align: center;
327
+ background: var(--primary);
328
+ color: var(--white);
329
+ border-radius: 8px;
330
+ font-weight: 600;
331
+ margin-bottom: 10px;
332
+ transition: var(--transition);
333
+ }
334
+
335
+ .action-btn.secondary {
336
+ background: var(--light-gray);
337
+ color: var(--dark);
338
+ }
339
+
340
+ .action-btn:hover { opacity: 0.9; transform: translateY(-2px); }
341
+
342
+ .hours-table {
343
+ margin-top: 15px;
344
+ font-size: 0.9rem;
345
+ }
346
+ .hours-row {
347
+ display: flex;
348
+ justify-content: space-between;
349
+ margin-bottom: 8px;
350
+ color: var(--gray);
351
+ }
352
+ .hours-row.today { font-weight: 700; color: var(--primary); }
353
+
354
+ /* --- REVIEWS --- */
355
+ .reviews-container {
356
+ margin-top: 20px;
357
+ }
358
+
359
+ .review-card {
360
+ background: var(--light);
361
+ padding: 20px;
362
+ border-radius: 12px;
363
+ margin-bottom: 15px;
364
+ border-left: 4px solid var(--primary);
365
+ }
366
+
367
+ .review-header {
368
+ display: flex;
369
+ justify-content: space-between;
370
+ margin-bottom: 10px;
371
+ }
372
+
373
+ .stars { color: var(--accent); font-size: 0.9rem; }
374
+
375
+ .google-badge {
376
+ display: inline-flex;
377
+ align-items: center;
378
+ gap: 5px;
379
+ background: var(--white);
380
+ padding: 5px 10px;
381
+ border-radius: 20px;
382
+ font-size: 0.8rem;
383
+ font-weight: 600;
384
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
385
+ margin-bottom: 15px;
386
+ }
387
+
388
+ /* --- FOOTER --- */
389
+ footer {
390
+ background: var(--dark);
391
+ color: var(--white);
392
+ padding: 40px 5% 20px;
393
+ margin-top: 50px;
394
+ text-align: center;
395
+ }
396
+
397
+ .social-links {
398
+ margin: 20px 0;
399
+ }
400
+
401
+ .social-links a {
402
+ width: 40px;
403
+ height: 40px;
404
+ background: rgba(255,255,255,0.1);
405
+ border-radius: 50%;
406
+ display: inline-flex;
407
+ align-items: center;
408
+ justify-content: center;
409
+ margin: 0 5px;
410
+ transition: var(--transition);
411
+ }
412
+
413
+ .social-links a:hover { background: var(--primary); }
414
+
415
+ /* --- RESPONSIVE --- */
416
+ @media (max-width: 900px) {
417
+ .container { grid-template-columns: 1fr; }
418
+ .hero-content h1 { font-size: 2.2rem; }
419
+ .status-bar { flex-direction: column; gap: 15px; align-items: flex-start; }
420
+ .sidebar-card { position: static; }
421
+ }
422
+
423
+ @media (max-width: 600px) {
424
+ header { flex-direction: column; gap: 10px; text-align: center; }
425
+ .btn-group { flex-direction: column; }
426
+ .btn { width: 100%; justify-content: center; }
427
+ }
428
+ </style>
429
+ </head>
430
+ <body>
431
+
432
+ <!-- HEADER -->
433
+ <header>
434
+ <div class="brand">
435
+ <i class="fa-solid fa-spa"></i> Hoa Tươi Thanh Ngọc
436
+ </div>
437
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
438
+ Built with anycoder
439
+ </a>
440
+ </header>
441
+
442
+ <!-- HERO SECTION -->
443
+ <section class="hero">
444
+ <div class="hero-content">
445
+ <h1>Hoa Tươi Thanh Ngọc</h1>
446
+ <p>Hoa Tươi – Mẫu Đẹp – Giá Hợp Lý – Giao Nhanh Trong Ngày</p>
447
+ <div class="btn-group">
448
+ <a href="tel:0777110959" class="btn btn-primary">
449
+ <i class="fa-solid fa-phone"></i> Gọi Ngay: 0777 110 959
450
+ </a>
451
+ <a href="https://www.google.com/maps/search/?api=1&query=8+Phan+Văn+Hân,+Phường+19,+Bình Thạnh,+TP+HCM" target="_blank" class="btn btn-outline">
452
+ <i class="fa-solid fa-location-arrow"></i> Chỉ Đường
453
+ </a>
454
+ </div>
455
+ </div>
456
+ </section>
457
+
458
+ <!-- STATUS BAR -->
459
+ <div class="status-bar">
460
+ <div class="status-item">
461
+ <div class="status-icon">
462
+ <i class="fa-solid fa-star"></i>
463
+ </div>
464
+ <div class="status-text">
465
+ <h4>Đánh giá</h4>
466
+ <span>5,0 <span class="rating-badge">Facebook</span></span>
467
+ </div>
468
+ </div>
469
+ <div class="status-item">
470
+ <div class="status-icon">
471
+ <i class="fa-solid fa-store"></i>
472
+ </div>
473
+ <div class="status-text">
474
+ <h4>Trạng thái</h4>
475
+ <span id="open-status">Đang kiểm tra...</span>
476
+ </div>
477
+ </div>
478
+ <div class="status-item">
479
+ <div class="status-icon">
480
+ <i class="fa-solid fa-map-pin"></i>
481
+ </div>
482
+ <div class="status-text">
483
+ <h4>Quận</h4>
484
+ <span>Bình Thạnh, HCM</span>
485
+ </div>
486
+ </div>
487
+ </div>
488
+
489
+ <!-- MAIN CONTENT -->
490
+ <div class="container">
491
+ <!-- LEFT COLUMN -->
492
+ <main>
493
+ <!-- ABOUT -->
494
+ <div class="section-card">
495
+ <h2 class="section-title"><i class="fa-solid fa-leaf"></i> Giới Thiệu</h2>
496
+ <div class="google-badge">
497
+ <i class="fa-brands fa-google"></i> Doanh nghiệp đã xác minh
498
+ </div>
499
+ <p class="about-text">
500
+ <strong>Hoa Tươi Thanh Ngọc – Phan Văn Hân</strong> chuyên cung cấp hoa tươi mỗi ngày tại Bình Thạnh. Nhận thiết kế hoa sinh nhật, hoa khai trương, hoa chúc mừng, hoa sự kiện theo yêu cầu.
501
+ <br><br>
502
+ Cam kết: <em>Hoa tươi – Mẫu đẹp – Giá hợp lý – Giao nhanh trong ngày.</em> Liên hệ đặt hoa nhanh chóng.
503
+ </p>
504
+
505
+ <h3 class="section-title" style="font-size: 1.2rem; margin-top:30px;">Dịch vụ của chúng tôi</h3>
506
+ <div class="services-grid">
507
+ <div class="service-item">
508
+ <i class="fa-solid fa-cake-candles service-icon"></i>
509
+ <p>Hoa Sinh Nhật</p>
510
+ </div>
511
+ <div class="service-item">
512
+ <i class="fa-solid fa-shop service-icon"></i>
513
+ <p>Hoa Khai Trương</p>
514
+ </div>
515
+ <div class="service-item">
516
+ <i class="fa-solid fa-champagne-glasses service-icon"></i>
517
+ <p>Hoa Chúc Mừng</p>
518
+ </div>
519
+ <div class="service-item">
520
+ <i class="fa-solid fa-calendar-day service-icon"></i>
521
+ <p>Hoa Sự Kiện</p>
522
+ </div>
523
+ </div>
524
+ </div>
525
+
526
+ <!-- REVIEWS -->
527
+ <div class="section-card">
528
+ <h2 class="section-title"><i class="fa-solid fa-comments"></i> Bài Đánh Giá</h2>
529
+ <div class="google-badge">
530
+ <i class="fa-brands fa-google"></i> 5 bài đánh giá trên Google
531
+ </div>
532
+
533
+ <div class="reviews-container">
534
+ <div class="review-card">
535
+ <div class="review-header">
536
+ <span><i class="fa-solid fa-user-circle"></i> Khách hàng</span>
537
+ <span class="stars"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></span>
538
+ </div>
539
+ <p>"Hoa Tươi Thanh Ngọc luôn có hoa tươi mới mỗi ngày. Mẫu mã đẹp, nhân viên tư vấn nhiệt tình. Giao hàng nhanh chóng!"</p>
540
+ <small style="color: #888; margin-top: 10px; display:block;">5 ngày trước</small>
541
+ </div>
542
+ </div>
543
+ <p style="margin-top:15px; font-size: 0.9rem; color: var(--gray);">
544
+ <i class="fa-brands fa-facebook"></i> Facebook · 1 phiếu bầu
545
+ </p>
546
+ </div>
547
+ </main>
548
+
549
+ <!-- RIGHT COLUMN (SIDEBAR) -->
550
+ <aside>
551
+ <div class="sidebar-card">
552
+ <div class="map-placeholder">
553
+ <div class="map-overlay">
554
+ <i class="fa-solid fa-location-dot" style="color:var(--primary)"></i> Bản đồ
555
+ </div>
556
+ <!-- In a real app, embed Google Maps Iframe here -->
557
+ </div>
558
+
559
+ <div class="contact-info">
560
+ <a href="tel:0777110959" class="action-btn">
561
+ <i class="fa-solid fa-phone"></i> Gọi Ngay
562
+ </a>
563
+ <a href="https://www.google.com/maps" target="_blank" class="action-btn secondary">
564
+ <i class="fa-solid fa-directions"></i> Đường đi
565
+ </a>
566
+ <a href="#" class="action-btn secondary">
567
+ <i class="fa-solid fa-bookmark"></i> Lưu lại
568
+ </a>
569
+ <a href="#" class="action-btn secondary">
570
+ <i class="fa-solid fa-share"></i> Chia sẻ
571
+ </a>
572
+
573
+ <hr style="border: 0; border-top: 1px solid #eee; margin: 20px 0;">
574
+
575
+ <div class="info-row">
576
+ <i class="fa-solid fa-location-dot info-icon"></i>
577
+ <div class="info-content">
578
+ <h4>Địa chỉ</h4>
579
+ <p>8 Phan Văn Hân, P.19, Bình Thạnh, TP. Hồ Chí Minh 70000</p>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="info-row">
584
+ <i class="fa-solid fa-clock info-icon"></i>
585
+ <div class="info-content">
586
+ <h4>Giờ hoạt động</h4>
587
+ <div class="hours-table">
588
+ <div class="hours-row">
589
+ <span>Thứ 2 - Thứ 7:</span>
590
+ <span>6:00 - 21:00</span>
591
+ </div>
592
+ <div class="hours-row">
593
+ <span>Chủ Nhật:</span>
594
+ <span>6:00 - 21:00</span>
595
+ </div>
596
+ </div>
597
+ <small style="color: var(--primary); font-size: 0.8rem; margin-top: 5px; display:block;">
598
+ <i class="fa-solid fa-circle-info"></i> Doanh nghiệp này cập nhật 5 tuần trước
599
+ </small>
600
+ </div>
601
+ </div>
602
+
603
+ <div class="info-row">
604
+ <i class="fa-solid fa-globe info-icon"></i>
605
+ <div class="info-content">
606
+ <h4>Website</h4>
607
+ <p>Thanhngoc-flower.com</p>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </div>
612
+
613
+ <!-- Admin actions simulation -->
614
+ <div style="margin-top: 20px; text-align: center;">
615
+ <button style="border: 1px solid #ddd; background: white; padding: 10px 20px; border-radius: 8px; cursor: pointer; width: 100%;">
616
+ <i class="fa-solid fa-pen-to-square"></i> Sửa thông tin doanh nghiệp
617
+ </button>
618
+ </div>
619
+ </aside>
620
+ </div>
621
+
622
+ <!-- FOOTER -->
623
+ <footer>
624
+ <div class="social-links">
625
+ <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
626
+ <a href="#"><i class="fa-brands fa-instagram"></i></a>
627
+ <a href="#"><i class="fa-brands fa-zalo"></i></a>
628
+ </div>
629
+ <p>&copy; 2023 Hoa Tươi Thanh Ngọc. All rights reserved.</p>
630
+ <p style="font-size: 0.8rem; color: #888; margin-top: 10px;">TP. Hồ Chí Minh</p>
631
+ </footer>
632
+
633
+ <script>
634
+ // Function to check opening hours
635
+ function checkOpeningHours() {
636
+ const now = new Date();
637
+ const day = now.getDay(); // 0 = Sunday, 1 = Monday, etc.
638
+ const hours = now.getHours();
639
+ const minutes = now.getMinutes();
640
+
641
+ // Business hours: 6:00 to 21:00 (9 PM)
642
+ // Open every day according to data (implied CN is included)
643
+
644
+ let isOpen = false;
645
+ let message = "";
646
+
647
+ // Simple check for 6:00 to 21:00
648
+ if (hours >= 6 && hours < 21) {
649
+ isOpen = true;
650
+ message = `Mở cửa · Đóng lúc 21:00`;
651
+ } else if (hours === 21 && minutes === 0) {
652
+ isOpen = true;
653
+ message = `Sắp đóng cửa · Đóng lúc 21:00`;
654
+ } else {
655
+ isOpen = false;
656
+ message = `Đã đóng cửa · Mở cửa lúc 6:00`;
657
+ }
658
+
659
+ // Override for exact match of provided text style
660
+ const statusElement = document.getElementById('open-status');
661
+
662
+ if (isOpen) {
663
+ // Check if it's close to closing
664
+ if(hours === 20 && minutes >= 55) {
665
+ statusElement.innerHTML = `<span style="color:var(--secondary); font-weight:bold;">Sắp đóng cửa · 21:00</span>`;
666
+ } else {
667
+ statusElement.innerHTML = `<span style="color:var(--secondary); font-weight:bold;">Mở cửa</span>`;
668
+ }
669
+ } else {
670
+ statusElement.innerHTML = `<span style="color:red;">Đã đóng cửa</span>`;
671
+ }
672
+ }
673
+
674
+ // Run on load
675
+ document.addEventListener('DOMContentLoaded', () => {
676
+ checkOpeningHours();
677
+
678
+ // Update time every minute
679
+ setInterval(checkOpeningHours, 60000);
680
+ });
681
+ </script>
682
+ </body>
683
+ </html>