|
|
<!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> |
