Update index.html

index.html

@@ -85,7 +85,7 @@
 
     <!-- 主選單：新增單字 & 模式選擇 -->
     <div id="main-menu" class="w-full max-w-2xl bg-white p-6 rounded-3xl shadow-2xl transition-all duration-500">
-        <h1 class="text-4xl font-extrabold text-center text-gray-900 mb-6">B3 L1 單字閃卡 (1-11)</h1>
+        <h1 id="main-title" class="text-4xl font-extrabold text-center text-gray-900 mb-6"></h1>
         
         <!-- 模式選擇區塊 -->
         <div id="mode-selection-section">
@@ -103,31 +103,41 @@
                 <span class="font-semibold text-gray-700">-</span>
                 <input type="number" id="end-range" min="1" class="w-20 p-2 border border-gray-300 rounded-lg text-center" placeholder="到">
             </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <button data-mode="review" class="mode-btn bg-sky-500 hover:bg-sky-600">複習模式</button>
-                <button data-mode="zh-en" class="mode-btn bg-teal-500 hover:bg-teal-600 relative">
-                    中翻英測驗
-                    <span class="crown-icon hidden absolute -top-2 -right-1 text-4xl" style="transform: rotate(15deg);">👑</span>
-                </button>
-                <button data-mode="en-zh" class="mode-btn bg-amber-500 hover:bg-amber-600 relative">
-                    英翻中測驗
-                    <span class="crown-icon hidden absolute -top-2 -right-1 text-4xl" style="transform: rotate(15deg);">👑</span>
-                </button>
-                <button data-mode="listen" class="mode-btn bg-rose-500 hover:bg-rose-600 relative">
-                    聽力測驗
-                    <span class="crown-icon hidden absolute -top-2 -right-1 text-4xl" style="transform: rotate(15deg);">👑</span>
-                </button>
-                <button data-mode="hard" class="mode-btn bg-red-700 hover:bg-red-800">🧠 困難單字複習</button>
-                <button data-mode="speed" class="mode-btn bg-slate-700 hover:bg-slate-800">
-                    ⚡ 極速挑戰 ⚡
-                </button>
-                <button id="share-game-btn" class="sm:col-span-2 mode-btn bg-violet-500 hover:bg-violet-600">
-                    🔗 分享設定給學生
-                </button>
+            
+            <!-- 主要功能 -->
+            <div class="mb-4">
+                <h3 class="text-lg font-semibold text-gray-600 mb-3 text-center border-b pb-2">主要功能</h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <button data-mode="review" class="mode-btn bg-sky-500 hover:bg-sky-600">複習模式</button>
+                    <button data-mode="zh-en" class="mode-btn bg-teal-500 hover:bg-teal-600 relative">
+                        中翻英測驗
+                        <span class="crown-icon hidden absolute -top-2 -right-1 text-4xl" style="transform: rotate(15deg);">👑</span>
+                    </button>
+                    <button data-mode="en-zh" class="mode-btn bg-amber-500 hover:bg-amber-600 relative">
+                        英翻中測驗
+                        <span class="crown-icon hidden absolute -top-2 -right-1 text-4xl" style="transform: rotate(15deg);">👑</span>
+                    </button>
+                    <button data-mode="listen" class="mode-btn bg-rose-500 hover:bg-rose-600 relative">
+                        聽力測驗
+                        <span class="crown-icon hidden absolute -top-2 -right-1 text-4xl" style="transform: rotate(15deg);">👑</span>
+                    </button>
+                </div>
+            </div>
+
+            <!-- 補充功能 -->
+            <div class="mb-4">
+                <h3 class="text-lg font-semibold text-gray-600 mb-3 text-center border-b pb-2">補充功能</h3>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <button data-mode="hard" class="mode-btn bg-red-700 hover:bg-red-800">🧠 困難單字複習</button>
+                    <button data-mode="speed" class="mode-btn bg-slate-700 hover:bg-slate-800">⚡ 極速挑戰 ⚡</button>
+                </div>
+            </div>
+            
+            <!-- 教師工具 -->
+            <div class="mt-8 pt-4 border-t flex justify-end items-center gap-3">
+                 <button id="share-game-btn" class="text-white font-semibold py-2 px-5 rounded-full transition-transform hover:scale-105 bg-violet-500 hover:bg-violet-600 text-sm">🔗 分享</button>
+                 <button id="manage-words-btn" class="text-white font-semibold py-2 px-5 rounded-full transition-transform hover:scale-105 bg-gray-500 hover:bg-gray-600 text-sm">⚙️ 管理</button>
             </div>
-             <button id="manage-words-btn" class="w-full mt-6 bg-gray-500 text-white font-bold py-3 rounded-full hover:bg-gray-600 focus:outline-none focus:ring-4 focus:ring-gray-300 transition-all">
-                單字列表管理
-            </button>
         </div>
     </div>
     
@@ -140,6 +150,16 @@
             </button>
         </div>
         
+        <!-- 標題���定區塊 -->
+        <div class="mb-6 p-4 bg-gray-50 rounded-2xl">
+            <h3 class="text-xl font-semibold mb-4 text-gray-700">標題設定</h3>
+            <div class="flex items-center gap-4">
+                <input type="text" id="book-input" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="冊次 (例如 B3)">
+                <input type="text" id="lesson-input" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="課次 (例如 L1)">
+                <button id="save-title-btn" class="bg-indigo-600 text-white font-bold py-2 px-6 rounded-full hover:bg-indigo-700 shrink-0 transition-colors">儲存標題</button>
+            </div>
+        </div>
+        
         <!-- 新增單字區塊 -->
         <div id="add-words-section" class="mb-6 p-4 bg-gray-50 rounded-2xl hidden">
             <h3 class="text-xl font-semibold mb-4 text-gray-700">新增單字</h3>
@@ -315,12 +335,17 @@
             </div>
         </div>
     </div>
-
+    
+    <footer class="fixed bottom-4 right-4 text-xs text-gray-500 text-right z-50">
+        <p>遊戲設計者：新竹縣精華國中藍星宇</p>
+        <p>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" rel="noopener noreferrer" class="text-blue-500 hover:underline">萬物皆數</a></p>
+    </footer>
 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             // DOM 元素
             const mainMenu = document.getElementById('main-menu');
+            const mainTitle = document.getElementById('main-title');
             const learningMode = document.getElementById('learning-mode');
             const modeSelectionSection = document.getElementById('mode-selection-section');
             const highscoreDisplay = document.getElementById('highscore-display');
@@ -331,6 +356,9 @@
             
             // 單字管理介面
             const wordManagementView = document.getElementById('word-management-view');
+            const bookInput = document.getElementById('book-input');
+            const lessonInput = document.getElementById('lesson-input');
+            const saveTitleBtn = document.getElementById('save-title-btn');
             const backToModesFromManageBtn = document.getElementById('back-to-modes-from-manage-btn');
             const addWordsSection = document.getElementById('add-words-section');
             const showAddWordsSectionBtn = document.getElementById('show-add-words-section-btn');
@@ -406,6 +434,8 @@
             let currentCardIndex = 0; 
             let currentMode = '';
             let completionStatus = {};
+            let bookTitle = '';
+            let lessonTitle = '';
             const MANAGE_PASSWORD = 'Ghjh';
             let highScore = 0;
             let currentScore = 0;
@@ -426,6 +456,14 @@
                 learningMode.classList.toggle('hidden', view !== 'learning');
                 wordManagementView.classList.toggle('hidden', view !== 'manage');
             };
+            
+            const updateMainTitle = () => {
+                if (bookTitle && lessonTitle) {
+                    mainTitle.textContent = `${bookTitle} ${lessonTitle} 單字閃卡`;
+                } else {
+                    mainTitle.textContent = '單字閃卡';
+                }
+            };
 
             // --- 資料處理 ---
             const saveWordsToStorage = () => {
@@ -473,7 +511,7 @@
                     editChineseInput.value = words[index].chinese;
                     editWordModal.classList.remove('hidden');
                 } else if (button.classList.contains('delete-btn')) {
-                    if (window.confirm(`確定要刪除 "${words[index].english}" 嗎？`)) {
+                    if (confirm(`確定要刪除 "${words[index].english}" 嗎？`)) {
                         const itemElement = button.closest('.list-item');
                         itemElement.classList.add('removing');
                         setTimeout(() => {
@@ -533,6 +571,8 @@
             manageWordsBtn.addEventListener('click', () => {
                 passwordInput.value = '';
                 passwordError.textContent = '';
+                bookInput.value = bookTitle;
+                lessonInput.value = lessonTitle;
                 passwordModal.classList.remove('hidden');
                 setTimeout(() => passwordInput.focus(), 50);
             });
@@ -829,7 +869,7 @@
             nextBtn.addEventListener('click', () => { if (currentCardIndex < wordsForCurrentMode.length - 1) { currentCardIndex++; displayCard(); }});
             quizForm.addEventListener('submit', (e) => { e.preventDefault(); checkAnswer(); });
             speakBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.75); });
-            speakSlowBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.5); });
+            speakSlowBtn.addEventListener('click', (e) => { e.stopPropagation(); const word = getCurrentWordToSpeak(); if(word) speakWord(word, 0.35); });
             hintBtn.addEventListener('click', () => {
                 const card = currentMode === 'speed' ? currentSpeedCard : quizQueue[0];
                 if (!card) return;
@@ -859,6 +899,30 @@
             });
             cancelPasswordBtn.addEventListener('click', () => passwordModal.classList.add('hidden'));
 
+            saveTitleBtn.addEventListener('click', () => {
+                const newBook = bookInput.value.trim();
+                const newLesson = lessonInput.value.trim();
+                if (newBook && newLesson) {
+                    bookTitle = newBook;
+                    lessonTitle = newLesson;
+                    localStorage.setItem('flashcardsBookTitle', bookTitle);
+                    localStorage.setItem('flashcardsLessonTitle', lessonTitle);
+                    updateMainTitle();
+                    // Simple feedback
+                    const originalText = saveTitleBtn.textContent;
+                    saveTitleBtn.textContent = '已儲存!';
+                    saveTitleBtn.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
+                    saveTitleBtn.classList.add('bg-green-500', 'hover:bg-green-600');
+                    setTimeout(() => {
+                        saveTitleBtn.textContent = originalText;
+                        saveTitleBtn.classList.remove('bg-green-500', 'hover:bg-green-600');
+                        saveTitleBtn.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
+                    }, 2000);
+                } else {
+                    alert('冊次和課次不能為空！');
+                }
+            });
+
             shareGameBtn.addEventListener('click', () => {
                 try {
                     const wordsString = JSON.stringify(words);
@@ -938,6 +1002,10 @@
                     }
                 }
                 
+                bookTitle = localStorage.getItem('flashcardsBookTitle') || 'B3';
+                lessonTitle = localStorage.getItem('flashcardsLessonTitle') || 'L1';
+                updateMainTitle();
+                
                 completionStatus = JSON.parse(localStorage.getItem('completionStatus')) || {};
                 updateCompletionUI();
                 highScore = parseInt(localStorage.getItem('flashcardsHighScore') || '0', 10);