mbkauthe 1.3.4 → 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.
@@ -0,0 +1,498 @@
1
+ <style>
2
+ :root {
3
+ --primary: #2196f3;
4
+ --primary-dark: #1769aa;
5
+ --secondary: #43e97b;
6
+ --accent: #00b894;
7
+ --dark: #101c1c;
8
+ --darker: #0a1414;
9
+ --light: #eaf6fb;
10
+ --text: #e0f7fa;
11
+ --text-light: #b2dfdb;
12
+ --text-dark: #1a2a2a;
13
+ --success: #43e97b;
14
+ --warning: #ffd166;
15
+ --danger: #ff7675;
16
+ --border-radius: 8px;
17
+ --box-shadow: 0 4px 20px rgba(33, 150, 243, 0.15);
18
+ --transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+
28
+ body {
29
+ background-color: var(--dark);
30
+ color: var(--text);
31
+ min-height: 100vh;
32
+ display: flex;
33
+ flex-direction: column;
34
+ overflow-x: hidden;
35
+ }
36
+
37
+ header {
38
+ background-color: var(--darker);
39
+ box-shadow: var(--box-shadow);
40
+ position: fixed;
41
+ width: 100%;
42
+ z-index: 1000;
43
+ transition: var(--transition);
44
+ border-bottom: .125rem solid rgba(255, 255, 255, .1);
45
+ }
46
+
47
+ .header-container {
48
+ display: flex;
49
+ justify-content: space-between;
50
+ align-items: center;
51
+ padding: 1rem 2rem;
52
+ max-width: 1400px;
53
+ margin: 0 auto;
54
+ }
55
+
56
+ .logo {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: .75rem;
60
+ text-decoration: none;
61
+ }
62
+
63
+ .logo svg {
64
+ height: 40px;
65
+ width: auto;
66
+ }
67
+
68
+ .logo-text {
69
+ font-size: 1.5rem;
70
+ font-weight: 700;
71
+ color: var(--light);
72
+ }
73
+
74
+ .logo-text span {
75
+ color: var(--accent);
76
+ }
77
+
78
+ .logo-comp {
79
+ font-size: 1rem;
80
+ color: var(--text-light);
81
+ }
82
+
83
+ .login-container {
84
+ flex: 1;
85
+ display: flex;
86
+ align-items: center;
87
+ justify-content: center;
88
+ padding: 120px 2rem 80px;
89
+ position: relative;
90
+ overflow: hidden;
91
+ background: linear-gradient(135deg, var(--darker), var(--primary-dark));
92
+ }
93
+
94
+ .login-container::before {
95
+ content: '';
96
+ position: absolute;
97
+ top: 0;
98
+ left: 0;
99
+ width: 100%;
100
+ height: 100%;
101
+ background: url(https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80) center/cover no-repeat;
102
+ opacity: .1;
103
+ z-index: 0;
104
+ }
105
+
106
+ .login-box {
107
+ background: rgba(10, 20, 20, 0.95);
108
+ backdrop-filter: blur(10px);
109
+ border-radius: var(--border-radius);
110
+ padding: 2.5rem;
111
+ width: 100%;
112
+ max-width: 450px;
113
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
114
+ border: 1px solid rgba(0, 184, 148, 0.2);
115
+ position: relative;
116
+ z-index: 2;
117
+ transition: var(--transition);
118
+ }
119
+
120
+ .login-box:hover {
121
+ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
122
+ border-color: rgba(0, 184, 148, 0.3);
123
+ }
124
+
125
+ .login-title {
126
+ text-align: center;
127
+ margin-bottom: 2rem;
128
+ font-size: 2rem;
129
+ position: relative;
130
+ color: var(--light);
131
+ }
132
+
133
+ .login-title::after {
134
+ content: '';
135
+ position: absolute;
136
+ bottom: -10px;
137
+ left: 50%;
138
+ transform: translateX(-50%);
139
+ width: 80px;
140
+ height: 4px;
141
+ background-color: var(--accent);
142
+ border-radius: 2px;
143
+ }
144
+
145
+ .form-group {
146
+ position: relative;
147
+ margin-bottom: 1.5rem;
148
+ }
149
+
150
+ .form-input {
151
+ width: 100%;
152
+ padding: 14px 20px;
153
+ background: rgba(0, 0, 0, .3);
154
+ border: 2px solid rgba(0, 184, 148, 0.3);
155
+ border-radius: var(--border-radius);
156
+ color: var(--text);
157
+ font-size: 1rem;
158
+ transition: var(--transition);
159
+ }
160
+
161
+ .form-input:focus {
162
+ outline: none;
163
+ background: rgba(0, 0, 0, .4);
164
+ border-color: var(--accent);
165
+ box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.2);
166
+ }
167
+
168
+ .form-label {
169
+ position: absolute;
170
+ top: 15px;
171
+ left: 20px;
172
+ color: var(--text-light);
173
+ transition: var(--transition);
174
+ pointer-events: none;
175
+ }
176
+
177
+ .form-input:focus+.form-label,
178
+ .form-input:not(:placeholder-shown)+.form-label {
179
+ top: -10px;
180
+ left: 15px;
181
+ font-size: 0.8rem;
182
+ background: rgba(10, 20, 20, 0.95);
183
+ padding: 0 5px;
184
+ color: var(--accent);
185
+ }
186
+
187
+ .input-icon {
188
+ position: absolute;
189
+ right: 20px;
190
+ top: 50%;
191
+ transform: translateY(-50%);
192
+ color: var(--text-light);
193
+ cursor: pointer;
194
+ transition: var(--transition);
195
+ }
196
+
197
+ .input-icon:hover {
198
+ color: var(--accent);
199
+ }
200
+
201
+ .btn-login {
202
+ width: 100%;
203
+ padding: 8px;
204
+ border-radius: var(--border-radius);
205
+ background: var(--accent);
206
+ color: var(--dark);
207
+ font-weight: 700;
208
+ font-size: 1.2rem;
209
+ border: .1rem solid var(--accent);
210
+ cursor: pointer;
211
+ transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
212
+ box-shadow: var(--box-shadow);
213
+ }
214
+
215
+ .btn-login:hover {
216
+ background: var(--dark);
217
+ color: var(--accent);
218
+ box-shadow: 0 6px 20px rgba(0, 184, 148, 0.3);
219
+ }
220
+
221
+ .btn-login:disabled {
222
+ background: var(--dark);
223
+ color: var(--accent);
224
+ cursor: not-allowed;
225
+ transform: none;
226
+ box-shadow: none;
227
+ }
228
+
229
+ .social-login {
230
+ margin-top: 1.5rem;
231
+ text-align: center;
232
+ }
233
+
234
+ .divider {
235
+ display: flex;
236
+ align-items: center;
237
+ justify-content: center;
238
+ margin: 1rem 0;
239
+ }
240
+
241
+ .divider::before,
242
+ .divider::after {
243
+ content: '';
244
+ flex: 1;
245
+ height: 1px;
246
+ background: var(--text-light);
247
+ opacity: 0.3;
248
+ }
249
+
250
+ .divider span {
251
+ background: rgba(10, 20, 20, 0.95);
252
+ padding: 0 15px;
253
+ color: var(--text-light);
254
+ font-size: 0.9rem;
255
+ }
256
+
257
+ .btn-github {
258
+ display: inline-flex;
259
+ align-items: center;
260
+ justify-content: center;
261
+ gap: 8px;
262
+ width: 100%;
263
+ padding: 12px 20px;
264
+ border-radius: var(--border-radius);
265
+ background: #24292e;
266
+ color: white;
267
+ font-weight: 500;
268
+ font-size: 0.95rem;
269
+ text-decoration: none;
270
+ transition: var(--transition);
271
+ box-shadow: var(--box-shadow);
272
+ }
273
+
274
+ .btn-github:hover {
275
+ background: #3b4045;
276
+ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
277
+ transform: translateY(-2px);
278
+ }
279
+
280
+ .btn-github i {
281
+ font-size: 1.1rem;
282
+ }
283
+
284
+ .login-links {
285
+ display: flex;
286
+ justify-content: space-between;
287
+ margin-top: 1.5rem;
288
+ font-size: 0.9rem;
289
+ }
290
+
291
+ .login-link {
292
+ color: var(--text-light);
293
+ transition: var(--transition);
294
+ text-decoration: none;
295
+ }
296
+
297
+ .login-link:hover {
298
+ color: var(--accent);
299
+ }
300
+
301
+ .terms-info {
302
+ margin-top: 1rem;
303
+ font-size: 0.8rem;
304
+ color: var(--text-light);
305
+ text-align: center;
306
+ }
307
+
308
+ .terms-link {
309
+ color: var(--accent);
310
+ font-weight: 500;
311
+ text-decoration: none;
312
+ }
313
+
314
+ .token-container {
315
+ animation: fadeInUp 0.4s ease-out;
316
+ }
317
+
318
+ .token-container.disable {
319
+ display: none;
320
+ }
321
+
322
+ .token-container.enable {
323
+ display: block;
324
+ }
325
+
326
+ .ai-element {
327
+ position: absolute;
328
+ opacity: 0.1;
329
+ z-index: 1;
330
+ animation: float 6s ease-in-out infinite;
331
+ }
332
+
333
+ .ai-element:nth-child(1) {
334
+ top: 20%;
335
+ left: 10%;
336
+ font-size: 5rem;
337
+ animation-delay: 0s;
338
+ }
339
+
340
+ .ai-element:nth-child(2) {
341
+ top: 60%;
342
+ left: 80%;
343
+ font-size: 4rem;
344
+ animation-delay: 1s;
345
+ }
346
+
347
+ .ai-element:nth-child(3) {
348
+ top: 30%;
349
+ left: 70%;
350
+ font-size: 3rem;
351
+ animation-delay: 2s;
352
+ }
353
+
354
+ .ai-element:nth-child(4) {
355
+ top: 80%;
356
+ left: 20%;
357
+ font-size: 6rem;
358
+ animation-delay: 3s;
359
+ }
360
+
361
+ @keyframes float {
362
+
363
+ 0%,
364
+ 100% {
365
+ transform: translateY(0) rotate(0deg);
366
+ }
367
+
368
+ 50% {
369
+ transform: translateY(-20px) rotate(5deg);
370
+ }
371
+ }
372
+
373
+ @keyframes fadeInUp {
374
+ from {
375
+ opacity: 0;
376
+ transform: translateY(20px);
377
+ }
378
+
379
+ to {
380
+ opacity: 1;
381
+ transform: translateY(0);
382
+ }
383
+ }
384
+
385
+ .remember-me {
386
+ display: flex;
387
+ align-items: center;
388
+ justify-content: flex-start;
389
+ width: 100%;
390
+ margin: 1rem 0;
391
+ }
392
+
393
+ .remember-me input[type="checkbox"] {
394
+ appearance: none;
395
+ -webkit-appearance: none;
396
+ width: 18px;
397
+ height: 18px;
398
+ background: rgba(0, 0, 0, .3);
399
+ border: 2px solid rgba(0, 184, 148, 0.3);
400
+ border-radius: var(--border-radius);
401
+ margin-right: 10px;
402
+ cursor: pointer;
403
+ position: relative;
404
+ transition: var(--transition);
405
+ }
406
+
407
+ .remember-me input[type="checkbox"]:checked {
408
+ background-color: var(--accent);
409
+ border-color: var(--accent);
410
+ }
411
+
412
+ .remember-me input[type="checkbox"]:checked::after {
413
+ content: '\f00c';
414
+ font-family: 'Font Awesome 6 Free';
415
+ font-weight: 900;
416
+ position: absolute;
417
+ top: 50%;
418
+ left: 50%;
419
+ transform: translate(-50%, -50%);
420
+ color: var(--dark);
421
+ font-size: 10px;
422
+ }
423
+
424
+ .remember-me label {
425
+ color: var(--text-light);
426
+ cursor: pointer;
427
+ transition: var(--transition);
428
+ font-size: 0.9rem;
429
+ }
430
+
431
+ .remember-me label:hover {
432
+ color: var(--light);
433
+ }
434
+
435
+ .WarningboxInfo {
436
+ background: rgba(255, 209, 102, 0.1);
437
+ border: 1px solid var(--warning);
438
+ border-left: 4px solid var(--warning);
439
+ padding: 0.75rem 1rem;
440
+ border-radius: var(--border-radius);
441
+ color: var(--warning);
442
+ font-size: 0.9rem;
443
+ font-weight: 500;
444
+ margin-top: 1rem;
445
+ text-align: center;
446
+ box-shadow: var(--box-shadow);
447
+ }
448
+
449
+ .version-info {
450
+ position: fixed;
451
+ bottom: 20px;
452
+ right: 20px;
453
+ background: rgba(255, 255, 255, .1);
454
+ color: var(--text-light);
455
+ padding: 8px 12px;
456
+ border-radius: var(--border-radius);
457
+ font-size: 0.75rem;
458
+ border: 1px solid rgba(255, 255, 255, .1);
459
+ z-index: 999;
460
+ transition: var(--transition);
461
+ backdrop-filter: blur(5px);
462
+ }
463
+
464
+ .version-info:hover {
465
+ color: var(--accent);
466
+ border-color: var(--accent);
467
+ }
468
+
469
+ @media (max-width: 768px) {
470
+ .login-box {
471
+ padding: 2rem;
472
+ }
473
+
474
+ .login-title {
475
+ font-size: 1.8rem;
476
+ }
477
+
478
+ .version-info {
479
+ bottom: 10px;
480
+ right: 10px;
481
+ font-size: 0.7rem;
482
+ padding: 6px 10px;
483
+ }
484
+ }
485
+
486
+ @media (max-width: 576px) {
487
+ .login-box {
488
+ padding: 1.5rem;
489
+ border-radius: var(--border-radius);
490
+ }
491
+
492
+ .login-links {
493
+ flex-direction: column;
494
+ gap: 0.5rem;
495
+ align-items: center;
496
+ }
497
+ }
498
+ </style>