这是一部为了让大家在红尘喧嚣中、催更焦虑时，能够原地大彻大悟而制作的「纯净版赛博木鱼」。本网页采用极简禅意水墨风格，摒弃了所有复杂的数字计量与特定同人属性，回归最纯粹的功德修练。

🚀 部署与访问地址说明

📍 本地运行地址（零门槛）

  • 路径指定：在电脑或手机上新建一个文本文件，将下方的完整源代码粘贴进去，重命名为 **muyu.html**。
  • 访问方式：双击该本地 HTML 文件，即可在浏览器中直接开启你的赛博修仙之旅。无需联网，离线地址同样秒开。

🌐 云端在线地址（推荐群友分享）

如果你希望群友们点击一个链接就能直接在线敲木鱼，建议使用以下免费静态托管平台进行部署：

  1. GitHub / Gitee Pages：将 muyu.html 上传至你的个人仓库，开启 Pages 服务，即可获得一个形如 https://你的名字.github.io/muyu 的专属在线访问地址。
  2. Vercel / Netlify：直接拖拽文件上传，顷刻间即可生成一个全球加速的赛博木鱼独立网址。

✨ 项目核心亮点

  • 纯代码黑科技（无外部依赖）：整个木鱼只有一段 HTML 代码。木鱼的外观纯靠 CSS 样式表动态绘制，不需要加载任何外部图片。
  • 底层音频合成：音效并非加载外部 MP3 文件，而是直接调用浏览器的 Web Audio API，在底层实时合成空灵的低频正弦波，不仅省流量，而且绝对没有网络延迟，即点即响。
  • 无数字禅意境界：严格遵循“不出现任何数字”的律令，用「功德加一」的浮动金字与八大正统修练境界条代替了冰冷且制造焦虑的数字计数器。

🔮 禅修进阶之路

随着你的每一次敲击，底下的功德法能条会缓缓拉满，你的禅定境界将依次在以下八大正统境界中无缝跨越：

阶序 禅修境界 灵台状态描述
第一阶段 初入定境 灵台初开，隔绝红尘喧嚣
第二阶段 尘埃渐消 杂念渐退，俗事皆为浮云
第三阶段 灵台清明 心无旁骛，智慧悄然而生
第四阶段 妄念不生 诸般杂音，心中波澜不惊
第五阶段 物我两忘 身在网络，心早已在深山
第六阶段 大千自在 乾坤万物，皆可收放自如
第七阶段 圆融无碍 念头通达，万法皆归于一
终极阶段 功德无量 原地飞升，终获功德圆满

🛠️ 附：完整网页源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🍁 赛博禅修·功德木鱼 🍁</title>
    <style>
        body { margin: 0; padding: 0; background: #121212; color: #e0e0e0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; overflow: hidden; user-select: none; }
        .zen-title { font-size: 24px; color: #d4c59f; margin-bottom: 10px; letter-spacing: 4px; font-weight: bold; text-shadow: 0 0 10px rgba(212,197,159,0.2); }
        .zen-subtitle { font-size: 14px; color: #666; margin-bottom: 40px; letter-spacing: 1px; }
        .muyu-container { position: relative; width: 200px; height: 200px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.05s ease; }
        .muyu-body { width: 160px; height: 140px; background: #3a2521; border-radius: 50% 50% 45% 45%; position: relative; box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 5px 15px rgba(255,255,255,0.05); border-bottom: 6px solid #2a1916; }
        .muyu-slit { position: absolute; bottom: 30px; left: 10%; width: 80%; height: 10px; background: #140b0a; border-radius: 10px; }
        .muyu-pattern { position: absolute; top: 45px; left: 25px; width: 22px; height: 22px; border: 3px solid #2a1916; border-radius: 50%; border-right-color: transparent; transform: rotate(-45deg); }
        .muyu-container:active { transform: scale(0.94); }
        .floating-text { position: absolute; color: #ffe082; font-size: 22px; font-weight: bold; pointer-events: none; white-space: nowrap; animation: floatUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards; text-shadow: 0 0 8px rgba(255,224,130,0.4); }
        @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(0.8); } 100% { opacity: 0; transform: translateY(-120px) scale(1.1); } }
        .status-panel { margin-top: 50px; width: 80%; max-width: 300px; text-align: center; }
        .realm-text { font-size: 15px; color: #a89a78; margin-bottom: 12px; font-weight: bold; letter-spacing: 1px; }
        .progress-bar-bg { width: 100%; height: 4px; background: #1a1a1a; border-radius: 2px; overflow: hidden; border: 1px solid #2a2a2a; }
        .progress-bar-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #a89a78, #ffe082); transition: width 0.1s ease; box-shadow: 0 0 8px rgba(255,224,130,0.2); }
    </style>
</head>
<body>
    <div class="zen-title">纯净赛博木鱼</div>
    <div class="zen-subtitle">（ 鸣木止息 · 澄澈身心 · 消解红尘喧嚣 ）</div>
    <div class="muyu-container" id="muyu">
        <div class="muyu-body"><div class="muyu-pattern"></div><div class="muyu-slit"></div></div>
    </div>
    <div class="status-panel">
        <div class="realm-text" id="realmDisplay">当前禅定境界：初入定境</div>
        <div class="progress-bar-bg"><div class="progress-bar-fill" id="progressFill"></div></div>
    </div>
    <script>
        const muyu = document.getElementById('muyu'); const progressFill = document.getElementById('progressFill'); const realmDisplay = document.getElementById('realmDisplay');
        const zenRealms = ["初入定境", "尘埃渐消", "灵台清明", "妄念不生", "物我两忘", "大千自在", "圆融无碍", "功德无量"];
        let internalProgress = 0; let realmIndex = 0; let audioCtx = null;
        function playMuyuSound() {
            if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            if (audioCtx.state === 'suspended') audioCtx.resume();
            const osc = audioCtx.createOscillator(); const gain = audioCtx.createGain();
            osc.connect(gain); gain.connect(audioCtx.destination); osc.type = 'triangle';
            osc.frequency.setValueAtTime(175, audioCtx.currentTime); osc.frequency.exponentialRampToValueAtTime(10, audioCtx.currentTime + 0.07);
            gain.gain.setValueAtTime(0.6, audioCtx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.07);
            osc.start(); osc.stop(audioCtx.currentTime + 0.07);
        }
        muyu.addEventListener('mousedown', (e) => { playMuyuSound(); createFloatingText(e); updateZenProgress(); });
        function createFloatingText(e) {
            const text = document.createElement('div'); text.className = 'floating-text'; text.innerText = '功德加一';
            if (e.clientX && e.clientY) {
                const rect = muyu.getBoundingClientRect(); text.style.left = (e.clientX - rect.left - 40) + 'px'; text.style.top = (e.clientY - rect.top - 20) + 'px';
            } else { text.style.left = '60px'; text.style.top = '0px'; }
            muyu.appendChild(text); setTimeout(() => { text.remove(); }, 800);
        }
        function updateZenProgress() {
            internalProgress += 5;
            if (internalProgress >= 100) { internalProgress = 0; if (realmIndex < zenRealms.length - 1) realmIndex++; }
            progressFill.style.width = internalProgress + '%';
            if (realmIndex >= zenRealms.length - 1) { realmDisplay.innerText = `最终境界：${zenRealms[realmIndex]}`; progressFill.style.width = '100%'; }
            else { realmDisplay.innerText = `当前禅定境界：${zenRealms[realmIndex]}`; }
        }
    </script>
</body>
</html>