Update index.html

index.html

@@ -10,6 +10,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;500;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
+    <!-- html2canvas (截圖功能核心) -->
+    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
     
     <script>
         tailwind.config = {
@@ -195,51 +197,56 @@
         <!-- RESULT SCREEN -->
         <div id="result-screen" class="hidden text-center space-y-6">
             
-            <!-- Modified Image Container for Banner (1375x763) -->
-            <div class="magic-card p-1 rounded-2xl w-full relative magic-border mt-4 hover:scale-[1.02] transition-transform duration-500">
-                <div class="bg-slate-900 rounded-xl overflow-hidden relative z-10">
-                    <!-- Changed classes to support landscape banner -->
-                    <img id="result-image" src="" alt="Role Image" class="w-full h-auto object-contain shadow-lg">
+            <!-- Result Content Wrapper for Capture (ID added here) -->
+            <div id="result-capture-area" class="bg-slate-900/0 rounded-2xl p-2 md:p-4 transition-colors">
+                <!-- Modified Image Container for Banner (1375x763) -->
+                <div class="magic-card p-1 rounded-2xl w-full relative magic-border mt-4 hover:scale-[1.02] transition-transform duration-500">
+                    <div class="bg-slate-900 rounded-xl overflow-hidden relative z-10">
+                        <!-- Changed classes to support landscape banner -->
+                        <!-- 注意：我們移除了 crossorigin="anonymous" 以確保畫面正常顯示，但這可能會影響截圖 -->
+                        <img id="result-image" src="" alt="Role Image" class="w-full h-auto object-contain shadow-lg">
+                    </div>
                 </div>
-            </div>
 
-            <div class="space-y-2 fade-in" style="animation-delay: 0.2s;">
-                <p class="text-cyan-400 font-tech tracking-widest text-sm uppercase">Class Awakened</p>
-                <h2 id="result-title" class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
-                    職業名稱
-                </h2>
-            </div>
+                <div class="space-y-2 fade-in mt-6" style="animation-delay: 0.2s;">
+                    <p class="text-cyan-400 font-tech tracking-widest text-sm uppercase">Class Awakened</p>
+                    <h2 id="result-title" class="text-3xl md:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-cyan-400">
+                        職業名稱
+                    </h2>
+                </div>
 
-            <div class="magic-card p-6 rounded-xl text-left space-y-4 fade-in" style="animation-delay: 0.4s;">
-                <div class="flex items-start gap-3">
-                    <i class="fa-solid fa-scroll text-purple-400 mt-1"></i>
-                    <div>
-                        <h3 class="text-purple-300 font-bold mb-1">天賦解析</h3>
-                        <p id="result-desc" class="text-slate-300 text-sm leading-relaxed">
-                            描述文字...
-                        </p>
+                <div class="magic-card p-6 rounded-xl text-left space-y-4 fade-in mt-6" style="animation-delay: 0.4s;">
+                    <div class="flex items-start gap-3">
+                        <i class="fa-solid fa-scroll text-purple-400 mt-1"></i>
+                        <div>
+                            <h3 class="text-purple-300 font-bold mb-1">天賦解析</h3>
+                            <p id="result-desc" class="text-slate-300 text-sm leading-relaxed">
+                                描述文字...
+                            </p>
+                        </div>
                     </div>
-                </div>
-                
-                <div class="border-t border-slate-700 my-2"></div>
-
-                <div class="flex items-start gap-3">
-                    <i class="fa-solid fa-dungeon text-cyan-400 mt-1"></i>
-                    <div>
-                        <h3 class="text-cyan-300 font-bold mb-1">本場研習使命</h3>
-                        <p id="result-mission" class="text-slate-200 font-medium text-sm leading-relaxed bg-slate-800/50 p-3 rounded-lg border-l-2 border-cyan-500">
-                            使命文字...
-                        </p>
+                    
+                    <div class="border-t border-slate-700 my-2"></div>
+
+                    <div class="flex items-start gap-3">
+                        <i class="fa-solid fa-dungeon text-cyan-400 mt-1"></i>
+                        <div>
+                            <h3 class="text-cyan-300 font-bold mb-1">本場研習使命</h3>
+                            <p id="result-mission" class="text-slate-200 font-medium text-sm leading-relaxed bg-slate-800/50 p-3 rounded-lg border-l-2 border-cyan-500">
+                                使命文字...
+                            </p>
+                        </div>
                     </div>
                 </div>
             </div>
+            <!-- End Capture Area -->
 
             <div class="pt-4 fade-in flex flex-col md:flex-row justify-center gap-4" style="animation-delay: 0.6s;">
                 <button onclick="quizApp.restartQuiz()" class="px-8 py-3 bg-slate-800 hover:bg-slate-700 border border-slate-600 rounded-full text-slate-300 transition-all hover:text-white hover:border-cyan-400 flex items-center justify-center gap-2 order-2 md:order-1">
                     <i class="fa-solid fa-rotate-right"></i> 重新測驗
                 </button>
-                <button onclick="quizApp.shareResult()" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 border border-transparent rounded-full text-white transition-all flex items-center justify-center gap-2 order-1 md:order-2 magic-border">
-                    <i class="fa-solid fa-share-nodes"></i> 分享結果
+                <button id="share-btn" onclick="quizApp.shareResult()" class="px-8 py-3 bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600 border border-transparent rounded-full text-white transition-all flex items-center justify-center gap-2 order-1 md:order-2 magic-border shadow-lg shadow-cyan-500/30">
+                    <i class="fa-solid fa-share-nodes"></i> 分享結果圖片
                 </button>
             </div>
         </div>
@@ -286,7 +293,7 @@
                     text: "將遊戲引入教學，最大的風險是？",
                     options: [
                         { text: "設計得不好玩，學生覺得尷尬。", scores: { alch: 1, adv: 1 } },
-                        { text: "只有好玩，但沒學到東西。", scores: { world: 1,adv: 1, alch: 1 } },
+                        { text: "只有好玩，但沒學到東西。", scores: { world: 1, adv: 1, alch: 1 } },
                         { text: "準備時間太長，無法保證成效。", scores: { world: 1, alch: 1 } },
                         { text: "秩序失控，學生只想玩不想上課。", scores: { truth: 2 } }
                     ]
@@ -523,36 +530,84 @@
                 }, 500);
             },
 
-            shareResult: function() {
-                const winnerData = this.resultsData[this.currentWinnerKey];
-                const shareText = `我是『${winnerData.title}』！這堂課我是來進化的... 測測看你是哪種角色：\n\n[您的測驗網址]`;
-                const shareUrl = window.location.href; // Using current URL for now, update if needed
-
-                if (navigator.share) {
-                    // Use Web Share API if available (on supported mobile devices)
-                    navigator.share({
-                        title: '遊戲化教學天賦覺醒',
-                        text: shareText,
-                        url: shareUrl
-                    }).catch(err => {
-                        console.log('Error sharing:', err);
-                        // Fallback if sharing fails
-                        this.copyToClipboard(shareText + shareUrl);
+            shareResult: async function() {
+                const shareBtn = document.getElementById('share-btn');
+                const originalContent = shareBtn.innerHTML;
+                
+                // Loading State
+                shareBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> 圖片生成中...';
+                shareBtn.disabled = true;
+
+                try {
+                    // Capture specific area
+                    const captureElement = document.getElementById('result-capture-area');
+                    
+                    // Temporarily add a background to the capture area for a better image
+                    const originalBg = captureElement.style.backgroundColor;
+                    captureElement.style.backgroundColor = '#0f172a'; // Dark blue bg
+                    captureElement.style.padding = '20px'; // Add padding for screenshot
+
+                    // Wait for image to load before capturing
+                    // 確保圖片載入完成，否則截圖可能是空白
+                    const resultImage = document.getElementById('result-image');
+                    if (!resultImage.complete) {
+                        await new Promise((resolve) => { resultImage.onload = resolve; });
+                    }
+
+                    const canvas = await html2canvas(captureElement, {
+                        backgroundColor: '#0f172a',
+                        scale: 2, // High resolution
+                        useCORS: true, // 嘗試跨域載入圖片
+                        allowTaint: true, // 允許繪製（即使可能 tainted）
+                        logging: false
                     });
-                } else {
-                    // Fallback for desktops or unsupported browsers
-                    this.copyToClipboard(shareText + shareUrl);
-                }
-            },
 
-            copyToClipboard: function(text) {
-                navigator.clipboard.writeText(text).then(() => {
-                    // Basic alert for fallback feedback, can be replaced with a custom modal
-                    alert('已複製分享內容到剪貼簿！');
-                }).catch(err => {
-                    console.error('Could not copy text: ', err);
-                    alert('複製失敗，請手動複製。');
-                });
+                    // Restore styles
+                    captureElement.style.backgroundColor = originalBg;
+                    captureElement.style.padding = '';
+
+                    // Convert to Blob
+                    canvas.toBlob(async (blob) => {
+                        if (!blob) {
+                            alert('截圖生成失敗，請檢查網路連線或使用原生截圖功能。');
+                            shareBtn.innerHTML = originalContent;
+                            shareBtn.disabled = false;
+                            return;
+                        }
+
+                        const file = new File([blob], 'gamified-teaching-result.png', { type: 'image/png' });
+
+                        // Mobile Native Share (Web Share API Level 2)
+                        if (navigator.canShare && navigator.canShare({ files: [file] })) {
+                            try {
+                                await navigator.share({
+                                    files: [file],
+                                    title: '遊戲化教學天賦覺醒',
+                                    text: `我是『${this.resultsData[this.currentWinnerKey].title}』！測測看你是哪種角色：`
+                                });
+                            } catch (err) {
+                                console.log('Share cancelled or failed', err);
+                            }
+                        } else {
+                            // Fallback for Desktop: Download
+                            const link = document.createElement('a');
+                            link.download = `teaching-style-${this.currentWinnerKey}.png`;
+                            link.href = canvas.toDataURL();
+                            link.click();
+                            alert('您的裝置不支援直接圖片分享，已為您下載結果圖片！您現在可以手動發送到 Line 或 IG。');
+                        }
+
+                        // Restore Button
+                        shareBtn.innerHTML = originalContent;
+                        shareBtn.disabled = false;
+                    }, 'image/png');
+
+                } catch (error) {
+                    console.error('Error generating image:', error);
+                    alert('圖片生成失敗，可能是因為圖片伺服器限制了存取。請嘗試使用手機的原生截圖功能分享！');
+                    shareBtn.innerHTML = originalContent;
+                    shareBtn.disabled = false;
+                }
             }
         };