File size: 2,612 Bytes
609c7e4 | 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 | <!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>
|