Hugging Face's logo

Spaces:
fastpro
/
msci
Running

App Files Community
joermd commited on
Commit
767aaef
·
verified ·
1 Parent(s): c3b684d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +520 -19
index.html CHANGED
@@ -1,19 +1,520 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ar" dir="rtl">
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://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary-color: #1a3a6d;
13
+ --secondary-color: #0a5c5c;
14
+ --accent-color: #f8ba10;
15
+ --light-color: #f4f7fc;
16
+ --dark-color: #1c2331;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Tajawal', sans-serif;
21
+ background-color: var(--light-color);
22
+ min-height: 100vh;
23
+ background-image: linear-gradient(to bottom, #e6eef8, #f4f7fc);
24
+ }
25
+
26
+ .login-container {
27
+ max-width: 450px;
28
+ padding: 2rem;
29
+ border-radius: 15px;
30
+ box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
31
+ background-color: white;
32
+ margin: 3rem auto;
33
+ border-top: 5px solid var(--primary-color);
34
+ transition: all 0.3s ease;
35
+ }
36
+
37
+ .login-container:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
40
+ }
41
+
42
+ .dashboard-container {
43
+ display: none;
44
+ max-width: 1200px;
45
+ margin: 0 auto;
46
+ padding: 1rem;
47
+ }
48
+
49
+ .logo-container {
50
+ text-align: center;
51
+ margin-bottom: 2rem;
52
+ }
53
+
54
+ .logo-img {
55
+ max-width: 200px;
56
+ margin-bottom: 1rem;
57
+ border-radius: 10px;
58
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
59
+ transition: transform 0.3s ease;
60
+ }
61
+
62
+ .logo-img:hover {
63
+ transform: scale(1.05);
64
+ }
65
+
66
+ .form-control:focus, .btn:focus {
67
+ box-shadow: 0 0 0 0.25rem rgba(26, 58, 109, 0.25);
68
+ border-color: var(--primary-color);
69
+ }
70
+
71
+ .btn-primary {
72
+ background-color: var(--primary-color);
73
+ border-color: var(--primary-color);
74
+ padding: 0.6rem 1.5rem;
75
+ font-weight: 500;
76
+ transition: all 0.3s ease;
77
+ }
78
+
79
+ .btn-primary:hover {
80
+ background-color: #0f2952;
81
+ border-color: #0f2952;
82
+ transform: translateY(-2px);
83
+ box-shadow: 0 5px 15px rgba(15, 41, 82, 0.2);
84
+ }
85
+
86
+ .system-card {
87
+ height: 100%;
88
+ transition: all 0.3s ease;
89
+ border: none;
90
+ border-radius: 15px;
91
+ overflow: hidden;
92
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
93
+ background: linear-gradient(to bottom, #ffffff, #f9fbff);
94
+ }
95
+
96
+ .system-card:hover {
97
+ transform: translateY(-8px);
98
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
99
+ }
100
+
101
+ .card-icon {
102
+ font-size: 3rem;
103
+ color: var(--primary-color);
104
+ margin-bottom: 1.5rem;
105
+ transition: transform 0.3s ease;
106
+ background-color: rgba(26, 58, 109, 0.1);
107
+ width: 80px;
108
+ height: 80px;
109
+ display: flex;
110
+ align-items: center;
111
+ justify-content: center;
112
+ border-radius: 50%;
113
+ margin: 0 auto 1.5rem;
114
+ }
115
+
116
+ .system-card:hover .card-icon {
117
+ transform: scale(1.1);
118
+ background-color: rgba(26, 58, 109, 0.15);
119
+ }
120
+
121
+ .footer {
122
+ text-align: center;
123
+ padding: 1.5rem 0;
124
+ margin-top: 3rem;
125
+ background-color: var(--primary-color);
126
+ color: white;
127
+ border-top: 3px solid var(--accent-color);
128
+ }
129
+
130
+ .footer a {
131
+ color: var(--accent-color);
132
+ text-decoration: none;
133
+ font-weight: 500;
134
+ transition: all 0.3s ease;
135
+ }
136
+
137
+ .footer a:hover {
138
+ text-decoration: underline;
139
+ color: #ffcc40;
140
+ }
141
+
142
+ .header {
143
+ background-color: var(--primary-color);
144
+ color: white;
145
+ padding: 1rem 0;
146
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
147
+ margin-bottom: 2rem;
148
+ }
149
+
150
+ .login-form {
151
+ position: relative;
152
+ }
153
+
154
+ .password-toggle {
155
+ position: absolute;
156
+ top: 50%;
157
+ left: 10px;
158
+ transform: translateY(-50%);
159
+ cursor: pointer;
160
+ color: var(--dark-color);
161
+ transition: all 0.3s ease;
162
+ }
163
+
164
+ .password-toggle:hover {
165
+ color: var(--primary-color);
166
+ }
167
+
168
+ .input-group {
169
+ margin-bottom: 1rem;
170
+ }
171
+
172
+ .input-group-text {
173
+ background-color: var(--primary-color);
174
+ color: white;
175
+ border-color: var(--primary-color);
176
+ }
177
+
178
+ .form-control {
179
+ border: 1px solid #ddd;
180
+ padding: 0.6rem 1rem;
181
+ font-size: 1rem;
182
+ transition: all 0.3s ease;
183
+ }
184
+
185
+ .form-control:focus {
186
+ border-color: var(--primary-color);
187
+ transform: translateY(-2px);
188
+ }
189
+
190
+ .systems-container {
191
+ background-color: white;
192
+ border-radius: 15px;
193
+ padding: 2rem;
194
+ box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
195
+ margin-bottom: 2rem;
196
+ transition: all 0.3s ease;
197
+ }
198
+
199
+ .systems-container:hover {
200
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
201
+ }
202
+
203
+ .section-title {
204
+ position: relative;
205
+ padding-bottom: 0.5rem;
206
+ margin-bottom: 2rem;
207
+ text-align: center;
208
+ color: var(--primary-color);
209
+ font-weight: 700;
210
+ }
211
+
212
+ .section-title:after {
213
+ content: '';
214
+ position: absolute;
215
+ bottom: 0;
216
+ left: 50%;
217
+ transform: translateX(-50%);
218
+ width: 80px;
219
+ height: 3px;
220
+ background-color: var(--accent-color);
221
+ }
222
+
223
+ .error-message {
224
+ color: #dc3545;
225
+ font-size: 0.875rem;
226
+ margin-top: 0.5rem;
227
+ display: none;
228
+ }
229
+
230
+ .login-alert {
231
+ display: none;
232
+ margin-top: 1rem;
233
+ }
234
+
235
+ .card-title {
236
+ color: var(--primary-color);
237
+ font-weight: 600;
238
+ margin-bottom: 1rem;
239
+ }
240
+
241
+ .card-text {
242
+ color: #6c757d;
243
+ margin-bottom: 1.5rem;
244
+ }
245
+
246
+ .logout-btn {
247
+ transition: all 0.3s ease;
248
+ }
249
+
250
+ .logout-btn:hover {
251
+ background-color: #f8f9fa;
252
+ transform: translateY(-2px);
253
+ }
254
+
255
+ @media (max-width: 768px) {
256
+ .login-container {
257
+ margin: 1.5rem 1rem;
258
+ padding: 1.5rem;
259
+ }
260
+
261
+ .systems-container {
262
+ padding: 1.5rem;
263
+ }
264
+ }
265
+ </style>
266
+ </head>
267
+ <body>
268
+ <!-- صفحة تسجيل الدخول -->
269
+ <div id="login-page">
270
+ <div class="container">
271
+ <div class="login-container">
272
+ <div class="logo-container">
273
+ <img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار معهد مدينة العلوم العصرية" class="logo-img">
274
+ <h2 class="mb-3 text-center" style="color: var(--primary-color);">معهد مدينة العلوم العصرية</h2>
275
+ <p class="text-muted text-center">المنصة التعليمية الإدارية</p>
276
+ </div>
277
+ <div class="alert alert-danger login-alert" id="login-error" role="alert">
278
+ <i class="fas fa-exclamation-circle me-2"></i> اسم المستخدم أو كلمة المرور غير صحيحة
279
+ </div>
280
+ <form id="login-form" class="needs-validation" novalidate>
281
+ <div class="mb-3">
282
+ <label for="username" class="form-label">اسم المستخدم</label>
283
+ <div class="input-group">
284
+ <span class="input-group-text"><i class="fas fa-user"></i></span>
285
+ <input type="text" class="form-control" id="username" placeholder="أدخل اسم المستخدم" required>
286
+ </div>
287
+ <div class="invalid-feedback">
288
+ يرجى إدخال اسم المستخدم
289
+ </div>
290
+ </div>
291
+ <div class="mb-3">
292
+ <label for="password" class="form-label">كلمة المرور</label>
293
+ <div class="input-group login-form">
294
+ <span class="input-group-text"><i class="fas fa-lock"></i></span>
295
+ <input type="password" class="form-control" id="password" placeholder="أدخل كلمة المرور" required>
296
+ <i class="fas fa-eye password-toggle" id="toggle-password"></i>
297
+ </div>
298
+ <div class="invalid-feedback">
299
+ يرجى إدخال كلمة المرور
300
+ </div>
301
+ </div>
302
+ <div class="mb-3 form-check">
303
+ <input type="checkbox" class="form-check-input" id="remember-me">
304
+ <label class="form-check-label" for="remember-me">تذكرني</label>
305
+ </div>
306
+ <div class="d-grid gap-2">
307
+ <button type="submit" class="btn btn-primary btn-lg">
308
+ <i class="fas fa-sign-in-alt me-2"></i> تسجيل الدخول
309
+ </button>
310
+ </div>
311
+ </form>
312
+ <div class="mt-3 text-center">
313
+ <a href="#" class="text-decoration-none">نسيت كلمة المرور؟</a>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ </div>
318
+
319
+ <!-- صفحة لوحة التحكم -->
320
+ <div id="dashboard-page" class="dashboard-container">
321
+ <div class="header">
322
+ <div class="container d-flex justify-content-between align-items-center">
323
+ <div class="d-flex align-items-center">
324
+ <img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار معهد مدينة العلوم العصرية" height="60" class="me-3" style="border-radius: 8px;">
325
+ <h4 class="mb-0">معهد مدينة العلوم العصرية</h4>
326
+ </div>
327
+ <div>
328
+ <span class="me-3" id="username-display">مرحباً، المستخدم</span>
329
+ <button id="logout-btn" class="btn btn-sm btn-light logout-btn">
330
+ <i class="fas fa-sign-out-alt me-1"></i> تسجيل الخروج
331
+ </button>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="container">
337
+ <div class="systems-container">
338
+ <h2 class="section-title">الأنظمة الإدارية</h2>
339
+
340
+ <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
341
+ <!-- نظام الطلاب -->
342
+ <div class="col">
343
+ <div class="card h-100 system-card">
344
+ <div class="card-body text-center p-4">
345
+ <div class="card-icon">
346
+ <i class="fas fa-user-graduate"></i>
347
+ </div>
348
+ <h4 class="card-title">نظام الطلاب</h4>
349
+ <p class="card-text">إدارة شؤون الطلاب والتسجيل والمتابعة الأكاديمية</p>
350
+ <a href="https://quintadb.com/apps/cgvmoeW55dI43dTNDJW7WH/portals/coWOO0W7vdPykeWQboW71s/widget" class="btn btn-primary w-100" target="_blank">
351
+ <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام
352
+ </a>
353
+ </div>
354
+ </div>
355
+ </div>
356
+
357
+ <!-- نظام الحضور والانصراف -->
358
+ <div class="col">
359
+ <div class="card h-100 system-card">
360
+ <div class="card-body text-center p-4">
361
+ <div class="card-icon">
362
+ <i class="fas fa-clock"></i>
363
+ </div>
364
+ <h4 class="card-title">الحضور والانصراف</h4>
365
+ <p class="card-text">نظام تسجيل حضور وانصراف الموظفين والمتابعة</p>
366
+ <a href="https://quintadb.com/apps/coWQVdNSnpW4_dMmo8FSo7/portals/avW6n-W5vooykwdColp8o_/widget" class="btn btn-primary w-100" target="_blank">
367
+ <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام
368
+ </a>
369
+ </div>
370
+ </div>
371
+ </div>
372
+
373
+ <!-- نظام بيانات الموظفين -->
374
+ <div class="col">
375
+ <div class="card h-100 system-card">
376
+ <div class="card-body text-center p-4">
377
+ <div class="card-icon">
378
+ <i class="fas fa-id-card"></i>
379
+ </div>
380
+ <h4 class="card-title">بيانات الموظفين</h4>
381
+ <p class="card-text">إدا��ة بيانات الموظفين والملفات الشخصية</p>
382
+ <a href="https://quintadb.com/a4bbXi8" class="btn btn-primary w-100" target="_blank">
383
+ <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام
384
+ </a>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- نظام الصادر والوارد -->
390
+ <div class="col">
391
+ <div class="card h-100 system-card">
392
+ <div class="card-body text-center p-4">
393
+ <div class="card-icon">
394
+ <i class="fas fa-exchange-alt"></i>
395
+ </div>
396
+ <h4 class="card-title">الصادر والوارد</h4>
397
+ <p class="card-text">نظام إدارة المراسلات والوثائق الصادرة والواردة</p>
398
+ <a href="https://quintadb.com/bxWdcIC" class="btn btn-primary w-100" target="_blank">
399
+ <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام
400
+ </a>
401
+ </div>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- نظام وارد معهد قوات مسلحة -->
406
+ <div class="col">
407
+ <div class="card h-100 system-card">
408
+ <div class="card-body text-center p-4">
409
+ <div class="card-icon">
410
+ <i class="fas fa-file-alt"></i>
411
+ </div>
412
+ <h4 class="card-title">وارد معهد قوات مسلحة</h4>
413
+ <p class="card-text">نظام إدارة امتحانات وبيانات معهد القوات المسلحة</p>
414
+ <a href="https://quintadb.com/dcRdcGw" class="btn btn-primary w-100" target="_blank">
415
+ <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام
416
+ </a>
417
+ </div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <footer class="footer">
425
+ <div class="container">
426
+ <p class="mb-0">جميع الحقوق محفوظة &copy; 2025 | معهد مدينة العلوم العصرية | تصميم شركة <a href="https://ufastpro.com/" target="_blank">فاستبرو</a></p>
427
+ </div>
428
+ </footer>
429
+ </div>
430
+
431
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
432
+ <script>
433
+ // بيانات تسجيل الدخول الثابتة
434
+ const ADMIN_USERNAME = "admin";
435
+ const ADMIN_PASSWORD = "10203040";
436
+
437
+ // التحقق من وجود بيانات تسجيل الدخول في التخزين المحلي
438
+ document.addEventListener('DOMContentLoaded', function() {
439
+ // فحص إذا كان المستخدم مسجل الدخول بالفعل
440
+ const isLoggedIn = localStorage.getItem('isLoggedIn');
441
+ if (isLoggedIn === 'true') {
442
+ const username = localStorage.getItem('username');
443
+ showDashboard(username);
444
+ }
445
+
446
+ // إضافة مستمع لنموذج تسجيل الدخول
447
+ const loginForm = document.getElementById('login-form');
448
+ loginForm.addEventListener('submit', function(event) {
449
+ event.preventDefault();
450
+
451
+ // التحقق من صحة النموذج
452
+ if (!loginForm.checkValidity()) {
453
+ event.stopPropagation();
454
+ loginForm.classList.add('was-validated');
455
+ return;
456
+ }
457
+
458
+ const username = document.getElementById('username').value;
459
+ const password = document.getElementById('password').value;
460
+
461
+ // التحقق من بيانات تسجيل الدخول
462
+ if (validateCredentials(username, password)) {
463
+ // تخزين بيانات المستخدم في التخزين المحلي إذا تم اختيار "تذكرني"
464
+ if (document.getElementById('remember-me').checked) {
465
+ localStorage.setItem('username', username);
466
+ localStorage.setItem('isLoggedIn', 'true');
467
+ }
468
+
469
+ // إخفاء رسالة الخطأ إذا كانت ظاهرة
470
+ document.getElementById('login-error').style.display = 'none';
471
+
472
+ // عرض لوحة التحكم
473
+ showDashboard(username);
474
+ } else {
475
+ // عرض رسالة الخطأ
476
+ document.getElementById('login-error').style.display = 'block';
477
+ }
478
+ });
479
+
480
+ // إضافة مستمع لزر تسجيل الخروج
481
+ document.getElementById('logout-btn').addEventListener('click', function() {
482
+ // حذف بيانات تسجيل الدخول من التخزين المحلي
483
+ localStorage.removeItem('isLoggedIn');
484
+ localStorage.removeItem('username');
485
+
486
+ // العودة إلى صفحة تسجيل الدخول
487
+ document.getElementById('login-page').style.display = 'block';
488
+ document.getElementById('dashboard-page').style.display = 'none';
489
+ });
490
+
491
+ // إضافة مستمع لتبديل رؤية كلمة المرور
492
+ document.getElementById('toggle-password').addEventListener('click', function() {
493
+ const passwordInput = document.getElementById('password');
494
+ if (passwordInput.type === 'password') {
495
+ passwordInput.type = 'text';
496
+ this.classList.remove('fa-eye');
497
+ this.classList.add('fa-eye-slash');
498
+ } else {
499
+ passwordInput.type = 'password';
500
+ this.classList.remove('fa-eye-slash');
501
+ this.classList.add('fa-eye');
502
+ }
503
+ });
504
+ });
505
+
506
+ // دالة للتحقق من بيانات تسجيل الدخول
507
+ function validateCredentials(username, password) {
508
+ // التحقق من اسم المستخدم وكلمة المرور الثابتة
509
+ return (username === ADMIN_USERNAME && password === ADMIN_PASSWORD);
510
+ }
511
+
512
+ // دالة لعرض لوحة التحكم وإخفاء صفحة تسجيل الدخول
513
+ function showDashboard(username) {
514
+ document.getElementById('login-page').style.display = 'none';
515
+ document.getElementById('dashboard-page').style.display = 'block';
516
+ document.getElementById('username-display').textContent = 'مرحباً، ' + username;
517
+ }
518
+ </script>
519
+ </body>
520
+ </html>