Hadith_Search / index.html
NightPrince's picture
Deploy Vanilla HTML Hadith Engine via FastAPI (with LFS)
fde590b
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>مُحَرِّكُ بَحْثِ الأَحَادِيثِ (Hadith Search)</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Tajawal:wght@400;500;700&display=swap"
rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="/assets/style.css">
</head>
<body>
<!-- Decorative background elements -->
<div class="bg-shape shape-1"></div>
<div class="bg-shape shape-2"></div>
<div class="container">
<!-- Header Section -->
<header class="header animate-fade-in-up">
<div class="header-icon">
<!-- SVG Lantern Icon representing Hadith/Light -->
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="lucide lucide-book-open text-gold">
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
</svg>
</div>
<h1 class="title">مُحَرِّكُ بَحْثِ الأَحَادِيثِ الشَّرِيفَة</h1>
<p class="subtitle">محرك بحث متطور يعتمد على تقنيات الذكاء الاصطناعي (BM25 + Semantic + FAISS) للبحث بدقة في
الموسوعة الحديثية، شاملاً المتون والأسانيد والشروح.</p>
</header>
<div class="main-layout">
<!-- Search Area -->
<main class="content-area animate-fade-in-up delay-1">
<form id="searchForm" class="search-form">
<div class="search-input-wrapper">
<input type="text" id="queryInput"
placeholder="ابحث عن حديث أو معنى أو كلمة (مثال: إنما الأعمال بالنيات)..."
autocomplete="off">
<button type="submit" id="searchBtn" class="search-btn">
<!-- SVG Search Icon -->
<svg id="searchIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<!-- SVG Spinner (Hidden initially) -->
<svg id="loadingSpinner" class="spinner hidden" xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
</svg>
</button>
</div>
<div id="errorMsg" class="error-msg hidden"></div>
</form>
<div id="noResults" class="no-results hidden">
عفواً، لم يتم العثور على نتائج مطابقة لبحثك في قاعدة الأحاديث.
</div>
<div id="resultsContainer" class="results-container">
<!-- Results will be injected here via JS -->
</div>
</main>
<!-- Sidebar -->
<aside class="sidebar animate-fade-in-up delay-2">
<div class="glass-card sidebar-content">
<h2 class="sidebar-title">إعدادات البحث</h2>
<div class="setting-group">
<label for="topKInput">عدد النتائج (Top K): <span id="topKValue"
class="text-gold">3</span></label>
<input type="range" id="topKInput" min="1" max="10" value="3" class="slider">
</div>
<h3 class="sidebar-subtitle">مزايا المحرك</h3>
<ul class="features-list">
<li><span class="icon">🔍</span> بحث هايبرد (دلالي + لفظي)</li>
<li><span class="icon">📚</span> آلاف الأحاديث الموثقة</li>
<li><span class="icon">🔗</span> ربط بالروايات المشابهة</li>
<li><span class="icon"></span> استجابة فورية عالية الدقة</li>
</ul>
<div class="footer-credit">
بناء وتطوير يحيى النوساني
</div>
</div>
</aside>
</div>
</div>
<!-- Custom JS -->
<script src="/assets/script.js"></script>
</body>
</html>