Medical-Device-Innovation-Project/test.html at main · c1ya0/Medical-Device-Innovation-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RectalGuard Intelligence</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
        body { font-family: 'Noto Sans TC', sans-serif; }
        .animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #3B82F6; cursor: pointer; border-radius: 50%; }
        .card-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
    </style>
</head>
<body class="bg-slate-50 text-slate-800 h-screen flex overflow-hidden">

    <!-- Navigation Sidebar -->
    <nav class="w-20 md:w-64 bg-slate-900 text-white flex flex-col justify-between transition-all duration-300 flex-shrink-0">
        <div>
            <div class="p-4 flex items-center justify-center md:justify-start gap-3 border-b border-slate-700 h-16">
                <div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center flex-shrink-0">
                    <i class="fa-solid fa-shield-virus"></i>
                </div>
                <span class="font-bold text-xl hidden md:block">RectalGuard</span>
            </div>

            <div class="mt-6 flex flex-col gap-2 px-2">
                <button onclick="switchView('clinician')" id="btn-clinician" class="nav-btn w-full p-3 rounded-lg flex items-center gap-3 bg-blue-600 hover:bg-blue-700 transition-colors">
                    <i class="fa-solid fa-user-doctor text-lg w-6 text-center"></i>
                    <span class="hidden md:block text-sm font-medium">臨床決策支援</span>
                </button>
                <button onclick="switchView('patient')" id="btn-patient" class="nav-btn w-full p-3 rounded-lg flex items-center gap-3 hover:bg-slate-800 transition-colors text-slate-400">
                    <i class="fa-solid fa-hospital-user text-lg w-6 text-center"></i>
                    <span class="hidden md:block text-sm font-medium">病患存活照護</span>
                </button>
            </div>
        </div>
        <div class="p-4 border-t border-slate-700 hidden md:block">
            <div class="text-xs text-slate-400">目前使用者</div>
            <div class="font-medium truncate">Dr. Wang (腫瘤醫學科)</div>
        </div>
    </nav>

    <!-- Main Content Area -->
    <main class="flex-1 overflow-y-auto relative">

        <!-- CLINICIAN VIEW -->
        <div id="view-clinician" class="p-4 md:p-8 max-w-7xl mx-auto animate-fade-in">
            <header class="mb-6 flex justify-between items-center">
                <div>
                    <h1 class="text-2xl font-bold text-slate-900">治療前風險評估引擎</h1>
                    <p class="text-slate-500 text-sm mt-1">基於 Concept 4 族群數據與機器學習模型</p>
                </div>
                <button class="bg-white border border-slate-300 px-4 py-2 rounded-lg text-sm font-medium hover:bg-slate-50 transition shadow-sm">
                    <i class="fa-solid fa-file-export mr-2"></i>匯出 EMR 報告
                </button>
            </header>

            <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
                <!-- Input Panel -->
                <div class="lg:col-span-4 space-y-6">
                    <!-- Clinical Factors -->
                    <div class="bg-white p-5 rounded-xl card-shadow border border-slate-100">
                        <h3 class="font-bold text-slate-700 mb-4 flex items-center gap-2">
                            <i class="fa-solid fa-notes-medical text-blue-500"></i> 臨床特徵 (Clinical)
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-slate-500 mb-1">年齡</label>
                                <input type="number" id="input-age" value="68" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 outline-none" onchange="calculateRisk()">
                            </div>
                            <div class="flex items-center justify-between">
                                <label class="text-sm text-slate-700">糖尿病 (Diabetes)</label>
                                <input type="checkbox" id="input-dm" class="w-5 h-5 text-blue-600 rounded" onchange="calculateRisk()">
                            </div>
                            <div class="flex items-center justify-between">
                                <label class="text-sm text-slate-700">抗凝血劑使用 (Anticoagulants)</label>
                                <input type="checkbox" id="input-ac" class="w-5 h-5 text-blue-600 rounded" onchange="calculateRisk()">
                            </div>
                            <div class="flex items-center justify-between">
                                <label class="text-sm text-slate-700">發炎性腸道疾病 (IBD)</label>
                                <input type="checkbox" id="input-ibd" class="w-5 h-5 text-blue-600 rounded" onchange="calculateRisk()">
                            </div>
                        </div>
                    </div>

                    <!-- Dosimetric Factors -->
                    <div class="bg-white p-5 rounded-xl card-shadow border border-slate-100">
                        <h3 class="font-bold text-slate-700 mb-4 flex items-center gap-2">
                            <i class="fa-solid fa-chart-area text-purple-500"></i> 劑量學參數 (Dosimetric)
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <label class="block text-xs font-medium text-slate-500 mb-1">計畫 RT 模式</label>
                                <select id="input-modality" class="w-full bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 text-sm" onchange="calculateRisk()">
                                    <option value="1">VMAT (Standard)</option>
                                    <option value="2">IMRT</option>
                                    <option value="0.5">Proton Therapy</option>
                                </select>
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <label class="text-xs font-medium text-slate-500">Rectal V50 (%)</label>
                                    <span id="val-v50" class="text-xs font-bold text-blue-600">40%</span>
                                </div>
                                <input type="range" id="input-v50" min="0" max="100" value="40" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer" oninput="updateSliderVal('val-v50', this.value); calculateRisk()">
                            </div>
                            <div>
                                <div class="flex justify-between mb-1">
                                    <label class="text-xs font-medium text-slate-500">Rectal V70 (%)</label>
                                    <span id="val-v70" class="text-xs font-bold text-blue-600">15%</span>
                                </div>
                                <input type="range" id="input-v70" min="0" max="50" value="15" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer" oninput="updateSliderVal('val-v70', this.value); calculateRisk()">
                            </div>
                        </div>
                    </div>

                    <!-- Genomic Factors (Research) -->
                    <div class="bg-slate-100 p-5 rounded-xl border border-slate-200 dashed border-2 relative overflow-hidden">
                        <div class="absolute top-0 right-0 bg-yellow-400 text-xs font-bold px-2 py-1 rounded-bl-lg text-slate-900">Research Only</div>
                        <h3 class="font-bold text-slate-700 mb-4 flex items-center gap-2">
                            <i class="fa-solid fa-dna text-pink-500"></i> 基因組學 (Genomic)
                        </h3>
                        <div class="space-y-3 opacity-75">
                            <div class="flex items-center justify-between">
                                <label class="text-sm text-slate-700">ATM 突變</label>
                                <input type="checkbox" id="input-gene-atm" class="w-4 h-4 text-pink-600 rounded" onchange="calculateRisk()">
                            </div>
                            <div class="flex items-center justify-between">
                                <label class="text-sm text-slate-700">NBN 突變</label>
                                <input type="checkbox" id="input-gene-nbn" class="w-4 h-4 text-pink-600 rounded" onchange="calculateRisk()">
                            </div>
                            <p class="text-xs text-slate-400 mt-2">*基因權重目前設定較低，待前瞻性研究驗證</p>
                        </div>
                    </div>
                </div>

                <!-- Output Panel -->
                <div class="lg:col-span-8 space-y-6">
                    <!-- Risk Score Header -->
                    <div class="bg-white p-6 rounded-xl card-shadow border border-slate-100 flex flex-col md:flex-row items-center justify-between gap-6">
                        <div class="flex items-center gap-4">
                            <div id="risk-indicator" class="w-20 h-20 rounded-full border-4 border-slate-200 flex items-center justify-center text-2xl font-bold transition-colors duration-500">
                                --
                            </div>
                            <div>
                                <h2 class="text-lg font-bold text-slate-800">預測放射性直腸炎風險</h2>
                                <p class="text-slate-500 text-sm">(Probability of Grade ≥ 2 Proctitis)</p>
                                <span id="risk-badge" class="inline-block mt-2 px-3 py-1 rounded-full text-xs font-bold bg-slate-100 text-slate-500">待計算</span>
                            </div>
                        </div>
                        <div class="text-right hidden md:block">
                            <div class="text-xs text-slate-400 uppercase tracking-wider">Model Confidence</div>
                            <div class="text-xl font-bold text-slate-700">87.4%</div>
                            <div class="text-xs text-green-500"><i class="fa-solid fa-check-circle"></i> Validated Cohort</div>
                        </div>
                    </div>

                    <!-- Population Graph -->
                    <div class="bg-white p-6 rounded-xl card-shadow border border-slate-100">
                        <h3 class="font-bold text-slate-700 mb-4">族群風險定位 (Population Study)</h3>
                        <div class="relative w-full h-64">
                            <canvas id="populationChart"></canvas>
                        </div>
                        <p class="text-xs text-slate-500 mt-3 text-center">
                            圖表顯示該患者相對於院內 1,200 例攝護腺癌放療患者的風險分佈位置。
                        </p>
                    </div>

                    <!-- Decision Support Actions -->
                    <div class="bg-white p-6 rounded-xl card-shadow border border-slate-100">
                        <h3 class="font-bold text-slate-700 mb-4">臨床建議行動 (Actionable Insights)</h3>
                        <div id="action-list" class="space-y-3">
                            <!-- Dynamic Content via JS -->
                            <div class="p-4 bg-slate-50 rounded border border-slate-200 text-slate-500 text-center text-sm">
                                請輸入參數以獲取建議
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- PATIENT VIEW -->
        <div id="view-patient" class="hidden p-4 md:p-8 max-w-md mx-auto h-full animate-fade-in pb-24">
            <header class="mb-6 text-center">
                <div class="w-16 h-16 bg-blue-100 text-blue-600 rounded-full mx-auto flex items-center justify-center text-2xl mb-3">
                    <i class="fa-solid fa-user"></i>
                </div>
                <h1 class="text-xl font-bold text-slate-900">早安, 陳先生</h1>
                <p class="text-slate-500 text-sm">距離放療結束已 3 週</p>
            </header>

            <!-- ePRO Check-in -->
            <div class="bg-white p-6 rounded-2xl shadow-lg mb-6 border border-blue-50 relative overflow-hidden">
                <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-400 to-purple-500"></div>
                <h3 class="font-bold text-slate-800 mb-4 flex justify-between">
                    今日症狀回報 (ePRO)
                    <span class="text-xs font-normal text-blue-500 bg-blue-50 px-2 py-1 rounded">未完成</span>
                </h3>

                <div class="space-y-5">
                    <div>
                        <label class="text-sm font-medium text-slate-600 mb-2 block">1. 今天有排便出血的情況嗎？</label>
                        <div class="flex gap-2">
                            <button onclick="selectSymptom(this, 'none')" class="flex-1 py-2 border rounded-lg text-sm hover:bg-green-50 hover:border-green-300 transition">無</button>
                            <button onclick="selectSymptom(this, 'mild')" class="flex-1 py-2 border rounded-lg text-sm hover:bg-yellow-50 hover:border-yellow-300 transition">輕微</button>
                            <button onclick="selectSymptom(this, 'severe')" class="flex-1 py-2 border rounded-lg text-sm hover:bg-red-50 hover:border-red-300 transition">嚴重</button>
                        </div>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-slate-600 mb-2 block">2. 排便急迫感 (裡急後重)？</label>
                        <input type="range" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer">
                        <div class="flex justify-between text-xs text-slate-400 mt-1">
                            <span>完全沒有</span>
                            <span>非常嚴重</span>
                        </div>
                    </div>

                    <button onclick="submitEPRO()" class="w-full bg-blue-600 text-white py-3 rounded-xl font-bold shadow-md hover:bg-blue-700 transition transform active:scale-95">
                        提交回報
                    </button>
                </div>
            </div>

            <!-- History Chart -->
            <div class="bg-white p-5 rounded-2xl shadow mb-6">
                <h3 class="font-bold text-slate-700 mb-4 text-sm">近期症狀趨勢</h3>
                <div class="h-40 w-full">
                    <canvas id="eproChart"></canvas>
                </div>
            </div>

            <!-- Self Care Tips -->
            <div class="space-y-4">
                <h3 class="font-bold text-slate-700 text-sm">推薦閱讀 (個人化衛教)</h3>
                <div class="bg-white p-4 rounded-xl border border-slate-100 flex gap-4 items-start cursor-pointer hover:shadow-md transition">
                    <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center text-green-600 flex-shrink-0">
                        <i class="fa-solid fa-bowl-food"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-sm text-slate-800">低渣飲食指南</h4>
                        <p class="text-xs text-slate-500 mt-1">適合目前有輕微腹瀉症狀的您，減少腸道刺激。</p>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-xl border border-slate-100 flex gap-4 items-start cursor-pointer hover:shadow-md transition">
                    <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 flex-shrink-0">
                        <i class="fa-solid fa-pills"></i>
                    </div>
                    <div>
                        <h4 class="font-bold text-sm text-slate-800">何時該使用益生菌？</h4>
                        <p class="text-xs text-slate-500 mt-1">最新的研究顯示特定菌株有助於黏膜修復。</p>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <script>
        // View Switching Logic
        function switchView(view) {
            const clinicianBtn = document.getElementById('btn-clinician');
            const patientBtn = document.getElementById('btn-patient');
            const clinicianView = document.getElementById('view-clinician');
            const patientView = document.getElementById('view-patient');

            if (view === 'clinician') {
                clinicianBtn.classList.add('bg-blue-600', 'text-white');
                clinicianBtn.classList.remove('text-slate-400', 'hover:bg-slate-800');
                patientBtn.classList.remove('bg-blue-600', 'text-white');
                patientBtn.classList.add('text-slate-400', 'hover:bg-slate-800');

                clinicianView.classList.remove('hidden');
                patientView.classList.add('hidden');
            } else {
                patientBtn.classList.add('bg-blue-600', 'text-white');
                patientBtn.classList.remove('text-slate-400', 'hover:bg-slate-800');
                clinicianBtn.classList.remove('bg-blue-600', 'text-white');
                clinicianBtn.classList.add('text-slate-400', 'hover:bg-slate-800');

                patientView.classList.remove('hidden');
                clinicianView.classList.add('hidden');
            }
        }

        // Slider Value Update
        function updateSliderVal(id, val) {
            document.getElementById(id).innerText = val + "%";
        }

        // EPRO Symptom Selection UI
        function selectSymptom(btn, type) {
            const parent = btn.parentElement;
            Array.from(parent.children).forEach(c => {
                c.classList.remove('bg-green-100', 'border-green-500', 'bg-yellow-100', 'border-yellow-500', 'bg-red-100', 'border-red-500');
                c.classList.add('border');
            });

            if(type === 'none') btn.classList.add('bg-green-100', 'border-green-500');
            if(type === 'mild') btn.classList.add('bg-yellow-100', 'border-yellow-500');
            if(type === 'severe') btn.classList.add('bg-red-100', 'border-red-500');
        }

        function submitEPRO() {
            alert("感謝您的回報！數據已同步至雲端，並即時分析風險。");
        }

        // Chart Initialization
        let popChartInstance = null;
        let eproChartInstance = null;

        window.onload = function() {
            initCharts();
            calculateRisk(); // Initial Calculation
        };

        function initCharts() {
            // Population Chart (Bell Curve Simulation)
            const ctxPop = document.getElementById('populationChart').getContext('2d');

            // Generate Bell Curve Data
            const dataPoints = [];
            const labels = [];
            for (let i = 0; i <= 100; i+=2) {
                labels.push(i);
                // Simple Gaussian function simulation
                let y = (1 / (15 * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((i - 40) / 15, 2));
                dataPoints.push(y);
            }

            popChartInstance = new Chart(ctxPop, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '族群分佈 (Population)',
                        data: dataPoints,
                        borderColor: '#94a3b8',
                        backgroundColor: 'rgba(148, 163, 184, 0.1)',
                        fill: true,
                        tension: 0.4,
                        pointRadius: 0,
                        borderWidth: 2
                    }, {
                        label: '目前病患 (Current Patient)',
                        data: [], // Will be populated dynamically
                        borderColor: '#ef4444',
                        backgroundColor: '#ef4444',
                        pointRadius: 6,
                        pointHoverRadius: 8,
                        showLine: false,
                        type: 'scatter'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true, position: 'bottom' },
                        tooltip: { enabled: false }
                    },
                    scales: {
                        y: { display: false },
                        x: {
                            title: { display: true, text: '預測風險分數 (Risk Score)' },
                            grid: { display: false }
                        }
                    }
                }
            });

            // ePRO Chart (Patient View)
            const ctxEpro = document.getElementById('eproChart').getContext('2d');
            eproChartInstance = new Chart(ctxEpro, {
                type: 'line',
                data: {
                    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    datasets: [{
                        label: '疼痛指數',
                        data: [2, 3, 2, 4, 3, 2, 1],
                        borderColor: '#3b82f6',
                        tension: 0.3
                    }, {
                        label: '出血頻率',
                        data: [0, 1, 0, 1, 0, 0, 0],
                        borderColor: '#ef4444',
                        borderDash: [5, 5],
                        tension: 0.3
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true, max: 10 } }
                }
            });
        }

        // Core Logic: Risk Calculation (Concept 4 Engine)
        function calculateRisk() {
            // 1. Gather Inputs
            const age = parseInt(document.getElementById('input-age').value) || 60;
            const hasDM = document.getElementById('input-dm').checked;
            const hasAC = document.getElementById('input-ac').checked; // Anticoagulants
            const hasIBD = document.getElementById('input-ibd').checked;
            const modality = parseFloat(document.getElementById('input-modality').value); // Multiplier
            const v50 = parseInt(document.getElementById('input-v50').value);
            const v70 = parseInt(document.getElementById('input-v70').value);
            const hasGeneATM = document.getElementById('input-gene-atm').checked;
            const hasGeneNBN = document.getElementById('input-gene-nbn').checked;

            // 2. Simple Algorithm (Simulating Weighted Coefficients)
            let baseScore = 20;

            // Clinical
            if (hasDM) baseScore += 5;
            if (hasAC) baseScore += 15; // High risk factor for bleeding
            if (hasIBD) baseScore += 20; // Very high risk

            // Dosimetric
            baseScore += (v50 * 0.3);
            baseScore += (v70 * 0.8);

            // Modality Factor (Proton lowers risk)
            baseScore = baseScore * modality;

            // Genetics (Add-on)
            if (hasGeneATM) baseScore += 10;
            if (hasGeneNBN) baseScore += 8;

            // Clamp 0-100
            let finalScore = Math.min(Math.max(baseScore, 0), 100);

            // 3. Determine Tier
            let tier = 'Low';
            let colorClass = 'text-green-600 border-green-200 bg-green-50';
            let badgeClass = 'bg-green-100 text-green-600';

            if (finalScore >= 40 && finalScore < 70) {
                tier = 'Medium';
                colorClass = 'text-yellow-600 border-yellow-200 bg-yellow-50';
                badgeClass = 'bg-yellow-100 text-yellow-600';
            } else if (finalScore >= 70) {
                tier = 'High';
                colorClass = 'text-red-600 border-red-200 bg-red-50';
                badgeClass = 'bg-red-100 text-red-600';
            }

            // 4. Update UI
            const indicator = document.getElementById('risk-indicator');
            indicator.innerText = Math.round(finalScore);
            indicator.className = `w-20 h-20 rounded-full border-4 flex items-center justify-center text-2xl font-bold transition-colors duration-500 ${colorClass}`;

            const badge = document.getElementById('risk-badge');
            badge.innerText = `${tier} Risk Group`;
            badge.className = `inline-block mt-2 px-3 py-1 rounded-full text-xs font-bold ${badgeClass}`;

            // 5. Update Chart
            updatePopulationChart(finalScore);

            // 6. Generate Recommendations (Concept 3 Actions)
            generateActions(tier, hasAC, v70);
        }

        function updatePopulationChart(score) {
            if (!popChartInstance) return;

            // The bell curve peak is approx at y=0.026 at x=40
            // We need to find the Y value for our score on the curve to plot the point accurately
            let y = (1 / (15 * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((score - 40) / 15, 2));

            popChartInstance.data.datasets[1].data = [{x: score, y: y}];
            popChartInstance.update();
        }

        function generateActions(tier, hasAC, v70) {
            const list = document.getElementById('action-list');
            let html = '';

            if (tier === 'High') {
                html += `
                    <div class="p-3 bg-red-50 border-l-4 border-red-500 rounded-r flex items-start gap-3">
                        <i class="fa-solid fa-triangle-exclamation text-red-500 mt-1"></i>
                        <div>
                            <div class="font-bold text-red-700 text-sm">建議轉介 SpaceOAR</div>
                            <div class="text-xs text-red-600">預測毒性風險極高，建議植入水凝膠以增加直腸間距。</div>
                        </div>
                    </div>
                    <div class="p-3 bg-orange-50 border-l-4 border-orange-500 rounded-r flex items-start gap-3">
                        <i class="fa-solid fa-sliders text-orange-500 mt-1"></i>
                        <div>
                            <div class="font-bold text-orange-700 text-sm">收緊劑量限制 (Tighten Constraints)</div>
                            <div class="text-xs text-orange-600">建議將直腸 V70 限制在 < 10%。</div>
                        </div>
                    </div>
                `;
            } else if (tier === 'Medium') {
                html += `
                    <div class="p-3 bg-yellow-50 border-l-4 border-yellow-500 rounded-r flex items-start gap-3">
                        <i class="fa-solid fa-file-medical text-yellow-600 mt-1"></i>
                        <div>
                            <div class="font-bold text-yellow-800 text-sm">調整分次治療方案 (Modify Fractionation)</div>
                            <div class="text-xs text-yellow-700">考慮採用更多分次 (Hyper-fractionation) 以降低單次生物效應劑量。</div>
                        </div>
                    </div>
                `;
            } else {
                html += `
                    <div class="p-3 bg-green-50 border-l-4 border-green-500 rounded-r flex items-start gap-3">
                        <i class="fa-solid fa-check text-green-600 mt-1"></i>
                        <div>
                            <div class="font-bold text-green-800 text-sm">維持標準治療計畫</div>
                            <div class="text-xs text-green-700">目前風險在可接受範圍，持續常規監測。</div>
                        </div>
                    </div>
                `;
            }

            if (hasAC) {
                html += `
                    <div class="p-3 bg-blue-50 border-l-4 border-blue-500 rounded-r flex items-start gap-3">
                        <i class="fa-solid fa-droplet text-blue-600 mt-1"></i>
                        <div>
                            <div class="font-bold text-blue-800 text-sm">抗凝血劑管理</div>
                            <div class="text-xs text-blue-700">患者使用抗凝血劑，請照會心臟科評估放療期間是否需暫停或調整。</div>
                        </div>
                    </div>
                `;
            }

            list.innerHTML = html;
        }
    </script>
</body>
</html>