|
|
<!DOCTYPE html> |
|
|
<html lang="ar" dir="rtl"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
<title>دليل التخصصات </title> |
|
|
<link rel="stylesheet" href="style.css" /> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<button id="themeToggle" class="btn theme-btn">🌙 الوضع الليلي</button> |
|
|
|
|
|
<main class="container"> |
|
|
<h1>دليل التخصصات </h1> |
|
|
<p class="credit">تصميم وإعداد الدعم الفني: <strong>نوف الناصر</strong></p> |
|
|
|
|
|
|
|
|
<div class="tools"> |
|
|
<div class="search-wrap"> |
|
|
<input |
|
|
type="search" |
|
|
id="searchBox" |
|
|
placeholder="🔍 اكتب رمز أو كلمة…" |
|
|
/> |
|
|
|
|
|
<button id="clearSearch" class="clear-btn" aria-label="مسح البحث">✕</button> |
|
|
</div> |
|
|
|
|
|
<label for="pageSize" class="sr-only">صفوف لكل صفحة</label> |
|
|
<select id="pageSize" aria-label="عدد الصفوف"> |
|
|
<option value="10" selected>10</option> |
|
|
<option value="50">50</option> |
|
|
<option value="100">100</option> |
|
|
</select> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<p id="counter" class="count">عدد التخصصات: ...</p> |
|
|
|
|
|
|
|
|
<div id="loading" class="skeleton"> |
|
|
<div class="sk-row"></div> |
|
|
<div class="sk-row"></div> |
|
|
<div class="sk-row"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card"> |
|
|
<div class="table-wrap"> |
|
|
<table aria-label="جدول التخصصات"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th scope="col">الرمز</th> |
|
|
<th scope="col"> التخصص</th> |
|
|
<th scope="col" class="thin"></th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="tableBody"></tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<div id="pagination" class="pagination"></div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="footer">تم التطوير بواسطة نوف الناصر ❤️</footer> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
