Spaces:

Lashtw
/

flashcards

Running

App Files Files Community

Lashtw commited on Sep 6, 2025

Commit

98c4e5f

verified ·

1 Parent(s): 66cf72a

Update index.html

Browse files

Files changed (1) hide show

index.html +53 -5

index.html CHANGED Viewed

@@ -8,6 +8,8 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <!-- 載入彩帶效果庫 -->
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
     <style>
         /* 定義閃卡的翻轉效果 */
         .flip-container {
@@ -79,6 +81,12 @@
             opacity: 0;
             transform: translateX(100%);
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col items-center p-4 sm:p-8 font-sans">
@@ -343,7 +351,7 @@
                 </label>
             </div>
-            <button id="generate-link-btn" class="w-full mb-4 bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 transition-colors">
                 產生分享連結
             </button>
@@ -354,6 +362,7 @@
                     <button id="copy-link-btn" class="px-6 py-3 bg-violet-600 text-white rounded-lg hover:bg-violet-700 shrink-0">複製</button>
                 </div>
                 <p id="copy-feedback" class="text-green-600 text-sm h-5 mt-2 text-center font-semibold"></p>
             </div>
             <div class="flex justify-end mt-4">
@@ -487,6 +496,7 @@
             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');
@@ -1020,6 +1030,21 @@
                 });
             };
             // --- 事件監聽 ---
             document.querySelectorAll('.mode-btn[data-mode]').forEach(btn => {
                 btn.addEventListener('click', () => setupLearningView(btn.dataset.mode));
@@ -1041,7 +1066,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.2); });
             hintBtn.addEventListener('click', () => {
                 const card = currentMode === 'speed' ? currentSpeedCard : quizQueue[0];
                 if (!card) return;
@@ -1099,10 +1124,16 @@
                 shareResultContainer.classList.add('hidden');
                 shareLinkInput.value = '';
                 copyFeedback.textContent = '';
                 shareModal.classList.remove('hidden');
             });
-            generateLinkBtn.addEventListener('click', () => {
                  try {
                     const wordsString = JSON.stringify(words);
                     const base64Words = btoa(unescape(encodeURIComponent(wordsString)));
@@ -1124,12 +1155,29 @@
                         }
                     }
-                    shareLinkInput.value = url.toString();
                     shareResultContainer.classList.remove('hidden');
                 } catch (error) {
                     console.error("產生分享連結時發生錯誤:", error);
-                    alert("產生分享連結時發生錯誤，可能是單字列表過大。");
                 }
             });

     <script src="https://cdn.tailwindcss.com"></script>
     <!-- 載入彩帶效果庫 -->
     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
+    <!-- 載入 QR Code 產生器 -->
+    <script src="https://cdn.jsdelivr.net/npm/qrcode-generator/qrcode.js"></script>
     <style>
         /* 定義閃卡的翻轉效果 */
         .flip-container {
             opacity: 0;
             transform: translateX(100%);
         }
+        #qrcode-container img {
+            margin: auto;
+            border: 6px solid white;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen flex flex-col items-center p-4 sm:p-8 font-sans">
                 </label>
             </div>
+            <button id="generate-link-btn" class="w-full mb-4 bg-indigo-600 text-white font-bold py-3 rounded-lg hover:bg-indigo-700 transition-colors disabled:bg-indigo-400">
                 產生分享連結
             </button>
                     <button id="copy-link-btn" class="px-6 py-3 bg-violet-600 text-white rounded-lg hover:bg-violet-700 shrink-0">複製</button>
                 </div>
                 <p id="copy-feedback" class="text-green-600 text-sm h-5 mt-2 text-center font-semibold"></p>
+                <div id="qrcode-container" class="mt-4 flex justify-center"></div>
             </div>
             <div class="flex justify-end mt-4">
             const copyLinkBtn = document.getElementById('copy-link-btn');
             const copyFeedback = document.getElementById('copy-feedback');
             const closeShareModalBtn = document.getElementById('close-share-modal-btn');
+            const qrcodeContainer = document.getElementById('qrcode-container');
             const confirmClearModal = document.getElementById('confirm-clear-modal');
             const cancelClearBtn = document.getElementById('cancel-clear-btn');
             const confirmClearBtn = document.getElementById('confirm-clear-btn');
                 });
             };
+            const generateQRCode = (text) => {
+                qrcodeContainer.innerHTML = '';
+                try {
+                    const typeNumber = 4;
+                    const errorCorrectionLevel = 'L';
+                    const qr = qrcode(typeNumber, errorCorrectionLevel);
+                    qr.addData(text);
+                    qr.make();
+                    qrcodeContainer.innerHTML = qr.createImgTag(6, 12);
+                } catch(e) {
+                    console.error("QR Code generation failed:", e);
+                    qrcodeContainer.textContent = 'QR碼產生失敗，網址可能過長。';
+                }
+            };
             // --- 事件監聽 ---
             document.querySelectorAll('.mode-btn[data-mode]').forEach(btn => {
                 btn.addEventListener('click', () => setupLearningView(btn.dataset.mode));
             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.35); });
             hintBtn.addEventListener('click', () => {
                 const card = currentMode === 'speed' ? currentSpeedCard : quizQueue[0];
                 if (!card) return;
                 shareResultContainer.classList.add('hidden');
                 shareLinkInput.value = '';
                 copyFeedback.textContent = '';
+                qrcodeContainer.innerHTML = '';
+                generateLinkBtn.textContent = '產生分享連結';
+                generateLinkBtn.disabled = false;
                 shareModal.classList.remove('hidden');
             });
+            generateLinkBtn.addEventListener('click', async () => {
+                generateLinkBtn.textContent = '產生中...';
+                generateLinkBtn.disabled = true;
                  try {
                     const wordsString = JSON.stringify(words);
                     const base64Words = btoa(unescape(encodeURIComponent(wordsString)));
                         }
                     }
+                    const longUrl = url.toString();
+                    // 使用TinyURL API縮短網址
+                    const response = await fetch(`https://tinyurl.com/api-create.php?url=${encodeURIComponent(longUrl)}`);
+                    if (response.ok) {
+                        const shortUrl = await response.text();
+                        shareLinkInput.value = shortUrl;
+                        generateQRCode(shortUrl);
+                    } else {
+                        // 如果API失敗，則退回使用長網址
+                        shareLinkInput.value = longUrl;
+                        generateQRCode(longUrl);
+                        copyFeedback.textContent = '縮短網址失敗，已產生原始連結。';
+                    }
                     shareResultContainer.classList.remove('hidden');
                 } catch (error) {
                     console.error("產生分享連結時發生錯誤:", error);
+                    alert("產生分享連結時發生錯誤，可能是網路問題或單字列表過大。");
+                } finally {
+                    generateLinkBtn.textContent = '重新產生';
+                    generateLinkBtn.disabled = false;
                 }
             });