Spaces:

joermd
/

mostasharak

Running

App Files Files Community

joermd commited on Jan 9

Commit

bc63cac

verified ·

1 Parent(s): 4cdb812

Update reg.html

Browse files

Files changed (1) hide show

reg.html +343 -0

reg.html CHANGED Viewed

	@@ -0,0 +1,343 @@

+<!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=Tajawal:wght@400;500;700&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Tajawal', sans-serif;
+        }
+        body {
+            min-height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background: #0f172a;
+            position: relative;
+            overflow: hidden;
+        }
+        .background-animation {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+        .circle {
+            position: absolute;
+            border-radius: 50%;
+            background: linear-gradient(45deg, #3b82f6, #6366f1);
+            animation: float 15s infinite;
+            opacity: 0.1;
+        }
+        .circle:nth-child(1) {
+            width: 300px;
+            height: 300px;
+            top: -150px;
+            left: -150px;
+            animation-delay: 0s;
+        }
+        .circle:nth-child(2) {
+            width: 400px;
+            height: 400px;
+            bottom: -200px;
+            right: -200px;
+            animation-delay: -5s;
+            background: linear-gradient(45deg, #6366f1, #8b5cf6);
+        }
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0) scale(1);
+            }
+            50% {
+                transform: translateY(-20px) scale(1.1);
+            }
+        }
+        .container {
+            position: relative;
+            width: 100%;
+            max-width: 450px;
+            padding: 2rem;
+            z-index: 1;
+        }
+        .signup-card {
+            background: rgba(255, 255, 255, 0.05);
+            backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 24px;
+            padding: 2.5rem;
+        }
+        .logo {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        .logo h1 {
+            color: white;
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+            background: linear-gradient(45deg, #3b82f6, #6366f1);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .logo p {
+            color: #94a3b8;
+            font-size: 1.1rem;
+        }
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+        .form-label {
+            display: block;
+            color: #e2e8f0;
+            margin-bottom: 0.5rem;
+            font-size: 0.95rem;
+        }
+        .form-input {
+            width: 100%;
+            padding: 1rem;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 12px;
+            color: white;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+        }
+        .form-input:focus {
+            outline: none;
+            border-color: #3b82f6;
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+        }
+        .form-input::placeholder {
+            color: #64748b;
+        }
+        .submit-btn {
+            width: 100%;
+            padding: 1rem;
+            background: linear-gradient(45deg, #3b82f6, #6366f1);
+            border: none;
+            border-radius: 12px;
+            color: white;
+            font-size: 1.1rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 1rem;
+        }
+        .submit-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
+        }
+        .login-link {
+            text-align: center;
+            margin-top: 1.5rem;
+            color: #94a3b8;
+        }
+        .login-link a {
+            color: #3b82f6;
+            text-decoration: none;
+            margin-right: 0.25rem;
+        }
+        .login-link a:hover {
+            text-decoration: underline;
+        }
+        .message {
+            padding: 1rem;
+            border-radius: 8px;
+            margin-bottom: 1rem;
+            display: none;
+        }
+        .success {
+            background: rgba(52, 211, 153, 0.1);
+            border: 1px solid rgba(52, 211, 153, 0.2);
+            color: #34d399;
+        }
+        .error {
+            background: rgba(239, 68, 68, 0.1);
+            border: 1px solid rgba(239, 68, 68, 0.2);
+            color: #ef4444;
+        }
+        .loading {
+            pointer-events: none;
+            opacity: 0.7;
+        }
+        .loading .submit-btn {
+            position: relative;
+            color: transparent;
+        }
+        .loading .submit-btn::after {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 20px;
+            height: 20px;
+            border: 2px solid white;
+            border-radius: 50%;
+            border-top-color: transparent;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            to {
+                transform: translate(-50%, -50%) rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="background-animation">
+        <div class="circle"></div>
+        <div class="circle"></div>
+    </div>
+    <div class="container">
+        <div class="signup-card">
+            <div class="logo">
+                <h1>إنشاء حساب جديد</h1>
+                <p>انضم إلى نظام الذكاء الاصطناعي</p>
+            </div>
+            <div id="message" class="message"></div>
+            <form id="signupForm">
+                <div class="form-group">
+                    <label class="form-label">الاسم الكامل</label>
+                    <input
+                        type="text"
+                        class="form-input"
+                        name="full_name"
+                        placeholder="أدخل اسمك الكامل"
+                        required
+                    >
+                </div>
+                <div class="form-group">
+                    <label class="form-label">البريد الإلكتروني</label>
+                    <input
+                        type="email"
+                        class="form-input"
+                        name="email"
+                        placeholder="أدخل بريدك الإلكتروني"
+                        required
+                    >
+                </div>
+                <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>
+                <button type="submit" class="submit-btn">إنشاء حساب</button>
+            </form>
+            <div class="login-link">
+                <p>لديك حساب بالفعل؟ <a href="login.html">تسجيل الدخول</a></p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6000';
+        const form = document.getElementById('signupForm');
+        const messageDiv = document.getElementById('message');
+        function showMessage(type, text) {
+            messageDiv.className = `message ${type}`;
+            messageDiv.textContent = text;
+            messageDiv.style.display = 'block';
+        }
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            // تفعيل حالة التحميل
+            form.classList.add('loading');
+            const formData = {
+                full_name: form.full_name.value,
+                email: form.email.value,
+                username: form.username.value,
+                password: form.password.value
+            };
+            try {
+                const response = await fetch(`${API_URL}/register`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify(formData)
+                });
+                const data = await response.json();
+                if (response.ok) {
+                    showMessage('success', 'تم إنشاء الحساب بنجاح! جاري تحويلك لصفحة تسجيل الدخول...');
+                    setTimeout(() => {
+                        window.location.href = 'login.html';
+                    }, 2000);
+                } else {
+                    showMessage('error', data.detail || 'حدث خطأ أثناء إنشاء الحساب');
+                }
+            } catch (error) {
+                showMessage('error', 'حدث خطأ في الاتصال بالخادم');
+            } finally {
+                // إلغاء حالة التحميل
+                form.classList.remove('loading');
+            }
+        });
+    </script>
+</body>
+</html>