| <!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> |
|
|
