{"id":1313,"date":"2026-07-04T15:04:53","date_gmt":"2026-07-04T07:04:53","guid":{"rendered":"https:\/\/om-mine.com\/?page_id=1313"},"modified":"2026-07-16T17:38:21","modified_gmt":"2026-07-16T09:38:21","slug":"1313-2","status":"publish","type":"page","link":"https:\/\/om-mine.com\/en\/1313-2\/","title":{"rendered":"\u8eab\u9ad4\u5075\u6e2c\u904a\u6232"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-Hant\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u8df3 30 \u4e0b\u30fb\u651d\u5f71\u6a5f\u8fa8\u8b58\u7248<\/title>\n<style>\n  :root{\n    --bg-deep:#0F1226;\n    --bg-card:#171B39;\n    --bg-card-2:#1F2447;\n    --accent-pop:#FF4D6D;\n    --accent-pop-dim:#FF4D6D33;\n    --accent-success:#B8FF3D;\n    --accent-success-dim:#B8FF3D26;\n    --text-primary:#F5F6FA;\n    --text-muted:#8A8FB3;\n    --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;\n    --display: 'Space Grotesk', 'Archivo Black', sans-serif;\n    --body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  }\n  *{box-sizing:border-box;}\n  html,body{ margin:0; height:100%; background:var(--bg-deep); color:var(--text-primary); font-family:var(--body); overflow:hidden; }\n\n  #app{\n    position:relative; height:100vh; width:100vw;\n    display:flex; align-items:center; justify-content:center;\n    padding:24px;\n  }\n  #app::before{\n    content:\"\"; position:absolute; inset:0;\n    background:\n      radial-gradient(circle at 20% 15%, var(--accent-pop-dim), transparent 45%),\n      radial-gradient(circle at 85% 80%, var(--accent-success-dim), transparent 40%);\n    pointer-events:none; z-index:0;\n  }\n\n  .screen{\n    position:relative; z-index:1;\n    width:100%; max-width:520px;\n    display:none; flex-direction:column; align-items:center; gap:18px; text-align:center;\n  }\n  .screen.active{ display:flex; }\n\n  .eyebrow{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--text-muted); text-transform:uppercase; }\n  h1{ font-family:var(--display); font-weight:700; font-size:clamp(28px,7vw,40px); line-height:1.15; margin:0; }\n  h1 .pop{ color:var(--accent-pop); }\n  p.desc{ color:var(--text-muted); font-size:15px; line-height:1.6; margin:0; max-width:380px; }\n\n  .steps{ text-align:left; background:var(--bg-card); border-radius:16px; padding:18px 20px; width:100%; display:flex; flex-direction:column; gap:10px; }\n  .step{ display:flex; gap:10px; font-size:14px; }\n  .step .num{ font-family:var(--mono); color:var(--accent-pop); flex-shrink:0; }\n\n  button{ font-family:var(--body); font-weight:600; font-size:16px; border:none; cursor:pointer; border-radius:100px; padding:16px 36px; transition:transform .15s ease; }\n  button:active{ transform:scale(.96); }\n  .btn-primary{ background:var(--accent-pop); color:#1A0812; width:100%; box-shadow:0 8px 24px -6px var(--accent-pop-dim); }\n  .btn-ghost{ background:transparent; border:1px solid #33385E; color:var(--text-muted); font-size:13px; padding:10px 20px; }\n\n  \/* camera stage *\/\n  .stage-wrap{\n    position:relative;\n    width:100%; max-width:480px; aspect-ratio: 4\/3;\n    background:#000; border-radius:20px; overflow:hidden;\n    border:2px solid var(--bg-card-2);\n  }\n  .mirror{\n    position:absolute; inset:0;\n    transform:scaleX(-1);\n  }\n  video, canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }\n\n  .stage-overlay{\n    position:absolute; inset:0; z-index:2;\n    display:flex; align-items:center; justify-content:center;\n    flex-direction:column; gap:10px;\n    background:rgba(15,18,38,0.55);\n    text-align:center; padding:20px;\n  }\n  .stage-overlay.hidden{ display:none; }\n  .overlay-text{ font-size:15px; color:var(--text-primary); }\n  .overlay-big{ font-family:var(--display); font-size:64px; font-weight:700; color:var(--accent-success); }\n\n  .hud{\n    position:absolute; top:12px; left:12px; right:12px; z-index:3;\n    display:flex; justify-content:space-between; align-items:flex-start;\n    pointer-events:none;\n  }\n  .hud-count{\n    font-family:var(--display); font-weight:700; font-size:40px;\n    background:rgba(15,18,38,0.7); padding:4px 16px; border-radius:14px;\n  }\n  .hud-status{\n    font-family:var(--mono); font-size:11px; letter-spacing:.08em;\n    background:rgba(15,18,38,0.7); padding:6px 12px; border-radius:100px;\n    color:var(--text-muted);\n  }\n  .hud-status.ok{ color:var(--accent-success); }\n\n  .progress-track{ width:100%; height:8px; background:var(--bg-card); border-radius:100px; overflow:hidden; }\n  .progress-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent-pop),var(--accent-success)); border-radius:100px; transition:width .25s ease; }\n\n  .badge{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:var(--accent-success); background:var(--accent-success-dim); padding:6px 14px; border-radius:100px; text-transform:uppercase; }\n  .code-display{ font-family:var(--mono); font-weight:700; font-size:52px; letter-spacing:.15em; background:var(--bg-card); padding:20px 28px; border-radius:20px; color:var(--accent-success); display:flex; gap:6px; }\n  .code-digit{ opacity:0; transform:translateY(10px); animation:reveal .4s ease forwards; }\n  @keyframes reveal{ to{ opacity:1; transform:translateY(0);} }\n\n  .gear{ position:absolute; top:18px; right:18px; z-index:5; background:var(--bg-card); border:none; width:40px; height:40px; border-radius:50%; color:var(--text-muted); font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; }\n  .settings-panel{ position:absolute; inset:0; z-index:10; background:#0F1226ee; backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:24px; }\n  .settings-panel.active{ display:flex; }\n  .settings-card{ background:var(--bg-card); border-radius:20px; padding:24px; width:100%; max-width:340px; display:flex; flex-direction:column; gap:16px; text-align:left; }\n  .settings-card h3{ margin:0; font-family:var(--display); font-size:18px; }\n  .settings-card label{ font-size:13px; color:var(--text-muted); display:flex; justify-content:space-between; }\n  input[type=range]{ width:100%; accent-color:var(--accent-pop); }\n  input[type=text]{ background:var(--bg-card-2); border:1px solid #33385E; color:var(--text-primary); border-radius:10px; padding:10px 12px; font-family:var(--mono); font-size:15px; width:100%; }\n\n  .error-box{ font-size:13px; color:var(--accent-pop); background:var(--accent-pop-dim); padding:12px 16px; border-radius:12px; display:none; text-align:left; line-height:1.6; }\n  .error-box.show{ display:block; }\n<\/style>\n<\/head>\n<body>\n\n<div id=\"app\">\n  <button class=\"gear\" id=\"gearBtn\" aria-label=\"\u8a2d\u5b9a\">\u2699<\/button>\n\n  <!-- Start -->\n  <div class=\"screen active\" id=\"screen-start\">\n    <div class=\"eyebrow\">\u5065\u5eb7\u6311\u6230 \u00b7 Vision Mode<\/div>\n    <h1>\u8df3 <span class=\"pop\">30<\/span> \u4e0b<br>\u89e3\u9396\u901a\u95dc\u5bc6\u78bc<\/h1>\n    <p class=\"desc\">\u7ad9\u5230\u651d\u5f71\u6a5f\u524d\uff0c\u4fdd\u6301\u5168\u8eab\u5165\u93e1\uff0c\u8df3\u6eff 30 \u4e0b\u5373\u53ef\u89e3\u9396\u5c08\u5c6c\u5bc6\u78bc\u3002<\/p>\n    <div class=\"steps\">\n      <div class=\"step\"><span class=\"num\">01<\/span><span>\u7ad9\u5728\u756b\u9762\u6846\u5167\uff0c\u5168\u8eab\uff08\u5c24\u5176\u662f\u9ad6\u90e8\uff09\u9700\u5165\u93e1<\/span><\/div>\n      <div class=\"step\"><span class=\"num\">02<\/span><span>\u6309\u300c\u958b\u59cb\u300d\u5f8c\u4fdd\u6301\u4e0d\u52d5 2 \u79d2\u9032\u884c\u6821\u6e96<\/span><\/div>\n      <div class=\"step\"><span class=\"num\">03<\/span><span>\u807d\u5230\u300cGo\u300d\u958b\u59cb\u76e1\u91cf\u5f80\u4e0a\u8df3<\/span><\/div>\n    <\/div>\n    <button class=\"btn-primary\" id=\"startBtn\">\u958b\u59cb\u6311\u6230<\/button>\n    <div class=\"error-box\" id=\"errorBox\"><\/div>\n  <\/div>\n\n  <!-- Camera stage (used for both calibration and jumping) -->\n  <div class=\"screen\" id=\"screen-camera\">\n    <div class=\"eyebrow\" id=\"camEyebrow\">CALIBRATING<\/div>\n    <div class=\"stage-wrap\">\n      <div class=\"hud\">\n        <div class=\"hud-count\" id=\"hudCount\">0<\/div>\n        <div class=\"hud-status\" id=\"hudStatus\">\u5075\u6e2c\u4e2d<\/div>\n      <\/div>\n      <div class=\"mirror\">\n        <video id=\"video\" autoplay playsinline muted><\/video>\n        <canvas id=\"canvas\"><\/canvas>\n      <\/div>\n      <div class=\"stage-overlay\" id=\"stageOverlay\">\n        <div class=\"overlay-text\">\u6b63\u5728\u8f09\u5165\u59ff\u614b\u5075\u6e2c\u6a21\u578b\u2026<\/div>\n      <\/div>\n    <\/div>\n    <div class=\"progress-track\"><div class=\"progress-fill\" id=\"progressFill\"><\/div><\/div>\n    <div class=\"desc\" id=\"hintText\">\u8acb\u7ad9\u5230\u6846\u5167<\/div>\n    <button class=\"btn-ghost\" id=\"cancelBtn\">\u91cd\u65b0\u958b\u59cb<\/button>\n  <\/div>\n\n  <!-- Success -->\n  <div class=\"screen\" id=\"screen-success\">\n    <div class=\"badge\">Unlocked<\/div>\n    <h1>\u901a\u95dc\u6210\u529f\uff01<\/h1>\n    <p class=\"desc\">\u8acb\u5c07\u9019\u7d44\u6578\u5b57\u51fa\u793a\u7d66\u5de5\u4f5c\u4eba\u54e1<\/p>\n    <div class=\"code-display\" id=\"codeDisplay\"><\/div>\n    <button class=\"btn-primary\" id=\"resetBtn\">\u518d\u73a9\u4e00\u6b21<\/button>\n  <\/div>\n\n  <!-- Settings -->\n  <div class=\"settings-panel\" id=\"settingsPanel\">\n    <div class=\"settings-card\">\n      <h3>\u73fe\u5834\u6821\u6e96\u8a2d\u5b9a<\/h3>\n      <label>\u8df3\u8e8d\u9748\u654f\u5ea6\uff08\u8eab\u9ad4\u6bd4\u4f8b\uff09 <span id=\"threshVal\">0.18<\/span>\n        <input type=\"range\" id=\"threshSlider\" min=\"0.08\" max=\"0.35\" step=\"0.01\" value=\"0.18\">\n      <\/label>\n      <label>\u5224\u5b9a\u9593\u9694 (ms) <span id=\"cooldownVal\">350<\/span>\n        <input type=\"range\" id=\"cooldownSlider\" min=\"200\" max=\"600\" step=\"10\" value=\"350\">\n      <\/label>\n      <label>\u901a\u95dc\u5bc6\u78bc\n        <input type=\"text\" id=\"codeInput\" value=\"13080\" maxlength=\"8\">\n      <\/label>\n      <button class=\"btn-primary\" id=\"closeSettings\">\u5b8c\u6210<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs-core@4.20.0\/dist\/tf-core.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs-converter@4.20.0\/dist\/tf-converter.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow\/tfjs-backend-webgl@4.20.0\/dist\/tf-backend-webgl.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tensorflow-models\/pose-detection@2.1.3\/dist\/pose-detection.min.js\"><\/script>\n\n<script>\n(function(){\n  const state = {\n    count: 0, target: 30,\n    threshold: 0.18, cooldown: 350,\n    code: \"13080\",\n    phase: 'idle', \/\/ idle -> calibrating -> countdown -> jumping -> done\n    lastPeak: 0,\n    baselineHipY: null,\n    smoothedHipY: null,\n    bodyScale: null,\n    calibSamples: [],\n    detector: null\n  };\n\n  const screens = {\n    start: document.getElementById('screen-start'),\n    camera: document.getElementById('screen-camera'),\n    success: document.getElementById('screen-success')\n  };\n  function showScreen(name){\n    Object.values(screens).forEach(s => s.classList.remove('active'));\n    screens[name].classList.add('active');\n  }\n\n  const video = document.getElementById('video');\n  const canvas = document.getElementById('canvas');\n  const ctx = canvas.getContext('2d');\n  const stageOverlay = document.getElementById('stageOverlay');\n  const hudCount = document.getElementById(\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u8df3 30 \u4e0b\u30fb\u651d\u5f71\u6a5f\u8fa8\u8b58\u7248 \u2699 \u5065\u5eb7\u6311\u6230 \u00b7 Vision Mode \u8df3 30 \u4e0b\u89e3\u9396\u901a\u95dc\u5bc6\u78bc \u7ad9\u5230\u651d\u5f71\u6a5f\u524d\uff0c [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"class_list":["post-1313","page","type-page","status-publish","hentry"],"blocksy_meta":{"disable_featured_image":"yes","disable_share_box":"yes","disable_header":"yes","disable_footer":"yes","has_hero_section":"disabled","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"acf":[],"_links":{"self":[{"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/pages\/1313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/comments?post=1313"}],"version-history":[{"count":5,"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/pages\/1313\/revisions"}],"predecessor-version":[{"id":1339,"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/pages\/1313\/revisions\/1339"}],"wp:attachment":[{"href":"https:\/\/om-mine.com\/en\/wp-json\/wp\/v2\/media?parent=1313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}