Upload 3 files

algebra.html

@@ -154,7 +154,7 @@
 
     <!-- 秘密揭曉畫面 (從 secret.html 整合進來) -->
     <div id="secret-view" class="absolute inset-0 w-screen h-screen flex items-center justify-center p-4 opacity-0 hidden transition-opacity duration-500 bg-gray-900/50">
-        <div class="container mx-auto p-6 md:p-8 bg-white rounded-xl shadow-2xl max-w-4xl text-center">
+        <div class="container mx-auto p-6 md:p-8 bg-white rounded-xl shadow-2xl max-w-4xl text-center overflow-y-auto max-h-[90vh]">
             <h1 class="text-3xl md:text-4xl font-bold text-indigo-600 mb-8">代數之丘最大的秘密</h1>
             
             <div class="grid md:grid-cols-3 gap-6 md:gap-8 mb-8">

harbor.html

@@ -151,7 +151,7 @@
             </div>
             <div id="market-choices" class="hidden flex-col">
                 <h2 class="text-3xl font-bold text-amber-300 text-center mb-4">你要把<span class="market-fish-name"></span>賣到哪裡？</h2>
-                <div id="market-images-container" class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div id="market-images-container" class="grid grid-cols-1 md:grid-cols-3 gap-6">
                     <!-- Market images will be inserted here by JS -->
                 </div>
                 <p id="market-feedback" class="text-center text-xl font-bold min-h-[32px] mt-4"></p>
@@ -193,9 +193,14 @@
                 回到探險島地圖
             </a>
         </div>
-
+    </div>
+    
+    <!-- Image Zoom Modal -->
+    <div id="zoom-modal" class="hidden fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 cursor-pointer">
+        <img id="zoomed-image" src="" alt="放大的統計圖表" class="max-w-full max-h-full rounded-lg shadow-2xl">
     </div>
 
+
     <script>
     document.addEventListener('DOMContentLoaded', () => {
         // --- 畫面元素 ---
@@ -225,6 +230,8 @@
         const nextLevelButton = document.getElementById('next-level-button');
         const startFinalStageButton = document.getElementById('start-final-stage-button');
         const finalSecretScreen = document.getElementById('final-secret-screen');
+        const zoomModal = document.getElementById('zoom-modal');
+        const zoomedImage = document.getElementById('zoomed-image');
 
         // --- 遊戲設定 ---
         const MAX_FISH_ON_SCREEN = 8;
@@ -486,17 +493,33 @@
             const marketLevel = marketLevels[currentLevel];
             document.querySelectorAll('.market-fish-name').forEach(el => el.textContent = levels[currentLevel].targetFish);
             marketImagesContainer.innerHTML = '';
-            // A, B, C keys correspond to left, middle, right images
+            
             const marketOrder = ['A', 'B', 'C'];
             marketOrder.forEach(key => {
                 const src = marketLevel.images[key];
+
+                const choiceContainer = document.createElement('div');
+                choiceContainer.className = 'market-choice relative p-2 rounded-lg border-4 border-transparent cursor-pointer transition-all duration-200';
+                choiceContainer.dataset.market = key;
+
                 const img = document.createElement('img');
                 img.src = src;
-                img.dataset.market = key;
-                img.alt = `[${key}市場的統計圖表]`;
-                img.className = 'market-choice cursor-pointer rounded-lg border-4 border-transparent hover:border-yellow-400';
-                img.addEventListener('click', handleMarketChoice);
-                marketImagesContainer.appendChild(img);
+                img.alt = `[統計圖表]`;
+                img.className = 'w-full h-auto rounded-lg shadow-lg'; 
+                
+                const zoomIcon = document.createElement('button');
+                zoomIcon.className = 'absolute top-2 right-2 bg-black/50 p-2 rounded-full text-white hover:bg-black/80 transition-colors z-10';
+                zoomIcon.innerHTML = `<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="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8zm8-3a1 1 0 011 1v2h2a1 1 0 110 2h-2v2a1 1 0 11-2 0v-2H5a1 1 0 110-2h2V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>`;
+                zoomIcon.onclick = (e) => {
+                    e.stopPropagation(); 
+                    showEnlargedImage(src);
+                };
+
+                choiceContainer.appendChild(img);
+                choiceContainer.appendChild(zoomIcon);
+
+                choiceContainer.addEventListener('click', handleMarketChoice);
+                marketImagesContainer.appendChild(choiceContainer);
             });
 
             marketFeedback.textContent = '';
@@ -505,13 +528,16 @@
         }
 
         function handleMarketChoice(e) {
-            const choice = e.target.dataset.market;
+            const choiceContainer = e.target.closest('.market-choice');
+            if (!choiceContainer) return;
+            const choice = choiceContainer.dataset.market;
             const marketLevel = marketLevels[currentLevel];
 
-            document.querySelectorAll('.market-choice').forEach(img => img.classList.remove('selected'));
+            document.querySelectorAll('.market-choice').forEach(div => div.classList.remove('selected'));
             
             if (currentLevel === 0) {
                 if (choice === marketLevel.correctAnswer) {
+                    choiceContainer.classList.add('selected');
                     marketFeedback.textContent = marketLevel.feedback.correct;
                     marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
                     nextLevelButton.textContent = "前往第二關";
@@ -523,6 +549,7 @@
             } else if (currentLevel === 1) {
                 if (firstChoice === choice) {
                     if (choice === marketLevel.correctAnswer) {
+                        choiceContainer.classList.add('selected');
                         marketFeedback.textContent = marketLevel.feedback.correct;
                         marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
                         nextLevelButton.textContent = "經營之神的攻略";
@@ -534,12 +561,13 @@
                     firstChoice = null;
                 } else {
                     firstChoice = choice;
-                    e.target.classList.add('selected');
+                    choiceContainer.classList.add('selected');
                     marketFeedback.textContent = marketLevel.feedback.firstClick[choice];
                     marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-cyan-300';
                 }
             } else if (currentLevel === 2) {
                  if (choice === marketLevel.correctAnswer) {
+                    choiceContainer.classList.add('selected');
                     marketFeedback.textContent = marketLevel.feedback.correct;
                     marketFeedback.className = 'text-center text-xl font-bold min-h-[32px] mt-4 text-green-400';
                     nextLevelButton.textContent = "查看海風港灣的秘密";
@@ -550,6 +578,16 @@
                 }
             }
         }
+        
+        function showEnlargedImage(src) {
+            zoomedImage.src = src;
+            zoomModal.classList.remove('hidden');
+        }
+
+        function hideEnlargedImage() {
+            zoomModal.classList.add('hidden');
+            zoomedImage.src = '';
+        }
 
 
         // --- 事件監聽 ---
@@ -591,6 +629,8 @@
         continueButton.addEventListener('click', () => {
             hideOverlay();
             showScreen('market-screen');
+            // FIX: Update the fish name immediately when showing the market screen instructions.
+            document.querySelectorAll('.market-fish-name').forEach(el => el.textContent = levels[currentLevel].targetFish);
             marketInstructions.style.display = 'block';
             marketChoices.style.display = 'none';
         });
@@ -645,10 +685,13 @@
             goalCount.textContent = levelSettings.goal;
         });
 
+        zoomModal.addEventListener('click', () => {
+            hideEnlargedImage();
+        });
+
         // --- 初始啟動 ---
         showScreen('start-screen');
     });
     </script>
 </body>
 </html>
-

index.html

@@ -88,7 +88,7 @@
         }
         #philosophy-tower {
             top: 35%;
-            left: 37%; /* 再次偏左 */
+            left: 37%; 
             width: 22%;
             height: 40%;
         }
@@ -137,44 +137,106 @@
                 stroke-dashoffset: -550; /* 移動到路徑的另一端外 */
             }
         }
+        
+        /* 載入畫面樣式 */
+        #loading-screen {
+            position: absolute;
+            inset: 0;
+            z-index: 99;
+            background-color: #1a202c;
+            transition: opacity 0.5s ease-out;
+        }
+        .loader {
+            border: 8px solid #f3f3f3;
+            border-top: 8px solid #3498db;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
 
     </style>
 </head>
 <body class="bg-gray-900 flex items-center justify-center min-h-screen p-4">
     
-    <div id="map-container">
-        <!-- 動態痕跡 SVG -->
-        <svg id="footprints-svg" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid meet">
-            <!-- 重新設計的、更不規則的曲線路徑 -->
-            <path class="footprint-path" d="M600 900 C 500 880, 350 800, 300 675" />
-            <path class="footprint-path" d="M600 900 C 600 700, 380 550, 444 315" />
-            <path class="footprint-path" d="M600 900 C 750 850, 950 700, 1056 522" />
-            <path class="footprint-path" d="M600 900 C 700 750, 980 500, 1056 252" />
-        </svg>
-
-        <!-- 地點連結 -->
-        <a id="algebra-hill" href="algebra.html" class="location-link">
-            <span class="label">代數之丘</span>
-        </a>
-        <a id="philosophy-tower" href="philosophy.html" class="location-link">
-            <span class="label">哲學之塔</span>
-        </a>
-        <a id="gemstone-cave" href="gemstone.html" class="location-link">
-            <span class="label">寶石洞窟</span>
-        </a>
-        <a id="harbor-bay" href="harbor.html" class="location-link">
-            <span class="label">海風港灣</span>
-        </a>
+    <!-- 載入畫面 -->
+    <div id="loading-screen" class="w-full h-full flex flex-col items-center justify-center">
+        <div class="loader"></div>
+        <p class="text-white text-xl mt-4">地圖載入中...</p>
     </div>
 
-    <h1 class="main-title text-4xl md:text-5xl font-bold text-white text-center" style="text-shadow: 3px 3px 5px rgba(0,0,0,0.5);">歡迎來到數學探險島</h1>
+    <!-- 主內容 (預設隱藏) -->
+    <div id="main-content" class="opacity-0 transition-opacity duration-500">
+        <div id="map-container">
+            <!-- 動態痕跡 SVG -->
+            <svg id="footprints-svg" viewBox="0 0 1200 900" preserveAspectRatio="xMidYMid meet">
+                <!-- 重新設計的、更不規則的曲線路徑 -->
+                <path class="footprint-path" d="M600 900 C 500 880, 350 800, 300 675" />
+                <path class="footprint-path" d="M600 900 C 600 700, 380 550, 444 315" />
+                <path class="footprint-path" d="M600 900 C 750 850, 950 700, 1056 522" />
+                <path class="footprint-path" d="M600 900 C 700 750, 980 500, 1056 252" />
+            </svg>
+
+            <!-- 地點連結 -->
+            <a id="algebra-hill" href="algebra.html" class="location-link">
+                <span class="label">代數之丘</span>
+            </a>
+            <a id="philosophy-tower" href="philosophy.html" class="location-link">
+                <span class="label">哲學之塔</span>
+            </a>
+            <a id="gemstone-cave" href="gemstone.html" class="location-link">
+                <span class="label">寶石洞窟</span>
+            </a>
+            <a id="harbor-bay" href="harbor.html" class="location-link">
+                <span class="label">海風港灣</span>
+            </a>
+        </div>
 
-    <!-- 設計者資訊 -->
-    <div class="absolute bottom-4 right-4 text-right text-white text-sm opacity-80 z-10" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">
-        <p>遊戲設計者：新竹縣精華國中藍星宇</p>
-        <p>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="underline hover:text-yellow-300 transition-colors">萬物皆數</a></p>
+        <h1 class="main-title text-4xl md:text-5xl font-bold text-white text-center" style="text-shadow: 3px 3px 5px rgba(0,0,0,0.5);">歡迎來到數學探險島</h1>
+
+        <!-- 設計者資訊 -->
+        <div class="absolute bottom-4 right-4 text-right text-white text-sm opacity-80 z-10" style="text-shadow: 1px 1px 3px rgba(0,0,0,0.7);">
+            <p>遊戲設計者：新竹縣精華國中藍星宇</p>
+            <p>FB教育社群：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="underline hover:text-yellow-300 transition-colors">萬物皆數</a></p>
+        </div>
     </div>
 
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const loadingScreen = document.getElementById('loading-screen');
+            const mainContent = document.getElementById('main-content');
+            const imageUrl = 'https://i.meee.com.tw/emt8qds.png';
+
+            const image = new Image();
+            image.src = imageUrl;
+
+            image.onload = () => {
+                // 圖片載入完成後，淡出載入畫面
+                loadingScreen.style.opacity = '0';
+                
+                // 淡入主內容
+                mainContent.style.opacity = '1';
+
+                // 在淡出動畫結束後，徹底隱藏載入畫面
+                setTimeout(() => {
+                    loadingScreen.style.display = 'none';
+                }, 500); // 需與 transition duration 匹配
+            };
+
+            image.onerror = () => {
+                // 如果圖片載入失敗，也顯示主內容，避免卡住
+                console.error('背景圖片載入失敗！');
+                loadingScreen.style.opacity = '0';
+                mainContent.style.opacity = '1';
+                 setTimeout(() => {
+                    loadingScreen.style.display = 'none';
+                }, 500);
+            }
+        });
+    </script>
 </body>
 </html>
-