Hugging Face's logo

Spaces:
samirerty
/
anycoder-2bc90230
Running

App Files Community
samirerty commited on
Commit
816ef7c
·
verified ·
1 Parent(s): 6a27115

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +631 -19
index.html CHANGED
@@ -1,19 +1,631 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fa" dir="rtl">
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>