Spaces:
Running
Running
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>平方之泉 - 數學魔法王國：平方之旅</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <style> | |
| /* 成就解鎖彈窗通知 */ | |
| .toast-container { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| max-width: 350px; | |
| } | |
| .toast { | |
| background-color: rgba(0, 0, 0, 0.85); | |
| color: #ffffff; | |
| border-radius: 10px; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| align-items: center; | |
| animation: fadeInOut 5s forwards; | |
| border-left: 4px solid #ff8c00; | |
| } | |
| .toast.journey { | |
| border-left-color: #4e9af1; | |
| } | |
| .toast.trial { | |
| border-left-color: #f1c232; | |
| } | |
| .toast.secret { | |
| border-left-color: #9c59b6; | |
| } | |
| .toast-icon { | |
| font-size: 2rem; | |
| margin-right: 15px; | |
| } | |
| .toast-content { | |
| flex: 1; | |
| } | |
| .toast-title { | |
| font-weight: bold; | |
| margin-bottom: 5px; | |
| color: #ffa500; | |
| } | |
| @keyframes fadeInOut { | |
| 0% { opacity: 0; transform: translateX(50px); } | |
| 10% { opacity: 1; transform: translateX(0); } | |
| 90% { opacity: 1; transform: translateX(0); } | |
| 100% { opacity: 0; transform: translateX(50px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="spring-page"> | |
| <!-- 音效元素 --> | |
| <audio id="bgm" loop> | |
| <source src="spring.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="correct-sound"> | |
| <source src="bingo.mp3" type="audio/mpeg"> | |
| </audio> | |
| <audio id="wrong-sound"> | |
| <source src="wrong.mp3" type="audio/mpeg"> | |
| </audio> | |
| <div class="game-container"> | |
| <div class="spring-container"> | |
| <h1 class="spring-title">第一試煉：平方之泉</h1> | |
| <div class="spring-content" id="story-section"> | |
| <p>這裡是充滿魔法能量的「平方之泉」，但只有熟悉平方力量的人才能吸收泉水力量。</p> | |
| <p>守泉獸說道：「1 的平方是 1、2 的平方是 4……你真的記得它們嗎？若你能感受到數字膨脹的力量，你將能邁出第一步。」</p> | |
| <p>守泉獸設下了六道考驗，測試你對平方數的直覺感知能力。每答對一題，你將更接近獲得「直覺感知」的力量。</p> | |
| <div class="start-challenge-container"> | |
| <button id="start-challenge" class="action-btn">開始考驗</button> | |
| </div> | |
| </div> | |
| <div class="quiz-container" id="quiz-section" style="display: none;"> | |
| <div id="question-container"> | |
| <h2 id="question-text">問題載入中...</h2> | |
| <div id="options-container"> | |
| <!-- 選項將由JavaScript動態生成 --> | |
| </div> | |
| </div> | |
| <div id="result-feedback" class="feedback-container"> | |
| <!-- 答題結果反饋將在這裡顯示 --> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-text">進度：<span id="progress-count">0</span>/6</div> | |
| <div class="progress-bar" id="progress-bar"> | |
| <div id="progress-fill"></div> | |
| </div> | |
| </div> | |
| <div class="score-container"> | |
| <div id="score-display">分數：0/0</div> | |
| </div> | |
| <div class="next-question-container"> | |
| <button id="next-question" class="action-btn" style="display: none;">下一題</button> | |
| </div> | |
| </div> | |
| <div class="completion-message" id="completion-section" style="display: none;"> | |
| <h2>恭喜你完成第一試煉！</h2> | |
| <p>你感受到一股力量流入體內...</p> | |
| <p>你已獲得「直覺感知」的能力！</p> | |
| <p>守泉獸欣慰地說：「你已經掌握了平方的基本感知，但這只是開始。真正的勇者需要學會轉換的藝術。前往變換山谷吧，那裡的山谷之靈會教導你下一階段的力量。」</p> | |
| <div class="score-summary"> | |
| <div id="final-score">最終分數：0/0</div> | |
| <div id="stars-display">☆☆☆</div> | |
| </div> | |
| <div class="navigation-buttons"> | |
| <button id="back-to-map" class="nav-btn">返回王國地圖</button> | |
| <button id="next-trial" class="nav-btn">前往下一試煉</button> | |
| </div> | |
| </div> | |
| <!-- 音樂來源註記 --> | |
| <div class="music-credit"> | |
| <p>背景音樂：由Suno製作</p> | |
| <button id="toggle-bgm" class="small-btn">音樂開/關</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 成就解鎖通知容器 --> | |
| <div class="toast-container" id="toast-container"></div> | |
| <!-- 初始化成就系統 --> | |
| <script src="achievements.js"></script> | |
| <script src="spring.js"></script> | |
| </body> | |
| </html> | |