mbkbucket 1.3.0 → 1.4.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.
@@ -1,1056 +0,0 @@
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>