mbkbucket 1.1.2 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1056 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <meta name="description"
8
+ content="Log in to portal.mbktech.org to access your resources and manage projects securely.">
9
+ <meta name="keywords" content="MBK Tech, Web-Portal, Web, Portal, Admin-Panel, Admin, login">
10
+ <meta property="og:title" content="Version and Configuration Information | MBK Tech" />
11
+ <meta property="og:image" content="https://mbktech.org/Assets/Images/Icon/logo.png" />
12
+ <meta property="og:url" content="/mbkbucket/info">
13
+ <title>Version and Configuration Information | MBK Tech Portal</title>
14
+ <link rel="icon" type="image/svg+xml" href="/icon.svg">
15
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
16
+ <style>
17
+ :root {
18
+ --primary: #2196f3;
19
+ --primary-dark: #1769aa;
20
+ --secondary: #43e97b;
21
+ --accent: #00b894;
22
+ --dark: #101c1c;
23
+ --darker: #0a1414;
24
+ --light: #eaf6fb;
25
+ --text: #e0f7fa;
26
+ --text-light: #b2dfdb;
27
+ --text-dark: #1a2a2a;
28
+ --success: #43e97b;
29
+ --warning: #ffd166;
30
+ --danger: #ff7675;
31
+ --border-radius: 8px;
32
+ --box-shadow: 0 4px 10px rgba(33, 150, 243, 0.15);
33
+ --transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
34
+ }
35
+
36
+ * {
37
+ margin: 0;
38
+ padding: 0;
39
+ box-sizing: border-box;
40
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
41
+ }
42
+
43
+ body {
44
+ background-color: var(--dark);
45
+ color: var(--text);
46
+ min-height: 100vh;
47
+ display: flex;
48
+ flex-direction: column;
49
+ overflow-x: hidden;
50
+ }
51
+
52
+ header {
53
+ background-color: var(--darker);
54
+ box-shadow: var(--box-shadow);
55
+ position: fixed;
56
+ width: 100%;
57
+ z-index: 1000;
58
+ transition: var(--transition);
59
+ border-bottom: .125rem solid rgba(255, 255, 255, .1);
60
+ }
61
+
62
+ .header-container {
63
+ display: flex;
64
+ justify-content: space-between;
65
+ align-items: center;
66
+ padding: 1rem 1.5rem;
67
+ max-width: 1400px;
68
+ margin: 0 auto;
69
+ }
70
+
71
+ .logo {
72
+ display: flex;
73
+ align-items: center;
74
+ gap: .75rem;
75
+ text-decoration: none;
76
+ }
77
+
78
+ .logo svg,
79
+ .logo-image {
80
+ height: 40px;
81
+ width: auto;
82
+ }
83
+
84
+ .logo-text {
85
+ font-size: 1.5rem;
86
+ font-weight: 700;
87
+ color: var(--light);
88
+ }
89
+
90
+ .logo-text span {
91
+ color: var(--accent);
92
+ }
93
+
94
+ .logo-comp {
95
+ font-size: 1rem;
96
+ color: var(--text-light);
97
+ }
98
+
99
+ .login-container {
100
+ flex: 1;
101
+ display: flex;
102
+ align-items: center;
103
+ justify-content: center;
104
+ padding: 120px 1.7rem 20px;
105
+ position: relative;
106
+ overflow: hidden;
107
+ background: linear-gradient(135deg, var(--darker), var(--primary-dark));
108
+ }
109
+
110
+ .login-container::before {
111
+ content: '';
112
+ position: absolute;
113
+ top: 0;
114
+ left: 0;
115
+ width: 100%;
116
+ height: 100%;
117
+ background: url(/mbkauthe/bg.webp) center/cover no-repeat;
118
+ opacity: .1;
119
+ z-index: 0;
120
+ }
121
+
122
+ .login-box {
123
+ background: rgba(10, 20, 20, 0.95);
124
+ backdrop-filter: blur(10px);
125
+ border-radius: var(--border-radius);
126
+ padding: 2.5rem;
127
+ width: 100%;
128
+ max-width: 450px;
129
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
130
+ border: 1px solid rgba(0, 184, 148, 0.2);
131
+ position: relative;
132
+ z-index: 2;
133
+ transition: var(--transition);
134
+ }
135
+
136
+ .login-box:hover {
137
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
138
+ border-color: rgba(0, 184, 148, 0.3);
139
+ }
140
+
141
+ /* Two-column layout structure (desktop only) */
142
+ .login-box-inner {
143
+ display: flex;
144
+ flex-direction: column;
145
+ gap: 0;
146
+ }
147
+
148
+ .login-sidebar {
149
+ display: none;
150
+ }
151
+
152
+ .login-main {
153
+ width: 100%;
154
+ }
155
+
156
+ .mobile-actions {
157
+ display: block;
158
+ }
159
+
160
+ .login-title {
161
+ text-align: center;
162
+ margin-bottom: 2rem;
163
+ font-size: 2rem;
164
+ position: relative;
165
+ color: var(--light);
166
+ }
167
+
168
+ .login-title::after {
169
+ content: '';
170
+ position: absolute;
171
+ bottom: -10px;
172
+ left: 50%;
173
+ transform: translateX(-50%);
174
+ width: 80px;
175
+ height: 4px;
176
+ background-color: var(--accent);
177
+ border-radius: 2px;
178
+ }
179
+
180
+ .login-subtitle {
181
+ text-align: center;
182
+ color: var(--text-light);
183
+ font-size: 0.95rem;
184
+ margin-top: -1rem;
185
+ margin-bottom: 2rem;
186
+ line-height: 1.5;
187
+ }
188
+
189
+ .form-group {
190
+ position: relative;
191
+ margin-bottom: 1.5rem;
192
+ }
193
+
194
+ .form-input {
195
+ width: 100%;
196
+ padding: 14px 20px;
197
+ background: rgba(0, 0, 0, .3);
198
+ border: 2px solid rgba(0, 184, 148, 0.3);
199
+ border-radius: var(--border-radius);
200
+ color: var(--text);
201
+ font-size: 1rem;
202
+ transition: var(--transition);
203
+ }
204
+
205
+ .form-input:focus {
206
+ outline: none;
207
+ background: rgba(0, 0, 0, .4);
208
+ border-color: var(--accent);
209
+ box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.2);
210
+ }
211
+
212
+ .form-input[type="text"][name="token"] {
213
+ font-size: 1.5rem;
214
+ letter-spacing: 0.5rem;
215
+ text-align: center;
216
+ font-weight: 600;
217
+ font-family: 'Courier New', monospace;
218
+ }
219
+
220
+ .form-label {
221
+ position: absolute;
222
+ top: 15px;
223
+ left: 20px;
224
+ color: var(--text-light);
225
+ transition: var(--transition);
226
+ pointer-events: none;
227
+ }
228
+
229
+ .form-input:focus+.form-label,
230
+ .form-input:not(:placeholder-shown)+.form-label {
231
+ top: -10px;
232
+ left: 15px;
233
+ font-size: 0.8rem;
234
+ background: rgba(10, 20, 20, 0.95);
235
+ padding: 0 5px;
236
+ color: var(--accent);
237
+ }
238
+
239
+ .input-icon {
240
+ position: absolute;
241
+ right: 20px;
242
+ top: 50%;
243
+ transform: translateY(-50%);
244
+ color: var(--text-light);
245
+ cursor: pointer;
246
+ transition: var(--transition);
247
+ }
248
+
249
+ .input-icon:hover {
250
+ color: var(--accent);
251
+ }
252
+
253
+ .btn-login {
254
+ width: 100%;
255
+ padding: 8px;
256
+ border-radius: var(--border-radius);
257
+ background: var(--accent);
258
+ color: var(--dark);
259
+ font-weight: 700;
260
+ font-size: 1.2rem;
261
+ border: .1rem solid var(--accent);
262
+ cursor: pointer;
263
+ transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
264
+ box-shadow: var(--box-shadow);
265
+ }
266
+
267
+ .btn-login:hover {
268
+ background: var(--dark);
269
+ color: var(--accent);
270
+ box-shadow: 0 6px 20px rgba(0, 184, 148, 0.3);
271
+ }
272
+
273
+ .btn-login:disabled {
274
+ background: var(--dark);
275
+ color: var(--accent);
276
+ cursor: not-allowed;
277
+ transform: none;
278
+ box-shadow: none;
279
+ }
280
+
281
+ .social-login {
282
+ margin-top: 1.5rem;
283
+ text-align: center;
284
+ }
285
+
286
+ .divider {
287
+ display: flex;
288
+ align-items: center;
289
+ justify-content: center;
290
+ margin: 0.5rem 0;
291
+ }
292
+
293
+ .divider::before,
294
+ .divider::after {
295
+ content: '';
296
+ flex: 1;
297
+ height: 1px;
298
+ background: var(--text-light);
299
+ opacity: 0.3;
300
+ }
301
+
302
+ .divider span {
303
+ background: rgba(10, 20, 20, 0.95);
304
+ padding: 0 15px;
305
+ color: var(--text-light);
306
+ font-size: 0.9rem;
307
+ }
308
+
309
+ #googleLoginBtn i {
310
+ font-size: 1.1rem;
311
+ color: #4285f4;
312
+ }
313
+
314
+ /* Social icons row for mobile */
315
+ .social-icons-row {
316
+ display: flex;
317
+ gap: 1rem;
318
+ justify-content: center;
319
+ align-items: center;
320
+ }
321
+
322
+ .mobile-google-btn i {
323
+ color: #4285f4;
324
+ }
325
+
326
+ .login-links {
327
+ display: flex;
328
+ justify-content: space-between;
329
+ margin-top: 1.5rem;
330
+ font-size: 0.9rem;
331
+ }
332
+
333
+ .login-link {
334
+ color: var(--text-light);
335
+ transition: var(--transition);
336
+ text-decoration: none;
337
+ }
338
+
339
+ .login-link:hover {
340
+ color: var(--accent);
341
+ }
342
+
343
+ .terms-info {
344
+ margin-top: 1rem;
345
+ font-size: 0.8rem;
346
+ color: var(--text-light);
347
+ text-align: center;
348
+ }
349
+
350
+ .terms-link {
351
+ color: var(--accent);
352
+ font-weight: 500;
353
+ text-decoration: none;
354
+ }
355
+
356
+ .token-container {
357
+ animation: fadeInUp 0.4s ease-out;
358
+ }
359
+
360
+ .token-container.disable {
361
+ display: none;
362
+ }
363
+
364
+ .token-container.enable {
365
+ display: block;
366
+ }
367
+
368
+ .ai-element {
369
+ position: absolute;
370
+ opacity: 0.1;
371
+ z-index: 1;
372
+ animation: float 6s ease-in-out infinite;
373
+ }
374
+
375
+ .ai-element:nth-child(1) {
376
+ top: 20%;
377
+ left: 10%;
378
+ font-size: 5rem;
379
+ animation-delay: 0s;
380
+ }
381
+
382
+ .ai-element:nth-child(2) {
383
+ top: 60%;
384
+ left: 80%;
385
+ font-size: 4rem;
386
+ animation-delay: 1s;
387
+ }
388
+
389
+ .ai-element:nth-child(3) {
390
+ top: 30%;
391
+ left: 70%;
392
+ font-size: 3rem;
393
+ animation-delay: 2s;
394
+ }
395
+
396
+ .ai-element:nth-child(4) {
397
+ top: 80%;
398
+ left: 20%;
399
+ font-size: 6rem;
400
+ animation-delay: 3s;
401
+ }
402
+
403
+ @keyframes float {
404
+
405
+ 0%,
406
+ 100% {
407
+ transform: translateY(0) rotate(0deg);
408
+ }
409
+
410
+ 50% {
411
+ transform: translateY(-20px) rotate(5deg);
412
+ }
413
+ }
414
+
415
+ @keyframes fadeInUp {
416
+ from {
417
+ opacity: 0;
418
+ transform: translateY(20px);
419
+ }
420
+
421
+ to {
422
+ opacity: 1;
423
+ transform: translateY(0);
424
+ }
425
+ }
426
+
427
+ .remember-me {
428
+ display: flex;
429
+ align-items: center;
430
+ justify-content: flex-start;
431
+ width: 100%;
432
+ }
433
+
434
+ .remember-me input[type="checkbox"] {
435
+ appearance: none;
436
+ -webkit-appearance: none;
437
+ width: 18px;
438
+ height: 18px;
439
+ background: rgba(0, 0, 0, .3);
440
+ border: 2px solid rgba(0, 184, 148, 0.3);
441
+ border-radius: var(--border-radius);
442
+ margin-right: 10px;
443
+ cursor: pointer;
444
+ position: relative;
445
+ transition: var(--transition);
446
+ }
447
+
448
+ .remember-me input[type="checkbox"]:checked {
449
+ background-color: var(--accent);
450
+ border-color: var(--accent);
451
+ }
452
+
453
+ .remember-me input[type="checkbox"]:checked::after {
454
+ content: '\f00c';
455
+ font-family: 'Font Awesome 6 Free';
456
+ font-weight: 900;
457
+ position: absolute;
458
+ top: 50%;
459
+ left: 50%;
460
+ transform: translate(-50%, -50%);
461
+ color: var(--dark);
462
+ font-size: 10px;
463
+ }
464
+
465
+ .remember-me label {
466
+ color: var(--text-light);
467
+ cursor: pointer;
468
+ transition: var(--transition);
469
+ font-size: 0.9rem;
470
+ }
471
+
472
+ .remember-me label:hover {
473
+ color: var(--light);
474
+ }
475
+
476
+ .trust-device-container {
477
+ display: flex;
478
+ align-items: center;
479
+ justify-content: space-between;
480
+ width: 100%;
481
+ margin: 1.5rem 0;
482
+ padding: 1rem;
483
+ background: rgba(0, 184, 148, 0.05);
484
+ border: 1px solid rgba(0, 184, 148, 0.2);
485
+ border-radius: var(--border-radius);
486
+ transition: var(--transition);
487
+ }
488
+
489
+ .trust-device-container:hover {
490
+ background: rgba(0, 184, 148, 0.08);
491
+ border-color: rgba(0, 184, 148, 0.3);
492
+ }
493
+
494
+ .trust-device-label {
495
+ display: flex;
496
+ align-items: center;
497
+ cursor: pointer;
498
+ flex: 1;
499
+ gap: 12px;
500
+ }
501
+
502
+ .trust-device-checkbox {
503
+ appearance: none;
504
+ -webkit-appearance: none;
505
+ width: 20px;
506
+ height: 20px;
507
+ background: rgba(0, 0, 0, .3);
508
+ border: 2px solid rgba(0, 184, 148, 0.4);
509
+ border-radius: 5px;
510
+ cursor: pointer;
511
+ position: relative;
512
+ transition: var(--transition);
513
+ flex-shrink: 0;
514
+ }
515
+
516
+ .trust-device-checkbox:hover {
517
+ border-color: var(--accent);
518
+ background: rgba(0, 184, 148, 0.1);
519
+ }
520
+
521
+ .trust-device-checkbox:checked {
522
+ background-color: var(--accent);
523
+ border-color: var(--accent);
524
+ }
525
+
526
+ .trust-device-checkbox:checked::after {
527
+ content: '\f00c';
528
+ font-family: 'Font Awesome 6 Free';
529
+ font-weight: 900;
530
+ position: absolute;
531
+ top: 50%;
532
+ left: 50%;
533
+ transform: translate(-50%, -50%);
534
+ color: var(--dark);
535
+ font-size: 11px;
536
+ }
537
+
538
+ .checkbox-custom {
539
+ display: none;
540
+ }
541
+
542
+ .checkbox-text {
543
+ color: var(--text);
544
+ font-size: 0.95rem;
545
+ font-weight: 500;
546
+ transition: var(--transition);
547
+ user-select: none;
548
+ }
549
+
550
+ .trust-device-label:hover .checkbox-text {
551
+ color: var(--light);
552
+ }
553
+
554
+ .trust-device-info {
555
+ color: var(--accent);
556
+ cursor: pointer;
557
+ font-size: 1.1rem;
558
+ transition: var(--transition);
559
+ padding: 0.5rem;
560
+ border-radius: 50%;
561
+ flex-shrink: 0;
562
+ }
563
+
564
+ .trust-device-info:hover {
565
+ color: var(--light);
566
+ background: rgba(0, 184, 148, 0.15);
567
+ transform: scale(1.1);
568
+ }
569
+
570
+ .WarningboxInfo {
571
+ background: rgba(255, 209, 102, 0.1);
572
+ border: 1px solid var(--warning);
573
+ border-left: 4px solid var(--warning);
574
+ padding: 0.75rem 1rem;
575
+ border-radius: var(--border-radius);
576
+ color: var(--warning);
577
+ font-size: 0.9rem;
578
+ font-weight: 500;
579
+ margin-top: 1rem;
580
+ margin-bottom: 10px;
581
+ text-align: center;
582
+ box-shadow: var(--box-shadow);
583
+ }
584
+
585
+ .version-info {
586
+ position: fixed;
587
+ bottom: 20px;
588
+ right: 20px;
589
+ background: rgba(255, 255, 255, .1);
590
+ color: var(--text-light);
591
+ padding: 8px 12px;
592
+ border-radius: var(--border-radius);
593
+ font-size: 0.75rem;
594
+ border: 1px solid rgba(255, 255, 255, .1);
595
+ z-index: 999;
596
+ transition: var(--transition);
597
+ backdrop-filter: blur(5px);
598
+ }
599
+
600
+ .version-info:hover {
601
+ color: var(--accent);
602
+ border-color: var(--accent);
603
+ }
604
+
605
+ /* Desktop Layout: Two-column design (>1000px) */
606
+ @media (min-width: 1001px) {
607
+ .login-box {
608
+ max-width: 1100px;
609
+ padding: 0;
610
+ overflow: hidden;
611
+ }
612
+
613
+ .login-box-inner {
614
+ flex-direction: row;
615
+ min-height: 600px;
616
+ }
617
+
618
+ /* Left Sidebar: 30% - Branding & Secondary Actions */
619
+ .login-sidebar {
620
+ display: flex;
621
+ flex-direction: column;
622
+ width: 40%;
623
+ background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(0, 184, 148, 0.08));
624
+ padding: 3rem 2rem;
625
+ border-right: 1px solid rgba(0, 184, 148, 0.3);
626
+ position: relative;
627
+ overflow: hidden;
628
+ }
629
+
630
+ .login-sidebar::before {
631
+ content: '';
632
+ position: absolute;
633
+ top: -50%;
634
+ left: -50%;
635
+ width: 200%;
636
+ height: 200%;
637
+ background: radial-gradient(circle, rgba(0, 184, 148, 0.1) 0%, transparent 70%);
638
+ animation: pulse 8s ease-in-out infinite;
639
+ pointer-events: none;
640
+ z-index: 0;
641
+ }
642
+
643
+ @keyframes pulse {
644
+
645
+ 0%,
646
+ 100% {
647
+ opacity: 0.5;
648
+ transform: scale(1);
649
+ }
650
+
651
+ 50% {
652
+ opacity: 0.8;
653
+ transform: scale(1.1);
654
+ }
655
+ }
656
+
657
+ .sidebar-content {
658
+ display: flex;
659
+ flex-direction: column;
660
+ gap: 2.5rem;
661
+ height: 100%;
662
+ }
663
+
664
+ .brand-section {
665
+ text-align: center;
666
+ }
667
+
668
+ .brand-icon {
669
+ font-size: 3.5rem;
670
+ color: var(--accent);
671
+ margin-bottom: 1.5rem;
672
+ display: block;
673
+ filter: drop-shadow(0 4px 12px rgba(0, 184, 148, 0.4));
674
+ position: relative;
675
+ z-index: 1;
676
+ }
677
+
678
+ .brand-title {
679
+ font-size: 1.5rem;
680
+ font-weight: 700;
681
+ color: var(--light);
682
+ margin-bottom: 0.75rem;
683
+ line-height: 1.3;
684
+ }
685
+
686
+ .brand-description {
687
+ font-size: 0.9rem;
688
+ color: var(--text-light);
689
+ line-height: 1.5;
690
+ }
691
+
692
+ .sidebar-actions {
693
+ display: flex;
694
+ flex-direction: column;
695
+ gap: 1rem;
696
+ }
697
+
698
+ .btn-social {
699
+ display: flex;
700
+ align-items: center;
701
+ justify-content: center;
702
+ gap: 10px;
703
+ padding: 0.85rem 1.1rem;
704
+ border-radius: var(--border-radius);
705
+ font-weight: 600;
706
+ font-size: 0.9rem;
707
+ text-decoration: none;
708
+ transition: var(--transition);
709
+ border: 0.13rem solid;
710
+ position: relative;
711
+ z-index: 1;
712
+ overflow: hidden;
713
+ }
714
+
715
+ .btn-google-side {
716
+ background: rgba(255, 255, 255, 0.05);
717
+ color: var(--text);
718
+ border-color: rgba(255, 255, 255, 0.15);
719
+ }
720
+
721
+ .btn-google-side:hover {
722
+ background: transparent;
723
+ border-color: var(--accent);
724
+ box-shadow: 0 4px 20px rgba(0, 184, 148, 0.2);
725
+ }
726
+
727
+ .btn-google-side i {
728
+ color: #4285f4;
729
+ }
730
+
731
+ .btn-switch-side {
732
+ background: rgba(255, 255, 255, 0.05);
733
+ color: var(--text);
734
+ border-color: rgba(255, 255, 255, 0.15);
735
+ }
736
+
737
+ .btn-switch-side:hover {
738
+ background: transparent;
739
+ border-color: var(--accent);
740
+ box-shadow: 0 4px 20px rgba(0, 184, 148, 0.2);
741
+ }
742
+
743
+ .sidebar-links {
744
+ display: flex;
745
+ flex-direction: column;
746
+ gap: 0.75rem;
747
+ margin-top: auto;
748
+ padding-top: 2rem;
749
+ border-top: 1px solid rgba(255, 255, 255, 0.12);
750
+ position: relative;
751
+ z-index: 1;
752
+ }
753
+
754
+ .sidebar-link {
755
+ display: flex;
756
+ align-items: center;
757
+ gap: 10px;
758
+ color: var(--text-light);
759
+ text-decoration: none;
760
+ font-size: 0.85rem;
761
+ transition: var(--transition);
762
+ padding: 0.6rem 0.75rem;
763
+ border-radius: 6px;
764
+ border: 1px solid transparent;
765
+ }
766
+
767
+ .sidebar-link:hover {
768
+ color: var(--accent);
769
+ background: rgba(0, 184, 148, 0.08);
770
+ border-color: rgba(0, 184, 148, 0.3);
771
+ }
772
+
773
+ .sidebar-link i {
774
+ font-size: 0.95rem;
775
+ opacity: 0.8;
776
+ }
777
+
778
+ /* Right Main Form: 70% - Login Fields Only */
779
+ .login-main {
780
+ width: 70%;
781
+ padding: 3rem 4rem;
782
+ display: flex;
783
+ flex-direction: column;
784
+ justify-content: center;
785
+ background: rgba(0, 0, 0, 0.2);
786
+ }
787
+
788
+ .login-form {
789
+ max-width: 420px;
790
+ margin: 0 auto;
791
+ width: 100%;
792
+ }
793
+
794
+ .login-title {
795
+ margin-bottom: 2.5rem;
796
+ font-size: 2rem;
797
+ text-align: center;
798
+ }
799
+
800
+ .login-title::after {
801
+ display: block;
802
+ }
803
+
804
+ /* Hide mobile-only elements on desktop */
805
+ .mobile-actions {
806
+ display: none;
807
+ }
808
+
809
+ /* Adjust form spacing for cleaner look */
810
+ .form-group {
811
+ margin-bottom: 1.75rem;
812
+ }
813
+
814
+ .terms-info {
815
+ margin-top: 2rem;
816
+ }
817
+ }
818
+
819
+ @media (max-width: 768px) {
820
+ .login-box {
821
+ padding: 2rem;
822
+ }
823
+
824
+ .login-title {
825
+ font-size: 1.8rem;
826
+ }
827
+
828
+ .version-info {
829
+ bottom: 10px;
830
+ right: 10px;
831
+ font-size: 0.7rem;
832
+ padding: 6px 10px;
833
+ }
834
+ }
835
+
836
+ @media (max-width: 576px) {
837
+ .login-box {
838
+ padding: 1.5rem;
839
+ border-radius: var(--border-radius);
840
+ }
841
+
842
+ .login-links {
843
+ flex-direction: row;
844
+ gap: 0.5rem;
845
+ align-items: center;
846
+ }
847
+ }
848
+ </style>
849
+ <style>
850
+ .info-box {
851
+ background: rgba(10, 20, 20, 0.95);
852
+ backdrop-filter: blur(10px);
853
+ border-radius: var(--border-radius);
854
+ padding: 2.5rem;
855
+ width: 100%;
856
+ max-width: 900px;
857
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
858
+ border: 1px solid rgba(0, 184, 148, 0.2);
859
+ position: relative;
860
+ z-index: 2;
861
+ transition: var(--transition);
862
+ }
863
+
864
+ .info-box:hover {
865
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
866
+ border-color: rgba(0, 184, 148, 0.3);
867
+ }
868
+
869
+ .info-title {
870
+ text-align: center;
871
+ margin-bottom: 2rem;
872
+ font-size: 2rem;
873
+ position: relative;
874
+ color: var(--light);
875
+ }
876
+
877
+ .info-title::after {
878
+ content: '';
879
+ position: absolute;
880
+ bottom: -10px;
881
+ left: 50%;
882
+ transform: translateX(-50%);
883
+ width: 100px;
884
+ height: 4px;
885
+ background-color: var(--accent);
886
+ border-radius: 2px;
887
+ }
888
+
889
+ .info-section {
890
+ margin-bottom: 2rem;
891
+ padding: 1.5rem;
892
+ border: 1px solid rgba(0, 184, 148, 0.2);
893
+ border-radius: var(--border-radius);
894
+ background-color: rgba(0, 0, 0, 0.2);
895
+ transition: var(--transition);
896
+ }
897
+
898
+ .info-section:hover {
899
+ border-color: rgba(0, 184, 148, 0.4);
900
+ background-color: rgba(0, 0, 0, 0.3);
901
+ }
902
+
903
+ .info-section h2 {
904
+ color: var(--accent);
905
+ border-bottom: 2px solid rgba(0, 184, 148, 0.3);
906
+ padding-bottom: 10px;
907
+ margin-top: 0;
908
+ margin-bottom: 1.5rem;
909
+ font-size: 1.4rem;
910
+ display: flex;
911
+ align-items: center;
912
+ gap: 10px;
913
+ }
914
+
915
+ .info-section h2 i {
916
+ font-size: 1.2rem;
917
+ }
918
+
919
+ .info-row {
920
+ display: flex;
921
+ margin-bottom: 1rem;
922
+ padding-bottom: 1rem;
923
+ border-bottom: 1px solid rgba(0, 184, 148, 0.1);
924
+ align-items: center;
925
+ }
926
+
927
+ .info-row:last-child {
928
+ border-bottom: none;
929
+ margin-bottom: 0;
930
+ padding-bottom: 0;
931
+ }
932
+
933
+ .info-label {
934
+ font-weight: 600;
935
+ color: var(--text-light);
936
+ min-width: 240px;
937
+ font-size: 1rem;
938
+ }
939
+
940
+ .info-value {
941
+ flex: 1;
942
+ word-break: break-word;
943
+ color: var(--text);
944
+ font-size: 1rem;
945
+ }
946
+
947
+ .version-status {
948
+ display: inline-flex;
949
+ align-items: center;
950
+ gap: 6px;
951
+ padding: 4px 12px;
952
+ border-radius: 20px;
953
+ font-size: 0.85rem;
954
+ font-weight: 600;
955
+ margin-left: 10px;
956
+ }
957
+
958
+ .version-up-to-date {
959
+ background: rgba(67, 233, 123, 0.2);
960
+ color: var(--success);
961
+ border: 1px solid var(--success);
962
+ }
963
+
964
+ .version-outdated {
965
+ background: rgba(255, 118, 117, 0.2);
966
+ color: var(--danger);
967
+ border: 1px solid var(--danger);
968
+ }
969
+
970
+ .version-fetch-error {
971
+ background: rgba(255, 209, 102, 0.2);
972
+ color: var(--warning);
973
+ border: 1px solid var(--warning);
974
+ }
975
+
976
+ @media (max-width: 768px) {
977
+ .info-box {
978
+ padding: 2rem;
979
+ max-width: 100%;
980
+ }
981
+
982
+ .info-title {
983
+ font-size: 1.8rem;
984
+ }
985
+
986
+ .info-row {
987
+ flex-direction: column;
988
+ align-items: flex-start;
989
+ gap: 0.5rem;
990
+ }
991
+
992
+ .info-label {
993
+ min-width: unset;
994
+ }
995
+
996
+ .info-section h2 {
997
+ font-size: 1.2rem;
998
+ }
999
+ }
1000
+
1001
+ @media (max-width: 576px) {
1002
+ .info-box {
1003
+ padding: 1.5rem;
1004
+ }
1005
+
1006
+ .info-section {
1007
+ padding: 1rem;
1008
+ }
1009
+ }
1010
+ </style>
1011
+ </head>
1012
+
1013
+ <body>
1014
+ <header>
1015
+ <div class="header-container">
1016
+ <a class="logo">
1017
+ <img src="/icon.svg" alt="Logo" class="logo-image" />
1018
+ <span class="logo-text">{{APP_NAME}}
1019
+ <span class="logo-comp">mbktech</span></span>
1020
+ </a>
1021
+ </div>
1022
+ </header>
1023
+ <section class="login-container">
1024
+ <i class="fas fa-info-circle ai-element"></i>
1025
+ <i class="fas fa-cogs ai-element"></i>
1026
+ <i class="fas fa-server ai-element"></i>
1027
+ <i class="fas fa-code-branch ai-element"></i>
1028
+
1029
+ <div class="info-box">
1030
+ <h1 class="info-title">System Information</h1>
1031
+
1032
+ <div class="info-section">
1033
+ <h2><i class="fas fa-code-branch"></i> Version Information</h2>
1034
+ <div class="info-row">
1035
+ <div class="info-label">Current Version:</div>
1036
+ <div class="info-value" id="CurrentVersion">{{appVersion}}</div>
1037
+ </div>
1038
+
1039
+ <div class="info-row">
1040
+ <div class="info-label">Latest Version:</div>
1041
+ <div class="info-value">
1042
+ {{latestVersion}}
1043
+ {{#if (eq latestVersion version)}}
1044
+ <span class="version-status version-up-to-date">
1045
+ <i class="fas fa-check-circle"></i> Up to date
1046
+ </span>
1047
+ {{/if}}
1048
+ </div>
1049
+ </div>
1050
+ </div>
1051
+ </div>
1052
+ </section>
1053
+
1054
+ </body>
1055
+
1056
+ </html>