Update index.html

index.html

@@ -4,10 +4,13 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>جستجوگر خاطرات علم</title>
+    <!-- لینک به فونت وزیرمتن (مطمئن شوید فایل های فونت در پوشه fonts آپلود شده اند) -->
     <link href="./fonts/vazirmatn.css" rel="stylesheet" type="text/css"/>
+    <!-- لینک به فایل CSS اصلی -->
     <link rel="stylesheet" href="style.css">
 
-    <style>
+    <!-- استایل های داخلی (اختیاری - بهتر است همه به style.css منتقل شوند) -->
+     <style>
         /* این بلوک استایل می تواند حذف شود اگر تمام استایل ها به style.css منتقل شده اند */
         body {
             font-family: 'Vazirmatn', sans-serif;
@@ -146,34 +149,55 @@
     <div class="container">
         <h1>جستجو در خاطرات</h1>
 
+        <!-- بخش توضیحی -->
         <div class="explanation-text">
+             <!-- متن توضیحی مورد نظر کاربر -->
             <p>
-                این ابزار به شما امکان می‌دهد در متن خاطرات <strong>اسدالله علم</strong> با استفاده از جستجوی معنایی پیشرفته، مطالب مرتبط با عبارت مورد نظر خود را بیابید. این جستجو بر اساس شباهت مفهومی انجام می‌شود، نه صرفاً تطابق کلمات.
+                <strong>خاطره‌خوان پهلوی چیه و به چه کار میاد؟</strong>
+                یه دستیار خوب برای بچه‌های <strong>جهاد تبیین</strong> که کمک می‌کنه راحت‌تر بین <strong>خاطرات مستند دوران پهلوی</strong> بگردن و مطلب به‌دردبخور پیدا کنن.
             </p>
-             <p>
-                برای شروع، کتاب یا کتاب‌های مورد نظر خود را انتخاب کنید، سپس عبارت یا سوال خود را در کادر جستجو وارد کرده و دکمه "جستجو" را بزنید. می‌توانید آستانه شباهت را برای فیلتر کردن نتایج تنظیم کنید و تعداد نتایج نمایش داده شده را نیز تغییر دهید.
+            <p>
+                این ابزار، دنبال کلمه نمی‌گرده، دنبال <strong>معنا</strong> می‌گرده! یعنی شما مفهوم کلی رو وارد می‌کنی، اون می‌گرده ببینه کجاها حرفش زده شده.
+            </p>
+            <p>
+                فقط حواست باشه که جستجو توی همین <strong>مجموعه‌ی خاطرات</strong> انجام می‌شه، نه توی کل اینترنت.
+            </p>
+            <p>
+                اگه خیلی خاص بنویسی مثل "خودکار هویدا"، ممکنه چیزی گیرت نیاد! پس بهتره <strong>مفهومی‌تر</strong> بنویسی، مثلاً "وضع اقتصاد دوران پهلوی" یا "گرونی".
             </p>
         </div>
 
 
+        <!-- بخش انتخاب کتاب -->
         <div class="book-selection">
             <h2>انتخاب کتاب</h2>
             <div>
                 <input type="checkbox" id="select_all_books" checked>
                 <label for="select_all_books">انتخاب همه</label>
             </div>
+            <!-- چک باکس های کتاب ها - value باید دقیقاً نام فایل JSON مربوطه باشد -->
             <div>
                 <input type="checkbox" class="book-checkbox" id="book_jabe_siah" value="jabe_siah.json" checked>
                 <label for="book_jabe_siah">جعبه سیاه (منتخب خاطرات اسدالله علم)</label>
             </div>
+            <!-- افزودن چک باکس برای کتاب های دیگر در صورت وجود -->
+            <!--
+            <div>
+                <input type="checkbox" class="book-checkbox" id="book_ketab_dovom" value="ketab_dovom.json">
+                <label for="book_ketab_dovom">نام کتاب دوم</label>
             </div>
+            -->
+        </div>
 
+        <!-- بخش ورودی جستجو -->
         <div class="search-area">
             <h2>جستجو در خاطرات انتخاب شده</h2>
             <input type="text" id="userQuestion" placeholder="عبارت مورد نظر برای جستجو را وارد کنید...">
-            <button id="searchButton" disabled>جستجو</button> </div>
+            <button id="searchButton" disabled>جستجو</button> <!-- دکمه در ابتدا غیرفعال است -->
+        </div>
 
-        <div class="similarity-threshold-control">
+        <!-- بخش تنظیمات آستانه شباهت و تعداد نتایج -->
+         <div class="similarity-threshold-control">
              <label for="similarityThresholdInput">آستانه شباهت:</label>
              <input type="number" id="similarityThresholdInput" value="0.15" min="0.0" max="1.0" step="0.01">
              <p>نتایجی که امتیاز شباهت آنها بیشتر یا مساوی این مقدار باشد نمایش داده می‌شوند (بین 0 تا 1).</p>
@@ -183,23 +207,35 @@
             <label for="resultsPerPage">تعداد نتایج نمایش داده شده:</label>
             <select id="resultsPerPage">
                 <option value="5">5</option>
-                <option value="10" selected>10</option> <option value="20">20</option>
+                <option value="10" selected>10</option> <!-- پیش فرض 10 -->
+                <option value="20">20</option>
                 <option value="50">50</option>
             </select>
         </div>
 
 
+        <!-- بخش پیام های وضعیت و خطا -->
+        <!-- اضافه کردن المان لودینگ اسپینر داخل پاراگراف وضعیت -->
         <p id="loadingStatus" class="status-message">
-             <span class="loading-spinner"></span> </p>
-        <p id="selectionError" class="error-message"></p> <div id="searchResults">
-            <p>پس از انتخاب کتاب‌ها و وارد کردن سوال، نتایج اینجا نمایش داده می‌شوند.</p> </div>
+             <span class="loading-spinner"></span> <!-- المان لودینگ اسپینر -->
+        </p>
+        <p id="selectionError" class="error-message"></p> <!-- المان جداگانه برای خطاهای انتخاب کتاب/بارگذاری -->
+
+
+        <!-- بخش نمایش نتایج -->
+        <div id="searchResults">
+            <!-- این پیام اولیه هنگام شروع بارگذاری توسط JS تنظیم می شود و پس از آن پاک می شود -->
+             <p>در حال بارگذاری اطلاعات کتاب‌ها. لطفاً صبر کنید تا دکمه جستجو فعال شود...</p>
+        </div>
 
          <footer class="app-footer">
-             <p>ساخته شده با ❤️</p>
+             <!-- متن فوتر مورد نظر کاربر -->
+             <p>امتیاز این وب افزار متعلق به موسسه تخصصی تبلیغ سیدالشهداء علیه السلام است.</p>
          </footer>
 
     </div>
 
+    <!-- لینک به فایل JavaScript اصلی -->
     <script src="script.js"></script>
 </body>
 </html>