{"id":454,"date":"2026-01-31T15:18:43","date_gmt":"2026-01-31T07:18:43","guid":{"rendered":"https:\/\/www.jhcis.idv.tw\/jan\/?page_id=454"},"modified":"2026-02-01T11:32:47","modified_gmt":"2026-02-01T03:32:47","slug":"%e8%b1%a1%e6%a3%8b%e5%8d%9c%e5%8d%a6","status":"publish","type":"page","link":"https:\/\/www.jhcis.idv.tw\/jan\/?page_id=454","title":{"rendered":"\u8c61\u68cb\u535c\u5366"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"zh-TW\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u89c0\u68cb\u77e5\u547d &#8211; V6.4 \u7d50\u69cb\u5c0e\u5f15\u7248<\/title>\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n    <style>\n        body { font-family: \"Microsoft JhengHei\", sans-serif; background-color: #f4f1ea; display: flex; flex-direction: column; align-items: center; padding: 15px; margin: 0; min-height: 100vh; }\n        .info-panel { background: white; padding: 20px; border-radius: 15px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 90%; max-width: 600px; border: 1px solid #d1c4a9; }\n        .input-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 140px; }\n        .input-group label { font-size: 14px; color: #8b0000; font-weight: bold; }\n        input, select, textarea { padding: 10px; border: 1px solid #d1c4a9; border-radius: 8px; font-size: 15px; outline: none; background: #fdfdfd; width: 100%; box-sizing: border-box; }\n        textarea { height: 60px; resize: none; }\n        \n        .controls { margin-bottom: 25px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; width: 100%; }\n        .btn { padding: 12px 24px; border: none; border-radius: 50px; cursor: pointer; font-size: 14px; transition: 0.3s; font-weight: bold; color: white; white-space: nowrap; }\n        .btn-draw { background: #8b0000; }\n        .btn-jpg { background: #333; }\n        .btn-gemini { background: #1a73e8; } \n\n        #capture-area { background: white; padding: 30px; border-radius: 20px; box-shadow: 0 0 30px rgba(0,0,0,0.05); display: flex; flex-direction: column; align-items: center; width: 95vw; max-width: 500px; aspect-ratio: 1 \/ 1.1; box-sizing: border-box; }\n        .capture-title { color: #8b0000; font-size: 22px; font-weight: bold; margin-bottom: 20px; letter-spacing: 3px; }\n        \n        .matrix-grid { display: grid; grid-template-areas: \". top .\" \"left center right\" \". bottom .\"; gap: 5%; width: 100%; flex-grow: 1; }\n        .pos { width: 100%; height: 100%; perspective: 1000px; display: flex; justify-content: center; align-items: center; }\n        .flip-inner { position: relative; width: 90%; height: 90%; text-align: center; transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; }\n        .do-flip { transform: rotateY(180deg); }\n        .chess-front, .chess-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center; }\n        .chess-back { background: #eaddca; border: 2px dashed #d1c4a9; color: #d1c4a9; font-size: 1.8rem; font-weight: bold; }\n        .chess-front { background: white; border: 3px solid #333; font-size: 2.2rem; font-weight: bold; transform: rotateY(180deg); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }\n        \n        .red .chess-front { color: #8b0000; border-color: #8b0000; }\n        .black .chess-front { color: #1a1a1a; border-color: #1a1a1a; }\n        .center-mark .chess-front { border-width: 5px; }\n        .top { grid-area: top; } .bottom { grid-area: bottom; } .left { grid-area: left; } .right { grid-area: right; } .center { grid-area: center; }\n\n        #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999; }\n        #guide-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 25px; border-radius: 20px; z-index: 1000; text-align: center; border: 2px solid #1a73e8; width: 85%; max-width: 320px; }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"info-panel\">\n        <div class=\"input-group\"><label>\u554f\u5366\u4eba<\/label><input type=\"text\" id=\"user-name\" placeholder=\"\u7a31\u547c (\u4f8b: tt)\"><\/div>\n        <div class=\"input-group\">\n            <label>\u554f\u5366\u985e\u5225<\/label>\n            <select id=\"query-type\">\n                <option value=\"\u7d9c\u5408\">\u8acb\u9078\u64c7\u985e\u5225<\/option>\n                <option value=\"\u4e8b\u696d\u9032\u5c55\">\u4e8b\u696d\u9032\u5c55<\/option>\n                <option value=\"\u8ca1\u904b\u6295\u8cc7\">\u8ca1\u904b\u6295\u8cc7<\/option>\n                <option value=\"\u5a5a\u59fb\u611f\u60c5\">\u5a5a\u59fb\u611f\u60c5<\/option>\n                <option value=\"\u8eab\u9ad4\u5065\u5eb7\">\u8eab\u9ad4\u5065\u5eb7<\/option>\n                <option value=\"\u5b98\u53f8\u6c42\u540d\">\u5b98\u53f8\u6c42\u540d<\/option>\n                <option value=\"\u56f0\u5883\u5982\u4f55\u89e3\u5957\">\u5982\u4f55\u89e3\u5957<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"input-group\" style=\"width: 100%;\"><label>\u4e8b\u7531\u7c21\u8ff0<\/label><textarea id=\"user-query\" placeholder=\"\u4f8b\u5982\uff1a\u8fd1\u671f\u63db\u5de5\u4f5c\u662f\u5426\u5408\u9069\uff1f\/ \u76ee\u524d\u8207\u4f34\u4fb6\u722d\u5435\u5982\u4f55\u5316\u89e3\uff1f\"><\/textarea><\/div>\n    <\/div>\n\n    <div class=\"controls\">\n        <button class=\"btn btn-draw\" onclick=\"autoDraw()\">\u2728 \u555f\u52d5\u555f\u5366<\/button>\n        <button class=\"btn btn-jpg\" onclick=\"exportJPG()\">\ud83d\udcf8 \u5b58\u547d\u76e4<\/button>\n        <button class=\"btn btn-gemini\" onclick=\"launchGemini()\">\ud83d\ude80 AI \u7368\u7acb\u5206\u6790<\/button>\n    <\/div>\n\n    <div id=\"capture-area\">\n        <div class=\"capture-title\">\u89c0\u68cb\u77e5\u547d\u80fd\u91cf\u76e4<\/div>\n        <div class=\"matrix-grid\">\n            <div id=\"pos-top\" class=\"pos top\" data-brief=\"\u4e0a(\u5317\/\u5b98\u8cb4)\"><div class=\"flip-inner\"><div class=\"chess-back\">4<\/div><div class=\"chess-front\"><\/div><\/div><\/div>\n            <div id=\"pos-left\" class=\"pos left\" data-brief=\"\u5de6(\u6771\/\u9752\u9f8d)\"><div class=\"flip-inner\"><div class=\"chess-back\">2<\/div><div class=\"chess-front\"><\/div><\/div><\/div>\n            <div id=\"pos-center\" class=\"pos center\" data-brief=\"\u4e2d(\u6838\u5fc3\/\u672c\u547d)\"><div class=\"flip-inner center-mark\"><div class=\"chess-back\">1<\/div><div class=\"chess-front\"><\/div><\/div><\/div>\n            <div id=\"pos-right\" class=\"pos right\" data-brief=\"\u53f3(\u897f\/\u767d\u864e)\"><div class=\"flip-inner\"><div class=\"chess-back\">3<\/div><div class=\"chess-front\"><\/div><\/div><\/div>\n            <div id=\"pos-bottom\" class=\"pos bottom\" data-brief=\"\u4e0b(\u5357\/\u6731\u96c0)\"><div class=\"flip-inner\"><div class=\"chess-back\">5<\/div><div class=\"chess-front\"><\/div><\/div><\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"overlay\" onclick=\"closeModal()\"><\/div>\n    <div id=\"guide-modal\">\n        <h3 style=\"color:#1a73e8;\">\ud83d\udee1\ufe0f \u7368\u7acb\u89e3\u6790\u6307\u4ee4\u5df2\u5c31\u7dd2<\/h3>\n        <p style=\"text-align: left; font-size: 14px; color: #444; line-height: 1.6;\">\n            1. \u6578\u64da\u8207<b>\u5c01\u9589\u5f0f\u6307\u4ee4<\/b>\u5df2\u8907\u88fd\u3002<br>\n            2. \u8acb\u5148\u4e0a\u50b3\u547d\u76e4\u622a\u5716\u7d66 AI\u3002<br>\n            3. <b>\u8cbc\u4e0a\u6307\u4ee4\u4e26\u767c\u9001<\/b>\uff0cAI \u5c07\u91dd\u5c0d\u60a8\u7684\u985e\u5225\u9032\u884c\u6df1\u5c64\u89e3\u6790\u3002\n        <\/p>\n        <button class=\"btn btn-gemini\" onclick=\"closeModal()\">\u958b\u555f AI \u5206\u6790<\/button>\n    <\/div>\n\n<script>\n    const chessPool = [\n        {name: \"\u5e25\", side: \"red\"}, {name: \"\u4ed5\", side: \"red\"}, {name: \"\u4ed5\", side: \"red\"},\n        {name: \"\u76f8\", side: \"red\"}, {name: \"\u76f8\", side: \"red\"}, {name: \"\u4fe5\", side: \"red\"},\n        {name: \"\u4fe5\", side: \"red\"}, {name: \"\u508c\", side: \"red\"}, {name: \"\u508c\", side: \"red\"},\n        {name: \"\u70ae\", side: \"red\"}, {name: \"\u70ae\", side: \"red\"}, {name: \"\u5175\", side: \"red\"},\n        {name: \"\u5175\", side: \"red\"}, {name: \"\u5175\", side: \"red\"}, {name: \"\u5175\", side: \"red\"}, {name: \"\u5175\", side: \"red\"},\n        {name: \"\u5c07\", side: \"black\"}, {name: \"\u58eb\", side: \"black\"}, {name: \"\u58eb\", side: \"black\"},\n        {name: \"\u8c61\", side: \"black\"}, {name: \"\u8c61\", side: \"black\"}, {name: \"\u8eca\", side: \"black\"},\n        {name: \"\u8eca\", side: \"black\"}, {name: \"\u99ac\", side: \"black\"}, {name: \"\u99ac\", side: \"black\"},\n        {name: \"\u5305\", side: \"black\"}, {name: \"\u5305\", side: \"black\"}, {name: \"\u5352\", side: \"black\"},\n        {name: \"\u5352\", side: \"black\"}, {name: \"\u5352\", side: \"black\"}, {name: \"\u5352\", side: \"black\"}, {name: \"\u5352\", side: \"black\"}\n    ];\n\n    function autoDraw() {\n        const ids = ['pos-center', 'pos-left', 'pos-right', 'pos-top', 'pos-bottom'];\n        let deck = [...chessPool].sort(() => 0.5 - Math.random());\n        ids.forEach(id => {\n            const container = document.getElementById(id);\n            container.querySelector('.flip-inner').classList.remove('do-flip');\n            container.classList.remove('red', 'black');\n        });\n        ids.forEach((id, index) => {\n            setTimeout(() => {\n                const container = document.getElementById(id);\n                const front = container.querySelector('.chess-front');\n                const result = deck.pop();\n                front.innerText = result.name;\n                container.setAttribute('data-side', result.side === 'red' ? '\ud83d\udfe5' : '\u2b1b');\n                container.setAttribute('data-result', result.name);\n                container.classList.add(result.side);\n                container.querySelector('.flip-inner').classList.add('do-flip');\n            }, index * 200);\n        });\n    }\n\n    function launchGemini() {\n        const name = document.getElementById('user-name').value || \"\u5927\u5fb7\";\n        const type = document.getElementById('query-type').value;\n        const query = document.getElementById('user-query').value || \"\u672a\u8a3b\u660e\u4e8b\u7531\";\n        const centerResult = document.getElementById('pos-center').getAttribute('data-result');\n\n        if (!centerResult) { alert(\"\u8acb\u5148\u555f\u52d5\u555f\u5366\u5537\uff01\"); return; }\n\n        let resultText = `\u3010\u6838\u5fc3\u6307\u4ee4\uff1a\u89c0\u68cb\u77e5\u547d V6.4 \u7368\u7acb\u6642\u7a7a\u6a21\u5f0f\u3011\\n` +\n                         `\u203b \u8acb\u9694\u96e2\u6240\u6709\u904e\u5f80\u5c0d\u8a71\u7d00\u9304\uff0c\u5c07\u6b64\u5c0d\u8a71\u8996\u70ba\u7368\u7acb\u6642\u7a7a\u3002\u50c5\u91dd\u5c0d\u7576\u524d\u63d0\u4f9b\u7684\u3010\u80fd\u91cf\u6578\u64da\u3011\u9032\u884c\u5c01\u9589\u5f0f\u89e3\u6790\uff0c\u7981\u6b62\u53c3\u8003\u3001\u806f\u60f3\u6216\u8abf\u7528\u6b64\u5c0d\u8a71\u6846\u4e4b\u5916\u7684\u4efb\u4f55\u6b77\u53f2\u504f\u597d\u6216\u60c5\u5883\u8a2d\u5b9a\u3002\\n\\n` +\n                         `\u554f\u5366\u4eba\uff1a${name}\\n` +\n                         `\u554f\u5366\u985e\u5225\uff1a${type}\\n` +\n                         `\u4e8b\u7531\u7c21\u8ff0\uff1a${query}\\n\\n` +\n                         `\u3010\u80fd\u91cf\u6578\u64da\u3011\\n`;\n        \n        ['pos-center', 'pos-left', 'pos-right', 'pos-top', 'pos-bottom'].forEach(id => {\n            const el = document.getElementById(id);\n            resultText += `${el.getAttribute('data-brief')}\uff1a${el.getAttribute('data-side')}${el.getAttribute('data-result')}\\n`;\n        });\n\n        resultText += `\\n--------------------------------------------------\\n` +\n                      `\u3010\u4efb\u52d9\u8981\u6c42\uff1a\u5c01\u9589\u89e3\u6790\u683c\u5f0f\u3011\\n` +\n                      `1. \u4ee5\u300c\u5c08\u696d\u5c0e\u5e2b\u300d\u8eab\u5206\uff0c\u91dd\u5c0d\u3010${type}\u3011\u985e\u5225\u89e3\u6790\u4e0a\u50b3\u5716\u6a94\u8207\u6578\u64da\u3002\\n` +\n                      `2. **\u50c5\u8f38\u51fa\u4e00\u500b Markdown \u8868\u683c**\uff0c\u6b04\u4f4d\u70ba\uff1a\\n` +\n                      `| \u65b9\u4f4d | \u80fd\u91cf\u89e3\u6790 | \u884c\u52d5\u65b9\u6848 |\\n` +\n                      `| :--- | :--- | :--- |\\n` +\n                      `3. **\u7981\u6b62**\u5728\u8868\u683c\u5916\u91cd\u8907\u689d\u5217\u884c\u52d5\u65b9\u6848\u3002\\n` +\n                      `4. \u6700\u5f8c\u6839\u64da\u76e4\u9762\u7d66\u4e88\u4e00\u6bb5\u6eab\u6f64\u4e14\u5177\u6307\u5f15\u529b\u91cf\u7684\u7d50\u8a9e\u3002`;\n\n        navigator.clipboard.writeText(resultText).then(() => {\n            document.getElementById('overlay').style.display = 'block';\n            document.getElementById('guide-modal').style.display = 'block';\n        });\n    }\n\n    function exportJPG() { \n        html2canvas(document.getElementById('capture-area'), { scale: 2 }).then(canvas => { \n            const link = document.createElement('a'); \n            link.download = `\u89c0\u68cb\u77e5\u547d.jpg`; \n            link.href = canvas.toDataURL('image\/jpeg', 0.95); \n            link.click(); \n        }); \n    }\n\n    function closeModal() { document.getElementById('overlay').style.display = 'none'; document.getElementById('guide-modal').style.display = 'none'; window.open('https:\/\/gemini.google.com\/app', '_blank'); }\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u89c0\u68cb\u77e5\u547d &#8211; V6.4 <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-454","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages\/454","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=454"}],"version-history":[{"count":8,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages\/454\/revisions"}],"predecessor-version":[{"id":470,"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=\/wp\/v2\/pages\/454\/revisions\/470"}],"wp:attachment":[{"href":"https:\/\/www.jhcis.idv.tw\/jan\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}