Spaces:

joermd
/

mostasharak

Running

App Files Files Community

joermd commited on Jan 9, 2025

Commit

4cdb812

verified ·

1 Parent(s): 440d6ec

Update login.html

Browse files

Files changed (1) hide show

	@@ -0,0 +1,296 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>نظام المصادقة الذكي</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');
+        :root {
+            --primary-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
+            --secondary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
+            --glass-bg: rgba(255, 255, 255, 0.1);
+            --glass-border: rgba(255, 255, 255, 0.2);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Cairo', sans-serif;
+        }
+        body {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #0f172a;
+            background-image:
+                radial-gradient(circle at 15% 50%, #3b82f633 0%, transparent 25%),
+                radial-gradient(circle at 85% 30%, #6366f133 0%, transparent 25%);
+            position: relative;
+            overflow: hidden;
+        }
+        /* Animated Background */
+        .bg-animation {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.5;
+            background:
+                linear-gradient(45deg, transparent 48%, #2563eb 50%, transparent 52%),
+                linear-gradient(-45deg, transparent 48%, #4f46e5 50%, transparent 52%);
+            background-size: 60px 60px;
+            animation: bgMove 30s linear infinite;
+        }
+        @keyframes bgMove {
+            from { background-position: 0 0; }
+            to { background-position: 60px 60px; }
+        }
+        .container {
+            position: relative;
+            width: 100%;
+            max-width: 420px;
+            padding: 2rem;
+            z-index: 1;
+        }
+        .auth-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid var(--glass-border);
+            border-radius: 20px;
+            overflow: hidden;
+            padding: 2rem;
+        }
+        .card-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .card-header h1 {
+            color: white;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            background: var(--primary-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .card-header p {
+            color: #94a3b8;
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+            position: relative;
+        }
+        .form-label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #e2e8f0;
+            font-weight: 500;
+        }
+        .form-input {
+            width: 100%;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid var(--glass-border);
+            border-radius: 12px;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #6366f1;
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
+        }
+        .form-input::placeholder {
+            color: #64748b;
+        }
+        .btn {
+            width: 100%;
+            padding: 1rem;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            color: white;
+            background: var(--primary-gradient);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+        }
+        .btn::after {
+            content: '';
+            position: absolute;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            top: 0;
+            left: -100%;
+            transform: skewX(-15deg);
+            transition: 0.5s;
+        }
+        .btn:hover::after {
+            left: 100%;
+        }
+        .switch-form {
+            text-align: center;
+            margin-top: 1.5rem;
+            color: #94a3b8;
+        }
+        .switch-form a {
+            color: #6366f1;
+            text-decoration: none;
+            font-weight: 500;
+            margin-right: 0.5rem;
+            transition: all 0.3s ease;
+        }
+        .switch-form a:hover {
+            color: #818cf8;
+            text-decoration: underline;
+        }
+        /* Floating Icons Animation */
+        .floating-icons {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+        }
+        .icon {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background: var(--primary-gradient);
+            border-radius: 50%;
+            opacity: 0.2;
+            animation: float 8s infinite;
+        }
+        .icon:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
+        .icon:nth-child(2) { top: 60%; left: 80%; animation-delay: 1s; }
+        .icon:nth-child(3) { top: 40%; left: 40%; animation-delay: 2s; }
+        .icon:nth-child(4) { top: 80%; left: 20%; animation-delay: 3s; }
+        .icon:nth-child(5) { top: 10%; left: 60%; animation-delay: 4s; }
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(180deg); }
+        }
+        .success-message {
+            color: #34d399;
+            background: rgba(52, 211, 153, 0.1);
+            border: 1px solid rgba(52, 211, 153, 0.2);
+            padding: 0.75rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+        .error-message {
+            color: #f87171;
+            background: rgba(248, 113, 113, 0.1);
+            border: 1px solid rgba(248, 113, 113, 0.2);
+            padding: 0.75rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="bg-animation"></div>
+    <div class="floating-icons">
+        <div class="icon"></div>
+        <div class="icon"></div>
+        <div class="icon"></div>
+        <div class="icon"></div>
+        <div class="icon"></div>
+    </div>
+    <!-- صفحة تسجيل الدخول -->
+    <div class="container">
+        <div class="auth-card">
+            <div class="card-header">
+                <h1>تسجيل الدخول</h1>
+                <p>مرحباً بك في نظام المصادقة الذكي</p>
+            </div>
+            <form id="loginForm">
+                <div class="form-group">
+                    <label class="form-label">اسم المستخدم</label>
+                    <input type="text" class="form-input" name="username" placeholder="أدخل اسم المستخدم" required>
+                </div>
+                <div class="form-group">
+                    <label class="form-label">كلمة المرور</label>
+                    <input type="password" class="form-input" name="password" placeholder="أدخل كلمة المرور" required>
+                </div>
+                <div id="loginMessage"></div>
+                <button type="submit" class="btn">تسجيل الدخول</button>
+            </form>
+            <div class="switch-form">
+                <p>ليس لديك حساب؟ <a href="register.html">إنشاء حساب جديد</a></p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6000';
+        document.getElementById('loginForm').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            const messageDiv = document.getElementById('loginMessage');
+            try {
+                const response = await fetch(`${API_URL}/token`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        username: this.username.value,
+                        password: this.password.value
+                    })
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    messageDiv.innerHTML = '<div class="success-message">تم تسجيل الدخول بنجاح!</div>';
+                    localStorage.setItem('token', data.access_token);
+                    setTimeout(() => window.location.href = '/dashboard.html', 1500);
+                } else {
+                    messageDiv.innerHTML = `<div class="error-message">${data.detail || 'خطأ في تسجيل الدخول'}</div>`;
+                }
+            } catch (error) {
+                messageDiv.innerHTML = '<div class="error-message">خطأ في الاتصال بالخادم</div>';
+            }
+        });
+    </script>
+</body>
+</html>