File size: 2,798 Bytes
dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 dbf8e8d 7ba4079 8aa36dd 7ba4079 8aa36dd 7ba4079 8aa36dd 7ba4079 8aa36dd a2f6182 7ba4079 8aa36dd 7ba4079 8aa36dd 1862333 7ba4079 8d5798f d3f9635 7ba4079 8aa36dd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!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"><!-- يُملأ عبر JS --></tbody>
</table>
</div>
<!-- أزرار الترقيم -->
<div id="pagination" class="pagination"><!-- أزرار الصفحات --></div>
</div>
</main>
<!-- تذييل -->
<footer class="footer">تم التطوير بواسطة نوف الناصر ❤️</footer>
<!-- سكربت الوظائف -->
<script src="script.js"></script>
</body>
</html>
|