Hugging Face's logo

Spaces:
samirerty
/
anycoder-2bc90230
Running

App Files Community
samirerty commited on
Commit
9a9b679
·
verified ·
1 Parent(s): 97395f4

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +493 -477
index.html CHANGED
@@ -3,629 +3,645 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Premium Login & Register - Glassmorphism</title>
7
- <!-- Importing Vazirmatn font for Persian typography -->
 
8
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
9
- <!-- Importing Phosphor Icons for modern icons -->
10
- <script src="https://unpkg.com/@phosphor-icons/web"></script>
 
11
 
12
  <style>
13
  :root {
14
- --primary-color: #6366f1; /* Indigo */
15
- --primary-hover: #4f46e5;
16
- --glass-bg: rgba(255, 255, 255, 0.1);
17
- --glass-border: rgba(255, 255, 255, 0.2);
18
- --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
19
- --text-main: #ffffff;
20
- --text-muted: #cbd5e1;
21
- --input-bg: rgba(255, 255, 255, 0.05);
22
- --danger: #ef4444;
23
- --success: #22c55e;
24
- --warning: #eab308;
 
 
 
25
  }
26
 
27
  * {
28
  box-sizing: border-box;
29
  margin: 0;
30
  padding: 0;
31
- font-family: 'Vazirmatn', sans-serif;
32
- -webkit-tap-highlight-color: transparent;
33
  }
34
 
35
  body {
 
 
 
36
  min-height: 100vh;
37
  display: flex;
38
- justify-content: center;
39
  align-items: center;
40
- background: #0f172a;
41
- /* Abstract Background */
42
- background-image:
43
- radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%),
44
- radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%),
45
- radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
46
- overflow: hidden;
47
  position: relative;
48
  }
49
 
50
- /* Decorative blobs for background depth */
51
- .blob {
52
  position: absolute;
53
- border-radius: 50%;
54
- filter: blur(80px);
55
- z-index: 0;
56
- opacity: 0.6;
 
 
 
 
 
 
 
57
  }
58
- .blob-1 { top: -10%; right: -10%; width: 300px; height: 300px; background: #6366f1; }
59
- .blob-2 { bottom: -10%; left: -10%; width: 250px; height: 250px; background: #ec4899; }
60
 
61
- /* Main Container */
62
- .container {
63
- position: relative;
64
- z-index: 1;
65
  width: 100%;
66
- max-width: 420px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  min-height: 600px;
68
- perspective: 1000px;
69
- padding: 20px;
70
- }
71
-
72
- .glass-card {
73
- background: var(--glass-bg);
74
- backdrop-filter: blur(16px);
75
- -webkit-backdrop-filter: blur(16px);
76
- border: 1px solid var(--glass-border);
77
- border-radius: 24px;
78
- box-shadow: var(--glass-shadow);
79
- padding: 2.5rem 2rem;
80
  position: relative;
81
- overflow: hidden;
82
- display: flex;
83
- flex-direction: column;
84
  }
85
 
86
- /* Header */
87
- .app-header {
88
- text-align: center;
89
- margin-bottom: 2rem;
90
- }
91
- .app-header h2 {
92
- color: var(--text-main);
93
- font-weight: 700;
94
- font-size: 1.5rem;
95
- margin-bottom: 0.5rem;
96
- }
97
- .brand-link {
98
- color: var(--text-muted);
99
- font-size: 0.85rem;
100
- text-decoration: none;
101
- transition: color 0.3s;
102
- display: inline-flex;
103
  align-items: center;
104
- gap: 5px;
105
  }
106
- .brand-link:hover {
107
- color: var(--primary-color);
 
 
 
 
 
108
  }
109
 
110
- /* Toggle Switch */
111
- .toggle-container {
112
- display: flex;
113
- background: rgba(0, 0, 0, 0.2);
114
- border-radius: 12px;
115
- padding: 4px;
116
- margin-bottom: 2rem;
117
- position: relative;
118
  }
119
 
120
- .toggle-btn {
 
121
  flex: 1;
122
- background: transparent;
123
- border: none;
124
- color: var(--text-muted);
125
- padding: 10px;
126
- font-size: 0.95rem;
127
- cursor: pointer;
128
- z-index: 2;
129
- transition: color 0.3s;
130
- font-weight: 500;
131
  }
132
 
133
- .toggle-btn.active {
134
- color: #fff;
 
 
 
135
  }
136
 
137
- .toggle-slider {
138
- position: absolute;
139
- top: 4px;
140
- right: 4px; /* RTL logic */
141
- width: calc(50% - 4px);
142
- height: calc(100% - 8px);
143
  background: var(--primary-color);
144
- border-radius: 8px;
145
- transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
146
- z-index: 1;
 
 
 
 
 
147
  }
148
 
149
- /* Forms Wrapper for Sliding */
150
- .forms-wrapper {
151
- display: flex;
152
- width: 200%; /* Two forms side by side */
153
- transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
154
  }
155
 
156
- .form-content {
157
- width: 50%;
158
- padding: 0 5px;
159
- opacity: 1;
160
- transition: opacity 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
161
  }
162
 
163
- /* Input Groups */
164
- .input-group {
165
  position: relative;
166
- margin-bottom: 1.5rem;
 
167
  }
168
 
169
- .input-icon {
170
  position: absolute;
171
- right: 14px;
172
- top: 50%;
173
- transform: translateY(-50%);
174
  color: var(--text-muted);
175
- font-size: 1.2rem;
176
  pointer-events: none;
177
- transition: color 0.3s;
178
  }
179
 
180
  .form-input {
181
  width: 100%;
182
- background: var(--input-bg);
183
- border: 1px solid var(--glass-border);
184
- border-radius: 12px;
185
- padding: 14px 45px 14px 14px; /* Right padding for icon */
 
 
186
  color: var(--text-main);
187
- font-size: 1rem;
188
- outline: none;
189
- transition: all 0.3s;
190
- }
191
-
192
- .form-input:focus {
193
- border-color: var(--primary-color);
194
- background: rgba(255, 255, 255, 0.1);
195
- box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
196
  }
197
 
198
- .form-input:focus + .input-icon {
199
- color: var(--primary-color);
200
  }
201
 
202
- /* Floating Label Logic */
203
- .floating-label {
204
- position: absolute;
205
- right: 45px;
206
- top: 50%;
207
- transform: translateY(-50%);
208
- color: var(--text-muted);
209
- font-size: 0.95rem;
210
- pointer-events: none;
211
- transition: all 0.3s ease;
212
- background: transparent;
213
- padding: 0 5px;
214
  }
215
 
216
- /* Move label up on focus or when valid (not placeholder-shown) */
217
- .form-input:focus ~ .floating-label,
218
- .form-input:not(:placeholder-shown) ~ .floating-label {
219
- top: 0;
220
- right: 15px;
221
- font-size: 0.75rem;
222
  color: var(--primary-color);
223
- background: #0f172a; /* Match card bg roughly to hide line */
224
- border-radius: 4px;
225
- }
226
-
227
- /* Password Toggle */
228
- .password-toggle {
229
- position: absolute;
230
- left: 14px;
231
- top: 50%;
232
- transform: translateY(-50%);
233
- background: none;
234
- border: none;
235
- color: var(--text-muted);
236
- cursor: pointer;
237
- font-size: 1.2rem;
238
- transition: color 0.3s;
239
- }
240
- .password-toggle:hover {
241
- color: var(--text-main);
242
  }
243
 
244
- /* Captcha Placeholder */
245
- .captcha-wrapper {
246
  display: flex;
247
  gap: 10px;
248
- margin-bottom: 1.5rem;
249
  }
250
- .captcha-box {
251
- flex: 1;
252
- background: rgba(0,0,0,0.3);
253
- border: 1px solid var(--glass-border);
254
- border-radius: 12px;
255
  display: flex;
256
  align-items: center;
257
  justify-content: center;
258
- color: var(--text-main);
 
259
  font-family: monospace;
260
- font-size: 1.2rem;
261
- letter-spacing: 3px;
 
 
 
 
 
262
  user-select: none;
 
263
  position: relative;
264
  overflow: hidden;
265
  }
266
- /* Fake captcha lines */
267
- .captcha-box::after {
 
268
  content: '';
269
  position: absolute;
270
  width: 100%;
271
- height: 2px;
272
- background: rgba(255,255,255,0.1);
273
  transform: rotate(-15deg);
274
  }
 
 
 
 
 
 
 
 
 
275
 
276
  /* Buttons */
277
- .btn-primary {
278
  width: 100%;
279
  padding: 14px;
280
- background: var(--primary-color);
281
- color: white;
282
  border: none;
283
- border-radius: 12px;
284
- font-size: 1rem;
 
285
  font-weight: 600;
286
  cursor: pointer;
287
- transition: all 0.3s;
288
- box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
 
 
 
 
 
 
 
 
 
289
  }
290
 
291
  .btn-primary:hover {
292
- background: var(--primary-hover);
293
  transform: translateY(-2px);
294
- box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
295
  }
296
-
297
  .btn-primary:active {
298
  transform: translateY(0);
299
  }
300
 
301
- .social-login {
302
- margin-top: 1.5rem;
303
- text-align: center;
304
- }
305
  .divider {
306
  display: flex;
307
  align-items: center;
 
 
308
  color: var(--text-muted);
309
- margin: 1rem 0;
310
- font-size: 0.8rem;
311
  }
312
- .divider::before, .divider::after {
 
 
313
  content: '';
314
  flex: 1;
315
- height: 1px;
316
- background: var(--glass-border);
317
- margin: 0 10px;
 
 
318
  }
319
- .social-btn {
320
- background: rgba(255, 255, 255, 0.05);
321
- border: 1px solid var(--glass-border);
 
322
  color: var(--text-main);
323
- padding: 10px 20px;
324
- border-radius: 10px;
325
- cursor: pointer;
326
- display: inline-flex;
327
- align-items: center;
328
- gap: 8px;
329
- font-size: 0.9rem;
330
- transition: background 0.3s;
331
  }
332
- .social-btn:hover {
333
- background: rgba(255, 255, 255, 0.15);
 
 
 
 
 
 
 
334
  }
335
 
336
- /* Password Strength Meter */
337
- .strength-meter {
338
- height: 4px;
339
- background: rgba(255,255,255,0.1);
340
- border-radius: 2px;
341
- margin-top: -10px; /* Pull closer to input */
342
- margin-bottom: 1.5rem;
343
- overflow: hidden;
344
- display: flex;
345
  }
346
- .strength-bar {
347
- height: 100%;
348
- width: 0%;
349
- transition: width 0.3s, background-color 0.3s;
 
 
 
 
 
 
350
  }
351
 
352
- /* Toast Notification */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
353
  .toast {
354
  position: fixed;
355
- bottom: 30px;
356
  left: 50%;
357
- transform: translateX(-50%) translateY(100px);
358
- background: rgba(15, 23, 42, 0.9);
359
- color: white;
360
  padding: 12px 24px;
361
  border-radius: 50px;
362
- border: 1px solid var(--glass-border);
363
- box-shadow: 0 10px 30px rgba(0,0,0,0.5);
364
  display: flex;
365
  align-items: center;
366
  gap: 10px;
367
- opacity: 0;
368
- transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
369
- z-index: 100;
370
- backdrop-filter: blur(10px);
371
  }
 
372
  .toast.show {
373
  transform: translateX(-50%) translateY(0);
374
- opacity: 1;
375
  }
376
- .toast-icon {
377
- font-size: 1.2rem;
 
378
  }
379
-
380
- /* Responsive */
381
- @media (max-width: 480px) {
382
- .container {
383
- padding: 10px;
384
- }
385
- .glass-card {
386
- padding: 2rem 1.5rem;
387
- }
388
  }
389
  </style>
390
  </head>
391
  <body>
392
 
393
  <!-- Background Elements -->
394
- <div class="blob blob-1"></div>
395
- <div class="blob blob-2"></div>
396
-
397
- <!-- Main Container -->
398
- <div class="container">
399
- <div class="glass-card">
400
-
401
- <!-- Header -->
402
- <header class="app-header">
403
- <h2>پنل کاربری</h2>
404
- <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="brand-link">
405
- Built with anycoder <i class="ph ph-arrow-up-right"></i>
406
- </a>
407
- </header>
408
-
409
- <!-- Toggle Switch -->
410
- <div class="toggle-container">
411
- <div class="toggle-slider" id="toggleSlider"></div>
412
- <button class="toggle-btn active" id="loginToggle" onclick="switchForm('login')">ورود</button>
413
- <button class="toggle-btn" id="registerToggle" onclick="switchForm('register')">ثبت‌نام</button>
414
- </div>
415
-
416
- <!-- Forms Wrapper -->
417
- <div class="forms-wrapper" id="formsWrapper">
418
-
419
- <!-- LOGIN FORM -->
420
- <form class="form-content" id="loginForm" onsubmit="handleLogin(event)">
421
- <div class="input-group">
422
- <input type="text" id="loginUser" class="form-input" placeholder=" " required>
423
- <i class="ph ph-user input-icon"></i>
424
- <label for="loginUser" class="floating-label">نام کاربری / ایمیل / موبایل</label>
425
- </div>
426
-
427
- <div class="input-group">
428
- <input type="password" id="loginPass" class="form-input" placeholder=" " required>
429
- <i class="ph ph-lock-key input-icon"></i>
430
- <label for="loginPass" class="floating-label">رمز عبور</label>
431
- <button type="button" class="password-toggle" onclick="togglePassword('loginPass', this)">
432
- <i class="ph ph-eye"></i>
433
- </button>
434
- </div>
435
 
436
- <!-- Captcha Placeholder -->
437
- <div class="captcha-wrapper">
438
- <input type="text" class="form-input" placeholder="کد تصویر" style="padding-left: 14px;">
439
- <div class="captcha-box">8A3f</div>
440
- </div>
441
 
442
- <button type="submit" class="btn-primary">ورود به حساب</button>
 
 
 
 
443
 
444
- <div class="social-login">
445
- <div class="divider">یا ورود با</div>
446
- <button type="button" class="social-btn">
447
- <i class="ph ph-google-logo" style="color: #DB4437; font-size: 1.2rem;"></i>
448
- Google
449
- </button>
450
- </div>
451
- </form>
452
-
453
- <!-- REGISTER FORM -->
454
- <form class="form-content" id="registerForm" onsubmit="handleRegister(event)">
455
- <div class="input-group">
456
- <input type="text" id="regUser" class="form-input" placeholder=" " required>
457
- <i class="ph ph-user input-icon"></i>
458
- <label for="regUser" class="floating-label">نام کاربری</label>
459
- </div>
460
 
461
- <div class="input-group">
462
- <input type="email" id="regEmail" class="form-input" placeholder=" " required>
463
- <i class="ph ph-envelope-simple input-icon"></i>
464
- <label for="regEmail" class="floating-label">ایمیل</label>
465
- </div>
 
 
 
 
 
466
 
467
- <div class="input-group">
468
- <input type="password" id="regPass" class="form-input" placeholder=" " oninput="checkStrength(this.value)" required>
469
- <i class="ph ph-lock-key input-icon"></i>
470
- <label for="regPass" class="floating-label">رمز عبور</label>
471
- <button type="button" class="password-toggle" onclick="togglePassword('regPass', this)">
472
- <i class="ph ph-eye"></i>
473
- </button>
474
  </div>
475
-
476
- <!-- Password Strength Indicator -->
477
- <div class="strength-meter">
478
- <div class="strength-bar" id="strengthBar"></div>
 
 
 
 
479
  </div>
480
-
481
- <!-- Captcha Placeholder -->
482
- <div class="captcha-wrapper">
483
- <input type="text" class="form-input" placeholder="کد تصویر" style="padding-left: 14px;">
484
- <div class="captcha-box" style="background: rgba(255,255,255,0.05);">X9k2</div>
 
 
 
 
 
 
 
 
 
485
  </div>
486
-
487
- <button type="submit" class="btn-primary">ثبت‌نام رایگان</button>
488
-
489
- <button type="button" class="btn-primary" style="background: transparent; border: 1px solid var(--glass-border); margin-top: 10px;" onclick="switchForm('login')">
490
- بازگشت به ورود
491
- </button>
492
- </form>
493
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
494
  </div>
495
- </div>
496
-
497
- <!-- Toast Notification -->
498
- <div class="toast" id="toast">
499
- <i class="ph ph-check-circle toast-icon" style="color: var(--success);"></i>
500
- <span id="toastMessage">عملیات موفقیت‌آمیز بود</span>
501
- </div>
502
 
503
  <script>
504
- // DOM Elements
505
- const formsWrapper = document.getElementById('formsWrapper');
506
- const toggleSlider = document.getElementById('toggleSlider');
507
- const loginToggle = document.getElementById('loginToggle');
508
- const registerToggle = document.getElementById('registerToggle');
509
- const strengthBar = document.getElementById('strengthBar');
510
- const toast = document.getElementById('toast');
511
- const toastMessage = document.getElementById('toastMessage');
512
-
513
- // Switch between Login and Register
514
- function switchForm(formType) {
515
- if (formType === 'register') {
516
- // Move slider to left (RTL: negative X moves content left)
517
- formsWrapper.style.transform = 'translateX(-50%)';
518
- toggleSlider.style.transform = 'translateX(-100%)'; // Move button indicator left
519
-
520
- loginToggle.classList.remove('active');
521
- registerToggle.classList.add('active');
522
- } else {
523
- // Reset to right
524
- formsWrapper.style.transform = 'translateX(0)';
525
- toggleSlider.style.transform = 'translateX(0)';
526
-
527
- registerToggle.classList.remove('active');
528
- loginToggle.classList.add('active');
529
- }
530
- }
531
-
532
- // Toggle Password Visibility
533
- function togglePassword(inputId, btn) {
534
- const input = document.getElementById(inputId);
535
- const icon = btn.querySelector('i');
536
-
537
- if (input.type === 'password') {
538
- input.type = 'text';
539
- icon.classList.remove('ph-eye');
540
- icon.classList.add('ph-eye-slash');
541
- } else {
542
- input.type = 'password';
543
- icon.classList.remove('ph-eye-slash');
544
- icon.classList.add('ph-eye');
545
- }
546
- }
547
-
548
- // Password Strength Logic
549
- function checkStrength(password) {
550
- let strength = 0;
551
- if (password.length > 5) strength += 25;
552
- if (password.length > 8) strength += 25;
553
- if (/[A-Z]/.test(password)) strength += 25;
554
- if (/[0-9!@#$%^&*]/.test(password)) strength += 25;
555
-
556
- strengthBar.style.width = strength + '%';
557
-
558
- if (strength <= 25) {
559
- strengthBar.style.backgroundColor = 'var(--danger)';
560
- } else if (strength <= 50) {
561
- strengthBar.style.backgroundColor = 'var(--warning)';
562
- } else if (strength <= 75) {
563
- strengthBar.style.backgroundColor = '#3b82f6'; // Blue
564
- } else {
565
- strengthBar.style.backgroundColor = 'var(--success)';
566
  }
567
- }
568
-
569
- // Show Toast Notification
570
- function showToast(message, type = 'success') {
571
- toastMessage.textContent = message;
572
- const icon = toast.querySelector('.toast-icon');
573
-
574
- if(type === 'success') {
575
- icon.className = 'ph ph-check-circle toast-icon';
576
- icon.style.color = 'var(--success)';
577
- } else {
578
- icon.className = 'ph ph-warning-circle toast-icon';
579
- icon.style.color = 'var(--danger)';
580
- }
581
-
582
- toast.classList.add('show');
583
- setTimeout(() => {
584
- toast.classList.remove('show');
585
- }, 3000);
586
- }
587
 
588
- // Handle Login Submit
589
- function handleLogin(e) {
590
- e.preventDefault();
591
- const btn = e.target.querySelector('button[type="submit"]');
592
- const originalText = btn.textContent;
593
-
594
- // Simulate loading
595
- btn.textContent = 'در حال پردازش...';
596
- btn.style.opacity = '0.7';
597
-
598
- setTimeout(() => {
599
- btn.textContent = originalText;
600
- btn.style.opacity = '1';
601
- showToast('خوش آمدید! ورود موفقیت‌آمیز بود.');
602
- }, 1500);
603
- }
604
-
605
- // Handle Register Submit
606
- function handleRegister(e) {
607
- e.preventDefault();
608
- const pass = document.getElementById('regPass').value;
609
-
610
- if (pass.length < 6) {
611
- showToast('رمز عبور باید حداقل ۶ کاراکتر باشد', 'error');
612
- return;
 
 
 
 
 
 
613
  }
614
 
615
- const btn = e.target.querySelector('button[type="submit"]');
616
- const originalText = btn.textContent;
617
-
618
- btn.textContent = 'در حال ثبت‌نام...';
619
- btn.style.opacity = '0.7';
620
-
621
- setTimeout(() => {
622
- btn.textContent = originalText;
623
- btn.style.opacity = '1';
624
- showToast('حساب کاربری با موفقیت ساخته شد.');
625
- // Switch to login after successful register
626
- setTimeout(() => switchForm('login'), 1000);
627
- }, 1500);
628
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
629
  </script>
630
  </body>
631
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ورود به حساب کاربری | پنل مدیریت</title>
7
+
8
+ <!-- Import Vazirmatn Font for professional Persian typography -->
9
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
10
+
11
+ <!-- Import FontAwesome for Icons -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
 
14
  <style>
15
  :root {
16
+ /* Color Palette */
17
+ --primary-color: #0f172a; /* Dark Navy/Black */
18
+ --primary-hover: #334155;
19
+ --accent-color: #10b981; /* Soft Emerald Green for success/accents */
20
+ --bg-color: #f8fafc;
21
+ --card-bg: #ffffff;
22
+ --text-main: #1e293b;
23
+ --text-muted: #64748b;
24
+ --border-color: #e2e8f0;
25
+ --input-bg: #f1f5f9;
26
+ --shadow-soft: 0 10px 40px -10px rgba(0,0,0,0.08);
27
+ --radius-lg: 24px;
28
+ --radius-md: 12px;
29
+ --transition: all 0.3s ease;
30
  }
31
 
32
  * {
33
  box-sizing: border-box;
34
  margin: 0;
35
  padding: 0;
36
+ outline: none;
 
37
  }
38
 
39
  body {
40
+ font-family: 'Vazirmatn', sans-serif;
41
+ background-color: var(--bg-color);
42
+ color: var(--text-main);
43
  min-height: 100vh;
44
  display: flex;
 
45
  align-items: center;
46
+ justify-content: center;
47
+ overflow-x: hidden;
 
 
 
 
 
48
  position: relative;
49
  }
50
 
51
+ /* Abstract Background Pattern */
52
+ .bg-pattern {
53
  position: absolute;
54
+ top: 0;
55
+ left: 0;
56
+ width: 100%;
57
+ height: 100%;
58
+ z-index: -1;
59
+ background-image:
60
+ radial-gradient(at 0% 0%, hsla(253,16%,7%,0) 0, transparent 50%),
61
+ radial-gradient(at 50% 0%, hsla(225,39%,30%,0) 0, transparent 50%),
62
+ radial-gradient(at 100% 0%, hsla(339,49%,30%,0) 0, transparent 50%);
63
+ background-size: 100% 100%;
64
+ overflow: hidden;
65
  }
 
 
66
 
67
+ .bg-wave {
68
+ position: absolute;
69
+ bottom: 0;
70
+ left: 0;
71
  width: 100%;
72
+ height: 50vh;
73
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23e2e8f0' fill-opacity='0.3' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,224C672,245,768,267,864,261.3C960,256,1056,224,1152,197.3C1248,171,1344,149,1392,138.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
74
+ background-repeat: no-repeat;
75
+ background-size: cover;
76
+ background-position: bottom;
77
+ z-index: -1;
78
+ }
79
+
80
+ /* Main Card Container */
81
+ .login-container {
82
+ display: flex;
83
+ width: 90%;
84
+ max-width: 1000px;
85
+ background: var(--card-bg);
86
+ border-radius: var(--radius-lg);
87
+ box-shadow: var(--shadow-soft);
88
+ overflow: hidden;
89
  min-height: 600px;
 
 
 
 
 
 
 
 
 
 
 
 
90
  position: relative;
91
+ margin: 20px 0;
 
 
92
  }
93
 
94
+ /* Left Side - Visual Panel (Note: In RTL, Left means 'Left' visually, but DOM order might vary. We use Flexbox `row-reverse` or explicit positioning) */
95
+ .visual-panel {
96
+ flex: 1;
97
+ position: relative;
98
+ background-color: #ccc;
99
+ overflow: hidden;
100
+ display: flex;
 
 
 
 
 
 
 
 
 
 
101
  align-items: center;
102
+ justify-content: center;
103
  }
104
+
105
+ /* Using a high-quality architectural/abstract image */
106
+ .visual-panel img {
107
+ width: 100%;
108
+ height: 100%;
109
+ object-fit: cover;
110
+ transition: transform 10s ease;
111
  }
112
 
113
+ /* Subtle zoom effect on hover */
114
+ .visual-panel:hover img {
115
+ transform: scale(1.05);
 
 
 
 
 
116
  }
117
 
118
+ /* Right Side - Form Panel */
119
+ .form-panel {
120
  flex: 1;
121
+ padding: 40px;
122
+ display: flex;
123
+ flex-direction: column;
124
+ justify-content: center;
125
+ background: var(--card-bg);
 
 
 
 
126
  }
127
 
128
+ /* Header Section inside Form */
129
+ .form-header {
130
+ text-align: center; /* Or slightly right-aligned as requested: margin-right */
131
+ margin-bottom: 30px;
132
+ text-align: right;
133
  }
134
 
135
+ .brand-logo {
136
+ width: 60px;
137
+ height: 60px;
 
 
 
138
  background: var(--primary-color);
139
+ color: white;
140
+ border-radius: 16px;
141
+ display: inline-flex;
142
+ align-items: center;
143
+ justify-content: center;
144
+ font-size: 24px;
145
+ margin-bottom: 20px;
146
+ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
147
  }
148
 
149
+ .form-header h1 {
150
+ font-size: 24px;
151
+ font-weight: 700;
152
+ margin-bottom: 8px;
153
+ color: var(--text-main);
154
  }
155
 
156
+ .form-header p {
157
+ font-size: 14px;
158
+ color: var(--text-muted);
159
+ }
160
+
161
+ /* Form Elements */
162
+ .form-group {
163
+ margin-bottom: 20px;
164
+ position: relative;
165
+ }
166
+
167
+ .form-label {
168
+ display: block;
169
+ margin-bottom: 8px;
170
+ font-size: 13px;
171
+ font-weight: 500;
172
+ color: var(--text-main);
173
  }
174
 
175
+ .input-wrapper {
 
176
  position: relative;
177
+ display: flex;
178
+ align-items: center;
179
  }
180
 
181
+ .input-wrapper i {
182
  position: absolute;
183
+ right: 16px; /* RTL Icon positioning */
 
 
184
  color: var(--text-muted);
185
+ font-size: 14px;
186
  pointer-events: none;
187
+ transition: var(--transition);
188
  }
189
 
190
  .form-input {
191
  width: 100%;
192
+ padding: 14px 45px 14px 16px; /* Space for right icon */
193
+ border: 1px solid var(--border-color);
194
+ background-color: var(--input-bg);
195
+ border-radius: var(--radius-md);
196
+ font-family: 'Vazirmatn', sans-serif;
197
+ font-size: 14px;
198
  color: var(--text-main);
199
+ transition: var(--transition);
 
 
 
 
 
 
 
 
200
  }
201
 
202
+ .form-input::placeholder {
203
+ color: #94a3b8;
204
  }
205
 
206
+ .form-input:focus {
207
+ border-color: var(--primary-color);
208
+ background-color: #fff;
209
+ box-shadow: 0 0 0 4px rgba(15, 23, 42, 0.05);
 
 
 
 
 
 
 
 
210
  }
211
 
212
+ .form-input:focus + i {
 
 
 
 
 
213
  color: var(--primary-color);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  }
215
 
216
+ /* Captcha Section */
217
+ .captcha-group {
218
  display: flex;
219
  gap: 10px;
220
+ align-items: center;
221
  }
222
+
223
+ .captcha-code {
 
 
 
224
  display: flex;
225
  align-items: center;
226
  justify-content: center;
227
+ background: #e2e8f0;
228
+ color: #64748b;
229
  font-family: monospace;
230
+ font-size: 18px;
231
+ font-weight: bold;
232
+ letter-spacing: 4px;
233
+ border-radius: var(--radius-md);
234
+ padding: 0 15px;
235
+ height: 48px;
236
+ flex: 1;
237
  user-select: none;
238
+ cursor: pointer;
239
  position: relative;
240
  overflow: hidden;
241
  }
242
+
243
+ /* Decorative lines for captcha to look real */
244
+ .captcha-code::before {
245
  content: '';
246
  position: absolute;
247
  width: 100%;
248
+ height: 1px;
249
+ background: rgba(0,0,0,0.1);
250
  transform: rotate(-15deg);
251
  }
252
+ .captcha-code::after {
253
+ content: '';
254
+ position: absolute;
255
+ width: 100%;
256
+ height: 1px;
257
+ background: rgba(0,0,0,0.1);
258
+ transform: rotate(15deg);
259
+ top: 50%;
260
+ }
261
 
262
  /* Buttons */
263
+ .btn {
264
  width: 100%;
265
  padding: 14px;
 
 
266
  border: none;
267
+ border-radius: var(--radius-md);
268
+ font-family: 'Vazirmatn', sans-serif;
269
+ font-size: 15px;
270
  font-weight: 600;
271
  cursor: pointer;
272
+ transition: var(--transition);
273
+ display: flex;
274
+ align-items: center;
275
+ justify-content: center;
276
+ gap: 10px;
277
+ }
278
+
279
+ .btn-primary {
280
+ background-color: var(--primary-color);
281
+ color: white;
282
+ margin-top: 10px;
283
  }
284
 
285
  .btn-primary:hover {
286
+ background-color: var(--primary-hover);
287
  transform: translateY(-2px);
288
+ box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
289
  }
290
+
291
  .btn-primary:active {
292
  transform: translateY(0);
293
  }
294
 
 
 
 
 
295
  .divider {
296
  display: flex;
297
  align-items: center;
298
+ text-align: center;
299
+ margin: 24px 0;
300
  color: var(--text-muted);
301
+ font-size: 12px;
 
302
  }
303
+
304
+ .divider::before,
305
+ .divider::after {
306
  content: '';
307
  flex: 1;
308
+ border-bottom: 1px solid var(--border-color);
309
+ }
310
+
311
+ .divider span {
312
+ padding: 0 10px;
313
  }
314
+
315
+ .btn-google {
316
+ background-color: white;
317
+ border: 1px solid var(--border-color);
318
  color: var(--text-main);
 
 
 
 
 
 
 
 
319
  }
320
+
321
+ .btn-google:hover {
322
+ background-color: #f8fafc;
323
+ border-color: #cbd5e1;
324
+ }
325
+
326
+ .btn-google img {
327
+ width: 20px;
328
+ height: 20px;
329
  }
330
 
331
+ /* Footer Links */
332
+ .form-footer {
333
+ margin-top: 24px;
334
+ text-align: center;
335
+ font-size: 13px;
336
+ color: var(--text-muted);
 
 
 
337
  }
338
+
339
+ .form-footer a {
340
+ color: var(--primary-color);
341
+ text-decoration: none;
342
+ font-weight: 600;
343
+ margin-right: 4px;
344
+ }
345
+
346
+ .form-footer a:hover {
347
+ text-decoration: underline;
348
  }
349
 
350
+ /* Link to anycoder */
351
+ .built-with {
352
+ position: absolute;
353
+ top: 20px;
354
+ left: 20px; /* RTL: Left side */
355
+ font-size: 12px;
356
+ color: var(--text-muted);
357
+ z-index: 10;
358
+ }
359
+
360
+ .built-with a {
361
+ color: var(--text-muted);
362
+ text-decoration: none;
363
+ transition: color 0.2s;
364
+ }
365
+
366
+ .built-with a:hover {
367
+ color: var(--primary-color);
368
+ }
369
+
370
+ /* Responsive Design */
371
+ @media (max-width: 900px) {
372
+ .visual-panel {
373
+ display: none; /* Hide image on tablet/mobile */
374
+ }
375
+
376
+ .login-container {
377
+ max-width: 500px;
378
+ width: 90%;
379
+ min-height: auto;
380
+ }
381
+
382
+ .form-panel {
383
+ padding: 30px 20px;
384
+ }
385
+ }
386
+
387
+ /* Small mobile adjustments */
388
+ @media (max-width: 480px) {
389
+ .form-header h1 {
390
+ font-size: 20px;
391
+ }
392
+
393
+ .btn {
394
+ padding: 12px;
395
+ }
396
+
397
+ .captcha-group {
398
+ flex-direction: column;
399
+ align-items: stretch;
400
+ }
401
+ }
402
+
403
+ /* Toast Notification styling */
404
  .toast {
405
  position: fixed;
406
+ top: 20px;
407
  left: 50%;
408
+ transform: translateX(-50%) translateY(-100px);
409
+ background: white;
 
410
  padding: 12px 24px;
411
  border-radius: 50px;
412
+ box-shadow: 0 10px 30px rgba(0,0,0,0.15);
 
413
  display: flex;
414
  align-items: center;
415
  gap: 10px;
416
+ z-index: 1000;
417
+ transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
418
+ border: 1px solid var(--border-color);
 
419
  }
420
+
421
  .toast.show {
422
  transform: translateX(-50%) translateY(0);
 
423
  }
424
+
425
+ .toast i {
426
+ color: var(--accent-color);
427
  }
428
+
429
+ .toast span {
430
+ font-size: 14px;
431
+ font-weight: 500;
 
 
 
 
 
432
  }
433
  </style>
434
  </head>
435
  <body>
436
 
437
  <!-- Background Elements -->
438
+ <div class="bg-pattern"></div>
439
+ <div class="bg-wave"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
440
 
441
+ <!-- Built with Link -->
442
+ <div class="built-with">
443
+ Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
444
+ </div>
 
445
 
446
+ <!-- Toast Notification -->
447
+ <div id="toast" class="toast">
448
+ <i class="fa-solid fa-circle-check"></i>
449
+ <span>در حال پردازش اطلاعات...</span>
450
+ </div>
451
 
452
+ <main class="login-container">
453
+
454
+ <!-- Left Column: Image (Visual Panel) -->
455
+ <div class="visual-panel">
456
+ <!-- Abstract architectural image from picsum -->
457
+ <img src="https://picsum.photos/seed/arch_modern/800/1000" alt="تصویر هنری" />
458
+ </div>
 
 
 
 
 
 
 
 
 
459
 
460
+ <!-- Right Column: Login Form (Form Panel) -->
461
+ <div class="form-panel">
462
+
463
+ <header class="form-header">
464
+ <div class="brand-logo">
465
+ <i class="fa-solid fa-cube"></i>
466
+ </div>
467
+ <h1>خوش آمدید</h1>
468
+ <p>لطفاً برای دسترسی به پنل وارد شوید</p>
469
+ </header>
470
 
471
+ <form id="loginForm" novalidate>
472
+ <!-- Username / Email Input -->
473
+ <div class="form-group">
474
+ <label for="username" class="form-label">ایمیل یا شماره موبایل</label>
475
+ <div class="input-wrapper">
476
+ <input type="text" id="username" class="form-input" placeholder="مثلا: name@example.com" required>
477
+ <i class="fa-regular fa-envelope"></i>
478
  </div>
479
+ </div>
480
+
481
+ <!-- Password Input -->
482
+ <div class="form-group">
483
+ <label for="password" class="form-label">رمز عبور</label>
484
+ <div class="input-wrapper">
485
+ <input type="password" id="password" class="form-input" placeholder="رمز عبور خود را وارد کنید" required>
486
+ <i class="fa-solid fa-lock"></i>
487
  </div>
488
+ </div>
489
+
490
+ <!-- Captcha Section -->
491
+ <div class="form-group">
492
+ <label for="captcha" class="form-label">کد امنیتی</label>
493
+ <div class="captcha-group">
494
+ <div class="input-wrapper" style="flex: 2;">
495
+ <input type="text" id="captcha" class="form-input" placeholder="کد را وارد کنید" required>
496
+ <i class="fa-solid fa-shield-halved"></i>
497
+ </div>
498
+ <!-- Visual Captcha Code -->
499
+ <div class="captcha-code" id="captchaDisplay" title="برای تغییر کلیک کنید">
500
+ 8A3F
501
+ </div>
502
  </div>
503
+ </div>
504
+
505
+ <!-- Actions: Remember me & Forgot Password -->
506
+ <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-size: 13px;">
507
+ <label style="display: flex; align-items: center; gap: 8px; color: var(--text-muted); cursor: pointer;">
508
+ <input type="checkbox" style="accent-color: var(--primary-color);">
509
+ مرا به خاطر بسپار
510
+ </label>
511
+ <a href="#" style="color: var(--primary-color); text-decoration: none; font-weight: 500;">فراموشی رمز؟</a>
512
+ </div>
513
+
514
+ <!-- Primary Button -->
515
+ <button type="submit" class="btn btn-primary">
516
+ ورود یا عضویت
517
+ <i class="fa-solid fa-arrow-left" style="font-size: 12px;"></i>
518
+ </button>
519
+
520
+ <!-- Divider -->
521
+ <div class="divider">
522
+ <span>یا ورود با</span>
523
+ </div>
524
+
525
+ <!-- Google Login Button -->
526
+ <button type="button" class="btn btn-google">
527
+ <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google Logo">
528
+ ورود با گوگل
529
+ </button>
530
+
531
+ <!-- Footer -->
532
+ <div class="form-footer">
533
+ حساب کاربری ندارید؟
534
+ <a href="#">ثبت نام کنید</a>
535
+ </div>
536
+ </form>
537
  </div>
538
+ </main>
 
 
 
 
 
 
539
 
540
  <script>
541
+ document.addEventListener('DOMContentLoaded', () => {
542
+ const loginForm = document.getElementById('loginForm');
543
+ const captchaDisplay = document.getElementById('captchaDisplay');
544
+ const captchaInput = document.getElementById('captcha');
545
+ const toast = document.getElementById('toast');
546
+ const toastMsg = toast.querySelector('span');
547
+
548
+ // 1. Captcha Logic
549
+ function generateCaptcha() {
550
+ const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
551
+ let result = '';
552
+ for (let i = 0; i < 4; i++) {
553
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
554
+ }
555
+ return result;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
556
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
557
 
558
+ let currentCaptcha = generateCaptcha();
559
+ captchaDisplay.textContent = currentCaptcha;
560
+
561
+ // Refresh Captcha on click
562
+ captchaDisplay.addEventListener('click', () => {
563
+ currentCaptcha = generateCaptcha();
564
+ captchaDisplay.textContent = currentCaptcha;
565
+ // Animation effect
566
+ captchaDisplay.style.opacity = '0.5';
567
+ setTimeout(() => captchaDisplay.style.opacity = '1', 200);
568
+ });
569
+
570
+ // 2. Toast Notification Helper
571
+ function showToast(message, isError = false) {
572
+ toastMsg.textContent = message;
573
+ const icon = toast.querySelector('i');
574
+
575
+ if(isError) {
576
+ icon.className = 'fa-solid fa-circle-xmark';
577
+ icon.style.color = '#ef4444';
578
+ } else {
579
+ icon.className = 'fa-solid fa-circle-check';
580
+ icon.style.color = '#10b981';
581
+ }
582
+
583
+ toast.classList.add('show');
584
+
585
+ // Hide after 3 seconds
586
+ setTimeout(() => {
587
+ toast.classList.remove('show');
588
+ }, 3000);
589
  }
590
 
591
+ // 3. Form Submission Handler
592
+ loginForm.addEventListener('submit', (e) => {
593
+ e.preventDefault();
594
+
595
+ const username = document.getElementById('username').value.trim();
596
+ const password = document.getElementById('password').value.trim();
597
+ const captchaVal = captchaInput.value.trim().toUpperCase();
598
+
599
+ // Simple Validation
600
+ if (!username || !password) {
601
+ showToast('لطفاً تمام فیلدها را پر کنید', true);
602
+ return;
603
+ }
604
+
605
+ if (captchaVal !== currentCaptcha) {
606
+ showToast('کد امنیتی اشتباه است', true);
607
+ captchaInput.value = '';
608
+ captchaInput.focus();
609
+ // Refresh captcha on error for security simulation
610
+ currentCaptcha = generateCaptcha();
611
+ captchaDisplay.textContent = currentCaptcha;
612
+ return;
613
+ }
614
+
615
+ // Simulate API Call
616
+ const btn = loginForm.querySelector('.btn-primary');
617
+ const originalText = btn.innerHTML;
618
+
619
+ btn.disabled = true;
620
+ btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> در حال پردازش...';
621
+ btn.style.opacity = '0.8';
622
+
623
+ setTimeout(() => {
624
+ showToast('ورود با موفقیت انجام شد');
625
+ btn.disabled = false;
626
+ btn.innerHTML = originalText;
627
+ btn.style.opacity = '1';
628
+
629
+ // Here you would normally redirect
630
+ // window.location.href = '/dashboard';
631
+ }, 2000);
632
+ });
633
+
634
+ // 4. Input Animation Effects (Floating labels optional polish)
635
+ const inputs = document.querySelectorAll('.form-input');
636
+ inputs.forEach(input => {
637
+ input.addEventListener('focus', () => {
638
+ input.parentElement.parentElement.querySelector('.form-label').style.color = 'var(--primary-color)';
639
+ });
640
+ input.addEventListener('blur', () => {
641
+ input.parentElement.parentElement.querySelector('.form-label').style.color = 'var(--text-main)';
642
+ });
643
+ });
644
+ });
645
  </script>
646
  </body>
647
  </html>