File size: 3,095 Bytes
efcaa0c | 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 | <!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#4137A8" />
<title>محرك بحث خاص</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main class="pageShell">
<section class="hero" aria-labelledby="appTitle">
<div class="brandMark" aria-hidden="true"></div>
<div class="heroText">
<p class="kicker">مطابقة الحالات بين المسوح</p>
<h1 id="appTitle">محرك بحث خاص</h1>
</div>
<div class="summaryStrip" aria-label="ملخص البيانات">
<span><b id="totalCount">0</b> عينة مختلفة</span>
<span><b id="researcherCount">0</b> باحث</span>
<span><b id="inspectorCount">0</b> مفتش</span>
</div>
</section>
<section class="toolSurface" aria-label="خيارات البحث">
<div class="modeTabs" role="tablist" aria-label="نوع البحث">
<button class="modeTab active" id="researcherTab" type="button" data-mode="researcher" role="tab" aria-selected="true">الباحث</button>
<button class="modeTab" id="inspectorTab" type="button" data-mode="inspector" role="tab" aria-selected="false">المفتش</button>
</div>
<section class="searchPanel active" id="researcherPanel" aria-labelledby="researcherTab">
<label class="searchBox" for="researcherInput">
<span class="searchIcon" aria-hidden="true">⌕</span>
<input id="researcherInput" type="search" autocomplete="off" inputmode="search" placeholder="اكتب اسم الباحث" />
</label>
<label class="selectBox" for="researcherSelect">
<span>قائمة الباحثين</span>
<select id="researcherSelect">
<option value="">اختر اسم الباحث</option>
</select>
</label>
</section>
<section class="searchPanel" id="inspectorPanel" aria-labelledby="inspectorTab">
<div class="inspectorGrid" id="inspectorGrid" aria-label="أسماء المفتشين"></div>
<label class="selectBox inspectorResearchersBox" for="inspectorResearcherSelect">
<span>باحثو المفتش</span>
<select id="inspectorResearcherSelect" disabled>
<option value="">اختر المفتش أولاً</option>
</select>
</label>
</section>
</section>
<section class="resultHeader" aria-live="polite">
<div>
<p id="resultEyebrow">النتائج</p>
<h2 id="resultTitle">اكتب اسم الباحث أو اختر اسم المفتش</h2>
</div>
<span class="resultBadge" id="resultCount">0</span>
</section>
<section class="resultsGrid" id="results" aria-live="polite"></section>
</main>
<footer class="credit">
<strong>تصميم وإعداد نوف الناصر</strong>
</footer>
<script src="./data.js"></script>
<script src="./script.js"></script>
</body>
</html>
|