Hugging Face's logo

Spaces:
joermd
/
mostasharak
Running

App Files Community
joermd commited on
Commit
5b2221a
·
verified ·
1 Parent(s): 27ea40c

Update login.html

Browse files
Files changed (1) hide show
  1. login.html +131 -29
login.html CHANGED
@@ -3,23 +3,36 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>نظام تسجيل الدخول</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
8
  <style>
9
  * {
10
  margin: 0;
11
  padding: 0;
12
  box-sizing: border-box;
13
- font-family: 'Tajawal', sans-serif;
14
  }
15
 
16
  body {
17
- background: linear-gradient(135deg, #00416A 0%, #E4E5E6 100%);
18
  height: 100vh;
19
  display: flex;
20
  align-items: center;
21
  justify-content: center;
22
  overflow: hidden;
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  }
24
 
25
  .logo {
@@ -27,14 +40,15 @@
27
  top: 20px;
28
  left: 50%;
29
  transform: translateX(-50%);
30
- width: 150px;
31
  height: auto;
 
32
  }
33
 
34
  .container {
35
  position: relative;
36
  width: 400px;
37
- height: 500px;
38
  perspective: 1000px;
39
  margin-top: 50px;
40
  }
@@ -56,10 +70,11 @@
56
  width: 100%;
57
  height: 100%;
58
  padding: 40px;
59
- background: rgba(255, 255, 255, 0.9);
60
- border-radius: 20px;
61
- box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
62
  backface-visibility: hidden;
 
63
  }
64
 
65
  .register-form {
@@ -68,10 +83,24 @@
68
 
69
  h2 {
70
  text-align: center;
71
- color: #00416A;
72
  margin-bottom: 30px;
73
  font-size: 28px;
74
  font-weight: 700;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
75
  }
76
 
77
  .input-group {
@@ -83,36 +112,53 @@
83
  width: 100%;
84
  padding: 15px;
85
  border: 2px solid #e1e1e1;
86
- border-radius: 10px;
87
  font-size: 16px;
88
  transition: all 0.3s ease;
89
  background: rgba(255, 255, 255, 0.9);
 
90
  }
91
 
92
  input:focus {
93
- border-color: #00416A;
94
- box-shadow: 0 0 10px rgba(0, 65, 106, 0.2);
95
  outline: none;
96
  }
97
 
98
  button {
99
  width: 100%;
100
  padding: 15px;
101
- background: #00416A;
102
  border: none;
103
- border-radius: 10px;
104
  color: white;
105
  font-size: 18px;
106
  font-weight: 500;
107
  cursor: pointer;
108
  transition: all 0.3s ease;
109
  margin-bottom: 20px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  }
111
 
112
  button:hover {
113
- background: #005688;
114
  transform: translateY(-2px);
115
- box-shadow: 0 5px 15px rgba(0, 65, 106, 0.3);
116
  }
117
 
118
  .toggle-form {
@@ -122,17 +168,19 @@
122
 
123
  .toggle-btn {
124
  background: transparent;
125
- color: #00416A;
126
  font-size: 16px;
127
  padding: 10px 20px;
128
- border: 2px solid #00416A;
129
  border-radius: 8px;
130
  cursor: pointer;
131
  transition: all 0.3s ease;
 
 
132
  }
133
 
134
  .toggle-btn:hover {
135
- background: #00416A;
136
  color: white;
137
  }
138
 
@@ -151,19 +199,48 @@
151
  }
152
 
153
  .error {
154
- color: #e74c3c;
155
- background-color: #fde8e8;
 
156
  }
157
 
158
  .success {
159
- color: #2ecc71;
160
- background-color: #e8f8f0;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
161
  }
162
 
163
  /* Animation */
164
  @keyframes fadeIn {
165
- from { opacity: 0; transform: translateY(-20px); }
166
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
167
  }
168
 
169
  .form-box {
@@ -180,23 +257,26 @@
180
  <div class="form-box login-form">
181
  <h2>تسجيل الدخول</h2>
182
  <div class="input-group">
183
- <input type="text" id="loginUsername" placeholder="اسم المستخدم">
184
  </div>
185
  <div class="input-group">
186
  <input type="password" id="loginPassword" placeholder="كلمة المرور">
187
  </div>
188
- <button onclick="login()">دخول</button>
189
  <div id="loginMessage" class="message"></div>
190
  <div class="toggle-form">
191
  <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
192
  </div>
 
 
 
193
  </div>
194
 
195
  <!-- نموذج إنشاء حساب -->
196
  <div class="form-box register-form">
197
  <h2>إنشاء حساب جديد</h2>
198
  <div class="input-group">
199
- <input type="text" id="registerUsername" placeholder="اسم المستخدم">
200
  </div>
201
  <div class="input-group">
202
  <input type="password" id="registerPassword" placeholder="كلمة المرور">
@@ -206,6 +286,9 @@
206
  <div class="toggle-form">
207
  <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button>
208
  </div>
 
 
 
209
  </div>
210
  </div>
211
  </div>
@@ -235,6 +318,11 @@
235
  return;
236
  }
237
 
 
 
 
 
 
238
  try {
239
  const response = await fetch(`${API_URL}/login`, {
240
  method: 'POST',
@@ -268,6 +356,16 @@
268
  return;
269
  }
270
 
 
 
 
 
 
 
 
 
 
 
271
  try {
272
  const response = await fetch(`${API_URL}/register`, {
273
  method: 'POST',
@@ -294,6 +392,10 @@
294
  }
295
  }
296
 
 
 
 
 
297
  // إضافة استجابة للضغط على Enter
298
  document.querySelectorAll('input').forEach(input => {
299
  input.addEventListener('keypress', (e) => {
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>منصة الذكاء الاصطناعي القانوني</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
8
  <style>
9
  * {
10
  margin: 0;
11
  padding: 0;
12
  box-sizing: border-box;
13
+ font-family: 'Cairo', 'Tajawal', sans-serif;
14
  }
15
 
16
  body {
17
+ background: linear-gradient(135deg, #1a237e 0%, #121858 100%);
18
  height: 100vh;
19
  display: flex;
20
  align-items: center;
21
  justify-content: center;
22
  overflow: hidden;
23
+ position: relative;
24
+ }
25
+
26
+ body::before {
27
+ content: '';
28
+ position: absolute;
29
+ top: 0;
30
+ left: 0;
31
+ right: 0;
32
+ bottom: 0;
33
+ background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect fill="%23ffffff" fill-opacity="0.03" width="100" height="100"/><path d="M0 0h100v100H0z" fill="none" stroke="%23ffffff" stroke-opacity="0.05"/></svg>') repeat;
34
+ background-size: 50px 50px;
35
+ pointer-events: none;
36
  }
37
 
38
  .logo {
 
40
  top: 20px;
41
  left: 50%;
42
  transform: translateX(-50%);
43
+ width: 180px;
44
  height: auto;
45
+ filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
46
  }
47
 
48
  .container {
49
  position: relative;
50
  width: 400px;
51
+ height: 550px;
52
  perspective: 1000px;
53
  margin-top: 50px;
54
  }
 
70
  width: 100%;
71
  height: 100%;
72
  padding: 40px;
73
+ background: rgba(255, 255, 255, 0.95);
74
+ border-radius: 15px;
75
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
76
  backface-visibility: hidden;
77
+ border: 1px solid rgba(255, 255, 255, 0.2);
78
  }
79
 
80
  .register-form {
 
83
 
84
  h2 {
85
  text-align: center;
86
+ color: #1a237e;
87
  margin-bottom: 30px;
88
  font-size: 28px;
89
  font-weight: 700;
90
+ position: relative;
91
+ padding-bottom: 15px;
92
+ }
93
+
94
+ h2::after {
95
+ content: '';
96
+ position: absolute;
97
+ bottom: 0;
98
+ left: 50%;
99
+ transform: translateX(-50%);
100
+ width: 60px;
101
+ height: 3px;
102
+ background: linear-gradient(90deg, #1a237e, #3949ab);
103
+ border-radius: 2px;
104
  }
105
 
106
  .input-group {
 
112
  width: 100%;
113
  padding: 15px;
114
  border: 2px solid #e1e1e1;
115
+ border-radius: 8px;
116
  font-size: 16px;
117
  transition: all 0.3s ease;
118
  background: rgba(255, 255, 255, 0.9);
119
+ color: #1a237e;
120
  }
121
 
122
  input:focus {
123
+ border-color: #1a237e;
124
+ box-shadow: 0 0 15px rgba(26, 35, 126, 0.1);
125
  outline: none;
126
  }
127
 
128
  button {
129
  width: 100%;
130
  padding: 15px;
131
+ background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
132
  border: none;
133
+ border-radius: 8px;
134
  color: white;
135
  font-size: 18px;
136
  font-weight: 500;
137
  cursor: pointer;
138
  transition: all 0.3s ease;
139
  margin-bottom: 20px;
140
+ position: relative;
141
+ overflow: hidden;
142
+ }
143
+
144
+ button::before {
145
+ content: '';
146
+ position: absolute;
147
+ top: 0;
148
+ left: -100%;
149
+ width: 100%;
150
+ height: 100%;
151
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
152
+ transition: 0.5s;
153
+ }
154
+
155
+ button:hover::before {
156
+ left: 100%;
157
  }
158
 
159
  button:hover {
 
160
  transform: translateY(-2px);
161
+ box-shadow: 0 5px 15px rgba(26, 35, 126, 0.3);
162
  }
163
 
164
  .toggle-form {
 
168
 
169
  .toggle-btn {
170
  background: transparent;
171
+ color: #1a237e;
172
  font-size: 16px;
173
  padding: 10px 20px;
174
+ border: 2px solid #1a237e;
175
  border-radius: 8px;
176
  cursor: pointer;
177
  transition: all 0.3s ease;
178
+ position: relative;
179
+ overflow: hidden;
180
  }
181
 
182
  .toggle-btn:hover {
183
+ background: #1a237e;
184
  color: white;
185
  }
186
 
 
199
  }
200
 
201
  .error {
202
+ color: #c62828;
203
+ background-color: #ffebee;
204
+ border: 1px solid #ffcdd2;
205
  }
206
 
207
  .success {
208
+ color: #2e7d32;
209
+ background-color: #e8f5e9;
210
+ border: 1px solid #c8e6c9;
211
+ }
212
+
213
+ .form-footer {
214
+ text-align: center;
215
+ margin-top: 20px;
216
+ font-size: 14px;
217
+ color: #666;
218
+ }
219
+
220
+ /* Decorative elements */
221
+ .form-box::before {
222
+ content: '';
223
+ position: absolute;
224
+ top: -5px;
225
+ left: -5px;
226
+ right: -5px;
227
+ bottom: -5px;
228
+ background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%);
229
+ z-index: -1;
230
+ border-radius: 17px;
231
+ opacity: 0.1;
232
  }
233
 
234
  /* Animation */
235
  @keyframes fadeIn {
236
+ from {
237
+ opacity: 0;
238
+ transform: translateY(-20px);
239
+ }
240
+ to {
241
+ opacity: 1;
242
+ transform: translateY(0);
243
+ }
244
  }
245
 
246
  .form-box {
 
257
  <div class="form-box login-form">
258
  <h2>تسجيل الدخول</h2>
259
  <div class="input-group">
260
+ <input type="text" id="loginUsername" placeholder="البريد الإلكتروني">
261
  </div>
262
  <div class="input-group">
263
  <input type="password" id="loginPassword" placeholder="كلمة المرور">
264
  </div>
265
+ <button onclick="login()">دخول للمنصة</button>
266
  <div id="loginMessage" class="message"></div>
267
  <div class="toggle-form">
268
  <button class="toggle-btn" onclick="toggleForm()">إنشاء حساب جديد</button>
269
  </div>
270
+ <div class="form-footer">
271
+ منصة ذكاء اصطناعي قانوني موثوقة ومرخصة
272
+ </div>
273
  </div>
274
 
275
  <!-- نموذج إنشاء حساب -->
276
  <div class="form-box register-form">
277
  <h2>إنشاء حساب جديد</h2>
278
  <div class="input-group">
279
+ <input type="text" id="registerUsername" placeholder="البريد الإلكتروني">
280
  </div>
281
  <div class="input-group">
282
  <input type="password" id="registerPassword" placeholder="كلمة المرور">
 
286
  <div class="toggle-form">
287
  <button class="toggle-btn" onclick="toggleForm()">العودة لتسجيل الدخول</button>
288
  </div>
289
+ <div class="form-footer">
290
+ بالتسجيل، أنت توافق على الشروط والأحكام وسياسة الخصوصية
291
+ </div>
292
  </div>
293
  </div>
294
  </div>
 
318
  return;
319
  }
320
 
321
+ if (!isValidEmail(username)) {
322
+ showMessage('loginMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
323
+ return;
324
+ }
325
+
326
  try {
327
  const response = await fetch(`${API_URL}/login`, {
328
  method: 'POST',
 
356
  return;
357
  }
358
 
359
+ if (!isValidEmail(username)) {
360
+ showMessage('registerMessage', 'الرجاء إدخال بريد إلكتروني صحيح', true);
361
+ return;
362
+ }
363
+
364
+ if (password.length < 8) {
365
+ showMessage('registerMessage', 'كلمة المرور يجب أن تكون 8 أحرف على الأقل', true);
366
+ return;
367
+ }
368
+
369
  try {
370
  const response = await fetch(`${API_URL}/register`, {
371
  method: 'POST',
 
392
  }
393
  }
394
 
395
+ function isValidEmail(email) {
396
+ return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
397
+ }
398
+
399
  // إضافة استجابة للضغط على Enter
400
  document.querySelectorAll('input').forEach(input => {
401
  input.addEventListener('keypress', (e) => {