Hugging Face's logo

Spaces:
deepak191z
/
hms
Running

App Files Community
deepak191z commited on
Commit
adf2bbe
·
verified ·
1 Parent(s): b8229e3

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +59 -1014
index.html CHANGED
@@ -3,1033 +3,78 @@
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;
12
- --primary-light: #4c956c;
13
- --secondary: #d68c45;
14
- --accent: #fefee3;
15
- --light: #f8edeb;
16
- --gray: #94a3b8;
17
- --dark: #1a1a1a;
18
- --white: #ffffff;
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;
166
- right: -5px;
167
- background-color: var(--danger);
168
- color: white;
169
- border-radius: 50%;
170
- width: 18px;
171
- height: 18px;
172
- font-size: 10px;
173
- display: flex;
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;
201
- grid-template-columns: 250px 1fr;
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;
219
- margin-bottom: 20px;
220
- padding-bottom: 10px;
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;
515
- border-radius: 50%;
516
- display: flex;
517
- align-items: center;
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;
589
- top: 0;
590
- left: 0;
591
- right: 0;
592
- bottom: 0;
593
- background-color: rgba(0, 0, 0, 0.5);
594
- display: flex;
595
- justify-content: center;
596
- align-items: center;
597
- z-index: 200;
598
- opacity: 0;
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">
819
- <!-- Menu items will be loaded dynamically based on user role -->
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>
842
- </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">
876
- <thead>
877
- <tr>
878
- <th>Booking ID</th>
879
- <th>Guest</th>
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>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Google Apps Script Generator</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
 
8
  <style>
9
+ .code-block {
10
+ font-family: 'Courier New', Courier, monospace;
11
+ white-space: pre-wrap;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  background-color: #f5f5f5;
13
+ padding: 1rem;
14
+ border-radius: 0.375rem;
15
+ height: calc(100vh - 6rem);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
16
  overflow-y: auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  }
18
+ .tab-content { display: none; }
19
+ .tab-content.active { display: block; }
20
+ .curl-button.active { background-color: #3b82f6; color: white; }
21
  </style>
22
  </head>
23
+ <body class="bg-gray-100 flex">
24
+ <!-- Sidebar -->
25
+ <div class="w-1/4 bg-white p-6 shadow-lg h-screen overflow-y-auto">
26
+ <h1 class="text-2xl font-bold mb-6">GS Generator</h1>
27
+ <div id="columnInputs" class="space-y-4">
28
+ <div>
29
+ <label class="block text-sm font-medium text-gray-700 mb-1">Columns</label>
30
+ <div class="flex space-x-2">
31
+ <input type="text" class="column-input flex-1 px-3 py-2 border rounded-md" placeholder="Column name" value="word">
32
+ <button onclick="removeColumn(this)" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">X</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  </div>
34
  </div>
35
+ <div>
36
+ <div class="flex space-x-2">
37
+ <input type="text" class="column-input flex-1 px-3 py-2 border rounded-md" placeholder="Column name" value="meaning">
38
+ <button onclick="removeColumn(this)" class="bg-red-500 text-white px-2 py-1 rounded hover:bg-red-600">X</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  </div>
40
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </div>
42
+ <button onclick="addColumn()" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Add Column</button>
43
  </div>
44
 
45
+ <!-- Main Content with Tabs -->
46
+ <div class="w-3/4 p-6">
47
+ <div class="flex border-b mb-4">
48
+ <button class="tab-button px-4 py-2 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-500" onclick="showTab('code')">Code Preview</button>
49
+ <button class="tab-button px-4 py-2 font-semibold text-gray-700 border-b-2 border-transparent hover:border-blue-500" onclick="showTab('howto')">How to Use</button>
50
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
51
 
52
+ <!-- Code Preview Tab -->
53
+ <div id="code" class="tab-content active">
54
+ <div class="flex justify-between items-center mb-2">
55
+ <h2 class="text-xl font-semibold">Generated Code</h2>
56
+ <button onclick="copyCode()" class="bg-gray-200 p-2 rounded hover:bg-gray-300" title="Copy to clipboard">
57
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2M8 5a2 2 0 002 2h4a2 2 0 002-2M8 5a2 2 0 012-2h4a2 2 0 012 2"></path></svg>
58
+ </button>
59
+ </div>
60
+ <div id="codePreview" class="code-block"></div>
61
+ </div>
62
 
63
+ <!-- How to Use Tab -->
64
+ <div id="howto" class="tab-content">
65
+ <h2 class="text-xl font-semibold mb-4">How to Use (cURL Examples)</h2>
66
+ <div class="flex space-x-2 mb-4 overflow-x-auto">
67
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('appendSingle')">Append Single</button>
68
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('appendMultiple')">Append Multiple</button>
69
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('fetchAll')">Fetch All</button>
70
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('fetchRange')">Fetch Range</button>
71
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('search')">Search</button>
72
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('update')">Update</button>
73
+ <button class="curl-button px-3 py-1 bg-gray-200 rounded hover:bg-blue-500 hover:text-white" onclick="showCurlExample('delete')">Delete</button>
74
+ </div>
75
+ <div id="curlExamples" class="code-block"></div>
76
+ </div>
77
+ </div>
78
+ <script src="script.js"></script>
79
  </body>
80
  </html>