WPI / index.html
stat2025's picture
Update index.html
7ba4079 verified
<!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>