Spaces:
Running
Running
| <html lang="ar" dir="rtl"> | |
| <head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"66aa55c6986dd41ad50db61d"}};</script> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>نتائج الطلاب - معهد مدينة العلوم العصرية</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 50%, #fff3e0 100%); | |
| min-height: 100vh; | |
| padding: 20px; | |
| direction: rtl; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: rgba(255, 255, 255, 0.95); | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); | |
| overflow: hidden; | |
| backdrop-filter: blur(10px); | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 50%, #03a9f4 100%); | |
| color: white; | |
| padding: 40px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); | |
| animation: rotate 20s linear infinite; | |
| } | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .logo { | |
| width: 90px; | |
| height: 90px; | |
| border-radius: 50%; | |
| margin-bottom: 20px; | |
| border: 4px solid rgba(255, 255, 255, 0.8); | |
| position: relative; | |
| z-index: 1; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .header h1 { | |
| font-size: 2.8em; | |
| margin-bottom: 15px; | |
| font-weight: bold; | |
| position: relative; | |
| z-index: 1; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |
| } | |
| .header p { | |
| font-size: 1.3em; | |
| opacity: 0.95; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .search-section { | |
| padding: 50px; | |
| background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); | |
| border-bottom: 1px solid #e1f5fe; | |
| } | |
| .search-container { | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .department-selector { | |
| margin-bottom: 30px; | |
| } | |
| .department-selector label { | |
| display: block; | |
| margin-bottom: 15px; | |
| font-weight: bold; | |
| color: #1565c0; | |
| font-size: 1.2em; | |
| } | |
| .department-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 15px; | |
| margin-bottom: 30px; | |
| } | |
| .department-card { | |
| background: white; | |
| border: 2px solid #e3f2fd; | |
| border-radius: 15px; | |
| padding: 20px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| position: relative; | |
| } | |
| .department-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| border-color: #4fc3f7; | |
| } | |
| .department-card.selected { | |
| background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%); | |
| color: white; | |
| border-color: #03a9f4; | |
| transform: translateY(-3px); | |
| } | |
| .department-card.loading { | |
| pointer-events: none; | |
| opacity: 0.7; | |
| } | |
| .department-card .loading-spinner { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #f3f3f3; | |
| border-top: 2px solid #4fc3f7; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| display: none; | |
| } | |
| .department-card.loading .loading-spinner { | |
| display: block; | |
| } | |
| .department-card .icon { | |
| font-size: 2.5em; | |
| margin-bottom: 10px; | |
| display: block; | |
| } | |
| .department-card h3 { | |
| font-size: 1.1em; | |
| margin-bottom: 5px; | |
| } | |
| .department-card p { | |
| font-size: 0.9em; | |
| opacity: 0.8; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 12px; | |
| font-weight: bold; | |
| color: #1565c0; | |
| font-size: 1.2em; | |
| } | |
| .form-group input { | |
| width: 100%; | |
| padding: 18px; | |
| border: 2px solid #e3f2fd; | |
| border-radius: 12px; | |
| font-size: 1.1em; | |
| transition: all 0.3s ease; | |
| text-align: right; | |
| background: white; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| } | |
| .form-group input:focus { | |
| outline: none; | |
| border-color: #4fc3f7; | |
| box-shadow: 0 0 0 3px rgba(79, 195, 247, 0.1); | |
| transform: translateY(-2px); | |
| } | |
| .search-btn { | |
| width: 100%; | |
| padding: 18px; | |
| background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| font-size: 1.3em; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 15px rgba(79, 195, 247, 0.3); | |
| } | |
| .search-btn:hover:not(:disabled) { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 25px rgba(79, 195, 247, 0.4); | |
| } | |
| .search-btn:active { | |
| transform: translateY(-1px); | |
| } | |
| .search-btn:disabled { | |
| background: linear-gradient(135deg, #ccc 0%, #bbb 100%); | |
| cursor: not-allowed; | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .results-section { | |
| padding: 50px; | |
| display: none; | |
| } | |
| .error-message { | |
| background: linear-gradient(135deg, #ff5252 0%, #f44336 100%); | |
| color: white; | |
| padding: 25px; | |
| border-radius: 15px; | |
| text-align: center; | |
| font-size: 1.2em; | |
| margin-bottom: 30px; | |
| box-shadow: 0 5px 15px rgba(255, 82, 82, 0.3); | |
| } | |
| .success-message { | |
| background: linear-gradient(135deg, #66bb6a 0%, #4caf50 100%); | |
| color: white; | |
| padding: 25px; | |
| border-radius: 15px; | |
| text-align: center; | |
| font-size: 1.2em; | |
| margin-bottom: 30px; | |
| box-shadow: 0 5px 15px rgba(102, 187, 106, 0.3); | |
| } | |
| .student-info { | |
| background: white; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .student-header { | |
| background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .student-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>'); | |
| } | |
| .student-header h2 { | |
| font-size: 2.2em; | |
| margin-bottom: 10px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .student-header p { | |
| opacity: 0.9; | |
| font-size: 1.1em; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .info-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .info-table th, | |
| .info-table td { | |
| padding: 20px; | |
| text-align: right; | |
| border-bottom: 1px solid #f0f0f0; | |
| transition: all 0.3s ease; | |
| vertical-align: middle; | |
| } | |
| .info-table th { | |
| background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); | |
| font-weight: bold; | |
| color: #1565c0; | |
| width: 40%; | |
| font-size: 1.1em; | |
| } | |
| .info-table tr:hover { | |
| background: linear-gradient(135deg, #f8f9fa 0%, #e3f2fd 100%); | |
| transform: translateX(-5px); | |
| } | |
| .info-table tr:hover th { | |
| background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); | |
| } | |
| .grade-positive { | |
| color: #4caf50; | |
| font-weight: bold; | |
| text-shadow: 1px 1px 2px rgba(76, 175, 80, 0.3); | |
| } | |
| .grade-negative { | |
| color: #f44336; | |
| font-weight: bold; | |
| text-shadow: 1px 1px 2px rgba(244, 67, 54, 0.3); | |
| } | |
| .student-status { | |
| padding: 12px 24px; | |
| border-radius: 25px; | |
| font-weight: bold; | |
| font-size: 1.1em; | |
| text-align: center; | |
| display: inline-block; | |
| min-width: 140px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .status-completed { | |
| background: #4caf50; | |
| color: white; | |
| } | |
| .status-blocked { | |
| background: #f44336; | |
| color: white; | |
| } | |
| .status-blocked-message { | |
| font-size: 0.85em; | |
| margin-top: 8px; | |
| opacity: 0.95; | |
| font-weight: normal; | |
| line-height: 1.3; | |
| } | |
| .subject-row { | |
| border-right: 4px solid #4fc3f7; | |
| background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); | |
| } | |
| .subject-row.failed { | |
| border-right-color: #f44336; | |
| background: linear-gradient(135deg, #ffebee 0%, #ffffff 100%); | |
| } | |
| .subject-row.passed { | |
| border-right-color: #4caf50; | |
| background: linear-gradient(135deg, #e8f5e8 0%, #ffffff 100%); | |
| } | |
| .loading { | |
| text-align: center; | |
| padding: 50px; | |
| color: #666; | |
| } | |
| .spinner { | |
| display: inline-block; | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid #f3f3f3; | |
| border-top: 5px solid #4fc3f7; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: 25px; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .department-info { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 25px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .department-info h3 { | |
| color: #1565c0; | |
| font-size: 1.5em; | |
| margin-bottom: 10px; | |
| } | |
| .department-info p { | |
| color: #666; | |
| line-height: 1.6; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-top: 30px; | |
| } | |
| .stat-card { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 25px; | |
| text-align: center; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .stat-card .number { | |
| font-size: 2.5em; | |
| font-weight: bold; | |
| color: #4fc3f7; | |
| margin-bottom: 10px; | |
| } | |
| .stat-card .label { | |
| color: #666; | |
| font-size: 1.1em; | |
| } | |
| .stat-card.failed .number { | |
| color: #f44336; | |
| } | |
| .loading-message { | |
| background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%); | |
| color: white; | |
| padding: 20px; | |
| border-radius: 15px; | |
| text-align: center; | |
| font-size: 1.1em; | |
| margin-bottom: 20px; | |
| box-shadow: 0 5px 15px rgba(129, 199, 132, 0.3); | |
| } | |
| .final-message { | |
| background: linear-gradient(135deg, #4fc3f7 0%, #29b6f6 100%); | |
| color: white; | |
| padding: 30px; | |
| border-radius: 15px; | |
| text-align: center; | |
| font-size: 1.4em; | |
| margin-top: 30px; | |
| box-shadow: 0 5px 15px rgba(79, 195, 247, 0.3); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .final-message::before { | |
| content: '🎓'; | |
| position: absolute; | |
| top: 15px; | |
| right: 25px; | |
| font-size: 2.5em; | |
| opacity: 0.3; | |
| } | |
| .final-message h3 { | |
| font-size: 1.5em; | |
| margin-bottom: 10px; | |
| font-weight: bold; | |
| } | |
| .final-message p { | |
| font-size: 1.1em; | |
| opacity: 0.9; | |
| } | |
| /* رسالة منبثقة للطلاب المحجوبين */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 1000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: auto; | |
| background-color: rgba(0,0,0,0.5); | |
| animation: fadeIn 0.3s ease; | |
| } | |
| .modal-content { | |
| background-color: #fefefe; | |
| margin: 10% auto; | |
| padding: 40px; | |
| border: none; | |
| border-radius: 20px; | |
| width: 90%; | |
| max-width: 500px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); | |
| position: relative; | |
| text-align: center; | |
| animation: slideInModal 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideInModal { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-header { | |
| background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); | |
| color: white; | |
| padding: 25px; | |
| border-radius: 15px; | |
| margin-bottom: 25px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .modal-header::before { | |
| content: '⚠️'; | |
| position: absolute; | |
| top: 15px; | |
| right: 20px; | |
| font-size: 2em; | |
| opacity: 0.3; | |
| } | |
| .modal-header h2 { | |
| font-size: 1.8em; | |
| margin-bottom: 10px; | |
| font-weight: bold; | |
| } | |
| .modal-header p { | |
| font-size: 1.1em; | |
| opacity: 0.9; | |
| } | |
| .modal-body { | |
| padding: 20px 0; | |
| color: #333; | |
| line-height: 1.6; | |
| } | |
| .modal-body h3 { | |
| color: #d32f2f; | |
| font-size: 1.4em; | |
| margin-bottom: 15px; | |
| } | |
| .modal-body p { | |
| font-size: 1.1em; | |
| margin-bottom: 15px; | |
| } | |
| .modal-body .address { | |
| background: linear-gradient(135deg, #e3f2fd 0%, #f8f9fa 100%); | |
| padding: 20px; | |
| border-radius: 12px; | |
| margin: 20px 0; | |
| border-right: 4px solid #2196f3; | |
| } | |
| .modal-body .address h4 { | |
| color: #1565c0; | |
| font-size: 1.2em; | |
| margin-bottom: 10px; | |
| } | |
| .modal-body .address p { | |
| color: #666; | |
| margin-bottom: 5px; | |
| } | |
| .close { | |
| color: #aaa; | |
| float: left; | |
| font-size: 28px; | |
| font-weight: bold; | |
| position: absolute; | |
| top: 15px; | |
| left: 20px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .close:hover, | |
| .close:focus { | |
| color: #000; | |
| text-decoration: none; | |
| } | |
| .modal-footer { | |
| padding: 20px 0; | |
| border-top: 1px solid #eee; | |
| margin-top: 20px; | |
| } | |
| .modal-btn { | |
| background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%); | |
| color: white; | |
| border: none; | |
| padding: 15px 30px; | |
| border-radius: 25px; | |
| font-size: 1.1em; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3); | |
| } | |
| .modal-btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4); | |
| } | |
| .blocked-status-clickable { | |
| cursor: pointer; | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .blocked-status-clickable:hover { | |
| transform: scale(1.05); | |
| } | |
| .blocked-status-clickable::after { | |
| content: '👆 اضغط للمزيد'; | |
| position: absolute; | |
| bottom: -25px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.8em; | |
| color: #666; | |
| background: rgba(255,255,255,0.9); | |
| padding: 5px 10px; | |
| border-radius: 15px; | |
| white-space: nowrap; | |
| } | |
| .search-tips { | |
| background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%); | |
| padding: 20px; | |
| border-radius: 12px; | |
| margin-top: 15px; | |
| border: 1px solid #c8e6c9; | |
| } | |
| .search-tips h4 { | |
| color: #2e7d32; | |
| margin-bottom: 10px; | |
| font-size: 1.1em; | |
| } | |
| .search-tips ul { | |
| color: #388e3c; | |
| margin-right: 20px; | |
| } | |
| .search-tips li { | |
| margin-bottom: 5px; | |
| line-height: 1.4; | |
| } | |
| @media (max-width: 768px) { | |
| .header h1 { | |
| font-size: 2.2em; | |
| } | |
| .search-section { | |
| padding: 30px 20px; | |
| } | |
| .results-section { | |
| padding: 30px 20px; | |
| } | |
| .department-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .info-table th, | |
| .info-table td { | |
| padding: 15px; | |
| font-size: 0.95em; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| body { | |
| padding: 10px; | |
| } | |
| .header { | |
| padding: 25px; | |
| } | |
| .header h1 { | |
| font-size: 1.8em; | |
| } | |
| .logo { | |
| width: 70px; | |
| height: 70px; | |
| } | |
| .search-section { | |
| padding: 20px; | |
| } | |
| .results-section { | |
| padding: 20px; | |
| } | |
| .stats-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .info-table th, | |
| .info-table td { | |
| padding: 12px; | |
| font-size: 0.9em; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار المعهد" class="logo"> | |
| <h1>معهد مدينة العلوم العصرية</h1> | |
| <p>نتيجة طلاب الفرقة الثانية معهد مدينة العلوم العصرية</p> | |
| </div> | |
| <div class="search-section"> | |
| <div class="search-container"> | |
| <div class="department-selector"> | |
| <label>اختر القسم:</label> | |
| <div class="department-grid"> | |
| <div class="department-card" onclick="selectDepartment('systems', 'students.json')"> | |
| <div class="loading-spinner"></div> | |
| <span class="icon">💻</span> | |
| <h3>نظم المعلومات وادارة الاعمال</h3> | |
| <p>تكنولوجيا المعلومات</p> | |
| </div> | |
| <div class="department-card" onclick="selectDepartment('communications', 'students1.json')"> | |
| <div class="loading-spinner"></div> | |
| <span class="icon">📡</span> | |
| <h3>اتصالات دولية لاسلكية</h3> | |
| <p>الاتصالات والشبكات</p> | |
| </div> | |
| <div class="department-card" onclick="selectDepartment('surveying', 'students2.json')"> | |
| <div class="loading-spinner"></div> | |
| <span class="icon">🗺️</span> | |
| <h3>مساحة وخرائط</h3> | |
| <p>المساحة والجيوديسيا</p> | |
| </div> | |
| <div class="department-card" onclick="selectDepartment('tourism', 'students4.json')"> | |
| <div class="loading-spinner"></div> | |
| <span class="icon">🏨</span> | |
| <h3>سياحة وفنادق</h3> | |
| <p>السياحة والضيافة</p> | |
| </div> | |
| <div class="department-card" onclick="selectDepartment('languages', 'students5.json')"> | |
| <div class="loading-spinner"></div> | |
| <span class="icon">🌐</span> | |
| <h3>لغات وترجمة</h3> | |
| <p>الترجمة والتواصل</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="studentName">اسم الطالب:</label> | |
| <input type="text" id="studentName" placeholder="ادخل اسم الطالب كاملاً" disabled> | |
| <div class="search-tips"> | |
| <h4>نصائح:</h4> | |
| <ul> | |
| <li>يمكنك البحث بالاسم الثلاثي أو الرباعي</li> | |
| <li>اذا واجهتك اي مشاكل يرجى مراسلة الرقم التالي واتساب (01093769367)</li> | |
| <li>اترك فويس به اسمك رباعي والقسم بتاعك ومشكلتك</li> | |
| <li>اكتب الاسم كما هو مسجل في النظام</li> | |
| <li>مثال: "أحمد محمد علي" أو "أحمد محمد علي حسن"</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <button class="search-btn" onclick="searchStudent()" disabled id="searchBtn">اختر القسم أولاً</button> | |
| </div> | |
| </div> | |
| <div class="results-section" id="resultsSection"> | |
| <div id="loadingDiv" class="loading" style="display: none;"> | |
| <div class="spinner"></div> | |
| <p>جاري البحث...</p> | |
| </div> | |
| <div id="resultsContent"></div> | |
| </div> | |
| </div> | |
| <!-- رسالة منبثقة للطلاب المحجوبين --> | |
| <div id="blockedModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close" onclick="closeModal()">×</span> | |
| <div class="modal-header"> | |
| <h2>تنبيه هام</h2> | |
| <p>حالة الطالب: محجوب</p> | |
| </div> | |
| <div class="modal-body"> | |
| <h3>يرجى زيارة مقر المعهد</h3> | |
| <p>عزيزي الطالب، نأسف لإبلاغك أن حالتك الأكاديمية حالياً "محجوب".</p> | |
| <p>لمعرفة أسباب الحجب والإجراءات المطلوبة، يرجى التواصل مع العلاقات العامة01122264644.</p> | |
| <div class="address"> | |
| <h4>📍 عنوان المعهد:</h4> | |
| <p>معهد مدينة العلوم العصرية</p> | |
| <p>9 ش جمال الدين ابو المحاسن جاردن سيتي </p> | |
| <p>📞 للاستفسار: يرجى زيارة المعهد شخصياً</p> | |
| </div> | |
| <p><strong>يرجى إحضار:</strong></p> | |
| <ul style="text-align: right; margin-right: 20px;"> | |
| <li>الهوية الشخصية</li> | |
| <li>آخر إيصال دفع</li> | |
| <li>أي مستندات أكاديمية</li> | |
| </ul> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="modal-btn" onclick="closeModal()">فهمت</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let studentsData = []; | |
| let currentDepartment = null; | |
| let currentFile = null; | |
| const departmentNames = { | |
| 'systems': 'نظم المعلومات', | |
| 'communications': 'اتصالات دولية لاسلكية', | |
| 'surveying': 'مساحة وخرائط', | |
| 'business': 'إدارة أعمال', | |
| 'tourism': 'سياحة وفنادق', | |
| 'languages': 'لغات وترجمة' | |
| }; | |
| // اختيار القسم | |
| async function selectDepartment(department, filename) { | |
| // إزالة التحديد من جميع الأقسام | |
| document.querySelectorAll('.department-card').forEach(card => { | |
| card.classList.remove('selected'); | |
| card.classList.remove('loading'); | |
| }); | |
| // تحديد القسم المختار وإظهار التحميل | |
| const selectedCard = event.target.closest('.department-card'); | |
| selectedCard.classList.add('selected'); | |
| selectedCard.classList.add('loading'); | |
| currentDepartment = department; | |
| currentFile = filename; | |
| // تعطيل حقل البحث والزر أثناء التحميل | |
| document.getElementById('studentName').disabled = true; | |
| const searchBtn = document.getElementById('searchBtn'); | |
| searchBtn.disabled = true; | |
| searchBtn.textContent = 'جاري تحميل بيانات القسم...'; | |
| // تحميل بيانات القسم | |
| const success = await loadStudentsData(filename); | |
| // إزالة حالة التحميل | |
| selectedCard.classList.remove('loading'); | |
| if (success) { | |
| // تفعيل حقل البحث والزر | |
| document.getElementById('studentName').disabled = false; | |
| document.getElementById('studentName').placeholder = `ادخل اسم الطالب من قسم ${departmentNames[department]}`; | |
| searchBtn.disabled = false; | |
| searchBtn.textContent = 'عرض النتيجة'; | |
| // إخفاء النتائج السابقة | |
| document.getElementById('resultsSection').style.display = 'none'; | |
| // إظهار رسالة نجاح التحميل | |
| showLoadingMessage(`تم تحميل بيانات قسم ${departmentNames[department]} بنجاح`); | |
| } else { | |
| // إزالة التحديد في حالة فشل التحميل | |
| selectedCard.classList.remove('selected'); | |
| searchBtn.textContent = 'اختر القسم أولاً'; | |
| document.getElementById('studentName').placeholder = 'ادخل اسم الطالب كاملاً'; | |
| } | |
| } | |
| // تحميل بيانات الطلاب من ملف JSON | |
| async function loadStudentsData(filename) { | |
| try { | |
| const response = await fetch(filename); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| studentsData = data; | |
| console.log(`تم تحميل ${studentsData.length} طالب من ${filename}`); | |
| return true; | |
| } catch (error) { | |
| console.error('خطأ في تحميل البيانات:', error); | |
| let errorMessage = `فشل في تحميل بيانات قسم ${departmentNames[currentDepartment]}`; | |
| if (error.message.includes('404')) { | |
| errorMessage += '<br>الملف غير موجود: ' + filename; | |
| } else if (error.message.includes('Failed to fetch')) { | |
| errorMessage += '<br>تأكد من وجود الملف في نفس المجلد'; | |
| } else { | |
| errorMessage += '<br>خطأ في قراءة الملف: ' + error.message; | |
| } | |
| showError(errorMessage); | |
| return false; | |
| } | |
| } | |
| // البحث عن الطالب | |
| function searchStudent() { | |
| const studentName = document.getElementById('studentName').value.trim(); | |
| if (!currentDepartment) { | |
| showError('يرجى اختيار القسم أولاً'); | |
| return; | |
| } | |
| if (!studentName) { | |
| showError('يرجى إدخال اسم الطالب'); | |
| return; | |
| } | |
| if (!studentsData || studentsData.length === 0) { | |
| showError('لم يتم تحميل بيانات القسم بعد. يرجى اختيار القسم مرة أخرى.'); | |
| return; | |
| } | |
| showLoading(); | |
| // البحث في البيانات - بحث محسن للاسم الثلاثي والرباعي | |
| const student = studentsData.find(s => { | |
| const studentFullName = s['الاسم'] || s['اسم الطالب'] || s['name'] || ''; | |
| return searchByName(studentFullName.trim(), studentName.trim()); | |
| }); | |
| setTimeout(() => { | |
| hideLoading(); | |
| if (student) { | |
| displayStudentResult(student); | |
| } else { | |
| showError(`اسم الطالب "${studentName}" ${departmentNames[currentDepartment]}.<br>يرجى التأكد من كتابة الاسم بشكل صحيح كما هو مسجل في النظام.<br><br>يمكنك البحث بالاسم الثلاثي أو الرباعي الكامل.`); | |
| } | |
| }, 500); | |
| } | |
| // دالة البحث المحسنة للاسم الثلاثي والرباعي | |
| function searchByName(fullName, searchName) { | |
| // تنظيف الأسماء وإزالة المسافات الزائدة | |
| const cleanFullName = fullName.replace(/\s+/g, ' ').toLowerCase(); | |
| const cleanSearchName = searchName.replace(/\s+/g, ' ').toLowerCase(); | |
| // البحث المباشر بالاسم الكامل | |
| if (cleanFullName === cleanSearchName) { | |
| return true; | |
| } | |
| // تقسيم الأسماء إلى أجزاء | |
| const fullNameParts = cleanFullName.split(' ').filter(part => part.length > 0); | |
| const searchNameParts = cleanSearchName.split(' ').filter(part => part.length > 0); | |
| // إذا كان البحث بجزء واحد فقط، ابحث في الاسم الأول | |
| if (searchNameParts.length === 1) { | |
| return fullNameParts[0] === searchNameParts[0]; | |
| } | |
| // إذا كان البحث بجزأين، ابحث في الاسم الأول والأخير | |
| if (searchNameParts.length === 2) { | |
| return fullNameParts[0] === searchNameParts[0] && | |
| fullNameParts[fullNameParts.length - 1] === searchNameParts[1]; | |
| } | |
| // البحث بالاسم الثلاثي | |
| if (searchNameParts.length === 3) { | |
| if (fullNameParts.length >= 3) { | |
| // مطابقة الاسم الثلاثي الأول | |
| return fullNameParts[0] === searchNameParts[0] && | |
| fullNameParts[1] === searchNameParts[1] && | |
| fullNameParts[2] === searchNameParts[2]; | |
| } | |
| } | |
| // البحث بالاسم الرباعي | |
| if (searchNameParts.length === 4) { | |
| if (fullNameParts.length >= 4) { | |
| // مطابقة الاسم الرباعي الأول | |
| return fullNameParts[0] === searchNameParts[0] && | |
| fullNameParts[1] === searchNameParts[1] && | |
| fullNameParts[2] === searchNameParts[2] && | |
| fullNameParts[3] === searchNameParts[3]; | |
| } | |
| } | |
| // البحث المرن - إذا كان البحث أقل من الاسم الكامل | |
| if (searchNameParts.length < fullNameParts.length) { | |
| // تحقق من مطابقة الأجزاء الأولى | |
| for (let i = 0; i < searchNameParts.length; i++) { | |
| if (fullNameParts[i] !== searchNameParts[i]) { | |
| return false; | |
| } | |
| } | |
| return true; | |
| } | |
| // البحث المرن - إذا كان البحث أكثر من الاسم الكامل | |
| if (searchNameParts.length > fullNameParts.length) { | |
| // تحقق من مطابقة الأجزاء الموجودة | |
| for (let i = 0; i < fullNameParts.length; i++) { | |
| if (fullNameParts[i] !== searchNameParts[i]) { | |
| return false; | |
| } | |
| } | |
| return true; | |
| } | |
| // البحث بالتطابق الجزئي للأسماء المعقدة | |
| return searchNameParts.every(part => fullNameParts.includes(part)); | |
| } | |
| // عرض نتيجة الطالب | |
| function displayStudentResult(student) { | |
| const resultsContent = document.getElementById('resultsContent'); | |
| // الحصول على اسم الطالب | |
| const studentName = student['الاسم'] || student['اسم الطالب'] || student['name'] || 'غير محدد'; | |
| const studentId = student['رقم الجلوس'] || student['student_id'] || student['id'] || 'غير محدد'; | |
| let tableRows = ''; | |
| let totalGrades = 0; | |
| let subjectCount = 0; | |
| let failedSubjects = 0; | |
| // إضافة جميع البيانات مع تجميعها حسب النوع | |
| const personalInfo = []; | |
| const subjects = []; | |
| for (const [key, value] of Object.entries(student)) { | |
| if (key === 'الاسم' || key === 'اسم الطالب' || key === 'name') continue; | |
| // تخطي الحقول المطلوب إزالتها | |
| if (key.includes('المبلغ المتبقي') || key.includes('التقدير النهائي') || | |
| key.includes('remaining_amount') || key.includes('final_grade') || | |
| key.includes('التقدير العام') || key.includes('general_grade')) { | |
| continue; | |
| } | |
| let displayValue = value; | |
| let cellClass = ''; | |
| let rowClass = ''; | |
| // تنسيق خاص لحالة الطالب | |
| if (key === 'الحالة المالية' || key === 'financial_status') { | |
| const statusKey = 'حالة الطالب'; | |
| if (value === 'مستكمل') { | |
| displayValue = `<div class="student-status status-completed">مستكمل</div>`; | |
| } else if (value === 'محجوب') { | |
| displayValue = `<div class="student-status status-blocked blocked-status-clickable" onclick="showModal()">محجوب<div class="status-blocked-message">اضغط للمزيد من المعلومات</div></div>`; | |
| } else { | |
| displayValue = `<div class="student-status">${value}</div>`; | |
| } | |
| personalInfo.push({ key: statusKey, value: displayValue, class: cellClass, rowClass: rowClass }); | |
| continue; | |
| } | |
| // تنسيق للدرجات والمواد | |
| if (key.includes('درجة') || key.includes('أعمال السنة') || key.includes('النهائي') || | |
| key.includes('المجموع') || key.includes('grade') || key.includes('score')) { | |
| const numValue = parseFloat(value); | |
| if (!isNaN(numValue)) { | |
| if (numValue >= 28) { | |
| cellClass = 'grade-positive'; | |
| rowClass = 'subject-row passed'; | |
| } else if (numValue < 20) { | |
| cellClass = 'grade-negative'; | |
| rowClass = 'subject-row failed'; | |
| if (key.includes('المجموع') || key.includes('total')) { | |
| failedSubjects++; | |
| } | |
| } else { | |
| rowClass = 'subject-row'; | |
| } | |
| if (key.includes('المجموع') || key.includes('total')) { | |
| totalGrades += numValue; | |
| subjectCount++; | |
| } | |
| } | |
| subjects.push({ key, value: displayValue, class: cellClass, rowClass: rowClass }); | |
| } else { | |
| // معلومات شخصية أخرى | |
| personalInfo.push({ key, value: displayValue, class: cellClass, rowClass: rowClass }); | |
| } | |
| } | |
| // ترتيب البيانات: المعلومات الشخصية أولاً، ثم المواد | |
| const allData = [...personalInfo, ...subjects]; | |
| // إنشاء صفوف الجدول | |
| allData.forEach(item => { | |
| tableRows += ` | |
| <tr class="${item.rowClass}"> | |
| <th>${item.key}</th> | |
| <td class="${item.class}">${item.value}</td> | |
| </tr> | |
| `; | |
| }); | |
| // حساب المتوسط العام | |
| const averageGrade = subjectCount > 0 ? (totalGrades / subjectCount).toFixed(2) : 0; | |
| // إضافة معلومات القسم | |
| const departmentInfo = ` | |
| <div class="department-info"> | |
| <h3>قسم ${departmentNames[currentDepartment]}</h3> | |
| <p>تم العثور على بيانات الطالب بنجاح</p> | |
| </div> | |
| `; | |
| // إضافة إحصائيات (بدون التقدير العام) | |
| const statsSection = ` | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="number">${averageGrade}</div> | |
| <div class="label">المتوسط العام</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="number">${subjectCount}</div> | |
| <div class="label">عدد المواد</div> | |
| </div> | |
| <div class="stat-card failed"> | |
| <div class="number">${failedSubjects}</div> | |
| <div class="label"></div> | |
| </div> | |
| </div> | |
| `; | |
| // رسالة التوفيق | |
| const finalMessage = ` | |
| <div class="final-message"> | |
| <h3>بالتوفيق دائماً</h3> | |
| <p>نتمنى لك التوفيق والنجاح في مسيرتك الأكاديمية والمهنية</p> | |
| </div> | |
| `; | |
| resultsContent.innerHTML = ` | |
| <div class="success-message"> | |
| ✅ تم العثور على بيانات الطالب بنجاح | |
| </div> | |
| ${departmentInfo} | |
| <div class="student-info"> | |
| <div class="student-header"> | |
| <h2>${studentName}</h2> | |
| <p>رقم الجلوس: ${studentId} | القسم: ${departmentNames[currentDepartment]}</p> | |
| </div> | |
| <table class="info-table"> | |
| ${tableRows} | |
| </table> | |
| </div> | |
| ${statsSection} | |
| ${finalMessage} | |
| `; | |
| document.getElementById('resultsSection').style.display = 'block'; | |
| } | |
| // إظهار رسالة خطأ | |
| function showError(message) { | |
| const resultsContent = document.getElementById('resultsContent'); | |
| resultsContent.innerHTML = ` | |
| <div class="error-message"> | |
| ❌ ${message} | |
| </div> | |
| `; | |
| document.getElementById('resultsSection').style.display = 'block'; | |
| } | |
| // إظهار رسالة تحميل | |
| function showLoadingMessage(message) { | |
| const resultsContent = document.getElementById('resultsContent'); | |
| resultsContent.innerHTML = ` | |
| <div class="loading-message"> | |
| ✅ ${message} | |
| </div> | |
| `; | |
| document.getElementById('resultsSection').style.display = 'block'; | |
| // إخفاء الرسالة بعد 3 ثواني | |
| setTimeout(() => { | |
| document.getElementById('resultsSection').style.display = 'none'; | |
| }, 3000); | |
| } | |
| // إظهار شاشة التحميل | |
| function showLoading() { | |
| document.getElementById('loadingDiv').style.display = 'block'; | |
| document.getElementById('resultsContent').innerHTML = ''; | |
| document.getElementById('resultsSection').style.display = 'block'; | |
| } | |
| // إخفاء شاشة التحميل | |
| function hideLoading() { | |
| document.getElementById('loadingDiv').style.display = 'none'; | |
| } | |
| // البحث بالضغط على Enter | |
| document.getElementById('studentName').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' && !this.disabled) { | |
| searchStudent(); | |
| } | |
| }); | |
| // تأثيرات إضافية عند التحميل | |
| window.onload = function() { | |
| // تأثير تدريجي للأقسام | |
| document.querySelectorAll('.department-card').forEach((card, index) => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| card.style.transition = 'all 0.5s ease'; | |
| card.style.opacity = '1'; | |
| card.style.transform = 'translateY(0)'; | |
| }, index * 100); | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |