HEX CODE BREAKER | 程式專案 | 橘蘋學習平台

{"id":1170690,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"zh-TW\\\"\u003e\\n\u003chead\u003e\\n    \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n    \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n    \u003ctitle\u003eHEX CODE BREAKER\u003c/title\u003e\\n    \u003c!-- 引入 Tailwind CSS --\u003e\\n    \u003cscript src=\\\"https://cdn.tailwindcss.com\\\"\u003e\u003c/script\u003e\\n    \u003c!-- 引入 Lucide Icons --\u003e\\n    \u003cscript src=\\\"https://unpkg.com/lucide@latest\\\"\u003e\u003c/script\u003e\\n    \u003cstyle\u003e\\n        /* 全域設定：強制黑色背景與綠色文字 */\\n        body {\\n            background-color: #000;\\n            color: #22c55e; /* Tailwind Green-500 */\\n        }\\n\\n        /* 自定義滑桿樣式 - 終端機風格 */\\n        input[type=range] {\\n            -webkit-appearance: none; \\n            background: transparent; \\n        }\\n        \\n        input[type=range]::-webkit-slider-thumb {\\n            -webkit-appearance: none;\\n            height: 20px;\\n            width: 20px;\\n            background: #000;\\n            border: 2px solid #22c55e; /* 綠色邊框 */\\n            cursor: pointer;\\n            margin-top: -8px; \\n            box-shadow: 0 0 5px #22c55e; /* 綠色螢光 */\\n            transition: transform 0.1s;\\n        }\\n\\n        input[type=range]:active::-webkit-slider-thumb {\\n            transform: scale(1.1);\\n            background: #22c55e;\\n        }\\n\\n        input[type=range]::-webkit-slider-runnable-track {\\n            width: 100%;\\n            height: 4px;\\n            cursor: pointer;\\n            background: #14532d; /* Dark Green */\\n            border-radius: 0;\\n            border: 1px solid #14532d;\\n        }\\n\\n        /* 禁用狀態的滑桿 */\\n        input[type=range]:disabled {\\n            opacity: 0.3;\\n            cursor: not-allowed;\\n        }\\n        input[type=range]:disabled::-webkit-slider-thumb {\\n            border-color: #15803d;\\n            box-shadow: none;\\n        }\\n\\n        .fade-in {\\n            animation: fadeIn 0.5s ease-out forwards;\\n        }\\n        \\n        @keyframes fadeIn {\\n            from { opacity: 0; transform: translateY(10px); }\\n            to { opacity: 1; transform: translateY(0); }\\n        }\\n\\n        /* 掃描線特效 (CRT Effect) */\\n        .crt::before {\\n            content: \\\" \\\";\\n            display: block;\\n            position: absolute;\\n            top: 0;\\n            left: 0;\\n            bottom: 0;\\n            right: 0;\\n            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));\\n            z-index: 50;\\n            background-size: 100% 2px, 3px 100%;\\n            pointer-events: none;\\n        }\\n\\n        /* 閃爍游標效果 */\\n        .blink {\\n            animation: blinker 1s linear infinite;\\n        }\\n        @keyframes blinker {\\n            50% { opacity: 0; }\\n        }\\n    \u003c/style\u003e\\n\u003c/head\u003e\\n\u003cbody class=\\\"font-mono min-h-screen flex flex-col crt\\\"\u003e\\n\\n    \u003c!-- Header: 黑色背景，綠色邊框 --\u003e\\n    \u003cheader class=\\\"bg-black border-b border-green-500/50 p-4 md:p-6 relative z-10\\\"\u003e\\n        \u003cdiv class=\\\"max-w-3xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4\\\"\u003e\\n            \\n            \u003c!-- Title --\u003e\\n            \u003cdiv class=\\\"flex items-center gap-3 self-start md:self-auto\\\"\u003e\\n                \u003ci data-lucide=\\\"terminal\\\" class=\\\"w-6 h-6 md:w-8 md:h-8 text-green-500\\\"\u003e\u003c/i\u003e\\n                \u003ch1 class=\\\"text-xl md:text-2xl font-bold tracking-widest text-green-500 uppercase\\\"\u003e\\n                    HexCodeBreaker\u003cspan class=\\\"blink\\\"\u003e_\u003c/span\u003e\\n                \u003c/h1\u003e\\n            \u003c/div\u003e\\n\\n            \u003c!-- Stats Display: 綠色邊框與文字 --\u003e\\n            \u003cdiv class=\\\"flex items-center gap-2 md:gap-3 self-end md:self-auto flex-wrap justify-end\\\"\u003e\\n                \\n                \u003c!-- Hex Display --\u003e\\n                \u003cdiv class=\\\"flex items-center gap-2 bg-black px-3 py-2 border border-green-500/50\\\" title=\\\"目前色碼\\\"\u003e\\n                    \u003cspan id=\\\"realtime-hex\\\" class=\\\"text-lg md:text-2xl font-bold text-green-500\\\"\u003e#808080\u003c/span\u003e\\n                \u003c/div\u003e\\n\\n                \u003c!-- Similarity Display --\u003e\\n                \u003cdiv class=\\\"flex items-center gap-2 bg-black px-3 py-2 border border-green-500/50\\\" title=\\\"目前相似度\\\"\u003e\\n                    \u003ci data-lucide=\\\"crosshair\\\" class=\\\"w-4 h-4 md:w-5 md:h-5 text-green-500\\\"\u003e\u003c/i\u003e\\n                    \u003cspan id=\\\"realtime-score\\\" class=\\\"text-lg md:text-2xl font-bold w-14 md:w-20 text-center text-green-500\\\"\u003e--%\u003c/span\u003e\\n                \u003c/div\u003e\\n\\n                \u003c!-- Timer Display --\u003e\\n                \u003cdiv class=\\\"flex items-center gap-2 bg-black px-3 py-2 border border-green-500/50\\\"\u003e\\n                    \u003ci data-lucide=\\\"timer\\\" class=\\\"w-4 h-4 md:w-5 md:h-5 text-green-500\\\"\u003e\u003c/i\u003e\\n                    \u003cspan id=\\\"timer-display\\\" class=\\\"text-lg md:text-2xl font-bold w-8 md:w-12 text-center text-green-500\\\"\u003e60\u003c/span\u003e\\n                    \u003cspan class=\\\"text-xs text-green-700\\\"\u003es\u003c/span\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n\\n        \u003c/div\u003e\\n    \u003c/header\u003e\\n\\n    \u003c!-- Main Content --\u003e\\n    \u003cmain class=\\\"flex-1 w-full max-w-2xl mx-auto p-4 md:p-6 flex flex-col gap-6 relative z-10\\\"\u003e\\n\\n        \u003c!-- Game Area: 黑色背景，綠色邊框，移除陰影改用發光效果 --\u003e\\n        \u003cdiv class=\\\"bg-black border border-green-500 rounded-none shadow-[0_0_15px_rgba(34,197,94,0.2)] overflow-hidden fade-in relative\\\"\u003e\\n            \\n            \u003c!-- Inner Color Display --\u003e\\n            \u003cdiv class=\\\"bg-black p-8 flex flex-col items-center justify-center relative\\\" id=\\\"game-bg\\\"\u003e\\n                \u003cp id=\\\"instruction-text\\\" class=\\\"text-green-600 mb-6 text-center max-w-md text-sm\\\"\u003e\\n                    \u003e\u003e 正在啟動破解程序...\u003cbr\u003e\\n                    \u003e\u003e 找出正確的色碼將駭客鎖住重要資料取回\\n                \u003c/p\u003e\\n\\n                \u003cdiv class=\\\"flex items-center gap-6 md:gap-12 w-full justify-center\\\"\u003e\\n                    \u003c!-- Target Color --\u003e\\n                    \u003cdiv class=\\\"flex flex-col items-center gap-2 relative\\\"\u003e\\n                        \u003cspan class=\\\"text-green-700 text-xs font-bold tracking-widest\\\"\u003e[ 目標色碼 ]\u003c/span\u003e\\n                        \\n                        \u003c!-- The Color Circle --\u003e\\n                        \u003cdiv id=\\\"target-color-display\\\" class=\\\"w-24 h-24 md:w-32 md:h-32 rounded-full border-2 border-green-500/30 bg-black transition-colors duration-300 relative overflow-hidden\\\"\u003e\\n                            \u003c!-- Overlay --\u003e\\n                            \u003cdiv id=\\\"target-overlay\\\" class=\\\"absolute inset-0 bg-black flex items-center justify-center text-green-500\\\"\u003e\\n                                \u003ci data-lucide=\\\"lock\\\" class=\\\"w-12 h-12\\\"\u003e\u003c/i\u003e\\n                            \u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \\n                        \u003cspan id=\\\"target-hex-text\\\" class=\\\"text-green-700 text-xs opacity-0 transition-opacity\\\"\u003e#??????\u003c/span\u003e\\n                    \u003c/div\u003e\\n\\n                    \u003cdiv class=\\\"text-2xl font-bold text-green-500 opacity-50\\\"\u003e::\u003c/div\u003e\\n\\n                    \u003c!-- User Color --\u003e\\n                    \u003cdiv class=\\\"flex flex-col items-center gap-2\\\"\u003e\\n                        \u003cspan class=\\\"text-green-700 text-xs font-bold tracking-widest\\\"\u003e[ 目前色碼 ]\u003c/span\u003e\\n                        \u003cdiv id=\\\"user-color-display\\\" class=\\\"w-24 h-24 md:w-32 md:h-32 rounded-full border-2 border-green-500 shadow-[0_0_10px_rgba(34,197,94,0.3)] transition-colors duration-100\\\"\u003e\u003c/div\u003e\\n                        \u003cspan id=\\\"user-hex-text\\\" class=\\\"text-green-600 text-xs invisible\\\"\u003e#808080\u003c/span\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n\\n                \u003c!-- Result Overlay --\u003e\\n                \u003cdiv id=\\\"result-overlay\\\" class=\\\"absolute inset-0 bg-black/95 z-30 hidden flex-col items-center justify-center p-6 text-center text-green-500 fade-in border-2 border-green-500 m-2\\\"\u003e\\n                    \u003cdiv id=\\\"score-text\\\" class=\\\"text-6xl font-bold mb-2 text-green-400 drop-shadow-[0_0_10px_rgba(34,197,94,0.8)]\\\"\u003e\\n                        0%\\n                    \u003c/div\u003e\\n                    \u003ch3 id=\\\"score-message\\\" class=\\\"text-xl font-bold mb-6 text-green-500 tracking-wider\\\"\u003e計算中...\u003c/h3\u003e\\n                    \\n                    \u003c!-- 代碼比對 --\u003e\\n                    \u003cdiv id=\\\"result-details\\\" class=\\\"grid grid-cols-2 gap-px bg-green-900/30 border border-green-500/50 w-full max-w-xs transition-all\\\"\u003e\\n                        \u003cdiv class=\\\"bg-black p-3 border-r border-green-500/20\\\"\u003e\\n                            \u003cdiv class=\\\"text-xs text-green-700 mb-1\\\"\u003e目標色碼\u003c/div\u003e\\n                            \u003cdiv id=\\\"result-target-hex\\\" class=\\\"font-mono text-green-400 font-bold\\\"\u003e\u003c/div\u003e\\n                        \u003c/div\u003e\\n                        \u003cdiv class=\\\"bg-black p-3\\\"\u003e\\n                            \u003cdiv class=\\\"text-xs text-green-700 mb-1\\\"\u003e目前色碼\u003c/div\u003e\\n                            \u003cdiv id=\\\"result-user-hex\\\" class=\\\"font-mono text-green-400 font-bold\\\"\u003e\u003c/div\u003e\\n                        \u003c/div\u003e\\n                    \u003c/div\u003e\\n                \u003c/div\u003e\\n            \u003c/div\u003e\\n\\n            \u003c!-- Controls: 黑色背景，綠色文字 --\u003e\\n            \u003cdiv class=\\\"p-6 md:p-8 space-y-6 bg-black border-t border-green-500/30 relative z-20\\\"\u003e\\n                \u003c!-- Red Slider --\u003e\\n                \u003cdiv\u003e\\n                    \u003cdiv class=\\\"flex justify-between mb-2\\\"\u003e\\n                        \u003clabel class=\\\"font-bold text-green-500 text-xs tracking-wider flex items-center gap-2\\\"\u003e\\n                            [R] 紅\\n                        \u003c/label\u003e\\n                        \u003cspan id=\\\"val-r\\\" class=\\\"text-green-400 font-bold\\\"\u003e128\u003c/span\u003e\\n                    \u003c/div\u003e\\n                    \u003cinput type=\\\"range\\\" id=\\\"r-slider\\\" min=\\\"0\\\" max=\\\"255\\\" value=\\\"128\\\" disabled class=\\\"w-full\\\"\u003e\\n                \u003c/div\u003e\\n\\n                \u003c!-- Green Slider --\u003e\\n                \u003cdiv\u003e\\n                    \u003cdiv class=\\\"flex justify-between mb-2\\\"\u003e\\n                        \u003clabel class=\\\"font-bold text-green-500 text-xs tracking-wider flex items-center gap-2\\\"\u003e\\n                            [G] 綠\\n                        \u003c/label\u003e\\n                        \u003cspan id=\\\"val-g\\\" class=\\\"text-green-400 font-bold\\\"\u003e128\u003c/span\u003e\\n                    \u003c/div\u003e\\n                    \u003cinput type=\\\"range\\\" id=\\\"g-slider\\\" min=\\\"0\\\" max=\\\"255\\\" value=\\\"128\\\" disabled class=\\\"w-full\\\"\u003e\\n                \u003c/div\u003e\\n\\n                \u003c!-- Blue Slider --\u003e\\n                \u003cdiv\u003e\\n                    \u003cdiv class=\\\"flex justify-between mb-2\\\"\u003e\\n                        \u003clabel class=\\\"font-bold text-green-500 text-xs tracking-wider flex items-center gap-2\\\"\u003e\\n                            [B] 藍\\n                        \u003c/label\u003e\\n                        \u003cspan id=\\\"val-b\\\" class=\\\"text-green-400 font-bold\\\"\u003e128\u003c/span\u003e\\n                    \u003c/div\u003e\\n                    \u003cinput type=\\\"range\\\" id=\\\"b-slider\\\" min=\\\"0\\\" max=\\\"255\\\" value=\\\"128\\\" disabled class=\\\"w-full\\\"\u003e\\n                \u003c/div\u003e\\n\\n                \u003c!-- Main Action Button --\u003e\\n                \u003cbutton id=\\\"btn-action\\\" class=\\\"w-full mt-4 bg-black text-green-500 border border-green-500 py-4 font-bold text-lg hover:bg-green-900/30 hover:shadow-[0_0_15px_rgba(34,197,94,0.4)] active:scale-95 transition-all flex items-center justify-center gap-2 tracking-widest uppercase\\\"\u003e\\n                    \u003ci data-lucide=\\\"terminal\\\" class=\\\"w-5 h-5\\\"\u003e\u003c/i\u003e Execute_Program\\n                \u003c/button\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n\\n    \u003c/main\u003e\\n\\n    \u003cfooter class=\\\"text-center text-green-800 py-6 text-xs font-mono\\\"\u003e\\n        \u003cp\u003e橘子蘋果程式學苑\u003c/p\u003e\\n    \u003c/footer\u003e\\n\\n    \u003c!-- JavaScript Logic --\u003e\\n    \u003cscript\u003e\\n        // 初始化 Icons\\n        lucide.createIcons();\\n\\n        // 狀態變數\\n        let targetColor = { r: 0, g: 0, b: 0 };\\n        let userColor = { r: 128, g: 128, b: 128 };\\n        let timeLeft = 60;\\n        let timerInterval = null;\\n        let isPlaying = false;\\n\\n        // DOM 元素\\n        const els = {\\n            targetDisplay: document.getElementById('target-color-display'),\\n            targetOverlay: document.getElementById('target-overlay'),\\n            targetHex: document.getElementById('target-hex-text'),\\n            userDisplay: document.getElementById('user-color-display'),\\n            userHex: document.getElementById('user-hex-text'),\\n            \\n            sliderR: document.getElementById('r-slider'),\\n            sliderG: document.getElementById('g-slider'),\\n            sliderB: document.getElementById('b-slider'),\\n            \\n            valR: document.getElementById('val-r'),\\n            valG: document.getElementById('val-g'),\\n            valB: document.getElementById('val-b'),\\n            \\n            btnAction: document.getElementById('btn-action'),\\n            \\n            overlay: document.getElementById('result-overlay'),\\n            scoreText: document.getElementById('score-text'),\\n            scoreMessage: document.getElementById('score-message'),\\n            resultDetails: document.getElementById('result-details'),\\n            resultTargetHex: document.getElementById('result-target-hex'),\\n            resultUserHex: document.getElementById('result-user-hex'),\\n            \\n            timerDisplay: document.getElementById('timer-display'),\\n            realtimeScore: document.getElementById('realtime-score'),\\n            realtimeHex: document.getElementById('realtime-hex'),\\n            instructionText: document.getElementById('instruction-text')\\n        };\\n\\n        // 輔助函式：RGB 轉 Hex\\n        function rgbToHex(r, g, b) {\\n            const toHex = (c) =\u003e {\\n                const hex = c.toString(16);\\n                return hex.length === 1 ? \\\"0\\\" + hex : hex;\\n            };\\n            return \\\"#\\\" + toHex(r) + toHex(g) + toHex(b);\\n        }\\n\\n        // 輔助函式：產生隨機顏色\\n        function generateRandomColor() {\\n            return {\\n                r: Math.floor(Math.random() * 256),\\n                g: Math.floor(Math.random() * 256),\\n                b: Math.floor(Math.random() * 256)\\n            };\\n        }\\n\\n        // 輔助函式：計算準確度\\n        function calculateAccuracy() {\\n            const diffR = Math.abs(targetColor.r - userColor.r);\\n            const diffG = Math.abs(targetColor.g - userColor.g);\\n            const diffB = Math.abs(targetColor.b - userColor.b);\\n            const totalDiff = diffR + diffG + diffB;\\n\\n            // 分數計算\\n            const accuracy = Math.max(0, 100 - (totalDiff / 7.65)).toFixed(1);\\n            return accuracy;\\n        }\\n\\n        // 更新介面\\n        function updateUI() {\\n            // 更新數值顯示\\n            els.valR.textContent = userColor.r;\\n            els.valG.textContent = userColor.g;\\n            els.valB.textContent = userColor.b;\\n\\n            // 更新顏色預覽\\n            const userHex = rgbToHex(userColor.r, userColor.g, userColor.b);\\n            els.userDisplay.style.backgroundColor = userHex;\\n            els.userHex.textContent = userHex.toUpperCase();\\n            \\n            // 更新頂部 Hex 顯示\\n            els.realtimeHex.textContent = userHex.toUpperCase();\\n\\n            // 更新即時相似度\\n            if (isPlaying) {\\n                const acc = calculateAccuracy();\\n                els.realtimeScore.textContent = `${acc}%`;\\n                \\n                // 維持終端機綠色風格\\n                els.realtimeScore.className = \\\"text-lg md:text-2xl font-bold w-14 md:w-20 text-center text-green-400 drop-shadow-[0_0_5px_rgba(34,197,94,0.8)]\\\";\\n\\n                // 自動獲勝判斷\\n                if (parseFloat(acc) \u003e= 100) {\\n                    checkResult(false, true);\\n                }\\n\\n            } else {\\n                els.realtimeScore.textContent = \\\"--%\\\";\\n                els.realtimeScore.className = \\\"text-lg md:text-2xl font-bold w-14 md:w-20 text-center text-green-900\\\";\\n            }\\n        }\\n\\n        // 啟用/禁用滑桿\\n        function setControlsEnabled(enabled) {\\n            els.sliderR.disabled = !enabled;\\n            els.sliderG.disabled = !enabled;\\n            els.sliderB.disabled = !enabled;\\n            \\n            if (enabled) {\\n                // 移除禁用樣式\\n            }\\n        }\\n\\n        // 遊戲重置（回到待機狀態）\\n        function resetToStandby() {\\n            clearInterval(timerInterval);\\n            isPlaying = false;\\n            timeLeft = 60;\\n            \\n            // 隱藏結果層\\n            els.overlay.classList.add('hidden');\\n            els.overlay.classList.remove('flex');\\n            \\n            // UI 重置\\n            els.timerDisplay.textContent = \\\"60\\\";\\n            \\n            // 隱藏目標\\n            els.targetOverlay.style.opacity = '1';\\n            els.targetHex.classList.add('opacity-0');\\n            \\n            // 按鈕重置：\\n            els.btnAction.innerHTML = '\u003ci data-lucide=\\\"terminal\\\" class=\\\"w-5 h-5\\\"\u003e\u003c/i\u003e 開始破解';\\n            els.btnAction.className = \\\"w-full mt-4 bg-black text-green-500 border border-green-500 py-4 font-bold text-lg hover:bg-green-900/30 hover:shadow-[0_0_15px_rgba(34,197,94,0.4)] active:scale-95 transition-all flex items-center justify-center gap-2 tracking-widest uppercase\\\";\\n            \\n            // 禁用控制\\n            setControlsEnabled(false);\\n            \\n            // 重置使用者顏色\\n            userColor = { r: 128, g: 128, b: 128 };\\n            els.sliderR.value = 128;\\n            els.sliderG.value = 128;\\n            els.sliderB.value = 128;\\n            \\n            updateUI(); \\n            \\n            lucide.createIcons();\\n        }\\n\\n        // 開始遊戲\\n        function startGame() {\\n            isPlaying = true;\\n            \\n            // 產生新題目\\n            targetColor = generateRandomColor();\\n            const targetHex = rgbToHex(targetColor.r, targetColor.g, targetColor.b);\\n            els.targetDisplay.style.backgroundColor = targetHex;\\n            \\n            // 顯示目標\\n            els.targetOverlay.style.opacity = '0';\\n            \\n            // 啟用控制\\n            setControlsEnabled(true);\\n            \\n            // 按鈕狀態更新：\\n            els.btnAction.innerHTML = '\u003ci data-lucide=\\\"rotate-ccw\\\" class=\\\"w-5 h-5\\\"\u003e\u003c/i\u003e 重新開始';\\n            els.btnAction.className = \\\"w-full mt-4 bg-black text-green-800 border border-green-800 py-4 font-bold text-lg hover:bg-green-900/10 active:scale-95 transition-all flex items-center justify-center gap-2 tracking-widest uppercase\\\";\\n            \\n            // 立即更新一次 UI\\n            updateUI();\\n            \\n            lucide.createIcons();\\n\\n            // 開始計時\\n            timerInterval = setInterval(() =\u003e {\\n                timeLeft--;\\n                els.timerDisplay.textContent = timeLeft;\\n                \\n                if (timeLeft \u003c= 0) {\\n                    checkResult(true);\\n                }\\n            }, 1000);\\n        }\\n\\n        // 計算分數與顯示結果\\n        function checkResult(isTimeOut = false, isPerfect = false) {\\n            clearInterval(timerInterval);\\n            isPlaying = false;\\n            \\n            const accuracy = calculateAccuracy();\\n            \\n            let message = \\\"\\\";\\n            \\n            if (isPerfect) {\\n                message = \\\"\u003e\u003e ACCESS GRANTED \u003c\u003c\\\";\\n                els.resultDetails.classList.add('hidden');\\n                els.resultDetails.classList.remove('grid');\\n            } else {\\n                els.resultDetails.classList.remove('hidden');\\n                els.resultDetails.classList.add('grid');\\n                \\n                if (isTimeOut) {\\n                    message = \\\"\u003e\u003e 時間到：破解失敗 \u003c\u003c\\\";\\n                }\\n            }\\n\\n            // 設定結果\\n            els.scoreText.textContent = `${accuracy}%`;\\n            els.scoreMessage.textContent = message;\\n            \\n            els.resultTargetHex.textContent = rgbToHex(targetColor.r, targetColor.g, targetColor.b).toUpperCase();\\n            els.resultUserHex.textContent = rgbToHex(userColor.r, userColor.g, userColor.b).toUpperCase();\\n\\n            // 顯示 Overlay\\n            els.overlay.classList.remove('hidden');\\n            els.overlay.classList.add('flex');\\n            \\n            setControlsEnabled(false);\\n            \\n            els.realtimeScore.textContent = `${accuracy}%`;\\n\\n            // 按鈕狀態更新：\\n            els.btnAction.innerHTML = '\u003ci data-lucide=\\\"refresh-cw\\\" class=\\\"w-5 h-5\\\"\u003e\u003c/i\u003e 重新開始';\\n            els.btnAction.className = \\\"w-full mt-4 bg-green-900/20 text-green-400 border border-green-400 py-4 font-bold text-lg hover:bg-green-900/40 hover:shadow-[0_0_15px_rgba(34,197,94,0.4)] active:scale-95 transition-all flex items-center justify-center gap-2 tracking-widest uppercase relative z-50\\\";\\n            \\n            lucide.createIcons();\\n        }\\n\\n        // 按鈕邏輯\\n        els.btnAction.addEventListener('click', () =\u003e {\\n            if (!isPlaying) {\\n                if (!els.overlay.classList.contains('hidden')) {\\n                    resetToStandby();\\n                    setTimeout(startGame, 100);\\n                } else {\\n                    startGame();\\n                }\\n            } else {\\n                resetToStandby();\\n            }\\n        });\\n\\n        // 滑桿事件\\n        const handleSliderInput = (type, val) =\u003e {\\n            userColor[type] = parseInt(val);\\n            updateUI();\\n        };\\n\\n        els.sliderR.addEventListener('input', (e) =\u003e handleSliderInput('r', e.target.value));\\n        els.sliderG.addEventListener('input', (e) =\u003e handleSliderInput('g', e.target.value));\\n        els.sliderB.addEventListener('input', (e) =\u003e handleSliderInput('b', e.target.value));\\n\\n        // 初始狀態\\n        resetToStandby();\\n\\n    \u003c/script\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"\",\"js\":\"\"}","created_at":"2025-11-24T17:39:25.972+08:00","updated_at":"2025-11-24T20:48:08.641+08:00","name":"HEX CODE BREAKER","language":"web","screenshot":{"url":"https://cdn8.koding.school/uploads/project/screenshot/1170690/b6c658b1412d306ec9cb038850cf124f.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":9,"hashid":"6rpse8njq","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}