Spaces:
Running
Running
| <html lang="zh-Hant"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>數學探險島</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Noto Sans TC', sans-serif; | |
| background-color: #333; | |
| overflow: hidden; /* 隱藏滾動條 */ | |
| } | |
| #map-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| background-image: url('https://i.meee.com.tw/emt8qds.png'); | |
| background-size: cover; /* 填滿整個容器 */ | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| } | |
| .main-title { | |
| position: relative; /* 確保標題在最上層 */ | |
| z-index: 20; | |
| animation: fadeOutTitle 5s forwards; | |
| animation-delay: 2s; /* 2秒後開始淡出 */ | |
| } | |
| @keyframes fadeOutTitle { | |
| 0% { opacity: 1; } | |
| 100% { opacity: 0; pointer-events: none; } | |
| } | |
| .location-link { | |
| position: absolute; | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-decoration: none; | |
| cursor: pointer; | |
| z-index: 10; | |
| } | |
| .location-link::before { | |
| content: ''; | |
| position: absolute; | |
| width: 80px; /* 縮小光圈的尺寸 */ | |
| height: 80px; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| transform: scale(0); /* 預設隱藏 */ | |
| opacity: 0; | |
| } | |
| .location-link:hover::before { | |
| transform: scale(1); /* 滑鼠移入時顯示 */ | |
| opacity: 1; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 20px 7px rgba(255, 235, 59, 0.6); | |
| } | |
| .location-link .label { | |
| opacity: 0; | |
| color: white; | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.8); | |
| transition: opacity 0.3s ease; | |
| background-color: rgba(0,0,0,0.5); | |
| padding: 0.5rem 1rem; | |
| border-radius: 999px; | |
| position: relative; /* 確保文字在光圈之上 */ | |
| z-index: 5; | |
| } | |
| .location-link:hover .label { | |
| opacity: 1; | |
| } | |
| /* 最終調整後的地點位置 */ | |
| #algebra-hill { | |
| top: 28%; | |
| left: 88%; | |
| width: 25%; | |
| height: 35%; | |
| } | |
| #philosophy-tower { | |
| top: 35%; | |
| left: 37%; | |
| width: 22%; | |
| height: 40%; | |
| } | |
| #gemstone-cave { | |
| top: 58%; | |
| left: 88%; | |
| width: 20%; | |
| height: 25%; | |
| } | |
| #harbor-bay { | |
| top: 75%; | |
| left: 25%; | |
| width: 35%; | |
| height: 35%; | |
| } | |
| /* 風的痕跡 SVG 樣式 */ | |
| #footprints-svg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| pointer-events: none; /* 讓 SVG 不會擋到滑鼠點擊 */ | |
| z-index: 5; | |
| } | |
| .footprint-path { | |
| stroke: rgba(255, 255, 255, 0.4); | |
| stroke-width: 2.5px; | |
| fill: none; | |
| stroke-linecap: round; | |
| stroke-dasharray: 150 400; /* 150px長的痕跡, 400px的間隔 */ | |
| stroke-dashoffset: 550; | |
| animation: flow 15s linear infinite; | |
| } | |
| /* 讓每個路徑的動畫錯開，看起來更自然 */ | |
| .footprint-path:nth-child(2) { animation-delay: -3s; } | |
| .footprint-path:nth-child(3) { animation-delay: -7s; } | |
| .footprint-path:nth-child(4) { animation-delay: -10s; } | |
| @keyframes flow { | |
| from { | |
| stroke-dashoffset: 550; /* 從路徑外開始 */ | |
| } | |
| to { | |
| 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="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> | |
| <!-- 主內容 (預設隱藏) --> | |
| <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> | |
| <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> | |