Spaces:
Running
Running
Update login.html
Browse files- login.html +16 -12
login.html
CHANGED
@@ -151,6 +151,7 @@
|
|
151 |
cursor: pointer;
|
152 |
transition: all 0.3s ease;
|
153 |
margin-top: 10px;
|
|
|
154 |
}
|
155 |
|
156 |
button:disabled {
|
@@ -189,6 +190,8 @@
|
|
189 |
border-radius: 8px;
|
190 |
text-align: center;
|
191 |
display: none;
|
|
|
|
|
192 |
}
|
193 |
|
194 |
.message.show {
|
@@ -209,19 +212,21 @@
|
|
209 |
}
|
210 |
|
211 |
.loading-spinner {
|
212 |
-
display:
|
213 |
width: 20px;
|
214 |
height: 20px;
|
215 |
border: 3px solid rgba(255, 255, 255, 0.3);
|
216 |
border-radius: 50%;
|
217 |
-
border-top-color: #
|
218 |
animation: spin 1s ease-in-out infinite;
|
219 |
-
|
220 |
-
|
|
|
|
|
221 |
}
|
222 |
|
223 |
@keyframes spin {
|
224 |
-
to { transform: rotate(360deg); }
|
225 |
}
|
226 |
|
227 |
@keyframes fadeIn {
|
@@ -272,9 +277,9 @@
|
|
272 |
<input type="password" id="loginPassword" required placeholder="أدخل كلمة المرور">
|
273 |
</div>
|
274 |
|
275 |
-
<button type="submit"
|
276 |
تسجيل الدخول
|
277 |
-
<span class="loading-spinner"
|
278 |
</button>
|
279 |
<div id="loginMessage" class="message"></div>
|
280 |
</form>
|
@@ -320,9 +325,9 @@
|
|
320 |
<input type="password" id="registerPassword" required placeholder="8 أحرف على الأقل" minlength="8">
|
321 |
</div>
|
322 |
|
323 |
-
<button type="submit"
|
324 |
إنشاء الحساب
|
325 |
-
<span class="loading-spinner"
|
326 |
</button>
|
327 |
<div id="registerMessage" class="message"></div>
|
328 |
</form>
|
@@ -343,7 +348,7 @@
|
|
343 |
document.addEventListener('DOMContentLoaded', function() {
|
344 |
const token = localStorage.getItem('userToken');
|
345 |
if (token) {
|
346 |
-
window.location.href = '/dashboard';
|
347 |
}
|
348 |
});
|
349 |
|
@@ -372,9 +377,8 @@
|
|
372 |
const spinner = button.querySelector('.loading-spinner');
|
373 |
|
374 |
button.disabled = isLoading;
|
375 |
-
spinner.style.display = isLoading ? '
|
376 |
|
377 |
-
// تعطيل جميع المدخلات أثناء التحميل
|
378 |
form.querySelectorAll('input, select').forEach(input => {
|
379 |
input.disabled = isLoading;
|
380 |
});
|
|
|
151 |
cursor: pointer;
|
152 |
transition: all 0.3s ease;
|
153 |
margin-top: 10px;
|
154 |
+
position: relative;
|
155 |
}
|
156 |
|
157 |
button:disabled {
|
|
|
190 |
border-radius: 8px;
|
191 |
text-align: center;
|
192 |
display: none;
|
193 |
+
font-size: 14px;
|
194 |
+
line-height: 1.5;
|
195 |
}
|
196 |
|
197 |
.message.show {
|
|
|
212 |
}
|
213 |
|
214 |
.loading-spinner {
|
215 |
+
display: none;
|
216 |
width: 20px;
|
217 |
height: 20px;
|
218 |
border: 3px solid rgba(255, 255, 255, 0.3);
|
219 |
border-radius: 50%;
|
220 |
+
border-top-color: #000;
|
221 |
animation: spin 1s ease-in-out infinite;
|
222 |
+
position: absolute;
|
223 |
+
right: 20px;
|
224 |
+
top: 50%;
|
225 |
+
transform: translateY(-50%);
|
226 |
}
|
227 |
|
228 |
@keyframes spin {
|
229 |
+
to { transform: translateY(-50%) rotate(360deg); }
|
230 |
}
|
231 |
|
232 |
@keyframes fadeIn {
|
|
|
277 |
<input type="password" id="loginPassword" required placeholder="أدخل كلمة المرور">
|
278 |
</div>
|
279 |
|
280 |
+
<button type="submit">
|
281 |
تسجيل الدخول
|
282 |
+
<span class="loading-spinner"></span>
|
283 |
</button>
|
284 |
<div id="loginMessage" class="message"></div>
|
285 |
</form>
|
|
|
325 |
<input type="password" id="registerPassword" required placeholder="8 أحرف على الأقل" minlength="8">
|
326 |
</div>
|
327 |
|
328 |
+
<button type="submit">
|
329 |
إنشاء الحساب
|
330 |
+
<span class="loading-spinner"></span>
|
331 |
</button>
|
332 |
<div id="registerMessage" class="message"></div>
|
333 |
</form>
|
|
|
348 |
document.addEventListener('DOMContentLoaded', function() {
|
349 |
const token = localStorage.getItem('userToken');
|
350 |
if (token) {
|
351 |
+
window.location.href = '/dashboard';
|
352 |
}
|
353 |
});
|
354 |
|
|
|
377 |
const spinner = button.querySelector('.loading-spinner');
|
378 |
|
379 |
button.disabled = isLoading;
|
380 |
+
spinner.style.display = isLoading ? 'block' : 'none';
|
381 |
|
|
|
382 |
form.querySelectorAll('input, select').forEach(input => {
|
383 |
input.disabled = isLoading;
|
384 |
});
|