Hugging Face's logo

Spaces:
zulfiqar001
/
hms
Running

App Files Community
1
zulfiqar001 commited on
Commit
b8229e3
·
verified ·
1 Parent(s): 1a0c316

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +530 -1154
index.html CHANGED
@@ -3,10 +3,9 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Skardu View Point - Hotel Management System</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
9
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
10
  <style>
11
  :root {
12
  --primary: #2c6e49;
@@ -20,144 +19,147 @@
20
  --success: #38a169;
21
  --warning: #dd6b20;
22
  --danger: #e53e3e;
 
 
23
  }
24
-
25
  * {
26
  margin: 0;
27
  padding: 0;
28
  box-sizing: border-box;
29
  }
30
-
31
  body {
32
- font-family: 'Montserrat', sans-serif;
33
  background-color: #f5f5f5;
34
  color: var(--dark);
35
  line-height: 1.6;
 
36
  }
37
-
38
  /* Utility Classes */
39
  .container {
 
40
  max-width: 1200px;
41
  margin: 0 auto;
42
  padding: 0 20px;
43
  }
44
-
45
  .btn {
46
  display: inline-block;
47
  padding: 10px 20px;
48
  border: none;
49
- border-radius: 5px;
50
  cursor: pointer;
51
  font-size: 14px;
52
  font-weight: 500;
53
  transition: all 0.3s ease;
 
54
  }
55
-
56
  .btn-primary {
57
  background-color: var(--primary);
58
  color: var(--white);
59
  }
60
-
61
  .btn-primary:hover {
62
  background-color: var(--primary-light);
63
  }
64
-
65
  .btn-secondary {
66
  background-color: var(--secondary);
67
  color: var(--white);
68
  }
69
-
70
  .btn-secondary:hover {
71
  background-color: #e6913e;
72
  }
73
-
74
  .btn-outline {
75
  background-color: transparent;
76
  border: 1px solid var(--primary);
77
  color: var(--primary);
78
  }
79
-
80
  .btn-outline:hover {
81
  background-color: var(--primary);
82
  color: var(--white);
83
  }
84
-
85
  .flex {
86
  display: flex;
87
  }
88
-
 
 
 
 
 
89
  .flex-between {
90
  justify-content: space-between;
91
  }
92
-
93
- .flex-center {
94
- align-items: center;
 
 
 
95
  }
96
-
97
- /* Header & Navigation */
98
  header {
99
  background-color: var(--white);
100
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
101
  position: fixed;
102
  width: 100%;
103
  z-index: 100;
104
  }
105
-
106
  .navbar {
 
 
 
107
  padding: 15px 0;
108
  }
109
-
110
  .logo {
111
  font-family: 'Playfair Display', serif;
112
  font-size: 24px;
113
  font-weight: 700;
114
  color: var(--primary);
115
  }
116
-
117
  .logo span {
118
  color: var(--secondary);
119
  }
120
-
121
  .nav-links {
122
  display: flex;
123
  gap: 25px;
124
  }
125
-
126
  .nav-links a {
127
  text-decoration: none;
128
  color: var(--dark);
129
  font-weight: 500;
130
  transition: color 0.3s;
131
  }
132
-
133
- .nav-links a:hover {
134
  color: var(--primary);
135
  }
136
-
137
  .user-menu {
138
  display: flex;
139
  align-items: center;
140
  gap: 15px;
141
  }
142
-
143
- .user-menu .avatar {
144
- width: 40px;
145
- height: 40px;
146
- border-radius: 50%;
147
- background-color: var(--primary-light);
148
- color: var(--white);
149
- display: flex;
150
- align-items: center;
151
- justify-content: center;
152
- font-weight: 600;
153
- cursor: pointer;
154
- }
155
-
156
  .notification-bell {
157
  position: relative;
158
  cursor: pointer;
159
  }
160
-
161
  .notification-bell .badge {
162
  position: absolute;
163
  top: -5px;
@@ -172,13 +174,27 @@
172
  align-items: center;
173
  justify-content: center;
174
  }
175
-
 
 
 
 
 
 
 
 
 
 
 
 
 
176
  /* Main Content */
177
- .main {
178
  padding-top: 80px;
 
179
  min-height: calc(100vh - 150px);
180
  }
181
-
182
  /* Dashboard */
183
  .dashboard {
184
  display: grid;
@@ -186,15 +202,17 @@
186
  gap: 30px;
187
  padding: 30px 0;
188
  }
189
-
190
  .sidebar {
191
  background-color: var(--white);
192
- border-radius: 10px;
193
- box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
194
  padding: 20px;
195
  height: fit-content;
 
 
196
  }
197
-
198
  .sidebar-title {
199
  font-size: 18px;
200
  font-weight: 600;
@@ -203,622 +221,294 @@
203
  border-bottom: 1px solid #eee;
204
  color: var(--primary);
205
  }
206
-
207
  .sidebar-menu {
208
  list-style: none;
209
  }
210
-
211
  .sidebar-menu li {
212
  margin-bottom: 10px;
213
  }
214
-
215
  .sidebar-menu a {
216
- display: block;
 
217
  padding: 8px 10px;
218
  color: var(--dark);
219
  text-decoration: none;
220
- border-radius: 5px;
221
  transition: all 0.3s;
222
- display: flex;
223
- align-items: center;
224
  }
225
-
226
- .sidebar-menu a:hover, .sidebar-menu a.active {
 
227
  background-color: rgba(44, 110, 73, 0.1);
228
  color: var(--primary);
229
  }
230
-
231
- .sidebar-menu a i {
232
  margin-right: 10px;
233
  width: 20px;
234
  text-align: center;
235
  }
236
-
237
  .dashboard-content {
238
  background-color: var(--white);
239
- border-radius: 10px;
240
- box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
241
- padding: 25px;
242
- }
243
-
244
- .dashboard-header {
245
- display: flex;
246
- justify-content: space-between;
247
- align-items: center;
248
- margin-bottom: 30px;
249
- }
250
-
251
- .dashboard-title {
252
- font-size: 24px;
253
- font-weight: 600;
254
- color: var(--primary);
255
  }
256
-
 
257
  .stats-cards {
258
  display: grid;
259
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
260
  gap: 20px;
261
  margin-bottom: 30px;
262
  }
263
-
264
  .stat-card {
265
  background-color: var(--white);
266
- border-radius: 10px;
267
  padding: 20px;
268
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
269
  border-left: 5px solid var(--primary);
270
  }
271
-
272
  .stat-card.warning {
273
  border-left-color: var(--warning);
274
  }
275
-
276
  .stat-card.success {
277
  border-left-color: var(--success);
278
  }
279
-
280
  .stat-card.danger {
281
  border-left-color: var(--danger);
282
  }
283
-
284
  .stat-card-title {
285
  font-size: 14px;
286
  color: var(--gray);
287
  margin-bottom: 10px;
288
  }
289
-
290
  .stat-card-value {
291
  font-size: 28px;
292
  font-weight: 700;
293
  margin-bottom: 5px;
294
  }
295
-
296
  .stat-card-change {
297
  font-size: 12px;
298
  display: flex;
299
  align-items: center;
300
  }
301
-
302
  .stat-card-change.up {
303
  color: var(--success);
304
  }
305
-
306
  .stat-card-change.down {
307
  color: var(--danger);
308
  }
309
-
310
- /* Booking Form */
311
- .booking-form {
312
- background-color: var(--white);
313
- border-radius: 10px;
314
- padding: 25px;
315
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
316
- margin-bottom: 30px;
317
  }
318
-
319
- .form-title {
320
- font-size: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
321
  font-weight: 600;
322
- margin-bottom: 20px;
323
  color: var(--primary);
324
  }
325
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
326
  .form-group {
327
  margin-bottom: 20px;
328
  }
329
-
330
  .form-label {
331
  display: block;
332
  margin-bottom: 8px;
333
  font-weight: 500;
334
  }
335
-
336
  .form-control {
337
  width: 100%;
338
  padding: 10px 15px;
339
  border: 1px solid #ddd;
340
- border-radius: 5px;
341
  font-size: 14px;
342
  transition: border-color 0.3s;
343
  }
344
-
345
  .form-control:focus {
346
  border-color: var(--primary);
347
  outline: none;
348
  }
349
-
 
350
  .form-row {
351
  display: grid;
352
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
353
  gap: 20px;
354
  }
355
-
356
- /* Rooms Grid */
357
- .rooms-grid {
358
- display: grid;
359
- grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
360
- gap: 25px;
361
- }
362
-
363
- .room-card {
364
  background-color: var(--white);
365
- border-radius: 10px;
366
- overflow: hidden;
367
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
368
- transition: transform 0.3s, box-shadow 0.3s;
369
- }
370
-
371
- .room-card:hover {
372
- transform: translateY(-5px);
373
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
374
- }
375
-
376
- .room-image {
377
- height: 180px;
378
- background-color: #eee;
379
- position: relative;
380
- }
381
-
382
- .room-image img {
383
- width: 100%;
384
- height: 100%;
385
- object-fit: cover;
386
- }
387
-
388
- .room-badge {
389
- position: absolute;
390
- top: 15px;
391
- right: 15px;
392
- background-color: rgba(0, 0, 0, 0.7);
393
- color: white;
394
- padding: 5px 10px;
395
- border-radius: 20px;
396
- font-size: 12px;
397
  }
398
-
399
- .room-content {
400
- padding: 15px;
 
 
 
401
  }
402
-
403
- .room-title {
404
  font-size: 18px;
405
  font-weight: 600;
406
- margin-bottom: 5px;
407
  color: var(--primary);
408
  }
409
-
410
- .room-price {
411
- font-size: 16px;
412
- font-weight: 700;
413
- color: var(--secondary);
414
- margin-bottom: 10px;
415
  }
416
-
417
- .room-amenities {
418
- display: flex;
419
- flex-wrap: wrap;
420
- gap: 10px;
421
- margin-bottom: 15px;
422
- }
423
-
424
- .amenity {
425
- font-size: 12px;
426
- background-color: var(--light);
427
- padding: 3px 8px;
428
- border-radius: 20px;
429
- display: flex;
430
- align-items: center;
431
- }
432
-
433
- .amenity i {
434
- margin-right: 5px;
435
- font-size: 10px;
436
- }
437
-
438
- .room-card-footer {
439
- display: flex;
440
- justify-content: space-between;
441
- align-items: center;
442
- }
443
-
444
- /* Rooms Table */
445
- .data-table {
446
- width: 100%;
447
- border-collapse: collapse;
448
- margin-bottom: 20px;
449
- }
450
-
451
- .data-table th, .data-table td {
452
- padding: 12px 15px;
453
- text-align: left;
454
- border-bottom: 1px solid #eee;
455
- }
456
-
457
- .data-table th {
458
- background-color: #f9f9f9;
459
- font-weight: 600;
460
- color: var(--primary);
461
- }
462
-
463
- .data-table tr:hover {
464
- background-color: #f5f5f5;
465
- }
466
-
467
- .status {
468
- display: inline-block;
469
- padding: 5px 10px;
470
- border-radius: 20px;
471
- font-size: 12px;
472
- font-weight: 500;
473
- }
474
-
475
- .status-available {
476
- background-color: rgba(56, 161, 105, 0.1);
477
- color: var(--success);
478
- }
479
-
480
- .status-booked {
481
- background-color: rgba(229, 62, 62, 0.1);
482
- color: var(--danger);
483
- }
484
-
485
- .status-maintenance {
486
- background-color: rgba(221, 107, 32, 0.1);
487
- color: var(--warning);
488
- }
489
-
490
- .status-cleaning {
491
- background-color: rgba(99, 102, 241, 0.1);
492
- color: #6366f1;
493
- }
494
-
495
- .table-actions {
496
- display: flex;
497
- gap: 10px;
498
- }
499
-
500
- .table-actions .btn {
501
- padding: 5px 10px;
502
- font-size: 12px;
503
- }
504
-
505
- /* Calendar */
506
- .calendar {
507
- background-color: var(--white);
508
- border-radius: 10px;
509
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
510
- padding: 25px;
511
- margin-bottom: 30px;
512
- }
513
-
514
- .calendar-header {
515
- display: flex;
516
- justify-content: space-between;
517
- align-items: center;
518
- margin-bottom: 20px;
519
- }
520
-
521
- .calendar-title {
522
- font-size: 18px;
523
- font-weight: 600;
524
- color: var(--primary);
525
- }
526
-
527
- .calendar-grid {
528
- display: grid;
529
- grid-template-columns: repeat(7, 1fr);
530
- gap: 5px;
531
- }
532
-
533
  .calendar-day-header {
534
  text-align: center;
535
- font-weight: 6z00;
536
  padding: 10px;
537
  background-color: #f9f9f9;
538
  color: var(--primary);
539
  }
540
-
541
  .calendar-day {
542
  border: 1px solid #eee;
543
  padding: 10px;
544
  min-height: 80px;
 
545
  }
546
-
547
  .day-number {
548
  font-weight: 600;
549
  margin-bottom: 5px;
550
  }
551
-
552
  .calendar-event {
553
  background-color: var(--primary-light);
554
  color: white;
555
  font-size: 12px;
556
- padding: 2px 5px;
557
  border-radius: 3px;
558
- margin-bottom: 2px;
559
- cursor: pointer;
560
- }
561
-
562
- .calendar-event.booked {
563
- background-color: var(--secondary);
564
- }
565
-
566
- .calendar-event.maintenance {
567
- background-color: var(--warning);
568
- }
569
-
570
- .calendar-event.cleaning {
571
- background-color: #6366f1;
572
- }
573
-
574
- /* Tabs */
575
- .tabs {
576
- display: flex;
577
- border-bottom: 1px solid #ddd;
578
- margin-bottom: 20px;
579
- }
580
-
581
- .tab {
582
- padding: 10px 20px;
583
- cursor: pointer;
584
- border-bottom: 2px solid transparent;
585
- font-weight: 500;
586
- transition: all 0.3s;
587
- }
588
-
589
- .tab.active {
590
- border-bottom-color: var(--primary);
591
- color: var(--primary);
592
- }
593
-
594
- .tab-content {
595
- display: none;
596
- }
597
-
598
- .tab-content.active {
599
- display: block;
600
- }
601
-
602
- /* Payment Card */
603
- .payment-card {
604
- background-color: var(--white);
605
- border-radius: 10px;
606
- padding: 20px;
607
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
608
- margin-bottom: 20px;
609
- }
610
-
611
- .payment-card-header {
612
- display: flex;
613
- justify-content: space-between;
614
- align-items: center;
615
- margin-bottom: 15px;
616
- }
617
-
618
- .payment-card-title {
619
- font-weight: 600;
620
- color: var(--primary);
621
- }
622
-
623
- .payment-methods {
624
- display: flex;
625
- gap: 15px;
626
- margin-bottom: 20px;
627
- }
628
-
629
- .payment-method {
630
- border: 1px solid #ddd;
631
- padding: 15px;
632
- border-radius: 5px;
633
  cursor: pointer;
634
- transition: all 0.3s;
635
- flex: 1;
636
  }
637
-
638
- .payment-method:hover, .payment-method.active {
639
- border-color: var(--primary);
640
- background-color: rgba(44, 110, 73, 0.05);
641
- }
642
-
643
- .payment-method img {
644
- height: 25px;
645
- }
646
-
647
- .card-element {
648
- border: 1px solid #ddd;
649
- padding: 15px;
650
- border-radius: 5px;
651
- margin-bottom: 20px;
652
- }
653
-
654
- /* Invoice */
655
- .invoice {
656
- background-color: var(--white);
657
- border-radius: 10px;
658
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
659
- padding: 30px;
660
- margin-bottom: 30px;
661
- }
662
-
663
- .invoice-header {
664
- display: flex;
665
- justify-content: space-between;
666
- margin-bottom: 30px;
667
- }
668
-
669
- .invoice-logo {
670
- font-family: 'Playfair Display', serif;
671
- font-size: 24px;
672
- font-weight: 700;
673
- color: var(--primary);
674
- }
675
-
676
- .invoice-number {
677
- text-align: right;
678
- }
679
-
680
- .invoice-number small {
681
- color: var(--gray);
682
- }
683
-
684
- .invoice-body {
685
- margin-bottom: 30px;
686
- }
687
-
688
- .invoice-row {
689
- display: grid;
690
- grid-template-columns: 1fr 1fr;
691
- gap: 20px;
692
- margin-bottom: 20px;
693
- }
694
-
695
- .invoice-column h5 {
696
- font-size: 14px;
697
- color: var(--gray);
698
- margin-bottom: 5px;
699
- }
700
-
701
- .invoice-table {
702
- width: 100%;
703
- border-collapse: collapse;
704
- margin-bottom: 20px;
705
- }
706
-
707
- .invoice-table th {
708
- text-align: left;
709
- padding: 10px;
710
- background-color: #f9f9f9;
711
- font-weight: 600;
712
- }
713
-
714
- .invoice-table td {
715
- padding: 10px;
716
- border-bottom: 1px solid #eee;
717
- }
718
-
719
- .invoice-table .total-row td {
720
- font-weight: 600;
721
- }
722
-
723
- .invoice-footer {
724
- border-top: 1px solid #ddd;
725
- padding-top: 20px;
726
- text-align: center;
727
- font-size: 13px;
728
- color: var(--gray);
729
- }
730
-
731
- /* Footer */
732
- footer {
733
- background-color: var(--dark);
734
- color: var(--white);
735
- padding: 30px 0;
736
- margin-top: 50px;
737
- }
738
-
739
- .footer-content {
740
- display: grid;
741
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
742
- gap: 30px;
743
- }
744
-
745
- .footer-column h3 {
746
- font-size: 16px;
747
- font-weight: 600;
748
- margin-bottom: 15px;
749
- color: var(--accent);
750
- }
751
-
752
- .footer-links {
753
- list-style: none;
754
- }
755
-
756
- .footer-links li {
757
- margin-bottom: 10px;
758
- }
759
-
760
- .footer-links a {
761
- color: var(--gray);
762
- text-decoration: none;
763
- transition: color 0.3s;
764
- }
765
-
766
- .footer-links a:hover {
767
- color: var(--accent);
768
- }
769
-
770
- .footer-bottom {
771
- text-align: center;
772
- padding-top: 30px;
773
- margin-top: 30px;
774
- border-top: 1px solid rgba(255, 255, 255, 0.1);
775
- font-size: 14px;
776
- color: var(--gray);
777
- }
778
-
779
  /* Login Page */
780
- .login-container {
781
  display: flex;
782
  justify-content: center;
783
  align-items: center;
784
  min-height: 100vh;
785
- background: linear-gradient(135deg, rgba(44,110,73,0.8), rgba(76,149,108,0.8));
786
- padding: 20px;
787
  }
788
-
789
- .login-card {
790
  background-color: var(--white);
791
- border-radius: 10px;
792
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
793
  width: 100%;
794
  max-width: 400px;
795
  padding: 30px;
 
796
  }
797
-
798
- .login-header {
799
  text-align: center;
800
  margin-bottom: 30px;
801
  }
802
-
803
- .login-title {
804
  font-size: 24px;
805
  font-weight: 700;
806
  color: var(--primary);
807
  margin-bottom: 5px;
808
  }
809
-
810
- .login-subtitle {
811
  color: var(--gray);
812
  font-size: 14px;
813
  }
814
-
815
  .social-login {
816
  display: flex;
817
  justify-content: center;
818
  gap: 15px;
819
  margin-bottom: 20px;
820
  }
821
-
822
  .social-btn {
823
  width: 40px;
824
  height: 40px;
@@ -828,58 +518,71 @@
828
  justify-content: center;
829
  color: white;
830
  cursor: pointer;
 
831
  }
832
-
 
 
 
 
833
  .social-btn.google {
834
  background-color: #DB4437;
835
  }
836
-
837
  .social-btn.facebook {
838
  background-color: #4267B2;
839
  }
840
-
841
  .divider {
842
  display: flex;
843
  align-items: center;
844
  margin: 20px 0;
845
  }
846
-
847
  .divider-line {
848
  flex-grow: 1;
849
  height: 1px;
850
  background-color: #eee;
851
  }
852
-
853
  .divider-text {
854
  padding: 0 10px;
855
  color: var(--gray);
856
  font-size: 14px;
857
  }
858
-
 
 
 
 
 
 
 
 
859
  .forgot-password {
860
  text-align: right;
861
- margin-bottom: 20px;
862
  }
863
-
864
  .forgot-password a {
865
  color: var(--secondary);
866
  font-size: 13px;
867
  text-decoration: none;
868
  }
869
-
870
- .login-footer {
871
  text-align: center;
872
  margin-top: 20px;
873
  font-size: 14px;
874
  color: var(--gray);
875
  }
876
-
877
- .login-footer a {
878
  color: var(--primary);
879
  text-decoration: none;
880
  font-weight: 500;
881
  }
882
-
883
  /* Modal */
884
  .modal {
885
  position: fixed;
@@ -896,456 +599,220 @@
896
  visibility: hidden;
897
  transition: all 0.3s;
898
  }
899
-
900
  .modal.active {
901
  opacity: 1;
902
  visibility: visible;
903
  }
904
-
905
  .modal-content {
906
- background-color: white;
907
- border-radius: 10px;
908
  width: 90%;
909
- max-width: 500px;
910
  max-height: 90vh;
911
  overflow-y: auto;
912
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
913
  transform: translateY(20px);
914
  transition: transform 0.3s;
915
  }
916
-
917
  .modal.active .modal-content {
918
- transform: translateY(0);
919
- }
920
-
921
- .modal-header {
922
- display: flex;
923
- justify-content: space-between;
924
- align-items: center;
925
- padding: 20px;
926
- border-bottom: 1px solid #eee;
927
- position: sticky;
928
- top: 0;
929
- background-color: white;
930
- }
931
-
932
- .modal-title {
933
- font-size: 18px;
934
- font-weight: 600;
935
- color: var(--primary);
936
- }
937
-
938
- .modal-close {
939
- background: none;
940
- border: none;
941
- font-size: 20px;
942
- cursor: pointer;
943
- color: var(--gray);
944
- }
945
-
946
- .modal-body {
947
- padding: 20px;
948
- }
949
-
950
- .modal-footer {
951
- padding: 20px;
952
- border-top: 1px solid #eee;
953
- display: flex;
954
- justify-content: flex-end;
955
- gap: 10px;
956
- position: sticky;
957
- bottom: 0;
958
- background-color: white;
959
- }
960
-
961
- /* Date Picker */
962
- .date-range-picker {
963
- display: flex;
964
- gap: 10px;
965
- }
966
-
967
- .date-input {
968
- flex: 1;
969
- position: relative;
970
- }
971
-
972
- .date-input i {
973
- position: absolute;
974
- right: 10px;
975
- top: 50%;
976
- transform: translateY(-50%);
977
- color: var(--gray);
978
- }
979
-
980
- /* Guest Dashboard */
981
- .guest-dashboard {
982
- display: grid;
983
- grid-template-columns: 1fr;
984
- gap: 30px;
985
- }
986
-
987
- .guest-greeting {
988
- background: linear-gradient(135deg, var(--primary), var(--primary-light));
989
- color: white;
990
- padding: 30px;
991
- border-radius: 10px;
992
- margin-bottom: 30px;
993
- }
994
-
995
- .guest-greeting h2 {
996
- font-size: 24px;
997
- margin-bottom: 10px;
998
- }
999
-
1000
- .guest-stats {
1001
- display: grid;
1002
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
1003
- gap: 15px;
1004
- }
1005
-
1006
- .guest-stat {
1007
- background-color: rgba(255, 255, 255, 0.1);
1008
- padding: 15px;
1009
- border-radius: 5px;
1010
- text-align: center;
1011
- }
1012
-
1013
- .guest-stat-value {
1014
- font-size: 24px;
1015
- font-weight: 700;
1016
- margin-bottom: 5px;
1017
- }
1018
-
1019
- .guest-stat-label {
1020
- font-size: 12px;
1021
- opacity: 0.8;
1022
- }
1023
-
1024
- /* Room Availability */
1025
- .availability-container {
1026
- display: flex;
1027
- gap: 20px;
1028
- }
1029
-
1030
- .availability-filters {
1031
- width: 250px;
1032
  }
1033
-
1034
- .filter-card {
1035
- background-color: white;
1036
- border-radius: 10px;
 
1037
  padding: 20px;
1038
- margin-bottom: 20px;
1039
  }
1040
-
1041
- .filter-title {
 
1042
  font-weight: 600;
1043
- margin-bottom: 15px;
1044
  color: var(--primary);
1045
  }
1046
-
1047
- .checkbox-group {
1048
- margin-bottom: 15px;
 
 
 
 
1049
  }
1050
-
1051
- .checkbox-item {
1052
- margin-bottom: 10px;
 
 
 
 
 
1053
  display: flex;
1054
- align-items: center;
 
1055
  }
1056
-
1057
- .checkbox-item input {
1058
- margin-right: 10px;
 
 
 
 
 
 
 
1059
  }
1060
-
1061
- /* Responsive */
 
 
 
 
 
 
 
 
 
 
 
1062
  @media (max-width: 992px) {
1063
  .dashboard {
1064
  grid-template-columns: 1fr;
1065
  }
 
 
 
 
1066
  }
1067
-
1068
  @media (max-width: 768px) {
1069
  .navbar {
1070
  flex-direction: column;
1071
  gap: 15px;
1072
  }
1073
-
1074
  .nav-links {
1075
  justify-content: center;
1076
  flex-wrap: wrap;
1077
  }
1078
-
1079
- .user-menu {
1080
- justify-content: center;
1081
- }
1082
-
1083
  .stats-cards {
1084
  grid-template-columns: 1fr 1fr;
1085
  }
1086
-
1087
- .form-row {
1088
- grid-template-columns: 1fr;
1089
- }
1090
-
1091
- .availability-container {
1092
- flex-direction: column;
1093
- }
1094
-
1095
- .availability-filters {
1096
- width: 100%;
1097
- }
1098
-
1099
- .payment-methods {
1100
- flex-direction: column;
1101
- }
1102
-
1103
- .rooms-grid {
1104
- grid-template-columns: 1fr;
1105
- }
1106
  }
1107
-
1108
  @media (max-width: 576px) {
1109
  .stats-cards {
1110
  grid-template-columns: 1fr;
1111
  }
1112
-
1113
- .date-range-picker {
1114
- flex-direction: column;
1115
- }
1116
-
1117
- .invoice-header {
1118
- flex-direction: column;
1119
- gap: 20px;
1120
- }
1121
-
1122
- .invoice-row {
1123
  grid-template-columns: 1fr;
1124
  }
1125
-
 
 
 
 
 
1126
  .modal-content {
1127
  width: 95%;
1128
  }
1129
  }
1130
-
1131
- /* Animation */
1132
- @keyframes fadeIn {
1133
- from {
1134
- opacity: 0;
1135
- }
1136
- to {
1137
- opacity: 1;
1138
- }
1139
- }
1140
-
1141
- .fade-in {
1142
- animation: fadeIn 0.5s ease-in-out;
1143
- }
1144
-
1145
- @keyframes spin {
1146
- 0% { transform: rotate(0deg); }
1147
- 100% { transform: rotate(360deg); }
1148
- }
1149
  </style>
1150
  </head>
1151
  <body>
1152
  <!-- Loading Screen -->
1153
- <div id="loading-screen" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 1000;">
1154
- <div class="loading-spinner" style="width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite;"></div>
1155
  </div>
1156
 
1157
- <!-- Global Notification Container -->
1158
- <div id="notification-container" style="position: fixed; top: 20px; right: 20px; z-index: 1500; max-width: 350px;"></div>
1159
-
1160
- <!-- Login Page (Initial View) -->
1161
- <div id="login-page" class="login-container">
1162
- <div class="login-card">
1163
- <div class="login-header">
1164
- <h1 class="login-title">Skardu View Point</h1>
1165
- <p class="login-subtitle">Hotel Management System</p>
1166
- </div>
1167
-
1168
- <div id="login-error" style="color: var(--danger); margin-bottom: 15px; display: none;"></div>
1169
-
1170
- <form id="login-form">
1171
- <div class="form-group">
1172
- <label for="login-email" class="form-label">Email Address</label>
1173
- <input type="email" id="login-email" class="form-control" placeholder="Enter your email" required>
1174
- </div>
1175
-
1176
- <div class="form-group">
1177
- <label for="login-password" class="form-label">Password</label>
1178
- <input type="password" id="login-password" class="form-control" placeholder="Enter your password" required>
1179
  </div>
1180
 
1181
- <div class="forgot-password">
1182
- <a href="#" id="forgot-password-link">Forgot password?</a>
1183
- </div>
1184
 
1185
- <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 15px;">Login</button>
1186
- </form>
1187
-
1188
- <div class="divider">
1189
- <div class="divider-line"></div>
1190
- <div class="divider-text">OR</div>
1191
- <div class="divider-line"></div>
1192
- </div>
1193
-
1194
- <div class="social-login">
1195
- <div class="social-btn google">
1196
- <i class="fab fa-google"></i>
1197
- </div>
1198
- <div class="social-btn facebook">
1199
- <i class="fab fa-facebook-f"></i>
1200
- </div>
1201
- </div>
1202
-
1203
- <div id="switch-to-register" class="login-footer">
1204
- Don't have an account? <a href="#" id="register-link">Register here</a>
1205
- </div>
1206
-
1207
- <div id="switch-to-login" class="login-footer" style="display: none;">
1208
- Already have an account? <a href="#" id="login-link">Sign in</a>
1209
- </div>
1210
- </div>
1211
- </div>
1212
-
1213
- <!-- Registration Form (Hidden Initially) -->
1214
- <div id="register-page" class="login-container" style="display: none;">
1215
- <div class="login-card">
1216
- <div class="login-header">
1217
- <h1 class="login-title">Create Account</h1>
1218
- <p class="login-subtitle">Join our hotel management system</p>
1219
- </div>
1220
-
1221
- <div id="register-error" style="color: var(--danger); margin-bottom: 15px; display: none;"></div>
1222
-
1223
- <form id="register-form">
1224
- <div class="form-row">
1225
  <div class="form-group">
1226
- <label for="register-firstname" class="form-label">First Name</label>
1227
- <input type="text" id="register-firstname" class="form-control" placeholder="First name" required>
1228
  </div>
1229
 
1230
  <div class="form-group">
1231
- <label for="register-lastname" class="form-label">Last Name</label>
1232
- <input type="text" id="register-lastname" class="form-control" placeholder="Last name" required>
1233
  </div>
1234
- </div>
1235
-
1236
- <div class="form-group">
1237
- <label for="register-email" class="form-label">Email Address</label>
1238
- <input type="email" id="register-email" class="form-control" placeholder="Email address" required>
1239
- </div>
1240
-
1241
- <div class="form-group">
1242
- <label for="register-password" class="form-label">Password</label>
1243
- <input type="password" id="register-password" class="form-control" placeholder="Create password" required>
1244
- </div>
1245
 
1246
- <div class="form-group">
1247
- <label for="register-confirm" class="form-label">Confirm Password</label>
1248
- <input type="password" id="register-confirm" class="form-control" placeholder="Confirm password" required>
 
1249
  </div>
1250
 
1251
- <div class="form-group">
1252
- <label for="register-role" class="form-label">I am a</label>
1253
- <select id="register-role" class="form-control" required>
1254
- <option value="">Select role</option>
1255
- <option value="guest">Guest</option>
1256
- <option value="staff">Staff Member</option>
1257
- </select>
1258
  </div>
1259
 
1260
- <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 15px;">Register</button>
1261
- </form>
1262
-
1263
- <div class="login-footer">
1264
- Already have an account? <a href="#" id="back-to-login">Sign in</a>
1265
- </div>
1266
- </div>
1267
- </div>
1268
-
1269
- <!-- Password Reset Form (Hidden Initially) -->
1270
- <div id="reset-password-page" class="login-container" style="display: none;">
1271
- <div class="login-card">
1272
- <div class="login-header">
1273
- <h1 class="login-title">Reset Password</h1>
1274
- <p class="login-subtitle">We'll send you a reset link</p>
1275
- </div>
1276
-
1277
- <div id="reset-error" style="color: var(--danger); margin-bottom: 15px; display: none;"></div>
1278
- <div id="reset-success" style="color: var(--success); margin-bottom: 15px; display: none;"></div>
1279
-
1280
- <form id="reset-password-form">
1281
- <div class="form-group">
1282
- <label for="reset-email" class="form-label">Email Address</label>
1283
- <input type="email" id="reset-email" class="form-control" placeholder="Enter your email" required>
1284
  </div>
1285
-
1286
- <button type="submit" class="btn btn-primary" style="width: 100%; margin-bottom: 15px;">Send Reset Link</button>
1287
- </form>
1288
-
1289
- <div class="login-footer">
1290
- Remember your password? <a href="#" id="back-to-login-from-reset">Sign in</a>
1291
  </div>
1292
  </div>
1293
- </div>
1294
 
1295
- <!-- Main Application (Hidden Initially) -->
1296
- <div id="app-container" style="display: none;">
1297
- <!-- Header -->
1298
- <header>
1299
- <div class="container">
1300
- <nav class="navbar flex flex-between flex-center">
1301
- <div class="logo">Skardu<span>ViewPoint</span></div>
1302
-
1303
- <div class="nav-links">
1304
- <a href="#" class="active" data-section="dashboard">Dashboard</a>
1305
- <a href="#" data-section="bookings">Bookings</a>
1306
- <a href="#" data-section="rooms">Rooms</a>
1307
- <a href="#" data-section="guests" class="staff-only admin-only">Guests</a>
1308
- <a href="#" data-section="reports" class="admin-only">Reports</a>
1309
- <a href="#" data-section="staff" class="admin-only">Staff</a>
1310
- </div>
1311
-
1312
- <div class="user-menu">
1313
- <div class="notification-bell">
1314
- <i class="fas fa-bell"></i>
1315
- <div class="badge">3</div>
1316
  </div>
1317
- <div class="avatar" id="user-avatar">AD</div>
1318
- </div>
1319
- </nav>
1320
- </div>
1321
- </header>
1322
-
1323
- <!-- User Dropdown (Hidden Initially) -->
1324
- <div id="user-dropdown" style="display: none; position: absolute; right: 20px; top: 70px; background-color: white; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 100; width: 200px; padding: 10px 0;">
1325
- <div style="padding: 10px 15px; border-bottom: 1px solid #eee; font-weight: 500;" id="dropdown-user-name">Admin User</div>
1326
- <div style="padding: 10px 15px; border-bottom: 1px solid #eee; font-size: 13px; color: var(--gray);" id="dropdown-user-email">admin@skardu.com</div>
1327
- <a href="#" style="display: block; padding: 10px 15px; color: var(--dark); text-decoration: none; transition: background-color 0.3s;" id="profile-link">My Profile</a>
1328
- <a href="#" style="display: block; padding: 10px 15px; color: var(--dark); text-decoration: none; transition: background-color 0.3s;" id="settings-link">Settings</a>
1329
- <a href="#" style="display: block; padding: 10px 15px; color: var(--danger); text-decoration: none; transition: background-color 0.3s;" id="logout-link">Logout</a>
1330
- </div>
1331
-
1332
- <!-- Notification Center (Hidden Initially) -->
1333
- <div id="notification-center" style="display: none; position: absolute; right: 20px; top: 70px; background-color: white; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 100; width: 350px; max-height: 400px; overflow-y: auto;">
1334
- <div style="padding: 15px; border-bottom: 1px solid #eee; font-weight: 500; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; background-color: white;">
1335
- <span>Notifications</span>
1336
- <span style="font-size: 12px; color: var(--gray); cursor: pointer;" id="mark-all-read">Mark all as read</span>
1337
- </div>
1338
- <div id="notification-list">
1339
- <!-- Notifications will be added here dynamically -->
1340
- </div>
1341
- </div>
1342
 
1343
- <!-- Main Content -->
1344
- <main class="main">
1345
- <div class="container">
1346
- <!-- Dashboard Section (Default View) -->
1347
- <div id="dashboard-section" class="dashboard-section">
1348
  <div class="dashboard">
 
1349
  <div class="sidebar">
1350
  <h3 class="sidebar-title" id="sidebar-title">Dashboard</h3>
1351
  <ul class="sidebar-menu" id="dashboard-menu">
@@ -1353,20 +820,22 @@
1353
  </ul>
1354
  </div>
1355
 
1356
- <div class="dashboard-content">
 
 
1357
  <div id="dashboard-overview">
1358
  <div class="dashboard-header">
1359
- <h2 class="dashboard-title" id="greeting-text">Welcome back, Admin</h2>
1360
  <button class="btn btn-secondary" id="quick-booking-btn">
1361
- <i class="fas fa-plus"></i> Quick Booking
1362
  </button>
1363
  </div>
1364
 
1365
- <!-- Stats Cards for Dashboard Overview -->
1366
  <div class="stats-cards">
1367
  <div class="stat-card">
1368
  <div class="stat-card-title">Current Occupancy</div>
1369
- <div class="stat-card-value" id="occupancy-rate">75%</div>
1370
  <div class="stat-card-change up">
1371
  <i class="fas fa-arrow-up"></i> 5% from last week
1372
  </div>
@@ -1374,97 +843,33 @@
1374
 
1375
  <div class="stat-card success">
1376
  <div class="stat-card-title">Available Rooms</div>
1377
- <div class="stat-card-value" id="available-rooms">42</div>
1378
  <div class="stat-card-change down">
1379
  <i class="fas fa-arrow-down"></i> 8 from yesterday
1380
  </div>
1381
  </div>
1382
 
1383
- <div class="stat-card warning" id="today-checkins-card">
1384
  <div class="stat-card-title">Today's Check-ins</div>
1385
- <div class="stat-card-value" id="today-checkins">12</div>
1386
  <div class="stat-card-change up">
1387
  <i class="fas fa-arrow-up"></i> 3 from estimated
1388
  </div>
1389
  </div>
1390
 
1391
- <div class="stat-card danger" id="pending-payments-card">
1392
  <div class="stat-card-title">Pending Payments</div>
1393
- <div class="stat-card-value" id="pending-payments">5</div>
1394
  <div class="stat-card-change down">
1395
  <i class="fas fa-arrow-down"></i> 2 resolved today
1396
  </div>
1397
  </div>
1398
  </div>
1399
 
1400
- <!-- Recent Bookings Table -->
1401
- <div class="dashboard-header" style="margin-top: 30px;">
1402
- <h3 class="dashboard-title">Recent Bookings</h3>
1403
- <a href="#" class="btn btn-outline" data-section="bookings">View All</a>
1404
- </div>
1405
-
1406
- <table class="data-table">
1407
- <thead>
1408
- <tr>
1409
- <th>Booking ID</th>
1410
- <th>Guest Name</th>
1411
- <th>Room</th>
1412
- <th>Dates</th>
1413
- <th>Status</th>
1414
- <th>Actions</th>
1415
- </tr>
1416
- </thead>
1417
- <tbody id="recent-bookings-table">
1418
- <!-- Recent bookings will be loaded here -->
1419
- </tbody>
1420
- </table>
1421
-
1422
- <!-- Calendar for Current Month -->
1423
- <div class="calendar">
1424
- <div class="calendar-header">
1425
- <h3 class="calendar-title" id="month-year-display">March 2023</h3>
1426
- <div>
1427
- <button class="btn btn-outline" id="prev-month">
1428
- <i class="fas fa-chevron-left"></i>
1429
- </button>
1430
- <button class="btn btn-outline" id="next-month">
1431
- <i class="fas fa-chevron-right"></i>
1432
- </button>
1433
- </div>
1434
- </div>
1435
-
1436
- <div class="calendar-grid" id="calendar-grid">
1437
- <!-- Calendar days will be generated here -->
1438
- </div>
1439
- </div>
1440
- </div>
1441
-
1442
- <!-- Bookings Section (Hidden Initially) -->
1443
- <div id="dashboard-bookings" style="display: none;">
1444
  <div class="dashboard-header">
1445
- <h2 class="dashboard-title">Manage Bookings</h2>
1446
- <button class="btn btn-primary" id="new-booking-btn">
1447
- <i class="fas fa-plus"></i> New Booking
1448
- </button>
1449
- </div>
1450
-
1451
- <div class="booking-search">
1452
- <div class="form-row">
1453
- <div class="form-group">
1454
- <label for="booking-search" class="form-label">Search Bookings</label>
1455
- <input type="text" id="booking-search" class="form-control" placeholder="Search by guest name, room, ID...">
1456
- </div>
1457
- <div class="form-group">
1458
- <label for="booking-status" class="form-label">Filter by Status</label>
1459
- <select id="booking-status" class="form-control">
1460
- <option value="">All Statuses</option>
1461
- <option value="confirmed">Confirmed</option>
1462
- <option value="pending">Pending Payment</option>
1463
- <option value="cancelled">Cancelled</option>
1464
- <option value="completed">Completed</option>
1465
- </select>
1466
- </div>
1467
- </div>
1468
  </div>
1469
 
1470
  <table class="data-table">
@@ -1475,185 +880,156 @@
1475
  <th>Room</th>
1476
  <th>Check-in</th>
1477
  <th>Check-out</th>
1478
- <th>Amount</th>
1479
  <th>Status</th>
1480
  <th>Actions</th>
1481
  </tr>
1482
  </thead>
1483
- <tbody id="all-bookings-table">
1484
- <!-- All bookings will be loaded here -->
1485
- </tbody>
1486
- </table>
1487
- </div>
1488
-
1489
- <!-- Rooms Section (Hidden Initially) -->
1490
- <div id="dashboard-rooms" style="display: none;">
1491
- <div class="dashboard-header">
1492
- <h2 class="dashboard-title">Manage Rooms</h2>
1493
- <button class="btn btn-primary" id="add-room-btn">
1494
- <i class="fas fa-plus"></i> Add Room
1495
- </button>
1496
- </div>
1497
-
1498
- <!-- Tabs for Room Types -->
1499
- <div class="tabs">
1500
- <div class="tab active" data-room-type="all">All Rooms</div>
1501
- <div class="tab" data-room-type="standard">Standard</div>
1502
- <div class="tab" data-room-type="deluxe">Deluxe</div>
1503
- <div class="tab" data-room-type="suite">Suite</div>
1504
- </div>
1505
-
1506
- <!-- Rooms Grid View -->
1507
- <div class="rooms-grid" id="rooms-grid-view" style="display: none;">
1508
- <!-- Room cards will be loaded here -->
1509
- </div>
1510
-
1511
- <!-- Rooms Table View -->
1512
- <div class="rooms-table-view" id="rooms-table-view">
1513
- <table class="data-table">
1514
- <thead>
1515
- <tr>
1516
- <th>Room #</th>
1517
- <th>Type</th>
1518
- <th>Capacity</th>
1519
- <th>Price (Night)</th>
1520
- <th>Status</th>
1521
- <th>Actions</th>
1522
- </tr>
1523
- </thead>
1524
- <tbody id="rooms-table">
1525
- <!-- Rooms will be loaded here -->
1526
- </tbody>
1527
- </table>
1528
- </div>
1529
- </div>
1530
-
1531
- <!-- Guests Section (Hidden Initially) -->
1532
- <div id="dashboard-guests" style="display: none;">
1533
- <div class="dashboard-header">
1534
- <h2 class="dashboard-title">Guest Management</h2>
1535
- <button class="btn btn-outline" id="export-guests-btn">
1536
- <i class="fas fa-download"></i> Export Data
1537
- </button>
1538
- </div>
1539
-
1540
- <div class="form-row">
1541
- <div class="form-group">
1542
- <label for="guest-search" class="form-label">Search Guests</label>
1543
- <input type="text" id="guest-search" class="form-control" placeholder="Search by name, email...">
1544
- </div>
1545
- <div class="form-group">
1546
- <label for="guest-filter" class="form-label">Filter by</label>
1547
- <select id="guest-filter" class="form-control">
1548
- <option value="">All Guests</option>
1549
- <option value="current">Current Guests</option>
1550
- <option value="loyal">Loyalty Members</option>
1551
- </select>
1552
- </div>
1553
- </div>
1554
-
1555
- <table class="data-table">
1556
- <thead>
1557
  <tr>
1558
- <th>Name</th>
1559
- <th>Email</th>
1560
- <th>Phone</th>
1561
- <th>Bookings</th>
1562
- <th>Last Stay</th>
1563
- <th>Actions</th>
 
 
 
 
 
 
 
1564
  </tr>
1565
- </thead>
1566
- <tbody id="guests-table">
1567
- <!-- Guests will be loaded here -->
1568
  </tbody>
1569
  </table>
1570
  </div>
1571
-
1572
- <!-- Reports Section (Hidden Initially) -->
1573
- <div id="dashboard-reports" style="display: none;">
1574
- <div class="dashboard-header">
1575
- <h2 class="dashboard-title">Reports & Analytics</h2>
1576
- <div>
1577
- <select id="report-period" class="form-control" style="display: inline-block; width: auto;">
1578
- <option value="week">This Week</option>
1579
- <option value="month" selected>This Month</option>
1580
- <option value="quarter">This Quarter</option>
1581
- <option value="year">This Year</option>
1582
- </select>
1583
- </div>
1584
- </div>
1585
-
1586
- <div class="stats-cards">
1587
- <div class="stat-card">
1588
- <div class="stat-card-title">Total Revenue</div>
1589
- <div class="stat-card-value" id="total-revenue">$42,850</div>
1590
- <div class="stat-card-change up">
1591
- <i class="fas fa-arrow-up"></i> 12% from last period
1592
- </div>
1593
- </div>
1594
-
1595
- <div class="stat-card success">
1596
- <div class="stat-card-title">Occupancy Rate</div>
1597
- <div class="stat-card-value" id="period-occupancy">78%</div>
1598
- <div class="stat-card-change up">
1599
- <i class="fas fa-arrow-up"></i> 4% from last period
1600
- </div>
1601
- </div>
1602
-
1603
- <div class="stat-card warning">
1604
- <div class="stat-card-title">Average Daily Rate</div>
1605
- <div class="stat-card-value" id="average-rate">$120</div>
1606
- <div class="stat-card-change down">
1607
- <i class="fas fa-arrow-down"></i> 2.5% from last period
1608
- </div>
1609
- </div>
1610
- </div>
1611
-
1612
- <div class="form-row" style="margin-top: 30px;">
1613
- <div class="form-group">
1614
- <label for="report-type" class="form-label">Report Type</label>
1615
- <select id="report-type" class="form-control">
1616
- <option value="revenue">Revenue</option>
1617
- <option value="occupancy">Occupancy</option>
1618
- <option value="guests">Guest Demographics</option>
1619
- <option value="rooms">Room Performance</option>
1620
- </select>
1621
- </div>
1622
- <div class="form-group">
1623
- <label for="export-format" class="form-label">Export As</label>
1624
- <select id="export-format" class="form-control">
1625
- <option value="">Select format</option>
1626
- <option value="pdf">PDF</option>
1627
- <option value="csv">CSV</option>
1628
- <option value="excel">Excel</option>
1629
- </select>
1630
- </div>
1631
- </div>
1632
-
1633
- <div id="report-content" style="margin-top: 30px;">
1634
- <!-- Report visualization will be displayed here -->
1635
- <div style="background-color: #f9f9f9; border-radius: 8px; padding: 30px; text-align: center; color: var(--gray);">
1636
- <i class="fas fa-chart-bar" style="font-size: 50px; margin-bottom: 15px; color: var(--primary-light);"></i>
1637
- <h3 style="margin-bottom: 10px;">Revenue Report - March 2023</h3>
1638
- <p>Select filters above to generate detailed reports</p>
1639
- </div>
1640
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1641
  </div>
1642
-
1643
- <!-- Staff Section (Hidden Initially) -->
1644
- <div id="dashboard-staff" style="display: none;">
1645
- <div class="dashboard-header">
1646
- <h2 class="dashboard-title">Staff Management</h2>
1647
- <button class="btn btn-primary" id="add-staff-btn">
1648
- <i class="fas fa-plus"></i> Add Staff
1649
- </button>
1650
- </div>
1651
-
1652
- <div class="form-row">
1653
- <div class="form-group">
1654
- <label for="staff-search" class="form-label">Search Staff</label>
1655
- <input type="text" id="staff-search" class="form-control" placeholder="Search by name, role...">
1656
- </div>
1657
- <div class="form-group">
1658
- <label for="staff-department"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1659
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Skardu ViewPoint - Hotel Management</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
 
9
  <style>
10
  :root {
11
  --primary: #2c6e49;
 
19
  --success: #38a169;
20
  --warning: #dd6b20;
21
  --danger: #e53e3e;
22
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ --radius: 8px;
24
  }
25
+
26
  * {
27
  margin: 0;
28
  padding: 0;
29
  box-sizing: border-box;
30
  }
31
+
32
  body {
33
+ font-family: 'Poppins', sans-serif;
34
  background-color: #f5f5f5;
35
  color: var(--dark);
36
  line-height: 1.6;
37
+ overflow-x: hidden;
38
  }
39
+
40
  /* Utility Classes */
41
  .container {
42
+ width: 100%;
43
  max-width: 1200px;
44
  margin: 0 auto;
45
  padding: 0 20px;
46
  }
47
+
48
  .btn {
49
  display: inline-block;
50
  padding: 10px 20px;
51
  border: none;
52
+ border-radius: var(--radius);
53
  cursor: pointer;
54
  font-size: 14px;
55
  font-weight: 500;
56
  transition: all 0.3s ease;
57
+ text-decoration: none;
58
  }
59
+
60
  .btn-primary {
61
  background-color: var(--primary);
62
  color: var(--white);
63
  }
64
+
65
  .btn-primary:hover {
66
  background-color: var(--primary-light);
67
  }
68
+
69
  .btn-secondary {
70
  background-color: var(--secondary);
71
  color: var(--white);
72
  }
73
+
74
  .btn-secondary:hover {
75
  background-color: #e6913e;
76
  }
77
+
78
  .btn-outline {
79
  background-color: transparent;
80
  border: 1px solid var(--primary);
81
  color: var(--primary);
82
  }
83
+
84
  .btn-outline:hover {
85
  background-color: var(--primary);
86
  color: var(--white);
87
  }
88
+
89
  .flex {
90
  display: flex;
91
  }
92
+
93
+ .flex-center {
94
+ align-items: center;
95
+ justify-content: center;
96
+ }
97
+
98
  .flex-between {
99
  justify-content: space-between;
100
  }
101
+
102
+ /* Layout */
103
+ #app {
104
+ display: grid;
105
+ grid-template-rows: auto 1fr auto;
106
+ min-height: 100vh;
107
  }
108
+
109
+ /* Header */
110
  header {
111
  background-color: var(--white);
112
+ box-shadow: var(--shadow);
113
  position: fixed;
114
  width: 100%;
115
  z-index: 100;
116
  }
117
+
118
  .navbar {
119
+ display: flex;
120
+ justify-content: space-between;
121
+ align-items: center;
122
  padding: 15px 0;
123
  }
124
+
125
  .logo {
126
  font-family: 'Playfair Display', serif;
127
  font-size: 24px;
128
  font-weight: 700;
129
  color: var(--primary);
130
  }
131
+
132
  .logo span {
133
  color: var(--secondary);
134
  }
135
+
136
  .nav-links {
137
  display: flex;
138
  gap: 25px;
139
  }
140
+
141
  .nav-links a {
142
  text-decoration: none;
143
  color: var(--dark);
144
  font-weight: 500;
145
  transition: color 0.3s;
146
  }
147
+
148
+ .nav-links a:hover, .nav-links a.active {
149
  color: var(--primary);
150
  }
151
+
152
  .user-menu {
153
  display: flex;
154
  align-items: center;
155
  gap: 15px;
156
  }
157
+
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  .notification-bell {
159
  position: relative;
160
  cursor: pointer;
161
  }
162
+
163
  .notification-bell .badge {
164
  position: absolute;
165
  top: -5px;
 
174
  align-items: center;
175
  justify-content: center;
176
  }
177
+
178
+ .avatar {
179
+ width: 40px;
180
+ height: 40px;
181
+ border-radius: 50%;
182
+ background-color: var(--primary-light);
183
+ color: var(--white);
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: center;
187
+ font-weight: 600;
188
+ cursor: pointer;
189
+ }
190
+
191
  /* Main Content */
192
+ main {
193
  padding-top: 80px;
194
+ padding-bottom: 50px;
195
  min-height: calc(100vh - 150px);
196
  }
197
+
198
  /* Dashboard */
199
  .dashboard {
200
  display: grid;
 
202
  gap: 30px;
203
  padding: 30px 0;
204
  }
205
+
206
  .sidebar {
207
  background-color: var(--white);
208
+ border-radius: var(--radius);
209
+ box-shadow: var(--shadow);
210
  padding: 20px;
211
  height: fit-content;
212
+ position: sticky;
213
+ top: 90px;
214
  }
215
+
216
  .sidebar-title {
217
  font-size: 18px;
218
  font-weight: 600;
 
221
  border-bottom: 1px solid #eee;
222
  color: var(--primary);
223
  }
224
+
225
  .sidebar-menu {
226
  list-style: none;
227
  }
228
+
229
  .sidebar-menu li {
230
  margin-bottom: 10px;
231
  }
232
+
233
  .sidebar-menu a {
234
+ display: flex;
235
+ align-items: center;
236
  padding: 8px 10px;
237
  color: var(--dark);
238
  text-decoration: none;
239
+ border-radius: var(--radius);
240
  transition: all 0.3s;
 
 
241
  }
242
+
243
+ .sidebar-menu a:hover,
244
+ .sidebar-menu a.active {
245
  background-color: rgba(44, 110, 73, 0.1);
246
  color: var(--primary);
247
  }
248
+
249
+ .sidebar-menu i {
250
  margin-right: 10px;
251
  width: 20px;
252
  text-align: center;
253
  }
254
+
255
  .dashboard-content {
256
  background-color: var(--white);
257
+ border-radius: var(--radius);
258
+ box-shadow: var(--shadow);
259
+ padding: 30px;
 
 
 
 
 
 
 
 
 
 
 
 
 
260
  }
261
+
262
+ /* Stats Cards */
263
  .stats-cards {
264
  display: grid;
265
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
266
  gap: 20px;
267
  margin-bottom: 30px;
268
  }
269
+
270
  .stat-card {
271
  background-color: var(--white);
272
+ border-radius: var(--radius);
273
  padding: 20px;
274
+ box-shadow: var(--shadow);
275
  border-left: 5px solid var(--primary);
276
  }
277
+
278
  .stat-card.warning {
279
  border-left-color: var(--warning);
280
  }
281
+
282
  .stat-card.success {
283
  border-left-color: var(--success);
284
  }
285
+
286
  .stat-card.danger {
287
  border-left-color: var(--danger);
288
  }
289
+
290
  .stat-card-title {
291
  font-size: 14px;
292
  color: var(--gray);
293
  margin-bottom: 10px;
294
  }
295
+
296
  .stat-card-value {
297
  font-size: 28px;
298
  font-weight: 700;
299
  margin-bottom: 5px;
300
  }
301
+
302
  .stat-card-change {
303
  font-size: 12px;
304
  display: flex;
305
  align-items: center;
306
  }
307
+
308
  .stat-card-change.up {
309
  color: var(--success);
310
  }
311
+
312
  .stat-card-change.down {
313
  color: var(--danger);
314
  }
315
+
316
+ .stat-card-change i {
317
+ margin-right: 5px;
 
 
 
 
 
318
  }
319
+
320
+ /* Tables */
321
+ .data-table {
322
+ width: 100%;
323
+ border-collapse: collapse;
324
+ margin: 20px 0;
325
+ }
326
+
327
+ .data-table th,
328
+ .data-table td {
329
+ padding: 12px 15px;
330
+ text-align: left;
331
+ border-bottom: 1px solid #eee;
332
+ }
333
+
334
+ .data-table th {
335
+ background-color: #f9f9f9;
336
  font-weight: 600;
 
337
  color: var(--primary);
338
  }
339
+
340
+ .data-table tr:hover {
341
+ background-color: #f5f5f5;
342
+ }
343
+
344
+ /* Status Badges */
345
+ .status {
346
+ display: inline-block;
347
+ padding: 5px 10px;
348
+ border-radius: 20px;
349
+ font-size: 12px;
350
+ font-weight: 500;
351
+ }
352
+
353
+ .status.available {
354
+ background-color: rgba(56, 161, 105, 0.1);
355
+ color: var(--success);
356
+ }
357
+
358
+ .status.booked {
359
+ background-color: rgba(229, 62, 62, 0.1);
360
+ color: var(--danger);
361
+ }
362
+
363
+ .status.maintenance {
364
+ background-color: rgba(221, 107, 32, 0.1);
365
+ color: var(--warning);
366
+ }
367
+
368
+ /* Buttons in Tables */
369
+ .table-actions {
370
+ display: flex;
371
+ gap: 10px;
372
+ }
373
+
374
+ .table-actions .btn {
375
+ padding: 5px 10px;
376
+ font-size: 12px;
377
+ }
378
+
379
+ /* Forms */
380
  .form-group {
381
  margin-bottom: 20px;
382
  }
383
+
384
  .form-label {
385
  display: block;
386
  margin-bottom: 8px;
387
  font-weight: 500;
388
  }
389
+
390
  .form-control {
391
  width: 100%;
392
  padding: 10px 15px;
393
  border: 1px solid #ddd;
394
+ border-radius: var(--radius);
395
  font-size: 14px;
396
  transition: border-color 0.3s;
397
  }
398
+
399
  .form-control:focus {
400
  border-color: var(--primary);
401
  outline: none;
402
  }
403
+
404
+ /* Forms in rows */
405
  .form-row {
406
  display: grid;
407
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
408
  gap: 20px;
409
  }
410
+
411
+ /* Calendar */
412
+ .calendar {
 
 
 
 
 
 
413
  background-color: var(--white);
414
+ border-radius: var(--radius);
415
+ box-shadow: var(--shadow);
416
+ padding: 25px;
417
+ margin-bottom: 30px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
418
  }
419
+
420
+ .calendar-header {
421
+ display: flex;
422
+ justify-content: space-between;
423
+ align-items: center;
424
+ margin-bottom: 20px;
425
  }
426
+
427
+ .calendar-title {
428
  font-size: 18px;
429
  font-weight: 600;
 
430
  color: var(--primary);
431
  }
432
+
433
+ .calendar-grid {
434
+ display: grid;
435
+ grid-template-columns: repeat(7, 1fr);
436
+ gap: 5px;
 
437
  }
438
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
439
  .calendar-day-header {
440
  text-align: center;
441
+ font-weight: 600;
442
  padding: 10px;
443
  background-color: #f9f9f9;
444
  color: var(--primary);
445
  }
446
+
447
  .calendar-day {
448
  border: 1px solid #eee;
449
  padding: 10px;
450
  min-height: 80px;
451
+ font-size: 14px;
452
  }
453
+
454
  .day-number {
455
  font-weight: 600;
456
  margin-bottom: 5px;
457
  }
458
+
459
  .calendar-event {
460
  background-color: var(--primary-light);
461
  color: white;
462
  font-size: 12px;
463
+ padding: 3px 5px;
464
  border-radius: 3px;
465
+ margin-bottom: 3px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
466
  cursor: pointer;
 
 
467
  }
468
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
469
  /* Login Page */
470
+ .auth-container {
471
  display: flex;
472
  justify-content: center;
473
  align-items: center;
474
  min-height: 100vh;
475
+ background: linear-gradient(135deg, rgba(44,110,73,0.9), rgba(76,149,108,0.9));
 
476
  }
477
+
478
+ .auth-card {
479
  background-color: var(--white);
480
+ border-radius: var(--radius);
481
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
482
  width: 100%;
483
  max-width: 400px;
484
  padding: 30px;
485
+ animation: fadeIn 0.5s ease;
486
  }
487
+
488
+ .auth-header {
489
  text-align: center;
490
  margin-bottom: 30px;
491
  }
492
+
493
+ .auth-title {
494
  font-size: 24px;
495
  font-weight: 700;
496
  color: var(--primary);
497
  margin-bottom: 5px;
498
  }
499
+
500
+ .auth-subtitle {
501
  color: var(--gray);
502
  font-size: 14px;
503
  }
504
+
505
  .social-login {
506
  display: flex;
507
  justify-content: center;
508
  gap: 15px;
509
  margin-bottom: 20px;
510
  }
511
+
512
  .social-btn {
513
  width: 40px;
514
  height: 40px;
 
518
  justify-content: center;
519
  color: white;
520
  cursor: pointer;
521
+ transition: transform 0.3s;
522
  }
523
+
524
+ .social-btn:hover {
525
+ transform: translateY(-2px);
526
+ }
527
+
528
  .social-btn.google {
529
  background-color: #DB4437;
530
  }
531
+
532
  .social-btn.facebook {
533
  background-color: #4267B2;
534
  }
535
+
536
  .divider {
537
  display: flex;
538
  align-items: center;
539
  margin: 20px 0;
540
  }
541
+
542
  .divider-line {
543
  flex-grow: 1;
544
  height: 1px;
545
  background-color: #eee;
546
  }
547
+
548
  .divider-text {
549
  padding: 0 10px;
550
  color: var(--gray);
551
  font-size: 14px;
552
  }
553
+
554
+ /* Error Messages */
555
+ .error-message {
556
+ color: var(--danger);
557
+ font-size: 13px;
558
+ margin-top: 5px;
559
+ display: none;
560
+ }
561
+
562
  .forgot-password {
563
  text-align: right;
564
+ margin-bottom: 15px;
565
  }
566
+
567
  .forgot-password a {
568
  color: var(--secondary);
569
  font-size: 13px;
570
  text-decoration: none;
571
  }
572
+
573
+ .auth-footer {
574
  text-align: center;
575
  margin-top: 20px;
576
  font-size: 14px;
577
  color: var(--gray);
578
  }
579
+
580
+ .auth-footer a {
581
  color: var(--primary);
582
  text-decoration: none;
583
  font-weight: 500;
584
  }
585
+
586
  /* Modal */
587
  .modal {
588
  position: fixed;
 
599
  visibility: hidden;
600
  transition: all 0.3s;
601
  }
602
+
603
  .modal.active {
604
  opacity: 1;
605
  visibility: visible;
606
  }
607
+
608
  .modal-content {
609
+ background-color: var(--white);
610
+ border-radius: var(--radius);
611
  width: 90%;
612
+ max-width: 600px;
613
  max-height: 90vh;
614
  overflow-y: auto;
615
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
616
  transform: translateY(20px);
617
  transition: transform 0.3s;
618
  }
619
+
620
  .modal.active .modal-content {
621
+ transform: translateY(0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
622
  }
623
+
624
+ .modal-header {
625
+ display: flex;
626
+ justify-content: space-between;
627
+ align-items: center;
628
  padding: 20px;
629
+ border-bottom: 1px solid #eee;
630
  }
631
+
632
+ .modal-title {
633
+ font-size: 18px;
634
  font-weight: 600;
 
635
  color: var(--primary);
636
  }
637
+
638
+ .modal-close {
639
+ background: none;
640
+ border: none;
641
+ font-size: 20px;
642
+ cursor: pointer;
643
+ color: var(--gray);
644
  }
645
+
646
+ .modal-body {
647
+ padding: 20px;
648
+ }
649
+
650
+ .modal-footer {
651
+ padding: 20px;
652
+ border-top: 1px solid #eee;
653
  display: flex;
654
+ justify-content: flex-end;
655
+ gap: 10px;
656
  }
657
+
658
+ /* Loading Spinner */
659
+ .loading-spinner {
660
+ width: 50px;
661
+ height: 50px;
662
+ border: 5px solid #f3f3f3;
663
+ border-top: 5px solid var(--primary);
664
+ border-radius: 50%;
665
+ animation: spin 1s linear infinite;
666
+ margin: 30px auto;
667
  }
668
+
669
+ /* Animations */
670
+ @keyframes fadeIn {
671
+ from { opacity: 0; }
672
+ to { opacity: 1; }
673
+ }
674
+
675
+ @keyframes spin {
676
+ 0% { transform: rotate(0deg); }
677
+ 100% { transform: rotate(360deg); }
678
+ }
679
+
680
+ /* Responsive Design */
681
  @media (max-width: 992px) {
682
  .dashboard {
683
  grid-template-columns: 1fr;
684
  }
685
+
686
+ .sidebar {
687
+ position: static;
688
+ }
689
  }
690
+
691
  @media (max-width: 768px) {
692
  .navbar {
693
  flex-direction: column;
694
  gap: 15px;
695
  }
696
+
697
  .nav-links {
698
  justify-content: center;
699
  flex-wrap: wrap;
700
  }
701
+
 
 
 
 
702
  .stats-cards {
703
  grid-template-columns: 1fr 1fr;
704
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
705
  }
706
+
707
  @media (max-width: 576px) {
708
  .stats-cards {
709
  grid-template-columns: 1fr;
710
  }
711
+
712
+ .form-row {
 
 
 
 
 
 
 
 
 
713
  grid-template-columns: 1fr;
714
  }
715
+
716
+ .data-table {
717
+ display: block;
718
+ overflow-x: auto;
719
+ }
720
+
721
  .modal-content {
722
  width: 95%;
723
  }
724
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
725
  </style>
726
  </head>
727
  <body>
728
  <!-- Loading Screen -->
729
+ <div id="loading" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 9999;">
730
+ <div class="loading-spinner"></div>
731
  </div>
732
 
733
+ <!-- Application Container -->
734
+ <div id="app">
735
+ <!-- Login Page (Initial View) -->
736
+ <div id="login-page" class="auth-container">
737
+ <div class="auth-card">
738
+ <div class="auth-header">
739
+ <h1 class="auth-title">Skardu ViewPoint</h1>
740
+ <p class="auth-subtitle">Hotel Management System</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
741
  </div>
742
 
743
+ <div id="login-error" class="error-message"></div>
 
 
744
 
745
+ <form id="login-form">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
746
  <div class="form-group">
747
+ <label for="login-email" class="form-label">Email Address</label>
748
+ <input type="email" id="login-email" class="form-control" placeholder="Enter your email" required>
749
  </div>
750
 
751
  <div class="form-group">
752
+ <label for="login-password" class="form-label">Password</label>
753
+ <input type="password" id="login-password" class="form-control" placeholder="Enter your password" required>
754
  </div>
755
+
756
+ <div class="forgot-password">
757
+ <a href="#" id="forgot-password-link">Forgot password?</a>
758
+ </div>
759
+
760
+ <button type="submit" class="btn btn-primary" style="width: 100%;">Login</button>
761
+ </form>
 
 
 
 
762
 
763
+ <div class="divider">
764
+ <div class="divider-line"></div>
765
+ <div class="divider-text">OR</div>
766
+ <div class="divider-line"></div>
767
  </div>
768
 
769
+ <div class="social-login">
770
+ <div class="social-btn google">
771
+ <i class="fab fa-google"></i>
772
+ </div>
773
+ <div class="social-btn facebook">
774
+ <i class="fab fa-facebook-f"></i>
775
+ </div>
776
  </div>
777
 
778
+ <div class="auth-footer">
779
+ Don't have an account? <a href="#" id="register-link">Sign up</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
780
  </div>
 
 
 
 
 
 
781
  </div>
782
  </div>
 
783
 
784
+ <!-- Main Application (Hidden Initially) -->
785
+ <div id="app-container" style="display: none;">
786
+ <!-- Header -->
787
+ <header>
788
+ <div class="container">
789
+ <nav class="navbar">
790
+ <div class="logo">Skardu<span>ViewPoint</span></div>
791
+
792
+ <div class="nav-links">
793
+ <a href="#" class="active" data-section="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
794
+ <a href="#" data-section="bookings"><i class="fas fa-calendar-check"></i> Bookings</a>
795
+ <a href="#" data-section="rooms"><i class="fas fa-bed"></i> Rooms</a>
796
+ <a href="#" data-section="guests" class="staff-only"><i class="fas fa-users"></i> Guests</a>
797
+ <a href="#" data-section="reports" class="admin-only"><i class="fas fa-chart-line"></i> Reports</a>
 
 
 
 
 
 
 
798
  </div>
799
+
800
+ <div class="user-menu">
801
+ <div class="notification-bell">
802
+ <i class="fas fa-bell"></i>
803
+ <div class="badge">3</div>
804
+ </div>
805
+ <div class="avatar" id="user-avatar">AD</div>
806
+ </div>
807
+ </nav>
808
+ </div>
809
+ </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
810
 
811
+ <!-- Main Content -->
812
+ <main>
813
+ <div class="container">
 
 
814
  <div class="dashboard">
815
+ <!-- Sidebar -->
816
  <div class="sidebar">
817
  <h3 class="sidebar-title" id="sidebar-title">Dashboard</h3>
818
  <ul class="sidebar-menu" id="dashboard-menu">
 
820
  </ul>
821
  </div>
822
 
823
+ <!-- Dashboard Content -->
824
+ <div class="dashboard-content" id="dashboard-content">
825
+ <!-- Dashboard Overview -->
826
  <div id="dashboard-overview">
827
  <div class="dashboard-header">
828
+ <h2 id="greeting-text">Welcome back, Admin</h2>
829
  <button class="btn btn-secondary" id="quick-booking-btn">
830
+ <i class="fas fa-plus"></i> New Booking
831
  </button>
832
  </div>
833
 
834
+ <!-- Stats Cards -->
835
  <div class="stats-cards">
836
  <div class="stat-card">
837
  <div class="stat-card-title">Current Occupancy</div>
838
+ <div class="stat-card-value">78%</div>
839
  <div class="stat-card-change up">
840
  <i class="fas fa-arrow-up"></i> 5% from last week
841
  </div>
 
843
 
844
  <div class="stat-card success">
845
  <div class="stat-card-title">Available Rooms</div>
846
+ <div class="stat-card-value">24</div>
847
  <div class="stat-card-change down">
848
  <i class="fas fa-arrow-down"></i> 8 from yesterday
849
  </div>
850
  </div>
851
 
852
+ <div class="stat-card warning">
853
  <div class="stat-card-title">Today's Check-ins</div>
854
+ <div class="stat-card-value">12</div>
855
  <div class="stat-card-change up">
856
  <i class="fas fa-arrow-up"></i> 3 from estimated
857
  </div>
858
  </div>
859
 
860
+ <div class="stat-card danger">
861
  <div class="stat-card-title">Pending Payments</div>
862
+ <div class="stat-card-value">5</div>
863
  <div class="stat-card-change down">
864
  <i class="fas fa-arrow-down"></i> 2 resolved today
865
  </div>
866
  </div>
867
  </div>
868
 
869
+ <!-- Recent Bookings -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
870
  <div class="dashboard-header">
871
+ <h3>Recent Bookings</h3>
872
+ <a href="#" class="btn btn-outline" data-section="bookings">View All</a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
873
  </div>
874
 
875
  <table class="data-table">
 
880
  <th>Room</th>
881
  <th>Check-in</th>
882
  <th>Check-out</th>
 
883
  <th>Status</th>
884
  <th>Actions</th>
885
  </tr>
886
  </thead>
887
+ <tbody>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
888
  <tr>
889
+ <td>#BK-2023-001</td>
890
+ <td>John Smith</td>
891
+ <td>Deluxe Room (202)</td>
892
+ <td>15 Jul 2023</td>
893
+ <td>18 Jul 2023</td>
894
+ <td><span class="status available">Confirmed</span></td>
895
+ <td>
896
+ <div class="table-actions">
897
+ <button class="btn btn-outline btn-sm" title="View">
898
+ <i class="fas fa-eye"></i>
899
+ </button>
900
+ </div>
901
+ </td>
902
  </tr>
903
+ <!-- More rows would be added dynamically -->
 
 
904
  </tbody>
905
  </table>
906
  </div>
907
+ </div>
908
+ </div>
909
+ </div>
910
+ </main>
911
+ </div>
912
+ </div>
913
+
914
+ <!-- JavaScript -->
915
+ <script>
916
+ // Simulate loading
917
+ setTimeout(() => {
918
+ document.getElementById('loading').style.display = 'none';
919
+ }, 1000);
920
+
921
+ // Form handling
922
+ const loginForm = document.getElementById('login-form');
923
+ const loginError = document.getElementById('login-error');
924
+
925
+ if (loginForm) {
926
+ loginForm.addEventListener('submit', function(e) {
927
+ e.preventDefault();
928
+
929
+ const email = document.getElementById('login-email').value;
930
+ const password = document.getElementById('login-password').value;
931
+
932
+ // Very basic validation
933
+ if (!email || !password) {
934
+ loginError.textContent = 'Please fill in all fields';
935
+ loginError.style.display = 'block';
936
+ return;
937
+ }
938
+
939
+ // Simulate successful login
940
+ loginError.style.display = 'none';
941
+
942
+ // Hide login page, show app
943
+ document.getElementById('login-page').style.display = 'none';
944
+ document.getElementById('app-container').style.display = 'block';
945
+
946
+ // Update greeting text based on time of day
947
+ const hour = new Date().getHours();
948
+ const greeting = hour < 12 ? 'Good morning' :
949
+ hour < 18 ? 'Good afternoon' : 'Good evening';
950
+
951
+ document.getElementById('greeting-text').textContent = `${greeting}, Admin`;
952
+
953
+ // Simulate loading dashboard content
954
+ const loadingSpinner = document.createElement('div');
955
+ loadingSpinner.className = 'loading-spinner';
956
+ document.getElementById('dashboard-content').appendChild(loadingSpinner);
957
+
958
+ setTimeout(() => {
959
+ document.getElementById('dashboard-content').innerHTML = document.getElementById('dashboard-overview').outerHTML;
960
+ }, 1000);
961
+ });
962
+ }
963
+
964
+ // Navigation switching
965
+ const navLinks = document.querySelectorAll('.nav-links a');
966
+ if (navLinks) {
967
+ navLinks.forEach(link => {
968
+ link.addEventListener('click', function(e) {
969
+ e.preventDefault();
970
+
971
+ // Remove active class from all links
972
+ navLinks.forEach(lnk => lnk.classList.remove('active'));
973
+
974
+ // Add active class to clicked link
975
+ this.classList.add('active');
976
+
977
+ // Get the section to show
978
+ const section = this.getAttribute('data-section');
979
+
980
+ // Simulate loading section
981
+ const dashboardContent = document.getElementById('dashboard-content');
982
+ const loadingSpinner = document.createElement('div');
983
+ loadingSpinner.className = 'loading-spinner';
984
+ dashboardContent.innerHTML = '';
985
+ dashboardContent.appendChild(loadingSpinner);
986
+
987
+ setTimeout(() => {
988
+ // This would be replaced with actual content loading
989
+ dashboardContent.innerHTML = `
990
+ <div class="dashboard-header">
991
+ <h2>${this.textContent}</h2>
992
+ <button class="btn btn-primary">
993
+ <i class="fas fa-plus"></i> Add New
994
+ </button>
995
  </div>
996
+ <div style="background-color: #f9f9f9; border-radius: 8px; padding: 40px; text-align: center;">
997
+ <i class="fas fa-wrench" style="font-size: 50px; color: var(--primary-light); margin-bottom: 20px;"></i>
998
+ <h3>${this.textContent} Section</h3>
999
+ <p>This section will contain all ${this.textContent.toLowerCase()} management functionality</p>
1000
+ </div>
1001
+ `;
1002
+ }, 800);
1003
+ });
1004
+ });
1005
+ }
1006
+
1007
+ // Quick booking button
1008
+ const quickBookingBtn = document.getElementById('quick-booking-btn');
1009
+ if (quickBookingBtn) {
1010
+ quickBookingBtn.addEventListener('click', function(e) {
1011
+ e.preventDefault();
1012
+ alert('Quick booking modal would open here.');
1013
+ });
1014
+ }
1015
+
1016
+ // Register link
1017
+ const registerLink = document.getElementById('register-link');
1018
+ if (registerLink) {
1019
+ registerLink.addEventListener('click', function(e) {
1020
+ e.preventDefault();
1021
+ alert('Registration form would appear here.');
1022
+ });
1023
+ }
1024
+
1025
+ // Forgot password link
1026
+ const forgotPasswordLink = document.getElementById('forgot-password-link');
1027
+ if (forgotPasswordLink) {
1028
+ forgotPasswordLink.addEventListener('click', function(e) {
1029
+ e.preventDefault();
1030
+ alert('Password reset form would appear here.');
1031
+ });
1032
+ }
1033
+ </script>
1034
+ </body>
1035
  </html>