Update index.html
Browse files- index.html +63 -75
index.html
CHANGED
|
@@ -1,84 +1,72 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
.brand{ font-weight:800; color:#0a4d8c; }
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
|
|
|
| 16 |
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
position:absolute; right:8px; top:50%; transform:translateY(-50%);
|
| 25 |
-
width:28px; height:28px; border:none; border-radius:6px; background:transparent; cursor:pointer; color:#888; font-size:16px;
|
| 26 |
-
}
|
| 27 |
-
.btn{ padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:14px; }
|
| 28 |
-
.btn.ghost{ background:transparent; }
|
| 29 |
|
| 30 |
-
|
| 31 |
-
.card{
|
| 32 |
-
background:var(--card); border:1px solid var(--line); border-radius:16px;
|
| 33 |
-
box-shadow:0 10px 22px rgba(13,110,253,0.06), 0 3px 8px rgba(0,0,0,0.05);
|
| 34 |
-
padding:12px;
|
| 35 |
-
}
|
| 36 |
-
.table-wrap{ overflow-x:auto; }
|
| 37 |
-
table{ width:100%; border-collapse:collapse; min-width:520px; background:#fff; }
|
| 38 |
-
thead{ background:var(--thead); position: sticky; top:0; z-index:1; }
|
| 39 |
-
th,td{
|
| 40 |
-
padding:12px 10px; border-bottom:1px solid var(--line); font-size:15px;
|
| 41 |
-
text-align:center; vertical-align:middle; /* ❤️ وسط النص */
|
| 42 |
-
}
|
| 43 |
-
tbody tr:nth-child(even) td{ background:rgba(0,0,0,0.02); }
|
| 44 |
-
tbody tr:hover td{ background:#f0f6ff; transition:background .2s; }
|
| 45 |
-
th.thin, td.thin{ width:36px; }
|
| 46 |
|
| 47 |
-
|
| 48 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 49 |
|
| 50 |
-
|
| 51 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 52 |
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
margin:0 3px; padding:6px 10px; border:1px solid var(--line); background:#fff;
|
| 57 |
-
border-radius:8px; cursor:pointer; font-size:14px;
|
| 58 |
-
}
|
| 59 |
-
.pagination .page-btn.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
|
| 60 |
-
.pagination .page-btn:disabled{ opacity:.5; cursor:default; }
|
| 61 |
-
.pagination .dots{ margin:0 6px; color:#888; }
|
| 62 |
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
background:linear-gradient(90deg, #eef2f6, #f7f9fc, #eef2f6);
|
| 67 |
-
background-size:200% 100%; animation:sk 1.2s infinite linear;
|
| 68 |
-
}
|
| 69 |
-
@keyframes sk{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
|
| 70 |
|
| 71 |
-
|
| 72 |
-
.
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
.dark{ --bg:#0e1116; --card:#151a22; --ink:#e9eef6; --line:#273142; --thead:#1b2330; --brand:#6ea8fe; }
|
| 76 |
-
|
| 77 |
-
/* إخفاء نصوص مساعدة للشاشة */
|
| 78 |
-
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
|
| 79 |
-
|
| 80 |
-
/* تحسين الجوال */
|
| 81 |
-
@media (max-width:768px){
|
| 82 |
-
th,td{ font-size:14px; padding:10px 8px; }
|
| 83 |
-
.brand{ font-size:14px; }
|
| 84 |
-
}
|
|
|
|
| 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" />
|
| 6 |
+
<title>دليل الأنشطة الاقتصادية</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css" />
|
| 8 |
+
</head>
|
| 9 |
+
<body>
|
| 10 |
+
<!-- شريط علوي بسيط -->
|
| 11 |
+
<header class="topbar">
|
| 12 |
+
<div class="topbar-inner">
|
| 13 |
+
<div class="brand">دليل الأنشطة الاقتصادية</div>
|
| 14 |
+
<button id="themeToggle" type="button" class="btn ghost">🌙 الوضع الليلي</button>
|
| 15 |
+
</div>
|
| 16 |
+
</header>
|
| 17 |
|
| 18 |
+
<main class="container">
|
| 19 |
+
<h1>دليل الأنشطة الاقتصادية</h1>
|
| 20 |
+
<p class="credit">تصميم وإعداد الدعم الفني: <strong>نوف الناصر</strong></p>
|
|
|
|
| 21 |
|
| 22 |
+
<!-- أدوات البحث -->
|
| 23 |
+
<div class="tools">
|
| 24 |
+
<div class="search-wrap">
|
| 25 |
+
<input type="text" id="searchBox" placeholder="ابحث في الأنشطة أو الرموز..." />
|
| 26 |
+
<button id="clearSearch" type="button" class="clear-btn" aria-label="مسح البحث">✕</button>
|
| 27 |
+
</div>
|
| 28 |
|
| 29 |
+
<label for="pageSize" class="sr-only">صفوف لكل صفحة</label>
|
| 30 |
+
<select id="pageSize" class="btn">
|
| 31 |
+
<option>25</option>
|
| 32 |
+
<option selected>50</option>
|
| 33 |
+
<option>100</option>
|
| 34 |
+
</select>
|
| 35 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 36 |
|
| 37 |
+
<p id="counter" class="count">عدد الأنشطة الاقتصادية: ...</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 38 |
|
| 39 |
+
<!-- هيكل تحميل -->
|
| 40 |
+
<div id="loading" class="skeleton">
|
| 41 |
+
<div class="sk-row"></div>
|
| 42 |
+
<div class="sk-row"></div>
|
| 43 |
+
<div class="sk-row"></div>
|
| 44 |
+
</div>
|
| 45 |
|
| 46 |
+
<!-- بطاقة الجدول -->
|
| 47 |
+
<div class="card">
|
| 48 |
+
<div class="table-wrap">
|
| 49 |
+
<table aria-label="جدول الأنشطة الاقتصادية">
|
| 50 |
+
<thead>
|
| 51 |
+
<tr>
|
| 52 |
+
<th scope="col">الرمز</th>
|
| 53 |
+
<th scope="col">النشاط الاقتصادي</th>
|
| 54 |
+
<th scope="col" class="thin"></th>
|
| 55 |
+
</tr>
|
| 56 |
+
</thead>
|
| 57 |
+
<tbody id="tableBody"><!-- يُملأ عبر JS --></tbody>
|
| 58 |
+
</table>
|
| 59 |
+
</div>
|
| 60 |
|
| 61 |
+
<div id="pagination" class="pagination"><!-- أزرار الصفحات --></div>
|
| 62 |
+
</div>
|
| 63 |
+
</main>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 64 |
|
| 65 |
+
<footer class="footer">
|
| 66 |
+
تم التطوير بواسطة نوف الناصر ❤️
|
| 67 |
+
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 68 |
|
| 69 |
+
<div id="toast"></div>
|
| 70 |
+
<script src="script.js"></script>
|
| 71 |
+
</body>
|
| 72 |
+
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|