<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>徒手治療臨床決策助手</title>
<link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon" href="icon.png">
    
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        :root {
            --primary-color: #00897b; /* 醫療綠 */
            --bg-color: #f4f7f6;
            --card-bg: #ffffff;
            --danger-color: #e53935;
            --text-color: #333;
        }

        body {
            font-family: "Microsoft JhengHei", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 { color: var(--primary-color); margin-bottom: 5px; }
        .subtitle { color: #666; font-size: 0.9em; }

        /* 佈局容器 */
        .container {
            display: flex;
            gap: 20px;
            max-width: 1200px;
            width: 100%;
            flex-wrap: wrap;
        }

        /* 左側：評估區 */
        .panel-left {
            flex: 1;
            min-width: 300px;
            background: var(--card-bg);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* 右側：輸出區 */
        .panel-right {
            flex: 2;
            min-width: 300px;
            background: var(--card-bg);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border-left: 5px solid var(--primary-color);
        }

        /* 表單元件 */
        .form-group { margin-bottom: 20px; }
        label { display: block; font-weight: bold; margin-bottom: 8px; }
        select, input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }

        /* 紅旗徵兆區 */
        .red-flags-box {
            background-color: #ffebee;
            border: 1px solid #ffcdd2;
            padding: 15px;
            border-radius: 8px;
        }
        .red-flag-title { color: var(--danger-color); font-weight: bold; display: flex; align-items: center; gap: 5px; margin-bottom: 10px;}
        .checkbox-group label {
            display: flex;
            align-items: center;
            font-weight: normal;
            margin-bottom: 5px;
            cursor: pointer;
        }
        .checkbox-group input { margin-right: 10px; }

        /* 按鈕 */
        .btn-generate {
            width: 100%;
            background-color: var(--primary-color);
            color: white;
            padding: 12px;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin-top: 20px;
            transition: background 0.3s;
        }
        .btn-generate:hover { background-color: #00695c; }

        /* 輸出結果區塊 */
        .result-section { margin-bottom: 20px; display: none; } /* 預設隱藏 */
        .section-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.1em;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 10px;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }

        .grid-box {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        @media (max-width: 768px) { .grid-box { grid-template-columns: 1fr; } }

        .info-card { background: #f9f9f9; padding: 15px; border-radius: 8px; }
        .info-card h4 { margin-top: 0; color: #444; }

        .danger-text { color: var(--danger-color); font-weight: bold; }
        
        /* SOAP 區塊 */
        .soap-box {
            background-color: #f0f4f8;
            padding: 15px;
            border-radius: 8px;
            border: 1px dashed #ccc;
            font-family: monospace;
            white-space: pre-wrap;
            color: #333;
            position: relative;
        }
        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #fff;
            border: 1px solid #ccc;
            padding: 5px 10px;
            font-size: 12px;
            cursor: pointer;
            border-radius: 4px;
        }

    </style>
</head>
<body>

    <header>
        <h1>🤲 徒手治療臨床決策助手</h1>
        <div class="subtitle">Designed for Manual Therapists | 請依臨床判斷使用</div>
    </header>

    <div class="container">
        <div class="panel-left">
            <div class="form-header">🔍 患者評估</div>
            <hr>
            
            <div class="form-group">
                <label>1. 患部區域</label>
         	    <select id="regionSelect" onchange="updateSymptoms()">
   			 <option value="">請選擇區域...</option>
  			 <option value="cervical">頸椎 (Cervical)</option>
  			 <option value="thoracic">胸椎/肋骨 (Thoracic)</option>
  			 <option value="lumbar">腰椎/骨盆 (Lumbar/Pelvic)</option>
  			 <option value="shoulder">肩部 (Shoulder)</option>
  			 <option value="elbow">肘部 (Elbow)</option>
   			 <option value="wrist">手腕/手部 (Wrist/Hand)</option>
   			 <option value="hip">髖部 (Hip)</option>
  			 <option value="knee">膝蓋 (Knee)</option>
   			 <option value="ankle">踝足 (Ankle/Foot)</option>
</select>
            </div>

            <div class="form-group">
                <label>2. 主要症狀 / 判讀</label>
                <select id="symptomSelect">
                    <option value="">請先選擇區域</option>
                </select>
            </div>

            <div class="form-group red-flags-box">
                <div class="red-flag-title">🚩 紅旗微兆篩檢 (Red Flags)</div>
                <div class="checkbox-group">
                    <label><input type="checkbox" class="red-flag" value="夜間持續劇痛"> 夜間持續劇痛 (無法緩解)</label>
                    <label><input type="checkbox" class="red-flag" value="近期嚴重外傷/骨折"> 近期嚴重外傷 / 懷疑骨折</label>
                    <label><input type="checkbox" class="red-flag" value="體重不明減輕/癌症史"> 體重不明減輕 / 癌症史</label>
                    <label><input type="checkbox" class="red-flag" value="馬尾症候群"> 馬尾症候群 (大小便失禁)</label>
                    <label><input type="checkbox" class="red-flag" value="發燒/感染徵兆"> 發燒 / 系統性感染徵兆</label>
                </div>
            </div>

            <button class="btn-generate" onclick="generatePlan()">生成治療建議</button>
        </div>

        <div class="panel-right" id="outputPanel">
            <div style="text-align: center; color: #999; margin-top: 50px;" id="placeholderText">
                請在左側選擇症狀以生成建議
            </div>

            <div id="resultContent" class="result-section">
                <h2 id="planTitle">✅ 治療建議：落枕/急性頸痛</h2>

                <div id="redFlagWarning" style="display:none; background:#ffebee; padding:15px; border-left:5px solid red; margin-bottom:20px;">
                    <h3 style="color:red; margin:0;">⚠️ 注意：檢測到紅旗徵兆</h3>
                    <p>建議暫停徒手治療，並轉介患者至專科醫師進行進一步影像檢查。</p>
                </div>

                <div class="grid-box">
                    <div class="info-card">
                        <div class="section-header">🤲 徒手治療重點</div>
                        <div id="manualTherapyContent">
                            </div>
                    </div>
                    <div class="info-card">
                        <div class="section-header">🧘 居家運動與衛教</div>
                        <div id="homeExerciseContent">
                             </div>
                    </div>
                </div>

                <div class="info-card" style="margin-bottom: 20px;">
                    <div class="section-header" style="color: var(--danger-color);">⛔ 注意事項與禁忌</div>
                    <div id="contraindicationsContent" class="danger-text">
                         </div>
                </div>

                <div class="info-card">
                    <div class="section-header">📝 SOAP Note 草稿</div>
                    <div class="soap-box">
                        <button class="copy-btn" onclick="copySOAP()">複製</button>
                        <div id="soapContent"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
const clinicalData = {
        // --- 資料庫 (模擬後端數據，你可以隨時在這裡擴充) ---
    // --- 頸椎 ---
    "cervical": {
        "stiff_neck": {
            title: "落枕 / 急性頸痛 (Acute Wry Neck)",
            goals: "降低肌張力，緩解急性發炎，恢復關節活動度。",
            techniques: "胸鎖乳突肌(SCM)/斜角肌輕柔放鬆、頸椎關節鬆動術 (Grade I-II)。",
            exercises: "頸部輕微等長收縮 (Isometric)、主動活動度運動 (Arom)。",
            advice: "避免長時間維持同一姿勢，急性期可冷熱敷交替。",
            contraindications: "避免高強度操作(HVLA)，避免過度伸展。"
        },
        "radiculopathy": {
            title: "頸椎神經根病變 (Cervical Radiculopathy)",
            goals: "減輕神經壓迫症狀(麻/痛)，促使症狀中樞化(Centralization)。",
            techniques: "椎間孔減壓 (Opening tech)、神經滑動術 (Neural Gliding)、軟組織減張。",
            exercises: "收下巴運動 (Chin tucks)、神經鬆動術居家版。",
            advice: "注意枕頭高度，使用電腦時螢幕應平視，避免烏龜頸。",
            contraindications: "若出現症狀周邊化(疼痛延伸至遠端)應立即停止。"
        },
        "upper_crossed": {
            title: "上交叉症候群 (Upper Crossed Syndrome)",
            goals: "矯正圓肩駝背，放鬆緊繃肌群(胸肌/上斜方)，強化無力肌群(深層頸屈肌/下斜方)。",
            techniques: "胸大/小肌筋膜放鬆、枕下肌群釋放、胸椎伸展鬆動。",
            exercises: "牆壁天使 (Wall Angel)、YTWL運動、收下巴訓練。",
            advice: "調整工作桌椅高度，定時擴胸伸展。",
            contraindications: "無特殊禁忌，需注意運動強度循序漸進。"
        }
    },

    // --- 胸椎 ---
    "thoracic": {
        "humpback": {
            title: "胸椎後凸/僵硬 (Thoracic Kyphosis/Stiffness)",
            goals: "增加胸椎伸展活動度，改善呼吸效率。",
            techniques: "胸椎PA鬆動術 (Central/Unilateral)、肋骨鬆動術。",
            exercises: "泡棉滾筒(Foam Roller)胸椎伸展、貓牛式 (Cat-Cow)。",
            advice: "深呼吸練習，減少蜷縮在沙發的時間。",
            contraindications: "骨質疏鬆患者需控制按壓力度。"
        },
        "tos": {
            title: "胸廓出口症候群 (TOS)",
            goals: "釋放神經血管壓迫空間(斜角肌/鎖骨下/胸小肌)。",
            techniques: "斜角肌/胸小肌深層放鬆、第一肋骨鬆動術 (First rib mob)。",
            exercises: "神經滑動術 (Ulnar/Median bias)、頸部伸展。",
            advice: "避免長時間手舉過頭或揹重背包。",
            contraindications: "若手部出現蒼白、無脈搏需立即轉介血管外科。"
        }
    },

    // --- 腰椎/骨盆 ---
    "lumbar": {
        "strain": {
            title: "急性下背拉傷 (Acute Lumbar Strain)",
            goals: "緩解肌肉痙攣，保護受傷組織，控制發炎。",
            techniques: "豎脊肌與腰方肌輕柔撫推(Effleurage)、肌筋膜放鬆。",
            exercises: "骨盆傾斜運動 (Pelvic Tilt)、死蟲式 (Deadbug) 預備動作。",
            advice: "避免久坐與彎腰搬重物，起床時採側身起床。",
            contraindications: "避免深層強力按壓急性發炎區。"
        },
        "hivd": {
            title: "腰椎椎間盤突出 (Lumbar HIVD)",
            goals: "減輕椎間盤壓力，核心穩定，緩解坐骨神經痛。",
            techniques: "麥肯基療法 (McKenzie) 伸展評估、牽引、神經鬆動。",
            exercises: "眼鏡蛇式 (Cobra pose，視評估方向而定)、核心抗旋轉訓練。",
            advice: "避免彎腰撿東西，避免沙發久坐。",
            contraindications: "若後仰疼痛加劇或出現馬尾症候群徵兆，禁止後仰。"
        },
        "si_joint": {
            title: "薦髂關節失能 (SI Joint Dysfunction)",
            goals: "矯正骨盆歪斜，穩定薦髂關節。",
            techniques: "肌肉能量療法 (MET) 矯正骨盆、臀肌放鬆。",
            exercises: "橋式 (Bridge) 加球夾腿、蚌殼式 (Clam shell)。",
            advice: "避免翹二郎腿，站立時重心平均分配雙腳。",
            contraindications: "孕婦需特別注意關節鬆弛度，操作輕柔。"
        }
    },

    // --- 肩部 ---
    "shoulder": {
        "frozen": {
            title: "五十肩 / 沾黏性關節囊炎 (Frozen Shoulder)",
            goals: "增加關節活動度(ROM)，破除沾黏。",
            techniques: "盂肱關節鬆動術 (GH joint mob)、肩胛骨放鬆、關節囊伸展。",
            exercises: "鐘擺運動、手指爬牆、毛巾操(內旋伸展)。",
            advice: "保持耐心，需持續數月進行居家伸展。",
            contraindications: "發炎期(夜間痛)避免過度強制的拉伸。"
        },
        "impingement": {
            title: "肩夾擠症候群 (Shoulder Impingement)",
            goals: "增加肩峰下空間，優化肩胛肱骨節律。",
            techniques: "棘上肌腱深層按摩(DTM)、下關節囊鬆動術。",
            exercises: "外旋肌群強化 (External rotation)、肩胛穩定訓練。",
            advice: "避免手舉過頭反覆動作，避免側睡壓迫患側。",
            contraindications: "避免在疼痛弧 (Painful arc) 範圍內反覆測試。"
        }
    },

    // --- 肘部 ---
    "elbow": {
        "tennis_elbow": {
            title: "網球肘 (外上髁炎)",
            goals: "緩解伸腕肌群肌腱發炎，減少張力。",
            techniques: "伸腕肌群深層橫向按摩 (Cyriax DTM)、橈骨頭鬆動術。",
            exercises: "伸腕肌群離心收縮訓練 (Eccentric)、伸展。",
            advice: "提重物時手掌掌心向上(Supination)以減少伸肌負擔。",
            contraindications: "避免施打類固醇超過建議次數。"
        },
        "golf_elbow": {
            title: "高爾夫球肘 (內上髁炎)",
            goals: "緩解屈腕肌群張力。",
            techniques: "屈腕肌群放鬆、尺神經滑動術。",
            exercises: "抓握力訓練、屈腕肌伸展。",
            advice: "檢視握拍或使用工具的姿勢。",
            contraindications: "注意是否伴隨尺神經症狀(小指麻)。"
        }
    },

    // --- 手腕 ---
    "wrist": {
        "de_quervain": {
            title: "媽媽手 (狹窄性肌腱滑膜炎)",
            goals: "減少伸拇短肌/外展拇長肌發炎。",
            techniques: "肌腹放鬆、肌內效貼紮固定。",
            exercises: "Finkelstein 伸展、橡皮筋手指外展訓練。",
            advice: "抱小孩避免過度屈腕，使用副木休息。",
            contraindications: "發炎處避免直接強力按壓。"
        },
        "cts": {
            title: "腕隧道症候群 (Carpal Tunnel)",
            goals: "減輕正中神經壓迫。",
            techniques: "橫腕韌帶放鬆、腕骨鬆動術、肌腱滑動。",
            exercises: "正中神經滑動術 (Median nerve glide)。",
            advice: "使用滑鼠加墊，避免長時間屈腕。",
            contraindications: "若肌肉萎縮嚴重(大魚際肌)需考慮手術。"
        }
    },

    // --- 髖部 ---
    "hip": {
        "piriformis": {
            title: "梨狀肌症候群 (Piriformis Syndrome)",
            goals: "放鬆梨狀肌，解除坐骨神經壓迫。",
            techniques: "深層臀部按壓、激痛點處理、伸展。",
            exercises: "4字型伸展 (Figure-4 stretch)、滾筒放鬆。",
            advice: "避免皮夾放後口袋久坐。",
            contraindications: "需與腰椎椎間盤突出做鑑別診斷。"
        },
        "hip_oa": {
            title: "髖關節退化 (Hip OA)",
            goals: "維持關節活動度，減輕負重疼痛。",
            techniques: "髖關節牽引 (Traction)、關節鬆動術。",
            exercises: "水中運動、髖外展肌力訓練。",
            advice: "控制體重，必要時使用輔具(手杖)。",
            contraindications: "避免高衝擊運動(跑、跳)。"
        }
    },

    // --- 膝蓋 ---
    "knee": {
        "pfps": {
            title: "髕骨股骨疼痛症候群 (PFPS/跑者膝)",
            goals: "矯正髕骨滑動軌跡，強化股四頭肌。",
            techniques: "髕骨鬆動術、髂脛束(IT Band)放鬆。",
            exercises: "股四頭肌訓練(VMO強化)、蚌殼式。",
            advice: "避免深蹲過低，減少下坡/下樓梯衝擊。",
            contraindications: "急性期避免做開放鍊膝伸直(Open Chain)加重壓力。"
        },
        "oa": {
            title: "膝關節退化 (Knee OA)",
            goals: "減輕疼痛，強化關節周邊肌肉。",
            techniques: "軟組織放鬆、關節減壓。",
            exercises: "坐姿踢腿、靠牆深蹲 (Wall Sit)。",
            advice: "控制體重，穿著吸震鞋。",
            contraindications: "紅腫熱痛急性期不可熱敷。"
        }
    },

    // --- 踝足 ---
    "ankle": {
        "sprain": {
            title: "足踝扭傷 (Ankle Sprain)",
            goals: "控制腫脹(急性期)，恢復本體感覺(亞急性期)。",
            techniques: "淋巴引流按摩、腓骨鬆動術、十字按摩(慢性期)。",
            exercises: "腳踝幫浦 (Ankle pump)、單腳站立平衡訓練。",
            advice: "急性期遵循RICE/POLICE原則。",
            contraindications: "受傷初期避免推拿患處導致腫脹加劇。"
        },
        "plantar": {
            title: "足底筋膜炎 (Plantar Fasciitis)",
            goals: "放鬆小腿與足底筋膜張力。",
            techniques: "小腿三頭肌放鬆、足底筋膜深層按摩。",
            exercises: "抓毛巾運動、弓箭步伸展小腿。",
            advice: "下床第一步前先按摩足底，穿著有足弓支撐的鞋。",
            contraindications: "避免赤腳走硬地板。"
        }
    }
};
        // --- 程式邏輯 ---

        // 1. 連動選單：當選擇區域時，更新症狀選項
        function updateSymptoms() {
            const region = document.getElementById("regionSelect").value;
            const symptomSelect = document.getElementById("symptomSelect");
            
            // 清空症狀選單
            symptomSelect.innerHTML = '<option value="">請選擇症狀...</option>';

            if (region && clinicalData[region]) {
                for (let key in clinicalData[region]) {
                    let option = document.createElement("option");
                    option.value = key;
                    option.text = clinicalData[region][key].title;
                    symptomSelect.add(option);
                }
            }
        }

        // 2. 生成建議主程式
        function generatePlan() {
            const region = document.getElementById("regionSelect").value;
            const symptomKey = document.getElementById("symptomSelect").value;
            
            // 檢查是否選擇
            if (!region || !symptomKey) {
                alert("請先選擇患部區域與主要症狀！");
                return;
            }

            const data = clinicalData[region][symptomKey];
            
            // 取得紅旗徵兆
            const redFlags = [];
            document.querySelectorAll('.red-flag:checked').forEach((checkbox) => {
                redFlags.push(checkbox.value);
            });

            // 顯示結果區
            document.getElementById("placeholderText").style.display = "none";
            document.getElementById("resultContent").style.display = "block";

            // 填入基本資料
            document.getElementById("planTitle").innerText = "✅ 治療建議：" + data.title;
            document.getElementById("manualTherapyContent").innerHTML = `
                <p><strong>目標：</strong>${data.goals}</p>
                <p><strong>技術：</strong>${data.techniques}</p>
            `;
            document.getElementById("homeExerciseContent").innerHTML = `
                <p><strong>運動：</strong>${data.exercises}</p>
                <p><strong>建議：</strong>${data.advice}</p>
            `;
            document.getElementById("contraindicationsContent").innerText = data.contraindications;

            // 處理紅旗徵兆邏輯
            const redFlagBox = document.getElementById("redFlagWarning");
            if (redFlags.length > 0) {
                redFlagBox.style.display = "block";
                document.getElementById("contraindicationsContent").innerHTML += "<br><strong>⚠️ 發現紅旗徵兆，請優先轉介或謹慎評估！</strong>";
            } else {
                redFlagBox.style.display = "none";
            }

            // 生成 SOAP Note
            generateSOAP(region, data, redFlags);
        }

        function generateSOAP(region, data, redFlags) {
            const redFlagText = redFlags.length > 0 
                ? `發現紅旗徵兆 (${redFlags.join(", ")})，建議轉介。` 
                : "排除紅旗徵兆 (Red Flags negative)。";

            const soapText = `S:
- 主訴 ${region} 不適。
- 判讀症狀為：${data.title}。

O:
- ${redFlagText}
- 主要聚焦：${data.goals}

A:
- ${data.title}，需改善組織張力/關節活動。

P:
- 徒手治療：${data.techniques}
- 衛教：${data.advice}
- 居家運動：${data.exercises}`;

            document.getElementById("soapContent").innerText = soapText;
        }

        // 3. 複製功能
        function copySOAP() {
            const content = document.getElementById("soapContent").innerText;
            navigator.clipboard.writeText(content).then(() => {
                alert("SOAP Note 已複製！");
            });
        }
    </script>
</body>
</html>