Create intro.md for AI collaboration

intro.md

@@ -0,0 +1,36 @@
+# 「客源翠 HakSpring」專案簡介 📚
+
+「客源翠 HakSpring」是一個功能豐富的線上客語詞典與分類學習網站，旨在為客語學習者提供一個全面、便利的自學平台。專案名稱結合了「客家話」的「客」、資源的「源」、以及充滿活力的「翠」與「Spring」，寓意為客語學習注入源源不絕的活力與生機。
+
+本專案以前端為核心，採用「離線優先」(Offline-First) 的架構，透過 IndexedDB 將所有詞彙與音檔資料快取於使用者本機，確保在初次載入後，即使在網路連線不穩定的環境下，也能提供流暢、快速的使用體驗。
+
+## 核心功能 ✨
+
+### 1. 多功能詞典查詢 🔍
+    *   **多腔調支援**：使用者可自由切換查詢**四縣、南四縣、海陸、大埔、饒平、詔安**等多種主流客語腔調。
+    *   **雙向查詢**：支援「客話查華語」與「華語查客話」兩種模式。使用者不僅能輸入客語漢字或羅馬拼音來尋找詞義，也能輸入華語關鍵字反查對應的客語詞彙。
+    *   **智慧型偵測**：查詢引擎能自動判斷輸入的內容是否為羅馬拼音，並切換至對應的搜尋模式，簡化操作流程。
+
+### 2. 系統化分類學習 📖
+    *   **分級詞庫**：內容涵蓋從**基礎、初級、中級、中高級到高級**的完整認證詞彙。
+    *   **主題式分類**：詞彙依據「人體與醫療」、「居家生活」、「社會關係與行為」等近 20 個主題進行分類，方便學習者進行系統性的主題式學習。
+    *   **進度保存**：系統會自動記錄使用者的學習進度，並將其顯示於「擇進前个進度」下拉選單中。使用者可以隨時中斷學習，並在下次返回時從上次的進度繼續。
+
+### 3. 沉浸式聽力訓練 🎧
+    *   **真人發音**：大部分詞彙與例句皆附有高品質的真人發音音檔。
+    *   **連續播放**：在分類學習模式中，使用者可以啟動自動連續播放功能，依序聆聽該類別下的所有詞彙與例句，進行沉浸式聽力訓練。
+    *   **循環播放**：提供「單詞循環」與「分類循環」兩種模式，滿足使用者針對特定詞彙或整個類別進行反覆練習的需求。
+
+### 4. 實用輔助工具 🛠️
+    *   **蘿蔓生菜 (Romanizer)**：內建強大的「客語羅馬字轉換器」，能將使用者輸入的客語漢字或句子，自動轉換為標準的羅馬拼音，並支援多種腔調與連詞符號模式的切換。
+    *   **跨腔調對照**：無論是在查詢結果或分類學習中，使用者都可以方便地展開「跨腔調對照」功能，即時比較同一個詞彙在不同腔調下的發音與用法差異。
+    *   **選詞即查**：在例句中選取任何詞彙，系統會立即彈出讀音查詢視窗，實現無縫的深度學習體驗。
+
+### 5. 使用者資料管理 💾
+    *   **備份與還原**：提供完整的資料匯出與匯入功能。使用者可以將自己的學習進度與個人設定備份為 `.json` 檔案，或透過專屬的遷移 URL 在不同裝置間同步資料。
+
+---
+
+本專案透過上述功能的整合，打造了一個集查詢、學習、聽力練習於一體的客語學習環境，希望能成為每一位客語學習者與研究者的得力助手。🌱
+
+> **註**：本專案為 AI 協作實驗的一部分，由 Jules 與 Claude Code 共同協作開發。

romanizer-guide.md

@@ -0,0 +1,61 @@
+# 蘿蔓生菜 (Romanizer) 使用說明
+
+歡迎使用「蘿蔓生菜 (Romanizer)」，這是一個專為客語學習者設計的羅馬字轉換工具。無論您是想為一段客語文字標註發音，還是想驗證自己的拼音知識，這個工具都能提供強大的幫助。
+
+## 基礎使用流程
+
+「蘿蔓生菜」的核心設計理念是「自動標註 + 手動校正」。
+
+1.  **輸入文字**：將您想轉換的客語漢字句子或段落，貼入最下方的文字輸入框中。
+2.  **開始轉換**：點擊「開始斷詞轉換」按鈕。
+3.  **自動標註**：系統會立即進行自動斷詞，並在「斷詞工作區」（中間區塊）顯示結果。同時，系統會自動在詞典中查找每個詞彙的發音：
+    *   如果找到唯一的、符合當前所選腔調的發音，該詞彙會以**實線**底線標示，表示「已完成」，其羅馬拼音會自動出現在最上方的「結果區」。
+    *   如果找不到發音，或找到多個可能的發音，該詞彙會以**虛線**底線標示，提示您需要手動確認。
+4.  **手動校正**：點擊「斷詞工作區」中有虛線底線的詞彙，從彈出的讀音視窗中選擇正確的發音。
+5.  **完成與複製**：當所有詞彙都標註完成後，您可以點擊右上角的「複製結果」按鈕，獲取乾淨的純文字羅馬拼音。
+
+---
+
+## 核心功能詳解
+
+### 1. 腔調選擇
+
+您可以在工具視窗的頂部，透過下拉選單自由切換不同的客語腔調，包含**四縣、海陸、大埔、饒平、詔安、南四縣**。
+
+切換腔調後，系統在自動標註和手動查詢時，都會以您選擇的腔調為優先。這對於處理不同腔調的文本非常重要。
+
+### 2. 連詞模式 (Joining Mode)
+
+「連詞模式」決定了一個多音節詞彙內部，音節與音節之間要如何連接。這是一個非常重要的排版與學術習慣選項。
+
+*   **`\"liěncǐi fóngsìid\"（詞中無空格）`** (預設)
+    *   這是最緊湊的模式，音節之間沒有任何符號。
+    *   為了避免發音混淆（例如 `san` `an` 連在一起會變成 `sanan`），系統會根據音節規則自動在需要的地方加上撇號 ' 作為分隔，例如 `g'a`。
+*   **`\"liěn-cǐi fóng-sìid\"（詞中用連-字-號）`**
+    *   此模式會在同一個詞的音節之間，使用連字號 `-` 進行連接。這是許多客語教材和詞典中常見的格式。
+*   **`\"liěn cǐi fóng sìid\"（詞中空 格）`**
+    *   此模式會在所有音節之間都使用空格隔開，無論它們是否屬於同一個詞。
+
+### 3. 手動校正工具
+
+#### 重新斷詞 (<i class=\"fas fa-cut\"></i>)
+
+有時候，系統的自動斷詞可能不是最理想的。例如，一個長詞「大眾運輸」可能因為在詞典中找不到，而被標示為「無結果」。
+
+此時，詞彙旁會出現一個**剪刀圖示** <i class=\"fas fa-cut\"></i>。點擊它，這個詞彙會變成一個輸入框。您可以在其中手動加入空格，將其拆分成多個詞彙（例如，將 `大眾運輸` 改為 `大眾 運輸`），然後按下 `Enter`。系統會重新為這兩個新詞彙查找發音。
+
+#### 結果區微調
+
+在最上方的「結果區」，您可以對每一個拼音音節進行微調：
+
+*   **`U` 按鈕**：點擊可手動切換該音節的**第一個字母的大小寫**。系統預設會將句首字母大寫，但您可以透過這個按鈕覆蓋預設行為，例如標示人名。
+*   **`<i class=\"fas fa-times\"></i>` 按鈕**：點擊可**刪除**該音節。
+
+### 4. 復原與重做 (Undo/Redo)
+
+在您對「結果區」進行任何手動編輯（例如手動切換大小寫、刪除音節）或在「斷詞工作區」選擇新的發音後，這些操作都會被記錄下來。
+
+*   點擊 <i class=\"fas fa-undo\"></i> **復原 (Undo)** 按鈕，可以撤銷您上一步的操作。
+*   點擊 <i class=\"fas fa-redo\"></i> **重做 (Redo)** 按鈕，可以還原您剛剛撤銷的操作。
+
+這讓您在編輯過程中能更安心，隨時可以回到之前的狀態。