Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>تسجيل الدخول</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-20px); | |
| } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| } | |
| } | |
| @keyframes gradientBG { | |
| 0% { | |
| background-position: 0% 50%; | |
| } | |
| 50% { | |
| background-position: 100% 50%; | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .pulse { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); | |
| background-size: 400% 400%; | |
| animation: gradientBG 15s ease infinite; | |
| } | |
| .input-effect { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .input-effect:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); | |
| transform: translateY(-2px); | |
| } | |
| .btn-hover { | |
| transition: all 0.3s ease; | |
| transform: perspective(1px) translateZ(0); | |
| } | |
| .btn-hover:hover { | |
| transform: perspective(1px) translateZ(0) scale(1.05); | |
| box-shadow: 0 10px 20px -10px rgba(59, 130, 246, 0.6); | |
| } | |
| .btn-hover:active { | |
| transform: perspective(1px) translateZ(0) scale(0.98); | |
| } | |
| .social-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| transform: translateY(-5px) scale(1.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="gradient-bg min-h-screen flex items-center justify-center p-4 font-sans"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <div class="absolute top-10 left-20 w-32 h-32 rounded-full bg-white opacity-10 floating" style="animation-delay: 0s;"></div> | |
| <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> | |
| <div class="absolute bottom-20 right-20 w-40 h-40 rounded-full bg-white opacity-10 floating" style="animation-delay: 2s;"></div> | |
| <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> | |
| </div> | |
| <div class="relative w-full max-w-md"> | |
| <div class="bg-white bg-opacity-90 backdrop-blur-lg rounded-2xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:shadow-xl"> | |
| <div class="p-8"> | |
| <div class="text-center mb-8"> | |
| <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"> | |
| <i class="fas fa-user text-white text-4xl"></i> | |
| </div> | |
| <h2 class="text-3xl font-bold text-gray-800">تسجيل الدخول</h2> | |
| <p class="text-gray-600 mt-2">أدخل بياناتك للوصول إلى حسابك</p> | |
| </div> | |
| <form id="loginForm" class="space-y-6"> | |
| <div class="relative"> | |
| <input | |
| type="email" | |
| id="email" | |
| 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" | |
| placeholder="البريد الإلكتروني" | |
| required | |
| > | |
| <div class="absolute left-3 top-3 text-gray-400"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <input | |
| type="password" | |
| id="password" | |
| 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" | |
| placeholder="كلمة المرور" | |
| required | |
| > | |
| <div class="absolute left-3 top-3 text-gray-400"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <button type="button" class="absolute left-10 top-3 text-gray-400 hover:text-gray-600" id="togglePassword"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input | |
| type="checkbox" | |
| id="remember" | |
| class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" | |
| > | |
| <label for="remember" class="mr-2 block text-sm text-gray-700"> | |
| تذكرني | |
| </label> | |
| </div> | |
| <a href="#" class="text-sm text-blue-600 hover:text-blue-800 hover:underline transition-colors duration-300"> | |
| نسيت كلمة المرور؟ | |
| </a> | |
| </div> | |
| <button | |
| type="submit" | |
| 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" | |
| > | |
| <span>تسجيل الدخول</span> | |
| <i class="fas fa-sign-in-alt mr-2"></i> | |
| </button> | |
| <div class="relative flex items-center justify-center my-6"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300"></div> | |
| </div> | |
| <div class="relative bg-white px-4 text-sm text-gray-500"> | |
| أو سجل الدخول باستخدام | |
| </div> | |
| </div> | |
| <div class="flex justify-evenly"> | |
| <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"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <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"> | |
| <i class="fab fa-google"></i> | |
| </a> | |
| <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"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </form> | |
| <div class="mt-8 text-center text-sm text-gray-600"> | |
| ليس لديك حساب؟ | |
| <a href="#" class="text-blue-600 hover:text-blue-800 font-medium hover:underline transition-colors duration-300"> | |
| أنشئ حساب جديد | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 bg-opacity-50 px-6 py-4 rounded-b-2xl text-center"> | |
| <p class="text-xs text-gray-600"> | |
| © 2023 جميع الحقوق محفوظة. شروط الاستخدام | سياسة الخصوصية | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // تبديل عرض كلمة المرور | |
| const togglePassword = document.getElementById('togglePassword'); | |
| const password = document.getElementById('password'); | |
| togglePassword.addEventListener('click', function() { | |
| const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| password.setAttribute('type', type); | |
| this.querySelector('i').classList.toggle('fa-eye'); | |
| this.querySelector('i').classList.toggle('fa-eye-slash'); | |
| }); | |
| // تأثيرات عند التركيز على الحقول | |
| const inputs = document.querySelectorAll('input[type="email"], input[type="password"], input[type="text"]'); | |
| inputs.forEach(input => { | |
| input.addEventListener('focus', function() { | |
| this.parentElement.querySelector('i').style.color = '#3b82f6'; | |
| }); | |
| input.addEventListener('blur', function() { | |
| this.parentElement.querySelector('i').style.color = '#9ca3af'; | |
| }); | |
| }); | |
| // تأثير عند إرسال النموذج | |
| const loginForm = document.getElementById('loginForm'); | |
| loginForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const submitBtn = this.querySelector('button[type="submit"]'); | |
| submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> جاري التحقق...'; | |
| submitBtn.disabled = true; | |
| // محاكاة عملية تسجيل الدخول | |
| setTimeout(() => { | |
| submitBtn.innerHTML = '<i class="fas fa-check mr-2"></i> تم التسجيل بنجاح!'; | |
| submitBtn.classList.remove('from-blue-500', 'to-purple-500'); | |
| submitBtn.classList.add('from-green-500', 'to-green-600'); | |
| // إعادة تعيين النموذج بعد 2 ثانية | |
| setTimeout(() => { | |
| loginForm.reset(); | |
| submitBtn.innerHTML = '<span>تسجيل الدخول</span><i class="fas fa-sign-in-alt mr-2"></i>'; | |
| submitBtn.disabled = false; | |
| submitBtn.classList.remove('from-green-500', 'to-green-600'); | |
| submitBtn.classList.add('from-blue-500', 'to-purple-500'); | |
| }, 2000); | |
| }, 2000); | |
| }); | |
| // تأثيرات إضافية للعناصر | |
| const socialIcons = document.querySelectorAll('.social-icon'); | |
| socialIcons.forEach(icon => { | |
| icon.addEventListener('mouseenter', () => { | |
| icon.style.transform = 'translateY(-5px) scale(1.1)'; | |
| }); | |
| icon.addEventListener('mouseleave', () => { | |
| icon.style.transform = 'translateY(0) scale(1)'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yesok201/remove-back" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |