hasanlali/anycoder-5bc965d3
0
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 8 <!-- Font Awesome for Icons -->9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">10 11 <!-- Google Fonts: Cairo for Arabic -->12 <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap" rel="stylesheet">13 14 <style>15 :root {16 --primary-color: #1e3a8a;17 --secondary-color: #3b82f6;18 --accent-color: #10b981;19 --warning-color: #f59e0b;20 --danger-color: #ef4444;21 --bg-color: #f0f4f8;22 --card-bg: #ffffff;23 --text-color: #1f2937;24 --border-radius: 12px;25 --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);26 --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);27 }28 29 * {30 margin: 0;31 padding: 0;32 box-sizing: border-box;33 }34 35 body {36 font-family: 'Cairo', sans-serif;37 background: linear-gradient(135deg, #f0f4f8 0%, #d9e2ec 100%);38 color: var(--text-color);39 min-height: 100vh;40 overflow-x: hidden;41 }42 43 /* Header Styles */44 .header {45 background: linear-gradient(135deg, var(--primary-color) 0%, #0f172a 100%);46 color: white;47 padding: 1rem 0;48 box-shadow: var(--shadow-lg);49 position: sticky;50 top: 0;51 z-index: 1000;52 }53 54 .header-content {55 max-width: 1200px;56 margin: 0 auto;57 padding: 0 1.5rem;58 display: flex;59 justify-content: space-between;60 align-items: center;61 flex-wrap: wrap;62 gap: 1rem;63 }64 65 .logo-section {66 display: flex;67 align-items: center;68 gap: 1rem;69 }70 71 .logo {72 width: 60px;73 height: 60px;74 background: white;75 border-radius: 50%;76 display: flex;77 align-items: center;78 justify-content: center;79 font-size: 1.8rem;80 color: var(--primary-color);81 box-shadow: 0 0 20px rgba(255,255,255,0.3);82 }83 84 .school-info h1 {85 font-size: 1.5rem;86 font-weight: 800;87 margin-bottom: 0.2rem;88 }89 90 .school-info p {91 font-size: 0.9rem;92 opacity: 0.9;93 }94 95 .developer-credit {96 background: rgba(255,255,255,0.15);97 padding: 0.5rem 1rem;98 border-radius: 20px;99 font-size: 0.85rem;100 backdrop-filter: blur(10px);101 border: 1px solid rgba(255,255,255,0.2);102 }103 104 .developer-credit a {105 color: #60a5fa;106 text-decoration: none;107 font-weight: 700;108 transition: color 0.3s;109 }110 111 .developer-credit a:hover {112 color: #93c5fd;113 text-decoration: underline;114 }115 116 /* Navigation */117 .nav-container {118 background: white;119 box-shadow: var(--shadow);120 position: sticky;121 top: 90px;122 z-index: 999;123 }124 125 .nav {126 max-width: 1200px;127 margin: 0 auto;128 padding: 0 1.5rem;129 display: flex;130 gap: 0.5rem;131 overflow-x: auto;132 scrollbar-width: none;133 }134 135 .nav::-webkit-scrollbar {136 display: none;137 }138 139 .nav-btn {140 padding: 1rem 1.5rem;141 border: none;142 background: transparent;143 color: #64748b;144 font-family: inherit;145 font-weight: 600;146 cursor: pointer;147 border-bottom: 3px solid transparent;148 transition: all 0.3s;149 white-space: nowrap;150 display: flex;151 align-items: center;152 gap: 0.5rem;153 }154 155 .nav-btn:hover {156 color: var(--primary-color);157 background: #f8fafc;158 }159 160 .nav-btn.active {161 color: var(--primary-color);162 border-bottom-color: var(--primary-color);163 background: #eff6ff;164 }165 166 /* Main Content */167 .main-container {168 max-width: 1200px;169 margin: 2rem auto;170 padding: 0 1.5rem;171 }172 173 .page {174 display: none;175 animation: fadeIn 0.5s ease;176 }177 178 .page.active {179 display: block;180 }181 182 @keyframes fadeIn {183 from { opacity: 0; transform: translateY(20px); }184 to { opacity: 1; transform: translateY(0); }185 }186 187 /* Cards */188 .card {189 background: var(--card-bg);190 border-radius: var(--border-radius);191 padding: 2rem;192 box-shadow: var(--shadow);193 margin-bottom: 1.5rem;194 border: 1px solid #e2e8f0;195 }196 197 .card-header {198 display: flex;199 justify-content: space-between;200 align-items: center;201 margin-bottom: 1.5rem;202 flex-wrap: wrap;203 gap: 1rem;204 }205 206 .card-title {207 font-size: 1.5rem;208 color: var(--primary-color);209 font-weight: 700;210 display: flex;211 align-items: center;212 gap: 0.75rem;213 }214 215 /* Dashboard Specific */216 .status-grid {217 display: grid;218 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));219 gap: 1.5rem;220 margin-bottom: 2rem;221 }222 223 .status-card {224 background: white;225 border-radius: var(--border-radius);226 padding: 2rem;227 text-align: center;228 box-shadow: var(--shadow);229 border-top: 4px solid var(--secondary-color);230 transition: transform 0.3s;231 }232 233 .status-card:hover {234 transform: translateY(-5px);235 }236 237 .status-card.cars {238 border-top-color: var(--accent-color);239 }240 241 .status-card.buses {242 border-top-color: var(--warning-color);243 }244 245 .status-icon {246 font-size: 3rem;247 margin-bottom: 1rem;248 }249 250 .status-card.cars .status-icon { color: var(--accent-color); }251 .status-card.buses .status-icon { color: var(--warning-color); }252 253 .status-title {254 font-size: 1.25rem;255 font-weight: 700;256 margin-bottom: 0.5rem;257 color: #374151;258 }259 260 .timer-display {261 font-size: 3rem;262 font-weight: 800;263 color: var(--primary-color);264 font-family: 'Courier New', monospace;265 margin: 1rem 0;266 text-shadow: 2px 2px 4px rgba(0,0,0,0.1);267 }268 269 .phase-indicator {270 display: inline-flex;271 align-items: center;272 gap: 0.5rem;273 padding: 0.5rem 1rem;274 border-radius: 20px;275 font-weight: 700;276 font-size: 0.9rem;277 }278 279 .phase-active {280 background: #d1fae5;281 color: #065f46;282 }283 284 .phase-waiting {285 background: #fee2e2;286 color: #991b1b;287 }288 289 /* Traffic Light */290 .traffic-light {291 display: flex;292 flex-direction: column;293 gap: 1rem;294 align-items: center;295 margin: 2rem 0;296 }297 298 .light {299 width: 80px;300 height: 80px;301 border-radius: 50%;302 background: #e5e7eb;303 box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);304 transition: all 0.3s;305 position: relative;306 }307 308 .light.active {309 box-shadow: 0 0 30px currentColor;310 transform: scale(1.1);311 }312 313 .light.cars { color: var(--accent-color); }314 .light.buses { color: var(--warning-color); }315 .light.emergency { color: var(--danger-color); }316 317 .light.active.cars { background: var(--accent-color); }318 .light.active.buses { background: var(--warning-color); }319 .light.active.emergency { background: var(--danger-color); }320 321 /* Forms */322 .form-grid {323 display: grid;324 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));325 gap: 1.5rem;326 }327 328 .form-group {329 display: flex;330 flex-direction: column;331 gap: 0.5rem;332 }333 334 .form-group.full-width {335 grid-column: 1 / -1;336 }337 338 label {339 font-weight: 600;340 color: #374151;341 font-size: 0.95rem;342 }343 344 input, select {345 padding: 0.75rem 1rem;346 border: 2px solid #e5e7eb;347 border-radius: 8px;348 font-family: inherit;349 font-size: 1rem;350 transition: all 0.3s;351 }352 353 input:focus, select:focus {354 outline: none;355 border-color: var(--secondary-color);356 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);357 }358 359 .radio-group {360 display: flex;361 gap: 2rem;362 flex-wrap: wrap;363 }364 365 .radio-option {366 display: flex;367 align-items: center;368 gap: 0.5rem;369 cursor: pointer;370 }371 372 .companion-fields {373 background: #f8fafc;374 padding: 1.5rem;375 border-radius: 8px;376 border: 2px dashed #cbd5e1;377 margin-top: 1rem;378 display: none;379 }380 381 .companion-fields.show {382 display: block;383 animation: slideDown 0.3s ease;384 }385 386 @keyframes slideDown {387 from { opacity: 0; max-height: 0; }388 to { opacity: 1; max-height: 500px; }389 }390 391 /* Buttons */392 .btn {393 padding: 0.75rem 1.5rem;394 border: none;395 border-radius: 8px;396 font-family: inherit;397 font-weight: 600;398 cursor: pointer;399 transition: all 0.3s;400 display: inline-flex;401 align-items: center;402 gap: 0.5rem;403 font-size: 1rem;404 }405 406 .btn-primary {407 background: var(--primary-color);408 color: white;409 }410 411 .btn-primary:hover {412 background: #1e40af;413 transform: translateY(-2px);414 box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);415 }416 417 .btn-success {418 background: var(--accent-color);419 color: white;420 }421 422 .btn-success:hover {423 background: #059669;424 }425 426 .btn-danger {427 background: var(--danger-color);428 color: white;429 }430 431 .btn-warning {432 background: var(--warning-color);433 color: white;434 }435 436 .btn-secondary {437 background: #e2e8f0;438 color: #475569;439 }440 441 .btn-group {442 display: flex;443 gap: 1rem;444 flex-wrap: wrap;445 margin-top: 1.5rem;446 }447 448 /* Tables */449 .table-container {450 overflow-x: auto;451 margin-top: 2rem;452 border-radius: 8px;453 border: 1px solid #e2e8f0;454 }455 456 table {457 width: 100%;458 border-collapse: collapse;459 background: white;460 }461 462 th, td {463 padding: 1rem;464 text-align: right;465 border-bottom: 1px solid #e2e8f0;466 }467 468 th {469 background: #f8fafc;470 font-weight: 700;471 color: var(--primary-color);472 text-transform: uppercase;473 font-size: 0.85rem;474 letter-spacing: 0.05em;475 }476 477 tr:hover {478 background: #f8fafc;479 }480 481 .badge {482 padding: 0.25rem 0.75rem;483 border-radius: 12px;484 font-size: 0.85rem;485 font-weight: 600;486 }487 488 .badge-success {489 background: #d1fae5;490 color: #065f46;491 }492 493 .badge-info {494 background: #dbeafe;495 color: #1e40af;496 }497 498 /* Admin Panel */499 .admin-controls {500 display: grid;501 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));502 gap: 1rem;503 margin-bottom: 2rem;504 }505 506 .control-card {507 background: white;508 padding: 1.5rem;509 border-radius: var(--border-radius);510 box-shadow: var(--shadow);511 text-align: center;512 border: 2px solid transparent;513 transition: all 0.3s;514 }515 516 .control-card:hover {517 border-color: var(--secondary-color);518 }519 520 .timer-controls {521 display: flex;522 gap: 1rem;523 justify-content: center;524 margin-top: 1rem;525 }526 527 /* Statistics */528 .stats-grid {529 display: grid;530 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));531 gap: 1.5rem;532 margin-bottom: 2rem;533 }534 535 .stat-card {536 background: white;537 padding: 1.5rem;538 border-radius: var(--border-radius);539 box-shadow: var(--shadow);540 display: flex;541 align-items: center;542 gap: 1rem;543 }544 545 .stat-icon {546 width: 60px;547 height: 60px;548 border-radius: 12px;549 display: flex;550 align-items: center;551 justify-content: center;552 font-size: 1.5rem;553 color: white;554 }555 556 .stat-icon.blue { background: var(--secondary-color); }557 .stat-icon.green { background: var(--accent-color); }558 .stat-icon.orange { background: var(--warning-color); }559 .stat-icon.red { background: var(--danger-color); }560 561 .stat-info h3 {562 font-size: 2rem;563 font-weight: 800;564 color: var(--text-color);565 }566 567 .stat-info p {568 color: #64748b;569 font-size: 0.9rem;570 }571 572 .chart-container {573 background: white;574 padding: 2rem;575 border-radius: var(--border-radius);576 box-shadow: var(--shadow);577 margin-top: 2rem;578 height: 400px;579 position: relative;580 }581 582 /* Alert Box */583 .alert {584 padding: 1rem 1.5rem;585 border-radius: 8px;586 margin-bottom: 1rem;587 display: none;588 align-items: center;589 gap: 0.75rem;590 font-weight: 600;591 }592 593 .alert.show {594 display: flex;595 animation: slideIn 0.3s ease;596 }597 598 @keyframes slideIn {599 from { transform: translateX(-100%); opacity: 0; }600 to { transform: translateX(0); opacity: 1; }601 }602 603 .alert-success {604 background: #d1fae5;605 color: #065f46;606 border: 1px solid #a7f3d0;607 }608 609 .alert-warning {610 background: #fef3c7;611 color: #92400e;612 border: 1px solid #fde68a;613 }614 615 /* Responsive */616 @media (max-width: 768px) {617 .header-content {618 flex-direction: column;619 text-align: center;620 }621 622 .school-info h1 {623 font-size: 1.2rem;624 }625 626 .timer-display {627 font-size: 2rem;628 }629 630 .form-grid {631 grid-template-columns: 1fr;632 }633 634 .btn-group {635 flex-direction: column;636 }637 638 table {639 font-size: 0.9rem;640 }641 642 th, td {643 padding: 0.75rem 0.5rem;644 }645 }646 647 /* Print Styles */648 @media print {649 .header, .nav-container, .btn-group {650 display: none;651 }652 653 .card {654 box-shadow: none;655 border: 1px solid #ddd;656 break-inside: avoid;657 }658 }659 660 /* Emergency Blink */661 @keyframes blink {662 0%, 100% { opacity: 1; }663 50% { opacity: 0.5; }664 }665 666 .emergency-active {667 animation: blink 1s infinite;668 background: #fee2e2 !important;669 }670 </style>671</head>672<body>673 674 <!-- Header -->675 <header class="header">676 <div class="header-content">677 <div class="logo-section">678 <div class="logo">679 <i class="fas fa-school"></i>680 </div>681 <div class="school-info">682 <h1>مدرسة سميسمة الثانوية للبنين</h1>683 <p>نظام السلامة المرورية الذكي</p>684 </div>685 </div>686 <div class="developer-credit">687 <i class="fas fa-code"></i>688 تطوير: <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">حسن العلي</a> | 689 <span style="font-size: 0.8rem;">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></span>690 </div>691 </div>692 </header>693 694 <!-- Navigation -->695 <nav class="nav-container">696 <div class="nav">697 <button class="nav-btn active" onclick="showPage('dashboard')">698 <i class="fas fa-home"></i>699 الرئيسية700 </button>701 <button class="nav-btn" onclick="showPage('exit')">702 <i class="fas fa-car-side"></i>703 تسجيل الخروج704 </button>705 <button class="nav-btn" onclick="showPage('entry')">706 <i class="fas fa-car"></i>707 تسجيل الدخول708 </button>709 <button class="nav-btn" onclick="showPage('admin')">710 <i class="fas fa-user-shield"></i>711 لوحة المشرف712 </button>713 <button class="nav-btn" onclick="showPage('stats')">714 <i class="fas fa-chart-bar"></i>715 الإحصائيات716 </button>717 </div>718 </nav>719 720 <!-- Main Content -->721 <main class="main-container">722 723 <!-- Alert Container -->724 <div id="alertContainer"></div>725 726 <!-- Dashboard Page -->727 <section id="dashboard" class="page active">728 <div class="card">729 <div class="card-header">730 <h2 class="card-title">731 <i class="fas fa-traffic-light"></i>732 لوحة التحكم المرورية733 </h2>734 <span id="currentTime" class="badge badge-info" style="font-size: 1.1rem;"></span>735 </div>736 737 <div class="status-grid">738 <div class="status-card cars" id="carsCard">739 <div class="status-icon">740 <i class="fas fa-car"></i>741 </div>742 <div class="status-title">مرحلة خروج السيارات الخاصة</div>743 <div class="phase-indicator phase-active" id="carsStatus">744 <i class="fas fa-check-circle"></i>745 نشطة746 </div>747 </div>748 749 <div class="status-card buses" id="busesCard">750 <div class="status-icon">751 <i class="fas fa-bus"></i>752 </div>753 <div class="status-title">مرحلة خروج الباصات</div>754 <div class="phase-indicator phase-waiting" id="busesStatus">755 <i class="fas fa-clock"></i>756 في الانتظار757 </div>758 </div>759 </div>760 761 <div style="text-align: center; margin: 2rem 0;">762 <div class="traffic-light">763 <div class="light cars active" id="carLight"></div>764 <div class="light buses" id="busLight"></div>765 <div class="light emergency" id="emergencyLight"></div>766 </div>767 768 <div style="margin: 2rem 0;">769 <div style="font-size: 1.2rem; color: #64748b; margin-bottom: 0.5rem;">الوقت المتبقي للمرحلة الحالية</div>770 <div class="timer-display" id="mainTimer">10:00</div>771 </div>772 773 <div id="phaseMessage" style="font-size: 1.1rem; color: var(--primary-color); font-weight: 700;">774 يُسمح الآن بدخول وخروج السيارات الخاصة775 </div>776 </div>777 </div>778 779 <div class="card">780 <h3 style="margin-bottom: 1rem; color: var(--primary-color);">781 <i class="fas fa-info-circle"></i>782 توجيهات السلامة783 </h3>784 <ul style="line-height: 2; color: #475569;">785 <li>يرجى الالتزام بإشارات المرور والمسؤولين أثناء الانصراف</li>786 <li>تأكد من ربط حزام الأمان قبل تحريك السيارة</li>787 <li>لا تتجاوز السرعة المحددة داخل المدرسة (20 كم/ساعة)</li>788 <li>انتظر دورك بصبر لتجنب الازدحام المروري</li>789 <li>في حالة الطوارئ، اتبع تعليمات المشرفين فوراً</li>790 </ul>791 </div>792 </section>793 794 <!-- Exit Registration Page -->795 <section id="exit" class="page">796 <div class="card">797 <div class="card-header">798 <h2 class="card-title">799 <i class="fas fa-sign-out-alt"></i>800 تسجيل خروج الطلاب بالسيارة801 </h2>802 </div>803 804 <form id="exitForm" onsubmit="handleExitSubmit(event)">805 <div class="form-grid">806 <div class="form-group">807 <label>اسم الطالب</label>808 <input type="text" id="exitStudentName" required placeholder="أدخل الاسم الكامل">809 </div>810 811 <div class="form-group">812 <label>الرقم المدرسي</label>813 <input type="text" id="exitStudentId" required placeholder="مثال: 12345">814 </div>815 816 <div class="form-group">817 <label>الصف / الشعبة</label>818 <select id="exitClass" required>819 <option value="">اختر الصف</option>820 <option value=" الأول الثانوي"> الأول الثانوي</option>821 <option value=" الثاني الثانوي"> الثاني الثانوي</option>822 <option value=" الثالث الثانوي"> الثالث الثانوي</option>823 </select>824 </div>825 826 <div class="form-group">827 <label>رقم لوحة السيارة</label>828 <input type="text" id="exitCarNumber" required placeholder="مثال: 12345 - أ ب ت">829 </div>830 831 <div class="form-group">832 <label>نوع السيارة</label>833 <select id="exitCarType" required>834 <option value="">اختر النوع</option>835 <option value="سيدان">سيدان</option>836 <option value="دفع رباعي">دفع رباعي</option>837 <option value="هاتشباك">هاتشباك</option>838 <option value="بيك أب">بيك أب</option>839 <option value="فان">فان</option>840 </select>841 </div>842 843 <div class="form-group full-width">844 <label>هل يوجد مرافقون مع الطالب؟</label>845 <div class="radio-group">846 <label class="radio-option">847 <input type="radio" name="hasCompanions" value="no" checked onchange="toggleCompanions('exit', false)">848 <span>لا يوجد</span>849 </label>850 <label class="radio-option">851 <input type="radio" name="hasCompanions" value="yes" onchange="toggleCompanions('exit', true)">852 <span>نعم يوجد</span>853 </label>854 </div>855 </div>856 857 <div id="exitCompanionsSection" class="companion-fields full-width">858 <div class="form-group">859 <label>عدد المرافقين</label>860 <select id="exitCompanionCount" onchange="generateCompanionFields('exit')">861 <option value="1">1</option>862 <option value="2">2</option>863 <option value="3">3</option>864 </select>865 </div>866 <div id="exitCompanionNames"></div>867 </div>868 </div>869 870 <div class="btn-group">871 <button type="submit" class="btn btn-success">872 <i class="fas fa-save"></i>873 تسجيل الانصراف874 </button>875 <button type="reset" class="btn btn-secondary">876 <i class="fas fa-undo"></i>877 مسح النموذج878 </button>879 </div>880 </form>881 882 <div class="table-container">883 <table id="exitTable">884 <thead>885 <tr>886 <th>الوقت</th>887 <th>الاسم</th>888 <th>الرقم المدرسي</th>889 <th>الصف</th>890 <th>السيارة</th>891 <th>المرافقون</th>892 <th>إجراء</th>893 </tr>894 </thead>895 <tbody id="exitTableBody">896 </tbody>897 </table>898 </div>899 </div>900 </section>901 902 <!-- Entry Registration Page -->903 <section id="entry" class="page">904 <div class="card">905 <div class="card-header">906 <h2 class="card-title">907 <i class="fas fa-sign-in-alt"></i>908 تسجيل دخول الطلاب بالسيارة909 </h2>910 </div>911 912 <form id="entryForm" onsubmit="handleEntrySubmit(event)">913 <div class="form-grid">914 <div class="form-group">915 <label>اسم الطالب</label>916 <input type="text" id="entryStudentName" required placeholder="أدخل الاسم الكامل">917 </div>918 919 <div class="form-group">920 <label>الرقم المدرسي</label>921 <input type="text" id="entryStudentId" required placeholder="مثال: 12345">922 </div>923 924 <div class="form-group">925 <label>الصف / الشعبة</label>926 <select id="entryClass" required>927 <option value="">اختر الصف</option>928 <option value=" الأول الثانوي"> الأول الثانوي</option>929 <option value=" الثاني الثانوي"> الثاني الثانوي</option>930 <option value=" الثالث الثانوي"> الثالث الثانوي</option>931 </select>932 </div>933 934 <div class="form-group">935 <label>رقم لوحة السيارة</label>936 <input type="text" id="entryCarNumber" required placeholder="مثال: 12345 - أ ب ت">937 </div>938 939 <div class="form-group">940 <label>نوع السيارة</label>941 <select id="entryCarType" required>942 <option value="">اختر النوع</option>943 <option value="سيدان">سيدان</option>944 <option value="دفع رباعي">دفع رباعي</option>945 <option value="هاتشباك">هاتشباك</option>946 <option value="بيك أب">بيك أب</option>947 <option value="فان">فان</option>948 </select>949 </div>950 </div>951 952 <div class="btn-group">953 <button type="submit" class="btn btn-primary">954 <i class="fas fa-save"></i>955 تسجيل الدخول956 </button>957 <button type="reset" class="btn btn-secondary">958 <i class="fas fa-undo"></i>959 مسح النموذج960 </button>961 </div>962 </form>963 964 <div class="table-container">965 <table id="entryTable">966 <thead>967 <tr>968 <th>الوقت</th>969 <th>الاسم</th>970 <th>الرقم المدرسي</th>971 <th>الصف</th>972 <th>السيارة</th>973 <th>إجراء</th>974 </tr>975 </thead>976 <tbody id="entryTableBody">977 </tbody>978 </table>979 </div>980 </div>981 </section>982 983 <!-- Admin Panel Page -->984 <section id="admin" class="page">985 <div class="card">986 <div class="card-header">987 <h2 class="card-title">988 <i class="fas fa-cogs"></i>989 لوحة تحكم المشرف990 </h2>991 </div>992 993 <div class="admin-controls">994 <div class="control-card">995 <h3 style="margin-bottom: 1rem; color: var(--accent-color);">996 <i class="fas fa-play-circle"></i>997 بدء الانصراف998 </h3>999 <p style="color: #64748b; margin-bottom: 1rem;">بدء عملية تنظيم الحركة المرورية</p>1000 <button class="btn btn-success" onclick="startDismissal()" style="width: 100%;">1001 بدء التشغيل1002 </button>1003 </div>1004 1005 <div class="control-card">1006 <h3 style="margin-bottom: 1rem; color: var(--warning-color);">1007 <i class="fas fa-exchange-alt"></i>1008 تبديل المرحلة1009 </h3>1010 <p style="color: #64748b; margin-bottom: 1rem;">الانتقال بين مرحلة السيارات والباصات</p>1011 <button class="btn btn-warning" onclick="switchPhase()" style="width: 100%;">1012 تبديل الآن1013 </button>1014 </div>1015 1016 <div class="control-card" style="border-color: var(--danger-color);">1017 <h3 style="margin-bottom: 1rem; color: var(--danger-color);">1018 <i class="fas fa-exclamation-triangle"></i>1019 إيقاف الطوارئ1020 </h3>1021 <p style="color: #64748b; margin-bottom: 1rem;">إيقاف فوري لجميع الحركة المرورية</p>1022 <button class="btn btn-danger" onclick="toggleEmergency()" style="width: 100%;" id="emergencyBtn">1023 تفعيل الطوارئ1024 </button>1025 </div>1026 </div>1027 1028 <div class="card" style="background: #f8fafc;">1029 <h3 style="margin-bottom: 1.5rem; color: var(--primary-color);">1030 <i class="fas fa-clock"></i>1031 إعدادات المؤقت1032 </h3>1033 1034 <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem;">1035 <div>1036 <label style="display: block; margin-bottom: 0.5rem;">مدة مرحلة السيارات (دقيقة)</label>1037 <div class="timer-controls">1038 <button class="btn btn-secondary" onclick="setTimer('cars', 5)">5</button>1039 <button class="btn btn-secondary" onclick="setTimer('cars', 10)">10</button>1040 <button class="btn btn-secondary" onclick="setTimer('cars', 15)">15</button>1041 </div>1042 <div style="margin-top: 0.5rem; text-align: center; font-weight: 700; color: var(--accent-color);" id="carsTimerDisplay">1043 الحالي: 10 دقيقة1044 </div>1045 </div>1046 1047 <div>1048 <label style="display: block; margin-bottom: 0.5rem;">مدة مرحلة الباصات (دقيقة)</label>1049 <div class="timer-controls">1050 <button class="btn btn-secondary" onclick="setTimer('buses', 3)">3</button>1051 <button class="btn btn-secondary" onclick="setTimer('buses', 5)">5</button>1052 <button class="btn btn-secondary" onclick="setTimer('buses', 7)">7</button>1053 </div>1054 <div style="margin-top: 0.5rem; text-align: center; font-weight: 700; color: var(--warning-color);" id="busesTimerDisplay">1055 الحالي: 5 دقائق1056 </div>1057 </div>1058 </div>1059 </div>1060 1061 <div class="btn-group" style="margin-top: 2rem;">1062 <button class="btn btn-danger" onclick="clearAllData()">1063 <i class="fas fa-trash"></i>1064 مسح جميع البيانات1065 </button>1066 <button class="btn btn-secondary" onclick="exportData()">1067 <i class="fas fa-download"></i>1068 تصدير البيانات1069 </button>1070 <button class="btn btn-primary" onclick="window.print()">1071 <i class="fas fa-print"></i>1072 طباعة التقرير1073 </button>1074 </div>1075 </div>1076 </section>1077 1078 <!-- Statistics Page -->1079 <section id="stats" class="page">1080 <div class="stats-grid">1081 <div class="stat-card">1082 <div class="stat-icon blue">1083 <i class="fas fa-car"></i>1084 </div>1085 <div class="stat-info">1086 <h3 id="totalCars">0</h3>1087 <p>إجمالي السيارات المسجلة</p>1088 </div>1089 </div>1090 1091 <div class="stat-card">1092 <div class="stat-icon green">1093 <i class="fas fa-sign-out-alt"></i>1094 </div>1095 <div class="stat-info">1096 <h3 id="totalExits">0</h3>1097 <p>الطلاب الخارجين</p>1098 </div>1099 </div>1100 1101 <div class="stat-card">1102 <div class="stat-icon orange">1103 <i class="fas fa-sign-in-alt"></i>1104 </div>1105 <div class="stat-info">1106 <h3 id="totalEntries">0</h3>1107 <p>الطلاب الداخلين</p>1108 </div>1109 </div>1110 1111 <div class="stat-card">1112 <div class="stat-icon red">1113 <i class="fas fa-users"></i>1114 </div>1115 <div class="stat-info">1116 <h3 id="totalStudents">0</h3>1117 <p>إجمالي الحركة</p>1118 </div>1119 </div>1120 </div>1121 1122 <div class="card">1123 <h3 style="margin-bottom: 1.5rem; color: var(--primary-color);">1124 <i class="fas fa-chart-line"></i>1125 مقارنة الأداء: قبل وبعد النظام1126 </h3>1127 <div class="chart-container">1128 <canvas id="comparisonChart"></canvas>1129 </div>1130 </div>1131 1132 <div class="card">1133 <h3 style="margin-bottom: 1.5rem; color: var(--primary-color);">1134 <i class="fas fa-chart-pie"></i>1135 توزيع الحركة المرورية حسب الصفوف1136 </h3>1137 <div class="chart-container">1138 <canvas id="gradeChart"></canvas>1139 </div>1140 </div>1141 </section>1142 1143 </main>1144 1145 <script>1146 // Global State1147 let currentPhase = 'cars'; // 'cars' or 'buses'1148 let timeRemaining = 600; // seconds (10 minutes default)1149 let timerInterval = null;1150 let isEmergency = false;1151 let phaseSettings = {1152 cars: 10,1153 buses: 51154 };1155 1156 // Data Storage1157 let exitData = JSON.parse(localStorage.getItem('smisma_exits')) || [];1158 let entryData = JSON.parse(localStorage.getItem('smisma_entries')) || [];1159 1160 // Initialize1161 document.addEventListener('DOMContentLoaded', () => {1162 updateClock();1163 setInterval(updateClock, 1000);1164 loadTables();1165 updateStats();1166 drawCharts();1167 1168 // Initialize timer display1169 updateTimerDisplay();1170 });1171 1172 // Navigation1173 function showPage(pageId) {1174 // Hide all pages1175 document.querySelectorAll('.page').