#57 → 查詞說明 modal

index.html

@@ -85,6 +85,7 @@ <h3 id="header">
       <div id="search-container">
         <input type="text" id="search-input" placeholder="查語詞" />
         <div id="search-popup">
+          <button id="lookupHelpBtn" title="查詞說明"><i class="fas fa-question-circle"></i></button>
           <div id="dialect-selection">
             <p>請擇腔調：</p>
             <div class="dialect-row">
@@ -407,6 +408,18 @@ <h4 id="infoModalTitle" class="modal-title">重要使用說明請先看</h4>
         </div>
       </div>
     </div>
+
+    <!-- Lookup Help Modal -->
+    <div id="lookupHelpModal" class="modal-overlay" style="display: none;">
+      <div class="modal-dialog">
+        <div class="modal-header">
+          <h4 id="lookupHelpModalTitle" class="modal-title">查詞說明</h4>
+          <button id="lookupHelpModalCloseBtn" class="modal-close-btn" aria-label="關忒">&times;</button>
+        </div>
+        <div class="modal-body" id="lookup-help-content"></div>
+      </div>
+    </div>
+
     </div> <!-- End of main-content div -->
   </body>
 </html>

lookup.md

@@ -0,0 +1,23 @@
+### 查詞說明
+
+#### 關鍵字查詞
+
+- **客家語查詞**：直接輸入客家語漢字詞目，例如「**客家**」。
+- **華語查詞**：直接輸入華語關鍵字，例如「**臺灣**」，系統會尋找對應个客語詞目。
+
+#### 羅馬字查詞
+
+本系統支援使用羅馬字拼音進行查詞，包含以下兩種方式：
+
+1.  **無聲調拼音**
+    - 直接輸入無包含聲調符號或數字个羅馬字，例如「**hakka**」。
+    - 系統會自動尋找所有符合个拼音。
+
+2.  **數字聲調拼音**
+    - 使得輸入像「**vun113 sii53**」恁樣个數字聲調。
+    - 調值照客家委員會个規範，有支援大埔、饒平等腔調个特殊調值。
+
+#### 進階搜尋技巧
+
+- **強制客語模式**：若輸入个羅馬字拼音同時也係有效个英文單字（例如 "on"），系統可能會優先進行華語查詞。你做得手動選擇「**客家語**」模式，強制系統用客語拼音來尋。
+- **多音節詞彙**：輸入多音節詞彙時，請確定音節之間有正確个分隔（例如空白）。

main.js

@@ -3638,6 +3638,37 @@ function handleAutoPlay(autoPlayTargetRowId, dialectInfo, category) {
 
   window.addEventListener('resize', handleResizeActions);
   handleResizeActions();
+
+  // --- Lookup Help Modal Logic ---
+  const lookupHelpBtn = document.getElementById('lookupHelpBtn');
+  const lookupHelpModal = document.getElementById('lookupHelpModal');
+  const lookupHelpModalCloseBtn = document.getElementById('lookupHelpModalCloseBtn');
+
+  if (lookupHelpBtn && lookupHelpModal && lookupHelpModalCloseBtn) {
+    lookupHelpBtn.addEventListener('click', () => {
+      fetch('lookup.md')
+        .then(response => response.text())
+        .then(markdown => {
+          document.getElementById('lookup-help-content').innerHTML = marked.parse(markdown);
+          lookupHelpModal.style.display = 'flex';
+        })
+        .catch(error => {
+          document.getElementById('lookup-help-content').innerHTML = '<p>說明文件載入失敗。</p>';
+          lookupHelpModal.style.display = 'flex';
+        });
+    });
+
+    const closeLookupHelpModal = () => {
+      lookupHelpModal.style.display = 'none';
+    };
+
+    lookupHelpModalCloseBtn.addEventListener('click', closeLookupHelpModal);
+    lookupHelpModal.addEventListener('click', (event) => {
+      if (event.target === lookupHelpModal) {
+        closeLookupHelpModal();
+      }
+    });
+  }
 }
 
 // Start the application

style.css

@@ -797,6 +797,7 @@ input:checked + .slider:before {
 
 #search-popup {
   display: none; /* 預設隱藏 */
+  position: relative; /* Make it a positioning context for the help button */
   position: absolute;
   top: 100%; /* 在輸入框下方 */
   right: 0;
@@ -814,6 +815,15 @@ input:checked + .slider:before {
   display: block; /* 當容器有 active class 時顯示 */
 }
 
+#lookupHelpBtn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  /* Reset some of the default button styles inherited from the header */
+  padding: 2px 5px;
+  font-size: 1rem;
+}
+
 #dialect-selection, #search-mode-selection {
   display: flex;
   flex-direction: column;
@@ -1312,7 +1322,8 @@ input:checked + .slider:before {
 
 /* Info Button in Header */
 #infoButton,
-#showRomanizerBtn {
+#showRomanizerBtn,
+#lookupHelpBtn {
   background: none;
   border: none;
   color: var(--main-text-color);
@@ -1334,7 +1345,8 @@ input:checked + .slider:before {
 }
 
 /* Info Modal Styles */
-#infoModal.modal-overlay {
+#infoModal.modal-overlay,
+#lookupHelpModal.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -1349,7 +1361,8 @@ input:checked + .slider:before {
   box-sizing: border-box;
 }
 
-#infoModal .modal-dialog {
+#infoModal .modal-dialog,
+#lookupHelpModal .modal-dialog {
   background-color: #fff;
   color: var(--main-text-color);
   border-radius: 10px;
@@ -1360,10 +1373,11 @@ input:checked + .slider:before {
   max-height: 700px;
   display: flex;
   flex-direction: column;
-  overflow: hidden; /* 避免 iframe 載入前內容溢出 */
+  overflow: hidden;
 }
 
-#infoModal .modal-header {
+#infoModal .modal-header,
+#lookupHelpModal .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -1372,7 +1386,8 @@ input:checked + .slider:before {
   flex-shrink: 0;
 }
 
-#infoModal .modal-title {
+#infoModal .modal-title,
+#lookupHelpModal .modal-title {
   margin: 0;
   font-size: 1.3em;
   font-weight: 600;
@@ -1381,6 +1396,7 @@ input:checked + .slider:before {
 }
 
 #infoModal .modal-close-btn,
+#lookupHelpModal .modal-close-btn,
 #romanizerContainer .modal-close-btn {
   background: none;
   border: none;
@@ -1393,16 +1409,19 @@ input:checked + .slider:before {
 }
 #infoModal .modal-close-btn:hover,
 #infoModal .modal-close-btn:focus-visible,
+#lookupHelpModal .modal-close-btn:hover,
+#lookupHelpModal .modal-close-btn:focus-visible,
 #romanizerContainer .modal-close-btn:hover,
 #romanizerContainer .modal-close-btn:focus-visible {
   color: #333;
 }
 
-#infoModal .modal-body {
-  padding: 0; /* iframe 內容由 info.html 自行處理 padding */
+#infoModal .modal-body,
+#lookupHelpModal .modal-body {
+  padding: 20px 30px;
   flex-grow: 1;
-  overflow: hidden; /* iframe 容器 */
-  -webkit-overflow-scrolling: touch; /* iOS iframe 內容順暢捲動 */
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 #infoModal .modal-body iframe {
@@ -1414,33 +1433,65 @@ input:checked + .slider:before {
 /* Dark Mode for Info Modal */
 @media (prefers-color-scheme: dark) {
   #infoButton,
-  #showRomanizerBtn {
+  #showRomanizerBtn,
+  #lookupHelpBtn {
     color: var(--main-text-color);
   }
   #infoButton:hover i,
-  #showRomanizerBtn:hover i {
+  #showRomanizerBtn:hover i,
+  #lookupHelpBtn:hover i {
     color: var(--focus-glow-color);
   }
 
-  #infoModal.modal-overlay {
+  #infoModal.modal-overlay,
+  #lookupHelpModal.modal-overlay {
     background-color: rgba(0, 0, 0, 0.75);
   }
-  #infoModal .modal-dialog {
+
+  #infoModal .modal-dialog,
+  #lookupHelpModal .modal-dialog {
     background-color: var(--dark-surface-color, #2c2c2c);
   }
-  #infoModal .modal-header {
+
+  #infoModal .modal-header,
+  #lookupHelpModal .modal-header {
     border-bottom-color: rgba(255, 255, 255, 0.15);
   }
+
   #infoModal .modal-close-btn,
+  #lookupHelpModal .modal-close-btn,
   #romanizerContainer .modal-close-btn {
     color: #aaa;
   }
   #infoModal .modal-close-btn:hover,
   #infoModal .modal-close-btn:focus-visible,
+  #lookupHelpModal .modal-close-btn:hover,
+  #lookupHelpModal .modal-close-btn:focus-visible,
   #romanizerContainer .modal-close-btn:hover,
   #romanizerContainer .modal-close-btn:focus-visible {
     color: #fff;
   }
+
+  #infoModal .modal-body h1,
+  #lookupHelpModal .modal-body h1 {
+    border-bottom-color: rgba(255, 255, 255, 0.3);
+  }
+
+  #infoModal .modal-body a,
+  #lookupHelpModal .modal-body a {
+    color: var(--dark-link-color);
+  }
+
+  #infoModal .modal-footer,
+  #lookupHelpModal .modal-footer {
+    background-color: #343a40;
+    border-top-color: rgba(255, 255, 255, 0.15);
+  }
+
+  #infoModal .modal-footer label,
+  #lookupHelpModal .modal-footer label {
+    color: var(--main-text-color);
+  }
 }
 
 /* iOS Autoplay Instruction Message Style */
@@ -1724,51 +1775,63 @@ mark {
 }
 
 /* --- Info Modal Styles --- */
-#infoModal .modal-body {
+#infoModal .modal-body,
+#lookupHelpModal .modal-body {
   max-height: 70vh; /* 設定最大高度，例如視窗高度的 70% */
   overflow-y: auto; /* 當內容超過最大高度時，顯示垂直捲動軸 */
   padding: 20px 30px; /* 增加內距，上下 20px，左右 30px */
   line-height: 1.7; /* 調整行高以利閱讀 */
 }
 
 #infoModal .modal-body h1,
+#lookupHelpModal .modal-body h1,
 #infoModal .modal-body h2,
-#infoModal .modal-body h3 {
+#lookupHelpModal .modal-body h2,
+#infoModal .modal-body h3,
+#lookupHelpModal .modal-body h3 {
   margin-top: 1.5em;
   margin-bottom: 0.8em;
   color: var(--main-text-color); /* 確保標題顏色與主題一致 */
 }
 
-#infoModal .modal-body h1 {
+#infoModal .modal-body h1,
+#lookupHelpModal .modal-body h1 {
   font-size: 1.8rem;
   border-bottom: 2px solid var(--main-text-color);
   padding-bottom: 0.3em;
 }
 
-#infoModal .modal-body h2 {
+#infoModal .modal-body h2,
+#lookupHelpModal .modal-body h2 {
   font-size: 1.5rem;
 }
 
 #infoModal .modal-body p,
-#infoModal .modal-body li {
+#lookupHelpModal .modal-body p,
+#infoModal .modal-body li,
+#lookupHelpModal .modal-body li {
   font-size: 1rem;
   margin-bottom: 0.8em;
 }
 
-#infoModal .modal-body ul {
+#infoModal .modal-body ul,
+#lookupHelpModal .modal-body ul {
   padding-left: 25px; /* 讓清單項目有內縮 */
 }
 
-#infoModal .modal-body a {
+#infoModal .modal-body a,
+#lookupHelpModal .modal-body a {
   color: #007bff; /* 使用較亮的藍色讓連結更明顯 */
   text-decoration: underline;
 }
 
-#infoModal .modal-body a:hover {
+#infoModal .modal-body a:hover,
+#lookupHelpModal .modal-body a:hover {
   color: #0056b3;
 }
 
-#infoModal .modal-body hr {
+#infoModal .modal-body hr,
+#lookupHelpModal .modal-body hr {
   border: 0;
   border-top: 1px solid #ccc;
   margin: 2em 0;