Update index.html

index.html

@@ -180,7 +180,10 @@
             </div>
         </div>
 
-        <button id="show-add-words-section-btn" class="w-full mb-4 bg-green-500 text-white font-bold py-3 rounded-full hover:bg-green-600 transition-all">＋ 新增單字</button>
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4">
+            <button id="show-add-words-section-btn" class="w-full bg-green-500 text-white font-bold py-3 rounded-full hover:bg-green-600 transition-all">＋ 新增單字</button>
+            <button id="clear-all-words-btn" class="w-full bg-red-600 text-white font-bold py-3 rounded-full hover:bg-red-700 transition-all">🗑️ 清除所有單字</button>
+        </div>
         
         <!-- 單字列表容器 -->
         <div id="word-list-container" class="space-y-2 max-h-[50vh] overflow-y-auto pr-2">
@@ -335,6 +338,18 @@
             </div>
         </div>
     </div>
+
+    <!-- 清除確認 Modal -->
+    <div id="confirm-clear-modal" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center z-50 p-4">
+        <div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-sm">
+            <h3 class="text-2xl font-bold mb-4 text-gray-800">確認操作</h3>
+            <p class="text-gray-600 mb-6">您確定要清除所有單字嗎？此操作無法復原。</p>
+            <div class="flex justify-end gap-4 mt-6">
+                <button type="button" id="cancel-clear-btn" class="px-6 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">取消</button>
+                <button type="button" id="confirm-clear-btn" class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">確認清除</button>
+            </div>
+        </div>
+    </div>
     
     <footer class="fixed bottom-4 right-4 text-xs text-gray-500 text-right z-50">
         <p>遊戲設計者：新竹縣精華國中藍星宇</p>
@@ -362,6 +377,7 @@
             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');
+            const clearAllWordsBtn = document.getElementById('clear-all-words-btn');
             const englishWordsInput = document.getElementById('english-words');
             const chineseExplanationsInput = document.getElementById('chinese-explanations');
             const errorMessage = document.getElementById('error-message');
@@ -425,6 +441,9 @@
             const copyLinkBtn = document.getElementById('copy-link-btn');
             const copyFeedback = document.getElementById('copy-feedback');
             const closeShareModalBtn = document.getElementById('close-share-modal-btn');
+            const confirmClearModal = document.getElementById('confirm-clear-modal');
+            const cancelClearBtn = document.getElementById('cancel-clear-btn');
+            const confirmClearBtn = document.getElementById('confirm-clear-btn');
 
             // 應用程式狀態
             let words = [];
@@ -480,10 +499,8 @@
             // --- 單字管理功能 ---
             const renderWordList = () => {
                 wordListContainer.innerHTML = '';
-                const sortedWords = [...words].sort((a, b) => a.english.localeCompare(b.english));
-
-                sortedWords.forEach((word, index) => {
-                    const originalIndex = words.findIndex(w => w.english === word.english && w.chinese === word.chinese);
+                // 移除字母排序，直接按照陣列順序渲染
+                words.forEach((word, index) => {
                     const item = document.createElement('div');
                     item.className = 'list-item p-3 bg-gray-100 rounded-lg flex items-center justify-between';
                     item.innerHTML = `
@@ -493,8 +510,8 @@
                             <p class="text-gray-600 ml-4">${word.chinese}</p>
                         </div>
                         <div class="flex gap-2">
-                            <button data-index="${originalIndex}" class="edit-btn p-2 text-blue-500 hover:bg-blue-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg></button>
-                            <button data-index="${originalIndex}" class="delete-btn p-2 text-red-500 hover:bg-red-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" /></svg></button>
+                            <button data-index="${index}" class="edit-btn p-2 text-blue-500 hover:bg-blue-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg></button>
+                            <button data-index="${index}" class="delete-btn p-2 text-red-500 hover:bg-red-100 rounded-full"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" /></svg></button>
                         </div>
                     `;
                     wordListContainer.appendChild(item);
@@ -511,15 +528,13 @@
                     editChineseInput.value = words[index].chinese;
                     editWordModal.classList.remove('hidden');
                 } else if (button.classList.contains('delete-btn')) {
-                    if (confirm(`確定要刪除 "${words[index].english}" 嗎？`)) {
-                        const itemElement = button.closest('.list-item');
-                        itemElement.classList.add('removing');
-                        setTimeout(() => {
-                            words.splice(index, 1);
-                            saveWordsToStorage();
-                            renderWordList();
-                        }, 300);
-                    }
+                    const itemElement = button.closest('.list-item');
+                    itemElement.classList.add('removing');
+                    setTimeout(() => {
+                        words.splice(index, 1);
+                        saveWordsToStorage();
+                        renderWordList();
+                    }, 300);
                 }
             });
 
@@ -671,12 +686,12 @@
                 
                 const start = parseInt(startRangeInput.value, 10);
                 const end = parseInt(endRangeInput.value, 10);
-                let sortedWords = [...words].sort((a,b) => a.english.localeCompare(b.english));
                 
-                if (!isNaN(start) && !isNaN(end) && start > 0 && end >= start && end <= sortedWords.length) {
-                    wordsForCurrentMode = sortedWords.slice(start - 1, end);
+                // 學習時，使用新增順序
+                if (!isNaN(start) && !isNaN(end) && start > 0 && end >= start && end <= words.length) {
+                    wordsForCurrentMode = words.slice(start - 1, end);
                 } else {
-                    wordsForCurrentMode = sortedWords;
+                    wordsForCurrentMode = [...words];
                 }
 
                 if (wordsForCurrentMode.length === 0) {
@@ -964,6 +979,21 @@
                 shareModal.classList.add('hidden');
             });
 
+            clearAllWordsBtn.addEventListener('click', () => {
+                confirmClearModal.classList.remove('hidden');
+            });
+
+            cancelClearBtn.addEventListener('click', () => {
+                confirmClearModal.classList.add('hidden');
+            });
+
+            confirmClearBtn.addEventListener('click', () => {
+                words = [];
+                saveWordsToStorage();
+                renderWordList();
+                confirmClearModal.classList.add('hidden');
+            });
+
             // --- 應用程式初始化 ---
             const initializeApp = () => {
                 const urlParams = new URLSearchParams(window.location.search);