Hugging Face's logo

Spaces:
joermd
/
mostasharak
Running

App Files Community
joermd commited on
Commit
5fe1171
ยท
verified ยท
1 Parent(s): 1d421fe

Update login.html

Browse files
Files changed (1) hide show
  1. login.html +76 -235
login.html CHANGED
@@ -3,18 +3,18 @@
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', sans-serif;
14
  }
15
 
16
  body {
17
- background: #f5f5f5 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+CiAgPHBhdGggZD0iTTAgMGg2MHY2MEgweiIgZmlsbD0ibm9uZSIvPgogIDxwYXRoIGQ9Ik0zMCAzMG0tMjggMGEyOCAyOCAwIDEgMCA1NiAwYTI4IDI4IDAgMSAwLTU2IDB6IiBzdHJva2U9InJnYmEoMjAwLCAxNjAsIDMzLCAwLjEpIiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==') repeat;
18
  min-height: 100vh;
19
  display: flex;
20
  align-items: center;
@@ -29,8 +29,8 @@
29
  top: 0;
30
  left: 0;
31
  right: 0;
32
- height: 40vh;
33
- background: linear-gradient(135deg, #C8A165 0%, #8B6B3D 100%);
34
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
35
  z-index: 0;
36
  }
@@ -40,25 +40,37 @@
40
  top: 40px;
41
  left: 50%;
42
  transform: translateX(-50%);
43
- width: 150px;
44
- height: 150px;
45
- background: #FFF;
46
- border-radius: 50%;
47
- padding: 10px;
48
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
49
  display: flex;
50
  align-items: center;
51
  justify-content: center;
52
  z-index: 2;
53
- border: 3px solid #C8A165;
 
 
 
 
 
 
 
 
 
 
 
 
54
  }
55
 
56
  .container {
57
  position: relative;
58
  width: 400px;
59
- min-height: 600px;
60
  perspective: 1000px;
61
- margin-top: 100px;
62
  z-index: 1;
63
  }
64
 
@@ -80,13 +92,10 @@
80
  height: 100%;
81
  padding: 40px;
82
  background: white;
83
- border-radius: 15px;
84
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
85
  backface-visibility: hidden;
86
- border: 2px solid #C8A165;
87
- background-image: linear-gradient(45deg, rgba(200, 161, 101, 0.03) 25%, transparent 25%),
88
- linear-gradient(-45deg, rgba(200, 161, 101, 0.03) 25%, transparent 25%);
89
- background-size: 20px 20px;
90
  }
91
 
92
  .register-form {
@@ -95,7 +104,7 @@
95
 
96
  h2 {
97
  text-align: center;
98
- color: #644B2A;
99
  margin-bottom: 30px;
100
  font-size: 28px;
101
  font-weight: 700;
@@ -111,7 +120,7 @@
111
  transform: translateX(-50%);
112
  width: 60px;
113
  height: 3px;
114
- background: linear-gradient(90deg, #C8A165, #8B6B3D);
115
  border-radius: 2px;
116
  }
117
 
@@ -124,25 +133,26 @@
124
  width: 100%;
125
  padding: 15px 20px;
126
  border: 2px solid #E8E8E8;
127
- border-radius: 8px;
128
  font-size: 16px;
129
  transition: all 0.3s ease;
130
- background: #FFFFFF;
131
  color: #333;
132
  }
133
 
134
  input:focus {
135
- border-color: #C8A165;
136
- box-shadow: 0 0 15px rgba(200, 161, 101, 0.1);
 
137
  outline: none;
138
  }
139
 
140
  button {
141
  width: 100%;
142
  padding: 15px;
143
- background: linear-gradient(135deg, #C8A165 0%, #8B6B3D 100%);
144
  border: none;
145
- border-radius: 8px;
146
  color: white;
147
  font-size: 18px;
148
  font-weight: 600;
@@ -155,238 +165,69 @@
155
 
156
  button:hover {
157
  transform: translateY(-2px);
158
- box-shadow: 0 5px 15px rgba(200, 161, 101, 0.3);
 
159
  }
160
 
161
  .toggle-btn {
162
  background: transparent;
163
- color: #8B6B3D;
164
- border: 2px solid #C8A165;
165
  font-weight: 500;
 
166
  }
167
 
168
  .toggle-btn:hover {
169
- background: #C8A165;
170
  color: white;
171
  }
172
 
173
- .message {
174
- margin-top: 15px;
175
- text-align: center;
176
- padding: 12px;
177
- border-radius: 8px;
178
- font-size: 14px;
179
- opacity: 0;
180
- transition: opacity 0.3s ease;
181
- }
182
-
183
- .message.show {
184
- opacity: 1;
185
- }
186
-
187
- .error {
188
- color: #D32F2F;
189
- background-color: #FFEBEE;
190
- border: 1px solid #FFCDD2;
191
- }
192
-
193
- .success {
194
- color: #388E3C;
195
- background-color: #E8F5E9;
196
- border: 1px solid #C8E6C9;
197
- }
198
-
199
- .form-footer {
200
- text-align: center;
201
- margin-top: 25px;
202
- font-size: 15px;
203
- color: #644B2A;
204
- padding: 15px;
205
- border-top: 1px solid rgba(200, 161, 101, 0.2);
206
- }
207
-
208
- .terms {
209
- font-size: 13px;
210
- color: #666;
211
- text-align: center;
212
- margin-top: 15px;
213
- line-height: 1.6;
214
- }
215
-
216
- @media (max-width: 480px) {
217
- .container {
218
- width: 100%;
219
- max-width: 380px;
220
  }
221
-
222
- .form-box {
223
- padding: 30px 20px;
224
  }
225
-
226
- h2 {
227
- font-size: 24px;
228
  }
229
  }
230
 
231
- .egyptian-pattern {
 
 
 
 
232
  position: absolute;
233
- width: 100%;
234
- height: 20px;
235
- background-image: repeating-linear-gradient(45deg,
236
- rgba(200, 161, 101, 0.1) 0px,
237
- rgba(200, 161, 101, 0.1) 2px,
238
- transparent 2px,
239
- transparent 4px);
240
  }
241
 
242
- .egyptian-pattern-top {
243
- top: 0;
 
 
 
244
  }
245
 
246
- .egyptian-pattern-bottom {
247
- bottom: 0;
 
 
 
248
  }
249
  </style>
250
  </head>
251
  <body>
252
  <div class="logo-container">
253
- <!-- ูŠู…ูƒู†ูƒ ุชุบูŠูŠุฑ ุงู„ุดุนุงุฑ ู‡ู†ุง -->
254
- <img src="https://ufastpro.com/wp-content/uploads/2024/11/ุชุตู…ูŠู…-ุจุฏูˆู†-ุนู†ูˆุงู†-3.png" alt="ุดุนุงุฑ ู…ู†ุตุฉ ู…ุตุฑ ุงู„ู‚ุงู†ูˆู†ูŠุฉ" class="logo">
255
  </div>
256
 
257
- <div class="container">
258
- <div class="forms-container">
259
- <div class="form-box login-form">
260
- <div class="egyptian-pattern egyptian-pattern-top"></div>
261
- <h2>ู…ุฑุญุจุงู‹ ุจูƒ ููŠ ู…ู†ุตุฉ ู…ุตุฑ ุงู„ู‚ุงู†ูˆู†ูŠุฉ</h2>
262
- <div class="input-group">
263
- <input type="text" id="loginUsername" placeholder="ุงู„ุจุฑูŠุฏ ุงู„ุฅู„ูƒุชุฑูˆู†ูŠ">
264
- </div>
265
- <div class="input-group">
266
- <input type="password" id="loginPassword" placeholder="ูƒู„ู…ุฉ ุงู„ู…ุฑูˆุฑ">
267
- </div>
268
- <button onclick="login()">ุชุณุฌูŠู„ ุงู„ุฏุฎูˆู„</button>
269
- <div id="loginMessage" class="message"></div>
270
- <div class="toggle-form">
271
- <button class="toggle-btn" onclick="toggleForm()">ุฅู†ุดุงุก ุญุณุงุจ ุฌุฏูŠุฏ</button>
272
- </div>
273
- <div class="form-footer">
274
- ู…ู†ุตุฉ ู…ุตุฑ ุงู„ู‚ุงู†ูˆู†ูŠุฉ ู„ู„ุฐูƒุงุก ุงู„ุงุตุทู†ุงุนูŠ - ู…ุฑุฎุตุฉ ูˆู…ุนุชู…ุฏุฉ
275
- </div>
276
- <div class="egyptian-pattern egyptian-pattern-bottom"></div>
277
- </div>
278
-
279
- <div class="form-box register-form">
280
- <div class="egyptian-pattern egyptian-pattern-top"></div>
281
- <h2>ุงู†ุถู… ุฅู„ู‰ ู…ู†ุตุฉ ู…ุตุฑ ุงู„ู‚ุงู†ูˆู†ูŠุฉ</h2>
282
- <div class="input-group">
283
- <input type="text" id="registerUsername" placeholder="ุงู„ุจุฑูŠุฏ ุงู„ุฅู„ูƒุชุฑูˆู†ูŠ">
284
- </div>
285
- <div class="input-group">
286
- <input type="password" id="registerPassword" placeholder="ูƒู„ู…ุฉ ุงู„ู…ุฑูˆุฑ">
287
- </div>
288
- <button onclick="register()">ุฅู†ุดุงุก ุงู„ุญุณุงุจ</button>
289
- <div id="registerMessage" class="message"></div>
290
- <div class="toggle-form">
291
- <button class="toggle-btn" onclick="toggleForm()">ุงู„ุนูˆุฏุฉ ู„ุชุณุฌูŠู„ ุงู„ุฏุฎูˆู„</button>
292
- </div>
293
- <div class="terms">
294
- ุจุงู„ุชุณุฌูŠู„ุŒ ุฃู†ุช ุชูˆุงูู‚ ุนู„ู‰ ุงู„ุดุฑูˆุท ูˆุงู„ุฃุญูƒุงู… ูˆุณูŠุงุณุฉ ุงู„ุฎุตูˆุตูŠุฉ ุงู„ุฎุงุตุฉ ุจู…ู†ุตุฉ ู…ุตุฑ ุงู„ู‚ุงู†ูˆู†ูŠุฉ
295
- </div>
296
- <div class="egyptian-pattern egyptian-pattern-bottom"></div>
297
- </div>
298
- </div>
299
- </div>
300
-
301
- <script>
302
- const API_URL = 'https://j8fp9mu44k547j-7777.proxy.runpod.net/proxy/6500/api';
303
-
304
- function toggleForm() {
305
- document.querySelector('.forms-container').classList.toggle('flipped');
306
- }
307
-
308
- function showMessage(elementId, message, isError = false) {
309
- const element = document.getElementById(elementId);
310
- element.textContent = message;
311
- element.className = `message ${isError ? 'error' : 'success'} show`;
312
- setTimeout(() => {
313
- element.className = 'message';
314
- }, 3000);
315
- }
316
-
317
- async function login() {
318
- const username = document.getElementById('loginUsername').value;
319
- const password = document.getElementById('loginPassword').value;
320
-
321
- if (!username || !password) {
322
- showMessage('loginMessage', 'ุจุฑุฌุงุก ุฅุฏุฎุงู„ ุฌู…ูŠุน ุงู„ุจูŠุงู†ุงุช ุงู„ู…ุทู„ูˆุจุฉ', true);
323
- return;
324
- }
325
-
326
- if (!isValidEmail(username)) {
327
- showMessage('loginMessage', 'ุจุฑุฌุงุก ุฅุฏุฎุงู„ ุจุฑูŠุฏ ุฅู„ูƒุชุฑูˆู†ูŠ ุตุญูŠุญ', true);
328
- return;
329
- }
330
-
331
- try {
332
- const response = await fetch(`${API_URL}/login`, {
333
- method: 'POST',
334
- headers: {
335
- 'Content-Type': 'application/json'
336
- },
337
- body: JSON.stringify({ username, password })
338
- });
339
-
340
- const data = await response.json();
341
-
342
- if (response.ok) {
343
- showMessage('loginMessage', 'ุชู… ุชุณุฌูŠู„ ุงู„ุฏุฎูˆู„ ุจู†ุฌุงุญ');
344
- setTimeout(() => {
345
- window.location.href = data.redirect_url;
346
- }, 1000);
347
- } else {
348
- showMessage('loginMessage', data.detail, true);
349
- }
350
- } catch (error) {
351
- showMessage('loginMessage', 'ุญุฏุซ ุฎุทุฃ ููŠ ุงู„ุงุชุตุงู„', true);
352
- }
353
- }
354
-
355
- async function register() {
356
- const username = document.getElementById('registerUsername').value;
357
- const password = document.getElementById('registerPassword').value;
358
-
359
- if (!username || !password) {
360
- showMessage('registerMessage', 'ุจุฑุฌุงุก ุฅุฏุฎุงู„ ุฌู…ูŠุน ุงู„ุจูŠุงู†ุงุช ุงู„ู…ุทู„ูˆุจุฉ', true);
361
- return;
362
- }
363
-
364
- if (!isValidEmail(username)) {
365
- showMessage('registerMessage', 'ุจุฑุฌุงุก ุฅุฏุฎุงู„ ุจุฑูŠุฏ ุฅู„ูƒุชุฑูˆู†ูŠ ุตุญูŠุญ', true);
366
- return;
367
- }
368
-
369
- if (password.length < 8) {
370
- showMessage('registerMessage', 'ูƒู„ู…ุฉ ุงู„ู…ุฑูˆุฑ ูŠุฌุจ ุฃู† ุชูƒูˆู† 8 ุฃุญุฑู ุนู„ู‰ ุงู„ุฃู‚ู„', true);
371
- return;
372
- }
373
-
374
- try {
375
- const response = await fetch(`${API_URL}/register`, {
376
- method: 'POST',
377
- headers: {
378
- 'Content-Type': 'application/json'
379
- },
380
- body: JSON.stringify({ username, password })
381
- });
382
-
383
- const data = await response.json();
384
-
385
- if (response.ok) {
386
- showMessage('registerMessage', 'ุชู… ุฅู†ุดุงุก ุงู„ุญุณุงุจ ุจู†ุฌุงุญ');
387
- document.getElementById('registerUsername').value = '';
388
- document.getElementById('registerPassword').value = '';
389
- setTimeout(() => {
390
- toggleForm();
391
- }, 1500);
392
- } else {
 
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: #f5f5f5;
18
  min-height: 100vh;
19
  display: flex;
20
  align-items: center;
 
29
  top: 0;
30
  left: 0;
31
  right: 0;
32
+ height: 45vh;
33
+ background: linear-gradient(135deg, #000 0%, #333 100%);
34
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
35
  z-index: 0;
36
  }
 
40
  top: 40px;
41
  left: 50%;
42
  transform: translateX(-50%);
43
+ width: 180px;
44
+ height: 180px;
45
+ background: white;
46
+ border-radius: 20px;
47
+ padding: 15px;
48
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
49
  display: flex;
50
  align-items: center;
51
  justify-content: center;
52
  z-index: 2;
53
+ overflow: hidden;
54
+ }
55
+
56
+ .logo {
57
+ width: 100%;
58
+ height: 100%;
59
+ object-fit: contain;
60
+ border-radius: 15px;
61
+ transition: transform 0.3s ease;
62
+ }
63
+
64
+ .logo:hover {
65
+ transform: scale(1.05);
66
  }
67
 
68
  .container {
69
  position: relative;
70
  width: 400px;
71
+ min-height: 580px;
72
  perspective: 1000px;
73
+ margin-top: 120px;
74
  z-index: 1;
75
  }
76
 
 
92
  height: 100%;
93
  padding: 40px;
94
  background: white;
95
+ border-radius: 20px;
96
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
97
  backface-visibility: hidden;
98
+ border: 1px solid rgba(0, 0, 0, 0.1);
 
 
 
99
  }
100
 
101
  .register-form {
 
104
 
105
  h2 {
106
  text-align: center;
107
+ color: #000;
108
  margin-bottom: 30px;
109
  font-size: 28px;
110
  font-weight: 700;
 
120
  transform: translateX(-50%);
121
  width: 60px;
122
  height: 3px;
123
+ background: linear-gradient(90deg, #000, #333);
124
  border-radius: 2px;
125
  }
126
 
 
133
  width: 100%;
134
  padding: 15px 20px;
135
  border: 2px solid #E8E8E8;
136
+ border-radius: 12px;
137
  font-size: 16px;
138
  transition: all 0.3s ease;
139
+ background: #F8F8F8;
140
  color: #333;
141
  }
142
 
143
  input:focus {
144
+ border-color: #000;
145
+ background: white;
146
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
147
  outline: none;
148
  }
149
 
150
  button {
151
  width: 100%;
152
  padding: 15px;
153
+ background: linear-gradient(135deg, #000 0%, #333 100%);
154
  border: none;
155
+ border-radius: 12px;
156
  color: white;
157
  font-size: 18px;
158
  font-weight: 600;
 
165
 
166
  button:hover {
167
  transform: translateY(-2px);
168
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
169
+ background: linear-gradient(135deg, #333 0%, #000 100%);
170
  }
171
 
172
  .toggle-btn {
173
  background: transparent;
174
+ color: #000;
175
+ border: 2px solid #000;
176
  font-weight: 500;
177
+ padding: 12px 25px;
178
  }
179
 
180
  .toggle-btn:hover {
181
+ background: #000;
182
  color: white;
183
  }
184
 
185
+ /* ุจุงู‚ูŠ ุงู„ุฃู†ู…ุงุท ุชุจู‚ู‰ ูƒู…ุง ู‡ูŠ */
186
+
187
+ @keyframes float {
188
+ 0% {
189
+ transform: translateY(0px) translateX(-50%);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  }
191
+ 50% {
192
+ transform: translateY(-10px) translateX(-50%);
 
193
  }
194
+ 100% {
195
+ transform: translateY(0px) translateX(-50%);
 
196
  }
197
  }
198
 
199
+ .logo-container {
200
+ animation: float 6s ease-in-out infinite;
201
+ }
202
+
203
+ .decoration {
204
  position: absolute;
205
+ background: linear-gradient(135deg, #000 0%, #333 100%);
206
+ opacity: 0.05;
207
+ border-radius: 50%;
 
 
 
 
208
  }
209
 
210
+ .decoration-1 {
211
+ width: 100px;
212
+ height: 100px;
213
+ top: -50px;
214
+ right: -50px;
215
  }
216
 
217
+ .decoration-2 {
218
+ width: 150px;
219
+ height: 150px;
220
+ bottom: -75px;
221
+ left: -75px;
222
  }
223
  </style>
224
  </head>
225
  <body>
226
  <div class="logo-container">
227
+ <img src="https://ufastpro.com/wp-content/uploads/2025/01/Black-Gold-Modern-Law-Firm-Presentation.png" alt="Logo" class="logo">
 
228
  </div>
229
 
230
+ <!-- ุจุงู‚ูŠ ู…ุญุชูˆู‰ HTML ูŠุจู‚ู‰ ูƒู…ุง ู‡ูˆ -->
231
+ <!-- Script ูŠุจู‚ู‰ ูƒู…ุง ู‡ูˆ -->
232
+ </body>
233
+ </html>