Hugging Face's logo

Spaces:
yesok201
/
remove-back
Running

App Files Community
yesok201 commited on
Commit
1f7f737
·
verified ·
1 Parent(s): 3beef2e

اجعل المسافات بين الأيقونات متساوية - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +201 -305
index.html CHANGED
@@ -3,363 +3,259 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>أداة إزالة الخلفية الاحترافية</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
 
12
- body {
13
- font-family: 'Tajawal', sans-serif;
14
- background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
15
- min-height: 100vh;
16
  }
17
 
18
- .dropzone {
19
- border: 2px dashed #4a5568;
 
 
 
 
 
20
  transition: all 0.3s ease;
 
21
  }
22
 
23
- .dropzone.active {
24
- border-color: #4299e1;
25
- background-color: rgba(66, 153, 225, 0.05);
26
  }
27
 
28
- .result-container {
29
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
30
  transition: all 0.3s ease;
 
31
  }
32
 
33
- .loading-spinner {
34
- animation: spin 1s linear infinite;
 
35
  }
36
 
37
- @keyframes spin {
38
- 0% { transform: rotate(0deg); }
39
- 100% { transform: rotate(360deg); }
40
  }
41
 
42
- .checkerboard {
43
- background-image:
44
- linear-gradient(45deg, #ccc 25%, transparent 25%),
45
- linear-gradient(-45deg, #ccc 25%, transparent 25%),
46
- linear-gradient(45deg, transparent 75%, #ccc 75%),
47
- linear-gradient(-45deg, transparent 75%, #ccc 75%);
48
- background-size: 20px 20px;
49
- background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
50
  }
51
  </style>
52
  </head>
53
- <body class="text-gray-800">
54
- <div class="container mx-auto px-4 py-8">
55
- <!-- Header -->
56
- <header class="text-center mb-12">
57
- <h1 class="text-4xl font-bold text-blue-800 mb-2">أداة إزالة الخلفية</h1>
58
- <p class="text-lg text-gray-600">قم بإزالة خلفية أي صورة بضغطة واحدة</p>
59
- </header>
60
-
61
- <!-- Main Content -->
62
- <div class="flex flex-col lg:flex-row gap-8">
63
- <!-- Upload Section -->
64
- <div class="w-full lg:w-1/2">
65
- <div class="bg-white rounded-xl shadow-lg p-6">
66
- <div
67
- id="dropzone"
68
- class="dropzone rounded-lg p-8 text-center cursor-pointer hover:bg-blue-50 transition-colors"
69
- >
70
- <div class="flex flex-col items-center justify-center space-y-4">
71
- <i class="fas fa-cloud-upload-alt text-5xl text-blue-500"></i>
72
- <h3 class="text-xl font-semibold">اسحب وأسقط الصورة هنا</h3>
73
- <p class="text-gray-500">أو انقر لاختيار صورة</p>
74
- <input
75
- type="file"
76
- id="fileInput"
77
- class="hidden"
78
- accept="image/*"
79
- >
80
- <button
81
- id="uploadBtn"
82
- class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition-colors"
83
- >
84
- اختر صورة
85
- </button>
86
  </div>
87
  </div>
88
 
89
- <div class="mt-6">
90
- <h3 class="font-semibold mb-2">إعدادات المعالجة</h3>
91
- <div class="space-y-4">
92
- <div>
93
- <label class="block text-sm font-medium text-gray-700 mb-1">دقة المعالجة</label>
94
- <select id="qualitySelect" class="w-full p-2 border border-gray-300 rounded-lg">
95
- <option value="high">عالية (أفضل نتيجة)</option>
96
- <option value="medium" selected>متوسطة (موصى بها)</option>
97
- <option value="low">منخفضة (أسرع)</option>
98
- </select>
99
- </div>
100
-
101
- <div>
102
- <label class="block text-sm font-medium text-gray-700 mb-1">تنسيق المخرجات</label>
103
- <select id="formatSelect" class="w-full p-2 border border-gray-300 rounded-lg">
104
- <option value="png">PNG (شفاف)</option>
105
- <option value="jpg" selected>JPG (خلفية بيضاء)</option>
106
- <option value="webp">WebP (موصى به)</option>
107
- </select>
108
- </div>
109
-
110
- <div class="flex items-center">
111
- <input type="checkbox" id="autoDownload" class="mr-2">
112
- <label for="autoDownload" class="text-sm text-gray-700">تنزيل تلقائي بعد المعالجة</label>
113
- </div>
114
  </div>
 
 
 
115
  </div>
116
- </div>
117
- </div>
118
-
119
- <!-- Result Section -->
120
- <div class="w-full lg:w-1/2">
121
- <div id="resultContainer" class="result-container bg-white rounded-xl shadow-lg p-6">
122
- <div id="beforeAfterContainer" class="relative hidden">
123
- <div class="flex justify-between mb-4">
124
- <h3 class="font-semibold">قبل</h3>
125
- <h3 class="font-semibold">بعد</h3>
126
- </div>
127
- <div class="flex space-x-4">
128
- <div class="w-1/2">
129
- <div class="checkerboard rounded-lg overflow-hidden">
130
- <img id="originalImage" class="w-full h-auto" src="" alt="الصورة الأصلية">
131
- </div>
132
- </div>
133
- <div class="w-1/2">
134
- <div class="checkerboard rounded-lg overflow-hidden">
135
- <img id="processedImage" class="w-full h-auto" src="" alt="الصورة المعالجة">
136
- </div>
137
- </div>
138
- </div>
139
-
140
- <div class="mt-6 flex flex-wrap gap-3 justify-center">
141
- <button id="downloadBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center">
142
- <i class="fas fa-download mr-2"></i> تنزيل النتيجة
143
- </button>
144
- <button id="newImageBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg font-medium transition-colors flex items-center">
145
- <i class="fas fa-redo mr-2"></i> صورة جديدة
146
- </button>
147
- <button id="shareBtn" class="bg-blue-100 hover:bg-blue-200 text-blue-800 px-4 py-2 rounded-lg font-medium transition-colors flex items-center">
148
- <i class="fas fa-share-alt mr-2"></i> مشاركة
149
- </button>
150
  </div>
 
 
 
151
  </div>
152
 
153
- <div id="emptyState" class="text-center py-12">
154
- <i class="fas fa-image text-5xl text-gray-300 mb-4"></i>
155
- <h3 class="text-xl font-semibold text-gray-500">لا توجد صورة معالجة</h3>
156
- <p class="text-gray-400 mt-2">قم بتحميل صورة لرؤية النتيجة هنا</p>
157
- </div>
 
 
158
 
159
- <div id="loadingState" class="text-center py-12 hidden">
160
- <div class="loading-spinner inline-block text-5xl text-blue-500 mb-4">
161
- <i class="fas fa-spinner"></i>
162
  </div>
163
- <h3 class="text-xl font-semibold text-gray-700">جاري معالجة الصورة...</h3>
164
- <p class="text-gray-500 mt-2">قد تستغرق العملية بضع ثوانٍ</p>
165
- <div class="w-full bg-gray-200 rounded-full h-2.5 mt-4">
166
- <div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
167
  </div>
168
  </div>
169
- </div>
170
- </div>
171
- </div>
172
-
173
- <!-- Features Section -->
174
- <div class="mt-16">
175
- <h2 class="text-2xl font-bold text-center mb-8 text-blue-800">لماذا تختار أداتنا؟</h2>
176
- <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
177
- <div class="bg-white p-6 rounded-xl shadow-md">
178
- <div class="text-blue-500 text-3xl mb-4">
179
- <i class="fas fa-bolt"></i>
180
- </div>
181
- <h3 class="font-bold text-lg mb-2">سريعة وفعالة</h3>
182
- <p class="text-gray-600">معالجة الصور في ثوانٍ باستخدام خوارزميات الذكاء الاصطناعي المتطورة</p>
183
- </div>
184
-
185
- <div class="bg-white p-6 rounded-xl shadow-md">
186
- <div class="text-blue-500 text-3xl mb-4">
187
- <i class="fas fa-lock"></i>
188
  </div>
189
- <h3 class="font-bold text-lg mb-2">خصوصية مضمونة</h3>
190
- <p class="text-gray-600">صورك لا يتم تخزينها على خوادمنا، تتم المعالجة في متصفحك فقط</p>
191
- </div>
192
 
193
- <div class="bg-white p-6 rounded-xl shadow-md">
194
- <div class="text-blue-500 text-3xl mb-4">
195
- <i class="fas fa-crown"></i>
196
- </div>
197
- <h3 class="font-bold text-lg mb-2">نتائج احترافية</h3>
198
- <p class="text-gray-600">إزالة دقيقة للخلفية مع الحفاظ على أدق التفاصيل في الصورة</p>
199
  </div>
200
  </div>
201
- </div>
202
- </div>
203
-
204
- <!-- Footer -->
205
- <footer class="bg-white py-6 mt-12 border-t">
206
- <div class="container mx-auto px-4 text-center text-gray-500">
207
- <p>© 2023 أداة إزالة الخلفية. جميع الحقوق محفوظة. تطوير: ابوايمن</p>
208
- <div class="flex justify-center space-x-4 mt-4">
209
- <a href="#" class="hover:text-blue-600"><i class="fab fa-twitter"></i></a>
210
- <a href="#" class="hover:text-blue-600"><i class="fab fa-facebook"></i></a>
211
- <a href="#" class="hover:text-blue-600"><i class="fab fa-instagram"></i></a>
212
- <a href="#" class="hover:text-blue-600"><i class="fab fa-telegram"></i></a>
213
  </div>
214
  </div>
215
- </footer>
216
 
217
  <script>
218
  document.addEventListener('DOMContentLoaded', function() {
219
- const dropzone = document.getElementById('dropzone');
220
- const fileInput = document.getElementById('fileInput');
221
- const uploadBtn = document.getElementById('uploadBtn');
222
- const beforeAfterContainer = document.getElementById('beforeAfterContainer');
223
- const emptyState = document.getElementById('emptyState');
224
- const loadingState = document.getElementById('loadingState');
225
- const originalImage = document.getElementById('originalImage');
226
- const processedImage = document.getElementById('processedImage');
227
- const downloadBtn = document.getElementById('downloadBtn');
228
- const newImageBtn = document.getElementById('newImageBtn');
229
- const shareBtn = document.getElementById('shareBtn');
230
- const progressBar = document.getElementById('progressBar');
231
 
232
- // Prevent default drag behaviors
233
- ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
234
- dropzone.addEventListener(eventName, preventDefaults, false);
235
- document.body.addEventListener(eventName, preventDefaults, false);
 
236
  });
237
 
238
- // Highlight drop zone when item is dragged over it
239
- ['dragenter', 'dragover'].forEach(eventName => {
240
- dropzone.addEventListener(eventName, highlight, false);
241
- });
242
-
243
- ['dragleave', 'drop'].forEach(eventName => {
244
- dropzone.addEventListener(eventName, unhighlight, false);
 
 
 
245
  });
246
 
247
- // Handle dropped files
248
- dropzone.addEventListener('drop', handleDrop, false);
249
-
250
- // Handle file selection via button
251
- uploadBtn.addEventListener('click', () => fileInput.click());
252
- fileInput.addEventListener('change', handleFiles);
253
-
254
- // New image button
255
- newImageBtn.addEventListener('click', resetTool);
256
-
257
- function preventDefaults(e) {
258
  e.preventDefault();
259
- e.stopPropagation();
260
- }
261
-
262
- function highlight() {
263
- dropzone.classList.add('active');
264
- }
265
-
266
- function unhighlight() {
267
- dropzone.classList.remove('active');
268
- }
269
-
270
- function handleDrop(e) {
271
- const dt = e.dataTransfer;
272
- const files = dt.files;
273
- handleFiles({ target: { files } });
274
- }
275
-
276
- function handleFiles(e) {
277
- const files = e.target.files;
278
- if (!files.length) return;
279
 
280
- const file = files[0];
281
- if (!file.type.match('image.*')) {
282
- alert('الرجاء اختيار ملف صورة فقط');
283
- return;
284
- }
285
-
286
- processImage(file);
287
- }
288
-
289
- function processImage(file) {
290
- // Show loading state
291
- emptyState.classList.add('hidden');
292
- beforeAfterContainer.classList.add('hidden');
293
- loadingState.classList.remove('hidden');
294
 
295
- // Simulate processing (in a real app, you would use an API like Remove.bg)
296
- simulateProcessing(file);
297
- }
298
-
299
- function simulateProcessing(file) {
300
- // Update progress bar
301
- let progress = 0;
302
- const interval = setInterval(() => {
303
- progress += 5;
304
- progressBar.style.width = `${progress}%`;
305
 
306
- if (progress >= 100) {
307
- clearInterval(interval);
308
- showResult(file);
309
- }
310
- }, 200);
311
-
312
- // Create a preview of the original image
313
- const reader = new FileReader();
314
- reader.onload = function(e) {
315
- originalImage.src = e.target.result;
316
- };
317
- reader.readAsDataURL(file);
318
- }
319
-
320
- function showResult(file) {
321
- // In a real app, this would be the processed image from the API
322
- // For demo, we'll just use the original image with a checkerboard background
323
- const reader = new FileReader();
324
- reader.onload = function(e) {
325
- processedImage.src = e.target.result;
326
-
327
- // Hide loading state and show result
328
- loadingState.classList.add('hidden');
329
- beforeAfterContainer.classList.remove('hidden');
330
-
331
- // Auto download if enabled
332
- if (document.getElementById('autoDownload').checked) {
333
- downloadResult();
334
- }
335
- };
336
- reader.readAsDataURL(file);
337
- }
338
-
339
- function downloadResult() {
340
- // In a real app, this would download the processed image
341
- // For demo, we'll create a download link for the original image
342
- const link = document.createElement('a');
343
- link.href = processedImage.src;
344
- link.download = `صورة_بدون_خلفية.${document.getElementById('formatSelect').value}`;
345
- document.body.appendChild(link);
346
- link.click();
347
- document.body.removeChild(link);
348
- }
349
-
350
- function resetTool() {
351
- fileInput.value = '';
352
- beforeAfterContainer.classList.add('hidden');
353
- emptyState.classList.remove('hidden');
354
- progressBar.style.width = '0%';
355
- }
356
-
357
- // Set up download button
358
- downloadBtn.addEventListener('click', downloadResult);
359
 
360
- // Set up share button
361
- shareBtn.addEventListener('click', () => {
362
- alert('في التطبيق الحقيقي، سيتم مشاركة الصورة المعالجة عبر منصات التواصل الاجتماعي');
 
 
 
 
 
 
 
363
  });
364
  });
365
  </script>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تسجيل الدخول</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @keyframes float {
11
+ 0%, 100% {
12
+ transform: translateY(0);
13
+ }
14
+ 50% {
15
+ transform: translateY(-20px);
16
+ }
17
+ }
18
+
19
+ @keyframes pulse {
20
+ 0%, 100% {
21
+ transform: scale(1);
22
+ }
23
+ 50% {
24
+ transform: scale(1.05);
25
+ }
26
+ }
27
+
28
+ @keyframes gradientBG {
29
+ 0% {
30
+ background-position: 0% 50%;
31
+ }
32
+ 50% {
33
+ background-position: 100% 50%;
34
+ }
35
+ 100% {
36
+ background-position: 0% 50%;
37
+ }
38
+ }
39
+
40
+ .floating {
41
+ animation: float 6s ease-in-out infinite;
42
+ }
43
 
44
+ .pulse {
45
+ animation: pulse 2s ease-in-out infinite;
 
 
46
  }
47
 
48
+ .gradient-bg {
49
+ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
50
+ background-size: 400% 400%;
51
+ animation: gradientBG 15s ease infinite;
52
+ }
53
+
54
+ .input-effect {
55
  transition: all 0.3s ease;
56
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
57
  }
58
 
59
+ .input-effect:focus {
60
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
61
+ transform: translateY(-2px);
62
  }
63
 
64
+ .btn-hover {
 
65
  transition: all 0.3s ease;
66
+ transform: perspective(1px) translateZ(0);
67
  }
68
 
69
+ .btn-hover:hover {
70
+ transform: perspective(1px) translateZ(0) scale(1.05);
71
+ box-shadow: 0 10px 20px -10px rgba(59, 130, 246, 0.6);
72
  }
73
 
74
+ .btn-hover:active {
75
+ transform: perspective(1px) translateZ(0) scale(0.98);
 
76
  }
77
 
78
+ .social-icon {
79
+ transition: all 0.3s ease;
80
+ }
81
+
82
+ .social-icon:hover {
83
+ transform: translateY(-5px) scale(1.1);
 
 
84
  }
85
  </style>
86
  </head>
87
+ <body class="gradient-bg min-h-screen flex items-center justify-center p-4 font-sans">
88
+ <div class="absolute inset-0 overflow-hidden">
89
+ <div class="absolute top-10 left-20 w-32 h-32 rounded-full bg-white opacity-10 floating" style="animation-delay: 0s;"></div>
90
+ <div class="absolute top-1/3 right-1/4 w-24 h-24 rounded-full bg-white opacity-10 floating" style="animation-delay: 1s;"></div>
91
+ <div class="absolute bottom-20 right-20 w-40 h-40 rounded-full bg-white opacity-10 floating" style="animation-delay: 2s;"></div>
92
+ <div class="absolute bottom-1/3 left-1/4 w-16 h-16 rounded-full bg-white opacity-10 floating" style="animation-delay: 3s;"></div>
93
+ </div>
94
+
95
+ <div class="relative w-full max-w-md">
96
+ <div class="bg-white bg-opacity-90 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:shadow-xl">
97
+ <div class="p-8">
98
+ <div class="text-center mb-8">
99
+ <div class="mx-auto w-24 h-24 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center shadow-lg mb-4 pulse">
100
+ <i class="fas fa-user text-white text-4xl"></i>
101
+ </div>
102
+ <h2 class="text-3xl font-bold text-gray-800">تسجيل الدخول</h2>
103
+ <p class="text-gray-600 mt-2">أدخل بياناتك للوصول إلى حسابك</p>
104
+ </div>
105
+
106
+ <form id="loginForm" class="space-y-6">
107
+ <div class="relative">
108
+ <input
109
+ type="email"
110
+ id="email"
111
+ class="input-effect w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 transition-all duration-300 pr-12"
112
+ placeholder="البريد الإلكتروني"
113
+ required
114
+ >
115
+ <div class="absolute left-3 top-3 text-gray-400">
116
+ <i class="fas fa-envelope"></i>
 
 
 
117
  </div>
118
  </div>
119
 
120
+ <div class="relative">
121
+ <input
122
+ type="password"
123
+ id="password"
124
+ class="input-effect w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-blue-500 transition-all duration-300 pr-12"
125
+ placeholder="كلمة المرور"
126
+ required
127
+ >
128
+ <div class="absolute left-3 top-3 text-gray-400">
129
+ <i class="fas fa-lock"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  </div>
131
+ <button type="button" class="absolute left-10 top-3 text-gray-400 hover:text-gray-600" id="togglePassword">
132
+ <i class="fas fa-eye"></i>
133
+ </button>
134
  </div>
135
+
136
+ <div class="flex items-center justify-between">
137
+ <div class="flex items-center">
138
+ <input
139
+ type="checkbox"
140
+ id="remember"
141
+ class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
142
+ >
143
+ <label for="remember" class="mr-2 block text-sm text-gray-700">
144
+ تذكرني
145
+ </label>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
+ <a href="#" class="text-sm text-blue-600 hover:text-blue-800 hover:underline transition-colors duration-300">
148
+ نسيت كلمة المرور؟
149
+ </a>
150
  </div>
151
 
152
+ <button
153
+ type="submit"
154
+ class="btn-hover w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center"
155
+ >
156
+ <span>تسجيل الدخول</span>
157
+ <i class="fas fa-sign-in-alt mr-2"></i>
158
+ </button>
159
 
160
+ <div class="relative flex items-center justify-center my-6">
161
+ <div class="absolute inset-0 flex items-center">
162
+ <div class="w-full border-t border-gray-300"></div>
163
  </div>
164
+ <div class="relative bg-white px-4 text-sm text-gray-500">
165
+ أو سجل الدخول باستخدام
 
 
166
  </div>
167
  </div>
168
+
169
+ <div class="flex justify-evenly">
170
+ <a href="#" class="social-icon w-12 h-12 rounded-full bg-blue-600 text-white flex items-center justify-center hover:bg-blue-700">
171
+ <i class="fab fa-facebook-f"></i>
172
+ </a>
173
+ <a href="#" class="social-icon w-12 h-12 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-700">
174
+ <i class="fab fa-google"></i>
175
+ </a>
176
+ <a href="#" class="social-icon w-12 h-12 rounded-full bg-blue-400 text-white flex items-center justify-center hover:bg-blue-500">
177
+ <i class="fab fa-twitter"></i>
178
+ </a>
 
 
 
 
 
 
 
 
179
  </div>
180
+ </form>
 
 
181
 
182
+ <div class="mt-8 text-center text-sm text-gray-600">
183
+ ليس لديك حساب؟
184
+ <a href="#" class="text-blue-600 hover:text-blue-800 font-medium hover:underline transition-colors duration-300">
185
+ أنشئ حساب جديد
186
+ </a>
 
187
  </div>
188
  </div>
189
+
190
+ <div class="bg-gray-50 bg-opacity-50 px-6 py-4 rounded-b-2xl text-center">
191
+ <p class="text-xs text-gray-600">
192
+ © 2023 جميع الحقوق محفوظة. شروط الاستخدام | سياسة الخصوصية
193
+ </p>
 
 
 
 
 
 
 
194
  </div>
195
  </div>
196
+ </div>
197
 
198
  <script>
199
  document.addEventListener('DOMContentLoaded', function() {
200
+ // تبديل عرض كلمة المرور
201
+ const togglePassword = document.getElementById('togglePassword');
202
+ const password = document.getElementById('password');
 
 
 
 
 
 
 
 
 
203
 
204
+ togglePassword.addEventListener('click', function() {
205
+ const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
206
+ password.setAttribute('type', type);
207
+ this.querySelector('i').classList.toggle('fa-eye');
208
+ this.querySelector('i').classList.toggle('fa-eye-slash');
209
  });
210
 
211
+ // تأثيرات عند التركيز على الحقول
212
+ const inputs = document.querySelectorAll('input[type="email"], input[type="password"], input[type="text"]');
213
+ inputs.forEach(input => {
214
+ input.addEventListener('focus', function() {
215
+ this.parentElement.querySelector('i').style.color = '#3b82f6';
216
+ });
217
+
218
+ input.addEventListener('blur', function() {
219
+ this.parentElement.querySelector('i').style.color = '#9ca3af';
220
+ });
221
  });
222
 
223
+ // تأثير عند إرسال النموذج
224
+ const loginForm = document.getElementById('loginForm');
225
+ loginForm.addEventListener('submit', function(e) {
 
 
 
 
 
 
 
 
226
  e.preventDefault();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
227
 
228
+ const submitBtn = this.querySelector('button[type="submit"]');
229
+ submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> جاري التحقق...';
230
+ submitBtn.disabled = true;
 
 
 
 
 
 
 
 
 
 
 
231
 
232
+ // محاكاة عملية تسجيل الدخول
233
+ setTimeout(() => {
234
+ submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i> تم التسجيل بنجاح!';
235
+ submitBtn.classList.remove('from-blue-500', 'to-purple-500');
236
+ submitBtn.classList.add('from-green-500', 'to-green-600');
 
 
 
 
 
237
 
238
+ // إعادة تعيين النموذج بعد 2 ثانية
239
+ setTimeout(() => {
240
+ loginForm.reset();
241
+ submitBtn.innerHTML = '<span>تسجيل الدخول</span><i class="fas fa-sign-in-alt mr-2"></i>';
242
+ submitBtn.disabled = false;
243
+ submitBtn.classList.remove('from-green-500', 'to-green-600');
244
+ submitBtn.classList.add('from-blue-500', 'to-purple-500');
245
+ }, 2000);
246
+ }, 2000);
247
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
248
 
249
+ // تأثيرات إضافية للعناصر
250
+ const socialIcons = document.querySelectorAll('.social-icon');
251
+ socialIcons.forEach(icon => {
252
+ icon.addEventListener('mouseenter', () => {
253
+ icon.style.transform = 'translateY(-5px) scale(1.1)';
254
+ });
255
+
256
+ icon.addEventListener('mouseleave', () => {
257
+ icon.style.transform = 'translateY(0) scale(1)';
258
+ });
259
  });
260
  });
261
  </script>