Update index.html

index.html

@@ -24,7 +24,9 @@
             background-position: center;
             position: relative;
             width: 100%;
+            max-width: 650px; 
             aspect-ratio: 1 / 1; 
+            margin: auto;
         }
         
         /* 設置 Canvas 區域 */
@@ -35,6 +37,8 @@
             transform: translate(-50%, -50%);
             width: 40%; 
             height: 40%;
+            max-width: 400px;
+            max-height: 400px;
             border-radius: 50%;
             overflow: hidden;
         }
@@ -103,8 +107,7 @@
 
         /* 全螢幕模式下的樣式修正 (使用 is-fullscreen class 主動控制) */
         #game-area.is-fullscreen {
-            /* 1. 解除最大寬度限制，這是最關鍵的修正！ */
-            max-width: none !important; 
+            max-width: none !important;
             width: 100% !important;
             height: 100% !important;
             margin: 0 !important;
@@ -114,18 +117,15 @@
             align-items: center;
             background-color: #FFFBEB !important;
         }
-        
-        #game-area.is-fullscreen > #main-frame {
+        #game-area.is-fullscreen > #mainContainer {
+            width: 95vmin !important;
+            height: 95vmin !important;
+            max-width: none !important; /* 強制覆蓋 max-width */
             background-color: transparent !important;
             box-shadow: none !important;
             padding: 0 !important;
             border-radius: 0 !important;
-            /* 讓外框去適應內部內容的大小 */
-            width: 95vmin;
-            height: 95vmin;
         }
-        
-        /* 修正管理介面在全螢幕下的定位 */
         #game-area.is-fullscreen #manageModal {
             position: absolute;
         }
@@ -137,49 +137,45 @@
     <canvas id="confettiCanvas" class="absolute top-0 left-0 w-full h-full pointer-events-none z-50"></canvas>
 
     <div id="game-area" class="max-w-4xl w-full mx-auto relative">
-        <!-- 裝飾外框 -->
-        <div id="main-frame" class="shadow-2xl rounded-3xl p-4 bg-gray-200">
-            <!-- 核心內容容器 -->
-            <div id="mainContainer" class="spinner-container">
-                <button id="manageButton" class="absolute top-4 left-4 text-gray-500 hover:text-gray-800 transition z-40">
-                    <i class="fas fa-cog text-2xl"></i>
-                </button>
-                <button id="fullscreenButton" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 transition z-40">
-                    <i class="fas fa-expand text-2xl"></i>
-                </button>
-
-                <div class="pointer">
-                    <i class="fas fa-paw"></i>
-                </div>
-                
-                <canvas id="wheelCanvas"></canvas>
-
-                <div id="wheelResultOverlay" class="absolute inset-0 flex items-center justify-center opacity-0 pointer-events-none transition-all duration-300 z-30">
-                    <div class="p-6 bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl text-center max-w-[80%] transform scale-90 transition-transform duration-500 flex flex-col items-center">
-                        <p class="text-xl font-bold text-gray-700 mb-2">✨ 恭喜抽中！最終結果 ✨</p>
-                        <div id="overlayResultBox" class="inline-block p-4 rounded-xl shadow-lg border-4 font-black text-3xl transition-colors duration-300"></div>
-                        <p id="overlayResultMessage" class="text-md text-gray-500 mt-3"></p>
-                        <button id="resetButton" class="mt-4 px-6 py-3 bg-pink-500 text-white font-bold text-lg rounded-full shadow-lg hover:bg-pink-600 transition duration-300 ease-in-out">
-                            重新開始
-                        </button>
-                    </div>
+        <div id="mainContainer" class="spinner-container shadow-2xl rounded-3xl p-4 bg-gray-200">
+            <button id="manageButton" class="absolute top-4 left-4 text-gray-500 hover:text-gray-800 transition z-40">
+                <i class="fas fa-cog text-2xl"></i>
+            </button>
+            <button id="fullscreenButton" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800 transition z-40">
+                <i class="fas fa-expand text-2xl"></i>
+            </button>
+
+            <div class="pointer">
+                <i class="fas fa-paw"></i>
+            </div>
+            
+            <canvas id="wheelCanvas"></canvas>
+
+            <div id="wheelResultOverlay" class="absolute inset-0 flex items-center justify-center opacity-0 pointer-events-none transition-all duration-300 z-30">
+                <div class="p-6 bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl text-center max-w-[80%] transform scale-90 transition-transform duration-500 flex flex-col items-center">
+                    <p class="text-xl font-bold text-gray-700 mb-2">✨ 恭喜抽中！最終結果 ✨</p>
+                    <div id="overlayResultBox" class="inline-block p-4 rounded-xl shadow-lg border-4 font-black text-3xl transition-colors duration-300"></div>
+                    <p id="overlayResultMessage" class="text-md text-gray-500 mt-3"></p>
+                    <button id="resetButton" class="mt-4 px-6 py-3 bg-pink-500 text-white font-bold text-lg rounded-full shadow-lg hover:bg-pink-600 transition duration-300 ease-in-out">
+                        重新開始
+                    </button>
                 </div>
+            </div>
 
-                <div id="powerControls" class="absolute bottom-36 right-2 flex flex-col items-center space-y-2 z-40">
-                    <span id="feedbackText" class="text-2xl font-black opacity-0" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);"></span>
-                    
-                    <div class="w-48 h-6 bg-gray-200 rounded-full overflow-hidden shadow-inner relative">
-                        <div id="powerBar" class="h-full" style="width: 0%;"></div>
-                        <!-- 獎勵區間漸層 -->
-                        <div class="absolute top-0 h-full" 
-                             style="left: 55%; width: 30%; background-image: linear-gradient(to right, rgba(59, 130, 246, 0.3) 0%, rgba(132, 204, 22, 0.4) 50%, rgba(59, 130, 246, 0.3) 100%);"
-                             title="獎勵區間"></div>
-                    </div>
-                    
-                    <button id="powerSpinButton" class="px-6 py-3 bg-amber-600 text-white font-bold text-lg rounded-full shadow-lg hover:bg-amber-700 transition duration-300 ease-in-out select-none disabled:bg-gray-400 disabled:cursor-not-allowed">
-                        按我旋轉
-                    </button>
+            <div id="powerControls" class="absolute bottom-36 right-2 flex flex-col items-center space-y-2 z-40">
+                <span id="feedbackText" class="text-2xl font-black opacity-0" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.5);"></span>
+                
+                <div class="w-48 h-6 bg-gray-200 rounded-full overflow-hidden shadow-inner relative">
+                    <div id="powerBar" class="h-full" style="width: 0%;"></div>
+                    <!-- 獎勵區間漸層 -->
+                    <div class="absolute top-0 h-full" 
+                         style="left: 55%; width: 30%; background-image: linear-gradient(to right, rgba(59, 130, 246, 0.3) 0%, rgba(132, 204, 22, 0.4) 50%, rgba(59, 130, 246, 0.3) 100%);"
+                         title="獎勵區間"></div>
                 </div>
+                
+                <button id="powerSpinButton" class="px-6 py-3 bg-amber-600 text-white font-bold text-lg rounded-full shadow-lg hover:bg-amber-700 transition duration-300 ease-in-out select-none disabled:bg-gray-400 disabled:cursor-not-allowed">
+                    按我旋轉
+                </button>
             </div>
         </div>
         
@@ -581,7 +577,8 @@
                     confettiCtx.translate(p.x, p.y);
                     confettiCtx.rotate(p.angle * Math.PI / 180);
                     confettiCtx.fillStyle = p.color;
-                    confettiCtx.fillRect(-p.size / 2, -p-size / 2, p.size, p.size);
+                    confettiCtx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
+                    confettiCtx.restore();
                 }
             });
             if (confettiParticles.length > 0) requestAnimationFrame(animateConfetti);