Upload 2 files

function.html

@@ -122,12 +122,40 @@
             gap: 12px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            /* Dragging */
+            touch-action: none;
         }
 
         #virtual-keypad.active {
             transform: translateX(-50%) translateY(0);
         }
 
+        #virtual-keypad.dragging {
+            transition: none;
+            transform: none;
+            /* Controlled by JS during drag */
+        }
+
+        .keypad-handle {
+            grid-column: span 3;
+            height: 20px;
+            margin-bottom: 5px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            cursor: grab;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .keypad-handle::after {
+            content: '';
+            width: 40px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 2px;
+        }
+
         .keypad-btn {
             width: 60px;
             height: 60px;
@@ -241,6 +269,7 @@
 
     <!-- Virtual Keypad HTML -->
     <div id="virtual-keypad">
+        <div class="keypad-handle"></div>
         <div class="keypad-btn" onclick="keypad.input(1)">1</div>
         <div class="keypad-btn" onclick="keypad.input(2)">2</div>
         <div class="keypad-btn" onclick="keypad.input(3)">3</div>
@@ -712,11 +741,11 @@
                     html = `
                         <h2 class="text-3xl font-bold text-cyan-400 mb-4">核心運作法則確認</h2>
                         <div class="text-center bg-slate-800/80 p-6 rounded-xl border border-cyan-500/30 mb-8">
-                             <div class="font-tech text-6xl mb-6">
+                             <div class="font-tech text-4xl md:text-6xl mb-6">
                                 <span class="text-cyan-400">y</span> = 2<span class="text-amber-400">x</span> + 3
                             </div>
-                            <p class="text-slate-300 text-4xl leading-relaxed font-bold">
-                                每投入 <span class="text-amber-400 font-bold text-7xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-7xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
+                            <p class="text-slate-300 text-2xl md:text-4xl leading-relaxed font-bold">
+                                每投入 <span class="text-amber-400 font-bold text-5xl md:text-7xl mx-2 border-b-2 border-amber-400/50">x</span> 顆晶石，<br>就會產生 <span class="text-cyan-400 font-bold text-5xl md:text-7xl mx-2 border-b-2 border-cyan-400/50">y</span> 點電力。
                             </p>
                         </div>
                         <button onclick="startQPhase()" class="w-full py-5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold text-xl border border-slate-500">
@@ -755,7 +784,7 @@
                                 <div class="text-slate-400 font-bold text-xl border-b border-slate-500/30 pb-2">2. 坐標描點</div>
                                 <div class="bg-slate-800/30 p-4 rounded-xl border border-slate-700/30 flex flex-col items-center justify-center flex-grow">
                                     <div class="text-sm text-slate-500 mb-1">對應座標</div>
-                                    <div class="font-tech text-3xl font-bold text-slate-500">
+                                    <div class="font-tech text-2xl md:text-3xl font-bold text-slate-500">
                                         (<span class="text-amber-400">${xVal}</span>, <span class="text-cyan-400">y</span>)
                                     </div>
                                 </div>
@@ -802,7 +831,7 @@
                                 <div id="coord-step-1" class="flex flex-col gap-4 h-full">
                                     <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/50 flex flex-col items-center justify-center flex-grow">
                                         <div class="text-sm text-cyan-300 font-bold mb-2 tracking-widest">對應座標</div>
-                                        <div class="font-tech text-4xl font-bold z-10 mb-2">
+                                        <div class="font-tech text-3xl md:text-4xl font-bold z-10 mb-2">
                                             (<span class="text-amber-400">${xValC}</span>, <span class="text-cyan-400">y</span>)
                                         </div>
                                     </div>
@@ -815,7 +844,7 @@
                                 <div id="coord-step-2" class="hidden flex flex-col gap-4 h-full">
                                     <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500 shadow-[0_0_20px_rgba(34,211,238,0.2)] flex flex-col items-center justify-center relative overflow-hidden transform transition-all flex-grow animate-pulse-once">
                                         <div class="text-sm text-cyan-300 font-bold mb-2 tracking-widest">對應座標</div>
-                                        <div class="font-tech text-4xl font-bold z-10 mb-2">
+                                        <div class="font-tech text-3xl md:text-4xl font-bold z-10 mb-2">
                                             (<span class="text-amber-400">${xValC}</span>, <span class="text-cyan-400">${yValC}</span>)
                                         </div>
                                         <div class="absolute inset-0 bg-cyan-500/10 animate-pulse"></div>
@@ -874,10 +903,8 @@
                                 <br>根據 y=2x+3，請問要投入多少晶石 <span class="text-amber-400 font-bold">(x)</span> 才足夠？
                             </p>
                             <div class="flex items-center gap-2 mt-4 bg-slate-800/50 p-4 rounded-xl flex-wrap">
-                                <span class="font-tech text-amber-400 text-4xl whitespace-nowrap">x = </span>
                                 <span class="font-tech text-amber-400 text-4xl whitespace-nowrap">x = </span>
                                 <input id="ans-input" type="text" readonly onclick="keypad.open(this)" class="tech-input flex-1 min-w-[100px] p-2 rounded text-4xl text-amber-400" placeholder="?">
-                                <button onclick="checkFinalAnswer()" class="px-6 py-3 bg-red-600 hover:bg-red-500 text-white rounded font-bold shadow-[0_0_15px_rgba(239,68,68,0.5)] whitespace-nowrap flex-shrink-0">
                                 <button onclick="checkFinalAnswer()" class="px-6 py-3 bg-red-600 hover:bg-red-500 text-white rounded font-bold shadow-[0_0_15px_rgba(239,68,68,0.5)] whitespace-nowrap flex-shrink-0">
                                     投入晶石
                                 </button>
@@ -897,11 +924,11 @@
                             
                             <!-- Teaching Content -->
                             <div class="bg-slate-800/80 p-4 rounded-xl border border-cyan-500/30 mb-6 text-left">
-                                <h3 class="text-3xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
-                                <p class="text-slate-200 text-2xl leading-relaxed mb-3">
-                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-3xl mx-1">「函數」(Function)</span>。
+                                <h3 class="text-xl md:text-3xl font-bold text-white mb-2 text-center">任務小結：什麼是「函數」？</h3>
+                                <p class="text-slate-200 text-lg md:text-2xl leading-relaxed mb-3">
+                                    剛剛我們使用的「能量轉換法則」，在數學上就叫做<span class="text-amber-400 font-bold text-2xl md:text-3xl mx-1">「函數」(Function)</span>。
                                 </p>
-                                <p class="text-slate-300 text-2xl leading-relaxed">
+                                <p class="text-slate-300 text-lg md:text-2xl leading-relaxed">
                                     函數就像一座<span class="text-cyan-400 font-bold">工廠</span>：<br>
                                     它會把原料 <span class="font-bold text-amber-400">x (晶石)</span>，藉由固定的規則，<br>轉換成產品 <span class="font-bold text-cyan-400">y (電力)</span>。
                                 </p>
@@ -1112,10 +1139,10 @@
 
                     html = `
                         <div class="text-center w-full h-full flex flex-col items-center">
-                            <h2 class="text-5xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
+                            <h2 class="text-3xl md:text-6xl font-black text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-green-400 mb-6 drop-shadow-[0_0_15px_rgba(34,211,238,0.6)] tracking-widest">
                                 任務完成 SYSTEM RESTORED
                             </h2>
-                            <div class="text-amber-400 font-tech text-4xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
+                            <div class="text-amber-400 font-tech text-2xl md:text-4xl mb-10 tracking-[0.5em]">MISSION ACCOMPLISHED</div>
 
                             <!-- Score Board -->
                             <div class="flex gap-16 mb-10 bg-slate-800/80 px-16 py-8 rounded-3xl border-2 border-slate-600 transform scale-110">

sequence.html

@@ -306,12 +306,39 @@
             gap: 12px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            /* Dragging */
+            touch-action: none;
         }
 
         #virtual-keypad.active {
             transform: translateX(-50%) translateY(0);
         }
 
+        #virtual-keypad.dragging {
+            transition: none;
+            transform: none;
+        }
+
+        .keypad-handle {
+            grid-column: span 3;
+            height: 20px;
+            margin-bottom: 5px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 10px;
+            cursor: grab;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .keypad-handle::after {
+            content: '';
+            width: 40px;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.4);
+            border-radius: 2px;
+        }
+
         .keypad-btn {
             width: 60px;
             height: 60px;
@@ -384,12 +411,16 @@
         </div>
 
         <!-- Credits Footer -->
-        <div>臉書社團：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank"
-                class="hover:text-amber-400 pointer-events-auto transition-colors">萬物皆數</a></div>
+        <div class="fixed bottom-1 right-2 text-right text-[10px] text-slate-500/50 pointer-events-none z-50 font-sans">
+            <div>遊戲設計：新竹縣精華國中藍星宇老師</div>
+            <div>臉書社團：<a href="https://www.facebook.com/groups/1554372228718393" target="_blank"
+                    class="hover:text-amber-400 pointer-events-auto transition-colors">萬物皆數</a></div>
+        </div>
     </div>
 
     <!-- Virtual Keypad HTML -->
     <div id="virtual-keypad">
+        <div class="keypad-handle"></div>
         <div class="keypad-btn" onclick="keypad.input(1)">1</div>
         <div class="keypad-btn" onclick="keypad.input(2)">2</div>
         <div class="keypad-btn" onclick="keypad.input(3)">3</div>