Hugging Face's logo

Spaces:
ylonaxoxos
/
undefined
Running

App Files Community
ylonaxoxos commited on
Commit
457c2ea
·
verified ·
1 Parent(s): 839b8ab

add animations, gradient colors, icons and a lot more eye comfortness, creativity in all buttons and navigation bars

Browse files
Files changed (2) hide show
  1. client-register.html +168 -36
  2. index.html +180 -45
client-register.html CHANGED
@@ -53,19 +53,52 @@
53
  50% { transform: scale(1.05); }
54
  100% { transform: scale(1); }
55
  }
56
- .btn-mint {
57
- background-color: var(--mint-green);
58
- border-color: var(--mint-green);
59
  color: #333;
 
 
 
 
 
 
 
 
60
  }
61
  .btn-mint:hover {
62
- background-color: var(--mint-dark);
63
- border-color: var(--mint-dark);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
64
  }
65
  .progress-bar {
66
- background-color: var(--mint-green);
 
 
 
 
 
 
 
67
  }
68
- </style>
69
  </head>
70
  <body class="bg-light">
71
  <div class="container py-5">
@@ -79,8 +112,8 @@
79
  <span class="badge bg-mint text-dark rounded-pill px-3 py-2 shadow-sm pulse-animation">NEW</span>
80
  </div>
81
  </div>
82
- <div class="progress mb-4" style="height: 10px; border-radius: 5px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);">
83
- <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%" id="progressBar"></div>
84
  </div>
85
  <form id="registrationForm">
86
  <!-- Personal Information -->
@@ -137,11 +170,15 @@
137
  </select>
138
  </div>
139
  </div>
140
- <div class="d-flex justify-content-between mt-4">
141
- <button type="button" class="btn btn-outline-secondary disabled">Previous</button>
142
- <button type="button" class="btn btn-mint next-section">Next</button>
143
- </div>
144
- </div>
 
 
 
 
145
 
146
  <!-- Contact Information -->
147
  <div class="form-section" id="section2">
@@ -300,9 +337,9 @@
300
  </div>
301
  </div>
302
  </div>
303
-
304
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
305
- <script>
 
306
  feather.replace();
307
 
308
  // Form navigation
@@ -334,13 +371,20 @@
334
  updateProgressBar();
335
  });
336
  });
337
-
338
  function updateProgressBar() {
339
  const progress = ((currentSection + 1) / sections.length) * 100;
340
  progressBar.style.width = `${progress}%`;
 
 
 
 
 
 
 
 
 
341
  }
342
-
343
- function validateSection(sectionIndex) {
344
  // Basic validation example - implement proper validation for each section
345
  if (sectionIndex === 0) {
346
  // Validate personal info
@@ -376,39 +420,127 @@
376
  e.preventDefault();
377
 
378
  // Add submission animation
379
- this.style.transform = 'scale(0.98)';
380
- this.style.opacity = '0.9';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
381
 
382
  // Simulate processing
383
  setTimeout(() => {
384
- document.querySelector('.registration-card').classList.add('animate__animated', 'animate__bounceOut');
385
- setTimeout(() => {
386
- window.location.href = 'create-password.html';
387
- }, 500);
388
- }, 1000);
 
 
 
 
 
389
  });
390
-
391
- // Input focus effects
392
  document.querySelectorAll('input, select').forEach(input => {
 
 
 
 
393
  input.addEventListener('focus', function() {
394
  this.style.borderColor = 'var(--mint-green)';
395
  this.style.boxShadow = '0 0 0 0.25rem rgba(152, 255, 152, 0.25)';
 
 
 
 
 
 
 
396
  });
 
397
  input.addEventListener('blur', function() {
398
- this.style.borderColor = '';
399
- this.style.boxShadow = '';
 
 
 
 
 
 
 
400
  });
401
  });
402
-
403
- // Add floating effect to important elements
404
- const floatingElements = document.querySelectorAll('.form-check-label, .form-text');
405
- floatingElements.forEach(el => {
 
406
  el.style.transition = 'all 0.3s ease';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
407
  el.addEventListener('mouseenter', () => {
408
- el.style.transform = 'translateY(-3px)';
 
 
 
 
 
 
 
 
 
 
409
  });
 
410
  el.addEventListener('mouseleave', () => {
411
- el.style.transform = '';
 
 
 
 
 
 
 
 
 
 
412
  });
413
  });
414
  </script>
 
53
  50% { transform: scale(1.05); }
54
  100% { transform: scale(1); }
55
  }
56
+ .btn-mint {
57
+ background: linear-gradient(135deg, var(--mint-green) 0%, var(--mint-dark) 100%);
58
+ border: none;
59
  color: #333;
60
+ font-weight: 600;
61
+ letter-spacing: 0.5px;
62
+ border-radius: 50px;
63
+ padding: 12px 28px;
64
+ box-shadow: 0 4px 15px rgba(121, 199, 121, 0.3);
65
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
66
+ position: relative;
67
+ overflow: hidden;
68
  }
69
  .btn-mint:hover {
70
+ transform: translateY(-3px);
71
+ box-shadow: 0 8px 20px rgba(121, 199, 121, 0.4);
72
+ color: #fff;
73
+ }
74
+ .btn-mint:active {
75
+ transform: translateY(1px);
76
+ }
77
+ .btn-mint::after {
78
+ content: '';
79
+ position: absolute;
80
+ top: 0;
81
+ left: 0;
82
+ width: 100%;
83
+ height: 100%;
84
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
85
+ transform: translateX(-100%);
86
+ transition: 0.6s;
87
+ }
88
+ .btn-mint:hover::after {
89
+ transform: translateX(100%);
90
  }
91
  .progress-bar {
92
+ background: linear-gradient(90deg, var(--mint-light) 0%, var(--mint-green) 50%, var(--mint-dark) 100%);
93
+ background-size: 200% 100%;
94
+ animation: gradient 2s ease infinite;
95
+ }
96
+ @keyframes gradient {
97
+ 0% { background-position: 0% 50%; }
98
+ 50% { background-position: 100% 50%; }
99
+ 100% { background-position: 0% 50%; }
100
  }
101
+ </style>
102
  </head>
103
  <body class="bg-light">
104
  <div class="container py-5">
 
112
  <span class="badge bg-mint text-dark rounded-pill px-3 py-2 shadow-sm pulse-animation">NEW</span>
113
  </div>
114
  </div>
115
+ <div class="progress mb-4" style="height: 12px; border-radius: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);">
116
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 25%; border-radius: 10px;" id="progressBar"></div>
117
  </div>
118
  <form id="registrationForm">
119
  <!-- Personal Information -->
 
170
  </select>
171
  </div>
172
  </div>
173
+ <div class="d-flex justify-content-between mt-4">
174
+ <button type="button" class="btn btn-outline-secondary disabled">
175
+ <i data-feather="chevron-left" class="me-1"></i> Previous
176
+ </button>
177
+ <button type="button" class="btn btn-mint next-section">
178
+ Next <i data-feather="chevron-right" class="ms-1"></i>
179
+ </button>
180
+ </div>
181
+ </div>
182
 
183
  <!-- Contact Information -->
184
  <div class="form-section" id="section2">
 
337
  </div>
338
  </div>
339
  </div>
 
340
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
341
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
342
+ <script>
343
  feather.replace();
344
 
345
  // Form navigation
 
371
  updateProgressBar();
372
  });
373
  });
 
374
  function updateProgressBar() {
375
  const progress = ((currentSection + 1) / sections.length) * 100;
376
  progressBar.style.width = `${progress}%`;
377
+
378
+ // Add pulse animation on progress update
379
+ progressBar.classList.add('pulse-animation');
380
+ setTimeout(() => {
381
+ progressBar.classList.remove('pulse-animation');
382
+ }, 300);
383
+
384
+ // Smooth width transition
385
+ progressBar.style.transition = 'width 0.6s cubic-bezier(0.65, 0.05, 0.36, 1)';
386
  }
387
+ function validateSection(sectionIndex) {
 
388
  // Basic validation example - implement proper validation for each section
389
  if (sectionIndex === 0) {
390
  // Validate personal info
 
420
  e.preventDefault();
421
 
422
  // Add submission animation
423
+ anime({
424
+ targets: this,
425
+ scale: 0.95,
426
+ opacity: 0.8,
427
+ easing: 'easeInOutQuad',
428
+ duration: 300
429
+ });
430
+
431
+ // Show success animation
432
+ const successIcon = document.createElement('div');
433
+ successIcon.innerHTML = feather.icons['check-circle'].toSvg({
434
+ width: 64,
435
+ height: 64,
436
+ color: 'var(--mint-green)',
437
+ 'stroke-width': 1.5
438
+ });
439
+ successIcon.style.position = 'absolute';
440
+ successIcon.style.top = '50%';
441
+ successIcon.style.left = '50%';
442
+ successIcon.style.transform = 'translate(-50%, -50%)';
443
+ successIcon.style.opacity = '0';
444
+ successIcon.style.zIndex = '1000';
445
+ document.querySelector('.registration-card').appendChild(successIcon);
446
+
447
+ anime({
448
+ targets: successIcon,
449
+ opacity: [0, 1],
450
+ scale: [0.5, 1.2, 1],
451
+ duration: 800,
452
+ easing: 'easeOutElastic(1, .8)'
453
+ });
454
 
455
  // Simulate processing
456
  setTimeout(() => {
457
+ anime({
458
+ targets: '.registration-card',
459
+ scale: 0.9,
460
+ opacity: 0,
461
+ duration: 500,
462
+ complete: function() {
463
+ window.location.href = 'create-password.html';
464
+ }
465
+ });
466
+ }, 1500);
467
  });
468
+ // Enhanced input focus effects
 
469
  document.querySelectorAll('input, select').forEach(input => {
470
+ input.style.transition = 'all 0.3s ease';
471
+ input.style.borderRadius = '8px';
472
+ input.style.border = '1px solid #dee2e6';
473
+
474
  input.addEventListener('focus', function() {
475
  this.style.borderColor = 'var(--mint-green)';
476
  this.style.boxShadow = '0 0 0 0.25rem rgba(152, 255, 152, 0.25)';
477
+ this.style.transform = 'translateY(-2px)';
478
+ anime({
479
+ targets: this.parentElement.querySelector('label'),
480
+ color: ['#6c757d', 'var(--mint-dark)'],
481
+ translateY: -5,
482
+ duration: 300
483
+ });
484
  });
485
+
486
  input.addEventListener('blur', function() {
487
+ this.style.borderColor = '#dee2e6';
488
+ this.style.boxShadow = 'none';
489
+ this.style.transform = 'translateY(0)';
490
+ anime({
491
+ targets: this.parentElement.querySelector('label'),
492
+ color: ['var(--mint-dark)', '#6c757d'],
493
+ translateY: 0,
494
+ duration: 300
495
+ });
496
  });
497
  });
498
+ // Enhanced floating effect with gradients and icons
499
+ document.querySelectorAll('.form-check-label').forEach(el => {
500
+ el.style.position = 'relative';
501
+ el.style.paddingLeft = '30px';
502
+ el.style.cursor = 'pointer';
503
  el.style.transition = 'all 0.3s ease';
504
+
505
+ const icon = document.createElement('span');
506
+ icon.innerHTML = feather.icons['check-square'].toSvg({
507
+ width: 18,
508
+ height: 18,
509
+ color: '#dee2e6',
510
+ 'stroke-width': 1.5
511
+ });
512
+ icon.style.position = 'absolute';
513
+ icon.style.left = '0';
514
+ icon.style.top = '2px';
515
+ icon.style.transition = 'all 0.3s ease';
516
+ el.prepend(icon);
517
+
518
  el.addEventListener('mouseenter', () => {
519
+ anime({
520
+ targets: el,
521
+ translateY: -3,
522
+ color: 'var(--mint-dark)',
523
+ duration: 300
524
+ });
525
+ anime({
526
+ targets: icon,
527
+ color: 'var(--mint-green)',
528
+ duration: 300
529
+ });
530
  });
531
+
532
  el.addEventListener('mouseleave', () => {
533
+ anime({
534
+ targets: el,
535
+ translateY: 0,
536
+ color: '#212529',
537
+ duration: 300
538
+ });
539
+ anime({
540
+ targets: icon,
541
+ color: '#dee2e6',
542
+ duration: 300
543
+ });
544
  });
545
  });
546
  </script>
index.html CHANGED
@@ -36,20 +36,25 @@
36
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
37
  }
38
  .btn-mint {
39
- background-color: var(--mint-green);
40
- border-color: var(--mint-green);
41
  color: #333;
42
- transition: var(--mint-transition);
 
 
 
 
 
43
  position: relative;
44
  overflow: hidden;
45
- z-index: 1;
46
- border-radius: 12px;
47
- padding: 10px 24px;
48
  }
49
  .btn-mint:hover {
50
- background-color: var(--mint-dark);
51
- border-color: var(--mint-dark);
52
  transform: translateY(-3px);
 
 
 
 
 
53
  }
54
  .btn-mint::after {
55
  content: '';
@@ -58,19 +63,31 @@
58
  left: 0;
59
  width: 100%;
60
  height: 100%;
61
- background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent);
62
  transform: translateX(-100%);
63
  transition: 0.6s;
64
- z-index: -1;
65
  }
66
  .btn-mint:hover::after {
67
  transform: translateX(100%);
68
  }
69
- .nav-pills .nav-link.active {
70
- background-color: var(--mint-green);
71
- color: #333;
 
 
 
72
  }
73
- .bg-mint {
 
 
 
 
 
 
 
 
 
 
74
  background-color: var(--mint-green);
75
  }
76
  .text-mint {
@@ -112,10 +129,12 @@
112
  <label for="clientPassword" class="form-label">Password</label>
113
  <input type="password" class="form-control" id="clientPassword" required>
114
  </div>
115
- <div class="d-grid gap-2">
116
- <button type="submit" class="btn btn-mint">Login as Client</button>
117
- </div>
118
- <div class="text-center mt-3">
 
 
119
  <a href="client-register.html" class="text-mint text-decoration-none">Register as Client</a>
120
  </div>
121
  </form>
@@ -131,9 +150,11 @@
131
  <input type="password" class="form-control" id="adminPassword" required>
132
  </div>
133
  <div class="d-grid gap-2">
134
- <button type="submit" class="btn btn-mint">Login as Admin</button>
 
 
135
  </div>
136
- </form>
137
  </div>
138
  </div>
139
  </div>
@@ -141,58 +162,172 @@
141
  </div>
142
  </div>
143
  </div>
144
-
145
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
146
- <script>
 
147
  feather.replace();
148
-
149
- // Smooth form animations
150
  document.querySelectorAll('.form-control').forEach(input => {
151
  input.addEventListener('focus', function() {
152
- this.parentElement.style.transform = 'scale(1.02)';
 
 
 
 
 
 
 
 
 
 
 
153
  });
154
  input.addEventListener('blur', function() {
155
- this.parentElement.style.transform = 'scale(1)';
 
 
 
 
 
 
 
 
 
 
 
156
  });
157
  });
158
-
159
- // Floating label effect
160
  document.querySelectorAll('.form-label').forEach(label => {
 
 
161
  label.style.transition = 'all 0.3s ease';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  label.addEventListener('click', function() {
163
- this.style.transform = 'translateY(-5px)';
 
 
 
 
 
 
 
 
 
 
164
  setTimeout(() => {
165
- this.style.transform = 'translateY(0)';
 
 
 
 
 
 
 
 
 
 
166
  }, 300);
167
  });
168
  });
169
-
170
- // Form submission with animation
171
  document.getElementById('clientLoginForm').addEventListener('submit', function(e) {
172
  e.preventDefault();
173
- this.style.transform = 'scale(0.95)';
 
 
 
 
 
 
 
 
 
 
 
 
174
  setTimeout(() => {
175
- window.location.href = 'client-dashboard.html';
176
- }, 500);
 
 
 
 
 
 
 
 
177
  });
178
 
179
  document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
180
  e.preventDefault();
181
- this.style.transform = 'scale(0.95)';
 
 
 
 
 
 
 
 
 
 
 
 
182
  setTimeout(() => {
183
- window.location.href = 'admin-dashboard.html';
184
- }, 500);
 
 
 
 
 
 
 
 
185
  });
186
-
187
- // Tab switching animation
188
  document.querySelectorAll('.nav-link').forEach(link => {
189
  link.addEventListener('click', function() {
190
- document.querySelector('.auth-card').style.animation = 'pulse 0.5s';
191
- setTimeout(() => {
192
- document.querySelector('.auth-card').style.animation = '';
193
- }, 500);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  });
195
  });
196
- </script>
197
  </body>
198
  </html>
 
36
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
37
  }
38
  .btn-mint {
39
+ background: linear-gradient(135deg, var(--mint-green) 0%, var(--mint-dark) 100%);
40
+ border: none;
41
  color: #333;
42
+ font-weight: 600;
43
+ letter-spacing: 0.5px;
44
+ border-radius: 50px;
45
+ padding: 12px 28px;
46
+ box-shadow: 0 4px 15px rgba(121, 199, 121, 0.3);
47
+ transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
48
  position: relative;
49
  overflow: hidden;
 
 
 
50
  }
51
  .btn-mint:hover {
 
 
52
  transform: translateY(-3px);
53
+ box-shadow: 0 8px 20px rgba(121, 199, 121, 0.4);
54
+ color: #fff;
55
+ }
56
+ .btn-mint:active {
57
+ transform: translateY(1px);
58
  }
59
  .btn-mint::after {
60
  content: '';
 
63
  left: 0;
64
  width: 100%;
65
  height: 100%;
66
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
67
  transform: translateX(-100%);
68
  transition: 0.6s;
 
69
  }
70
  .btn-mint:hover::after {
71
  transform: translateX(100%);
72
  }
73
+ .nav-pills .nav-link {
74
+ transition: all 0.3s ease;
75
+ border-radius: 50px;
76
+ margin: 0 5px;
77
+ padding: 10px 20px;
78
+ color: #6c757d;
79
  }
80
+ .nav-pills .nav-link.active {
81
+ background: linear-gradient(135deg, var(--mint-green) 0%, var(--mint-dark) 100%);
82
+ color: #fff;
83
+ box-shadow: 0 4px 15px rgba(121, 199, 121, 0.3);
84
+ transform: translateY(-2px);
85
+ }
86
+ .nav-pills .nav-link:not(.active):hover {
87
+ background: rgba(152, 255, 152, 0.1);
88
+ color: var(--mint-dark);
89
+ }
90
+ .bg-mint {
91
  background-color: var(--mint-green);
92
  }
93
  .text-mint {
 
129
  <label for="clientPassword" class="form-label">Password</label>
130
  <input type="password" class="form-control" id="clientPassword" required>
131
  </div>
132
+ <div class="d-grid gap-2">
133
+ <button type="submit" class="btn btn-mint">
134
+ <i data-feather="log-in" class="me-2"></i> Login as Client
135
+ </button>
136
+ </div>
137
+ <div class="text-center mt-3">
138
  <a href="client-register.html" class="text-mint text-decoration-none">Register as Client</a>
139
  </div>
140
  </form>
 
150
  <input type="password" class="form-control" id="adminPassword" required>
151
  </div>
152
  <div class="d-grid gap-2">
153
+ <button type="submit" class="btn btn-mint">
154
+ <i data-feather="lock" class="me-2"></i> Login as Admin
155
+ </button>
156
  </div>
157
+ </form>
158
  </div>
159
  </div>
160
  </div>
 
162
  </div>
163
  </div>
164
  </div>
 
165
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
166
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
167
+ <script>
168
  feather.replace();
169
+ // Enhanced form animations with anime.js
 
170
  document.querySelectorAll('.form-control').forEach(input => {
171
  input.addEventListener('focus', function() {
172
+ anime({
173
+ targets: this.parentElement,
174
+ scale: 1.02,
175
+ translateY: -3,
176
+ duration: 300,
177
+ easing: 'easeOutQuad'
178
+ });
179
+ anime({
180
+ targets: this.parentElement.querySelector('label'),
181
+ color: 'var(--mint-dark)',
182
+ duration: 300
183
+ });
184
  });
185
  input.addEventListener('blur', function() {
186
+ anime({
187
+ targets: this.parentElement,
188
+ scale: 1,
189
+ translateY: 0,
190
+ duration: 300,
191
+ easing: 'easeOutQuad'
192
+ });
193
+ anime({
194
+ targets: this.parentElement.querySelector('label'),
195
+ color: '#6c757d',
196
+ duration: 300
197
+ });
198
  });
199
  });
200
+ // Enhanced floating label effect with icons
 
201
  document.querySelectorAll('.form-label').forEach(label => {
202
+ label.style.position = 'relative';
203
+ label.style.paddingLeft = '25px';
204
  label.style.transition = 'all 0.3s ease';
205
+
206
+ const icon = document.createElement('span');
207
+ icon.innerHTML = feather.icons['user'].toSvg({
208
+ width: 16,
209
+ height: 16,
210
+ color: '#6c757d',
211
+ 'stroke-width': 1.5
212
+ });
213
+ icon.style.position = 'absolute';
214
+ icon.style.left = '0';
215
+ icon.style.top = '3px';
216
+ icon.style.transition = 'all 0.3s ease';
217
+ label.prepend(icon);
218
+
219
  label.addEventListener('click', function() {
220
+ anime({
221
+ targets: this,
222
+ translateY: -5,
223
+ color: 'var(--mint-dark)',
224
+ duration: 300
225
+ });
226
+ anime({
227
+ targets: icon,
228
+ color: 'var(--mint-dark)',
229
+ duration: 300
230
+ });
231
  setTimeout(() => {
232
+ anime({
233
+ targets: this,
234
+ translateY: 0,
235
+ color: '#6c757d',
236
+ duration: 300
237
+ });
238
+ anime({
239
+ targets: icon,
240
+ color: '#6c757d',
241
+ duration: 300
242
+ });
243
  }, 300);
244
  });
245
  });
246
+ // Enhanced form submission with anime.js
 
247
  document.getElementById('clientLoginForm').addEventListener('submit', function(e) {
248
  e.preventDefault();
249
+ anime({
250
+ targets: this,
251
+ scale: 0.95,
252
+ opacity: 0.8,
253
+ easing: 'easeInOutQuad',
254
+ duration: 300
255
+ });
256
+
257
+ // Show loading animation
258
+ const submitBtn = this.querySelector('button[type="submit"]');
259
+ submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin me-2"></i> Authenticating...';
260
+ feather.replace();
261
+
262
  setTimeout(() => {
263
+ anime({
264
+ targets: '.auth-card',
265
+ translateY: -20,
266
+ opacity: 0,
267
+ duration: 500,
268
+ complete: function() {
269
+ window.location.href = 'client-dashboard.html';
270
+ }
271
+ });
272
+ }, 1500);
273
  });
274
 
275
  document.getElementById('adminLoginForm').addEventListener('submit', function(e) {
276
  e.preventDefault();
277
+ anime({
278
+ targets: this,
279
+ scale: 0.95,
280
+ opacity: 0.8,
281
+ easing: 'easeInOutQuad',
282
+ duration: 300
283
+ });
284
+
285
+ // Show loading animation
286
+ const submitBtn = this.querySelector('button[type="submit"]');
287
+ submitBtn.innerHTML = '<i data-feather="loader" class="animate-spin me-2"></i> Authenticating...';
288
+ feather.replace();
289
+
290
  setTimeout(() => {
291
+ anime({
292
+ targets: '.auth-card',
293
+ translateY: -20,
294
+ opacity: 0,
295
+ duration: 500,
296
+ complete: function() {
297
+ window.location.href = 'admin-dashboard.html';
298
+ }
299
+ });
300
+ }, 1500);
301
  });
302
+ // Enhanced tab switching animation
 
303
  document.querySelectorAll('.nav-link').forEach(link => {
304
  link.addEventListener('click', function() {
305
+ anime({
306
+ targets: '.auth-card',
307
+ translateY: [0, -10, 0],
308
+ opacity: [1, 0.8, 1],
309
+ duration: 600,
310
+ easing: 'easeInOutQuad'
311
+ });
312
+
313
+ // Add icon animation
314
+ if (this.id === 'client-tab') {
315
+ anime({
316
+ targets: '.auth-card img',
317
+ rotate: '1turn',
318
+ duration: 800,
319
+ easing: 'easeInOutQuad'
320
+ });
321
+ } else {
322
+ anime({
323
+ targets: '.auth-card img',
324
+ scale: [1, 1.1, 1],
325
+ duration: 600,
326
+ easing: 'easeInOutQuad'
327
+ });
328
+ }
329
  });
330
  });
331
+ </script>
332
  </body>
333
  </html>