| <!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> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --primary-color: #1a3a6d; |
| --secondary-color: #0a5c5c; |
| --accent-color: #f8ba10; |
| --light-color: #f4f7fc; |
| --dark-color: #1c2331; |
| } |
| |
| body { |
| font-family: 'Tajawal', sans-serif; |
| background-color: var(--light-color); |
| min-height: 100vh; |
| background-image: linear-gradient(to bottom, #e6eef8, #f4f7fc); |
| } |
| |
| .login-container { |
| max-width: 450px; |
| padding: 2rem; |
| border-radius: 15px; |
| box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); |
| background-color: white; |
| margin: 3rem auto; |
| border-top: 5px solid var(--primary-color); |
| transition: all 0.3s ease; |
| } |
| |
| .login-container:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); |
| } |
| |
| .dashboard-container { |
| display: none; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 1rem; |
| } |
| |
| .logo-container { |
| text-align: center; |
| margin-bottom: 2rem; |
| } |
| |
| .logo-img { |
| max-width: 200px; |
| margin-bottom: 1rem; |
| border-radius: 10px; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); |
| transition: transform 0.3s ease; |
| } |
| |
| .logo-img:hover { |
| transform: scale(1.05); |
| } |
| |
| .form-control:focus, .btn:focus { |
| box-shadow: 0 0 0 0.25rem rgba(26, 58, 109, 0.25); |
| border-color: var(--primary-color); |
| } |
| |
| .btn-primary { |
| background-color: var(--primary-color); |
| border-color: var(--primary-color); |
| padding: 0.6rem 1.5rem; |
| font-weight: 500; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| background-color: #0f2952; |
| border-color: #0f2952; |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(15, 41, 82, 0.2); |
| } |
| |
| .system-card { |
| height: 100%; |
| transition: all 0.3s ease; |
| border: none; |
| border-radius: 15px; |
| overflow: hidden; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); |
| background: linear-gradient(to bottom, #ffffff, #f9fbff); |
| } |
| |
| .system-card:hover { |
| transform: translateY(-8px); |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); |
| } |
| |
| .card-icon { |
| font-size: 3rem; |
| color: var(--primary-color); |
| margin-bottom: 1.5rem; |
| transition: transform 0.3s ease; |
| background-color: rgba(26, 58, 109, 0.1); |
| width: 80px; |
| height: 80px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 50%; |
| margin: 0 auto 1.5rem; |
| } |
| |
| .system-card:hover .card-icon { |
| transform: scale(1.1); |
| background-color: rgba(26, 58, 109, 0.15); |
| } |
| |
| .footer { |
| text-align: center; |
| padding: 1.5rem 0; |
| margin-top: 3rem; |
| background-color: var(--primary-color); |
| color: white; |
| border-top: 3px solid var(--accent-color); |
| } |
| |
| .footer a { |
| color: var(--accent-color); |
| text-decoration: none; |
| font-weight: 500; |
| transition: all 0.3s ease; |
| } |
| |
| .footer a:hover { |
| text-decoration: underline; |
| color: #ffcc40; |
| } |
| |
| .header { |
| background-color: var(--primary-color); |
| color: white; |
| padding: 1rem 0; |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); |
| margin-bottom: 2rem; |
| } |
| |
| .login-form { |
| position: relative; |
| } |
| |
| .password-toggle { |
| position: absolute; |
| top: 50%; |
| left: 10px; |
| transform: translateY(-50%); |
| cursor: pointer; |
| color: var(--dark-color); |
| transition: all 0.3s ease; |
| } |
| |
| .password-toggle:hover { |
| color: var(--primary-color); |
| } |
| |
| .input-group { |
| margin-bottom: 1rem; |
| } |
| |
| .input-group-text { |
| background-color: var(--primary-color); |
| color: white; |
| border-color: var(--primary-color); |
| } |
| |
| .form-control { |
| border: 1px solid #ddd; |
| padding: 0.6rem 1rem; |
| font-size: 1rem; |
| transition: all 0.3s ease; |
| } |
| |
| .form-control:focus { |
| border-color: var(--primary-color); |
| transform: translateY(-2px); |
| } |
| |
| .systems-container { |
| background-color: white; |
| border-radius: 15px; |
| padding: 2rem; |
| box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); |
| margin-bottom: 2rem; |
| transition: all 0.3s ease; |
| } |
| |
| .systems-container:hover { |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); |
| } |
| |
| .section-title { |
| position: relative; |
| padding-bottom: 0.5rem; |
| margin-bottom: 2rem; |
| text-align: center; |
| color: var(--primary-color); |
| font-weight: 700; |
| } |
| |
| .section-title:after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 80px; |
| height: 3px; |
| background-color: var(--accent-color); |
| } |
| |
| .error-message { |
| color: #dc3545; |
| font-size: 0.875rem; |
| margin-top: 0.5rem; |
| display: none; |
| } |
| |
| .login-alert { |
| display: none; |
| margin-top: 1rem; |
| } |
| |
| .card-title { |
| color: var(--primary-color); |
| font-weight: 600; |
| margin-bottom: 1rem; |
| } |
| |
| .card-text { |
| color: #6c757d; |
| margin-bottom: 1.5rem; |
| } |
| |
| .logout-btn { |
| transition: all 0.3s ease; |
| } |
| |
| .logout-btn:hover { |
| background-color: #f8f9fa; |
| transform: translateY(-2px); |
| } |
| |
| |
| .complaints-card { |
| background: linear-gradient(135deg, #dc3545, #c82333); |
| color: white; |
| } |
| |
| .complaints-card .card-icon { |
| background-color: rgba(255, 255, 255, 0.2); |
| color: white; |
| } |
| |
| .complaints-card:hover .card-icon { |
| background-color: rgba(255, 255, 255, 0.3); |
| } |
| |
| .complaints-card .card-title, |
| .complaints-card .card-text { |
| color: white; |
| } |
| |
| .complaints-card .btn-primary { |
| background-color: white; |
| color: #dc3545; |
| border-color: white; |
| } |
| |
| .complaints-card .btn-primary:hover { |
| background-color: #f8f9fa; |
| color: #c82333; |
| border-color: #f8f9fa; |
| } |
| |
| @media (max-width: 768px) { |
| .login-container { |
| margin: 1.5rem 1rem; |
| padding: 1.5rem; |
| } |
| |
| .systems-container { |
| padding: 1.5rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="login-page"> |
| <div class="container"> |
| <div class="login-container"> |
| <div class="logo-container"> |
| <img src="https://ufastpro.com/wp-content/uploads/2025/04/476234917_1002033431973236_2935522081755714863_n.jpg" alt="شعار معهد مدينة العلوم العصرية" class="logo-img"> |
| <h2 class="mb-3 text-center" style="color: var(--primary-color);">معهد مدينة العلوم العصرية</h2> |
| <p class="text-muted text-center">المنصة التعليمية الإدارية</p> |
| </div> |
| <div class="alert alert-danger login-alert" id="login-error" role="alert"> |
| <i class="fas fa-exclamation-circle me-2"></i> اسم المستخدم أو كلمة المرور غير صحيحة |
| </div> |
| <form id="login-form" class="needs-validation" novalidate> |
| <div class="mb-3"> |
| <label for="username" class="form-label">اسم المستخدم</label> |
| <div class="input-group"> |
| <span class="input-group-text"><i class="fas fa-user"></i></span> |
| <input type="text" class="form-control" id="username" placeholder="أدخل اسم المستخدم" required> |
| </div> |
| <div class="invalid-feedback"> |
| يرجى إدخال اسم المستخدم |
| </div> |
| </div> |
| <div class="mb-3"> |
| <label for="password" class="form-label">كلمة المرور</label> |
| <div class="input-group login-form"> |
| <span class="input-group-text"><i class="fas fa-lock"></i></span> |
| <input type="password" class="form-control" id="password" placeholder="أدخل كلمة المرور" required> |
| <i class="fas fa-eye password-toggle" id="toggle-password"></i> |
| </div> |
| <div class="invalid-feedback"> |
| يرجى إدخال كلمة المرور |
| </div> |
| </div> |
| <div class="mb-3 form-check"> |
| <input type="checkbox" class="form-check-input" id="remember-me"> |
| <label class="form-check-label" for="remember-me">تذكرني</label> |
| </div> |
| <div class="d-grid gap-2"> |
| <button type="submit" class="btn btn-primary btn-lg"> |
| <i class="fas fa-sign-in-alt me-2"></i> تسجيل الدخول |
| </button> |
| </div> |
| </form> |
| <div class="mt-3 text-center"> |
| <a href="#" class="text-decoration-none">نسيت كلمة المرور؟</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="dashboard-page" class="dashboard-container"> |
| <div class="header"> |
| <div class="container d-flex justify-content-between align-items-center"> |
| <div class="d-flex align-items-center"> |
| <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;"> |
| <h4 class="mb-0">معهد مدينة العلوم العصرية</h4> |
| </div> |
| <div> |
| <span class="me-3" id="username-display">مرحباً، المستخدم</span> |
| <button id="logout-btn" class="btn btn-sm btn-light logout-btn"> |
| <i class="fas fa-sign-out-alt me-1"></i> تسجيل الخروج |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="container"> |
| <div class="systems-container"> |
| <h2 class="section-title">الأنظمة الإدارية</h2> |
| |
| <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4"> |
| |
| <div class="col"> |
| <div class="card h-100 system-card"> |
| <div class="card-body text-center p-4"> |
| <div class="card-icon"> |
| <i class="fas fa-user-graduate"></i> |
| </div> |
| <h4 class="card-title">نظام الطلاب</h4> |
| <p class="card-text">إدارة شؤون الطلاب والتسجيل والمتابعة الأكاديمية</p> |
| <a href="https://quintadb.com/apps/cgvmoeW55dI43dTNDJW7WH/portals/coWOO0W7vdPykeWQboW71s/widget" class="btn btn-primary w-100" target="_blank"> |
| <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="col"> |
| <div class="card h-100 system-card"> |
| <div class="card-body text-center p-4"> |
| <div class="card-icon"> |
| <i class="fas fa-clock"></i> |
| </div> |
| <h4 class="card-title">الحضور والانصراف</h4> |
| <p class="card-text">نظام تسجيل حضور وانصراف الموظفين والمتابعة</p> |
| <a href="https://quintadb.com/apps/coWQVdNSnpW4_dMmo8FSo7/portals/avW6n-W5vooykwdColp8o_/widget" class="btn btn-primary w-100" target="_blank"> |
| <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="col"> |
| <div class="card h-100 system-card"> |
| <div class="card-body text-center p-4"> |
| <div class="card-icon"> |
| <i class="fas fa-id-card"></i> |
| </div> |
| <h4 class="card-title">بيانات الموظفين</h4> |
| <p class="card-text">إدارة بيانات الموظفين والملفات الشخصية</p> |
| <a href="https://quintadb.com/a4bbXi8" class="btn btn-primary w-100" target="_blank"> |
| <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="col"> |
| <div class="card h-100 system-card"> |
| <div class="card-body text-center p-4"> |
| <div class="card-icon"> |
| <i class="fas fa-exchange-alt"></i> |
| </div> |
| <h4 class="card-title">الصادر والوارد</h4> |
| <p class="card-text">نظام إدارة المراسلات والوثائق الصادرة والواردة</p> |
| <a href="https://quintadb.com/bxWdcIC" class="btn btn-primary w-100" target="_blank"> |
| <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="col"> |
| <div class="card h-100 system-card"> |
| <div class="card-body text-center p-4"> |
| <div class="card-icon"> |
| <i class="fas fa-file-alt"></i> |
| </div> |
| <h4 class="card-title">وارد معهد قوات مسلحة</h4> |
| <p class="card-text">نظام إدارة امتحانات وبيانات معهد القوات المسلحة</p> |
| <a href="https://quintadb.com/dcRdcGw" class="btn btn-primary w-100" target="_blank"> |
| <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام |
| </a> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="col"> |
| <div class="card h-100 system-card complaints-card"> |
| <div class="card-body text-center p-4"> |
| <div class="card-icon"> |
| <i class="fas fa-exclamation-triangle"></i> |
| </div> |
| <h4 class="card-title">نظام الشكاوى</h4> |
| <p class="card-text">تسجيل ومتابعة الشكاوى والاقتراحات من الطلاب والموظفين</p> |
| <a href="https://quintadb.com/cpWblW6" class="btn btn-primary w-100" target="_blank"> |
| <i class="fas fa-external-link-alt me-1"></i> الدخول للنظام |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <footer class="footer"> |
| <div class="container"> |
| <p class="mb-0">جميع الحقوق محفوظة © 2025 | معهد مدينة العلوم العصرية | تصميم شركة <a href="https://ufastpro.com/" target="_blank">فاستبرو</a></p> |
| </div> |
| </footer> |
| </div> |
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
| <script> |
| |
| const ADMIN_USERNAME = "admin"; |
| const ADMIN_PASSWORD = "10203040"; |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const isLoggedIn = localStorage.getItem('isLoggedIn'); |
| if (isLoggedIn === 'true') { |
| const username = localStorage.getItem('username'); |
| showDashboard(username); |
| } |
| |
| |
| const loginForm = document.getElementById('login-form'); |
| loginForm.addEventListener('submit', function(event) { |
| event.preventDefault(); |
| |
| |
| if (!loginForm.checkValidity()) { |
| event.stopPropagation(); |
| loginForm.classList.add('was-validated'); |
| return; |
| } |
| |
| const username = document.getElementById('username').value; |
| const password = document.getElementById('password').value; |
| |
| |
| if (validateCredentials(username, password)) { |
| |
| if (document.getElementById('remember-me').checked) { |
| localStorage.setItem('username', username); |
| localStorage.setItem('isLoggedIn', 'true'); |
| } |
| |
| |
| document.getElementById('login-error').style.display = 'none'; |
| |
| |
| showDashboard(username); |
| } else { |
| |
| document.getElementById('login-error').style.display = 'block'; |
| } |
| }); |
| |
| |
| document.getElementById('logout-btn').addEventListener('click', function() { |
| |
| localStorage.removeItem('isLoggedIn'); |
| localStorage.removeItem('username'); |
| |
| |
| document.getElementById('login-page').style.display = 'block'; |
| document.getElementById('dashboard-page').style.display = 'none'; |
| }); |
| |
| |
| document.getElementById('toggle-password').addEventListener('click', function() { |
| const passwordInput = document.getElementById('password'); |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| this.classList.remove('fa-eye'); |
| this.classList.add('fa-eye-slash'); |
| } else { |
| passwordInput.type = 'password'; |
| this.classList.remove('fa-eye-slash'); |
| this.classList.add('fa-eye'); |
| } |
| }); |
| }); |
| |
| |
| function validateCredentials(username, password) { |
| |
| return (username === ADMIN_USERNAME && password === ADMIN_PASSWORD); |
| } |
| |
| |
| function showDashboard(username) { |
| document.getElementById('login-page').style.display = 'none'; |
| document.getElementById('dashboard-page').style.display = 'block'; |
| document.getElementById('username-display').textContent = 'مرحباً، ' + username; |
| } |
| </script> |
| </body> |
| </html> |
