| <!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="preload" href="./Font/Bahij_TheSansArabic-Light.ttf" as="font" type="font/ttf" crossorigin /> |
| <link rel="preload" href="./Font/Bahij_TheSansArabic-Black.ttf" as="font" type="font/ttf" crossorigin /> |
| <link rel="stylesheet" href="./style.css" /> |
| </head> |
| <body> |
| <main class="shell"> |
| <header class="topbar" aria-label="رأس الصفحة"> |
| <div class="brand"> |
| <span class="brand-mark" aria-hidden="true"> |
| <svg viewBox="0 0 24 24" role="img"> |
| <path d="M10.8 17.8a7 7 0 1 1 4.95-2.05l4 4a1.35 1.35 0 0 1-1.9 1.9l-4-4a6.96 6.96 0 0 1-3.05.15Zm0-2.7a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z" /> |
| </svg> |
| </span> |
| <div> |
| <h1>محرك بحث</h1> |
| </div> |
| </div> |
| </header> |
|
|
| <section class="search-panel" aria-label="البحث"> |
| <div class="search-box"> |
| <span class="search-icon" aria-hidden="true"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M10.8 17.8a7 7 0 1 1 4.95-2.05l4 4a1.35 1.35 0 0 1-1.9 1.9l-4-4a6.96 6.96 0 0 1-3.05.15Zm0-2.7a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z" /> |
| </svg> |
| </span> |
| <input id="query" type="search" autocomplete="off" placeholder="اكتب اسم المنشأة" aria-label="اسم المنشأة" /> |
| </div> |
|
|
| <div class="actions"> |
| <button id="clearButton" class="button button-ghost" type="button" aria-label="مسح"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="M18.3 5.7a1.15 1.15 0 0 0-1.63 0L12 10.37 7.33 5.7A1.15 1.15 0 1 0 5.7 7.33L10.37 12 5.7 16.67a1.15 1.15 0 1 0 1.63 1.63L12 13.63l4.67 4.67a1.15 1.15 0 0 0 1.63-1.63L13.63 12l4.67-4.67a1.15 1.15 0 0 0 0-1.63Z" /> |
| </svg> |
| </button> |
| </div> |
| </section> |
|
|
| <section id="results" class="results" aria-live="polite"></section> |
|
|
| <footer class="credit">إعداد نوف الناصر</footer> |
| </main> |
|
|
| <template id="emptyTemplate"> |
| <div class="empty-state"> |
| <div class="empty-symbol" aria-hidden="true"> |
| <svg viewBox="0 0 24 24"> |
| <path d="M10.8 17.8a7 7 0 1 1 4.95-2.05l4 4a1.35 1.35 0 0 1-1.9 1.9l-4-4a6.96 6.96 0 0 1-3.05.15Zm0-2.7a4.3 4.3 0 1 0 0-8.6 4.3 4.3 0 0 0 0 8.6Z" /> |
| </svg> |
| </div> |
| </div> |
| </template> |
|
|
| <script src="./data.js"></script> |
| <script src="./script.js"></script> |
| </body> |
| </html> |
|
|
