-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
201 lines (187 loc) · 7.34 KB
/
Copy pathindex.html
File metadata and controls
201 lines (187 loc) · 7.34 KB
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
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>完全雲端醫院｜AI 臨床診斷邏輯訓練 Demo</title>
<meta
name="description"
content="以 SLEK 完全雲端醫院為概念的醫學生 OSCE 臨床診斷邏輯訓練互動 demo。"
>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- repo-snapshot:start -->
<section class="repo-snapshot repo-snapshot--health" aria-label="專案辨識預覽：完全雲端醫院" style="--snap-bg: #edf6f7; --snap-bg-2: #d6e8ef; --snap-ink: #172b31; --snap-muted: #5d6e73; --snap-accent: #247ba0; --snap-accent-2: #33a474;">
<div class="snapshot-copy">
<p class="snapshot-kicker">Clinical reasoning lab</p>
<div class="snapshot-name">完全雲端醫院</div>
<p class="snapshot-tagline">虛擬病人、診斷推理、病程線索與 AI 教練，第一眼就是醫療訓練工作站。</p>
<div class="snapshot-chips" aria-label="核心辨識元素">
<span>虛擬病人</span>
<span>診斷推理</span>
<span>AI 回饋</span>
</div>
</div>
<div class="snapshot-scene" aria-hidden="true">
<div class="snapshot-device">
<div class="snapshot-device-head">
<span>Case simulation</span>
<strong>胸痛分流推理</strong>
</div>
<div class="snapshot-visual snapshot-visual--health">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="snapshot-data-row">
<span><b>7</b>線索</span>
<span><b>86</b>推理分</span>
<span><b>3</b>鑑別</span>
</div>
</div>
</div>
</section>
<!-- repo-snapshot:end -->
<div class="demo-boundary" role="note">
<strong>Prototype</strong>
<span>靜態互動原型；畫面資料、評分、AI、金流、醫療、法律與安全流程皆為示範，不代表原團隊官方產品或實際服務。</span>
</div>
<header class="app-header">
<div class="brand-lockup">
<div class="brand-mark" aria-hidden="true">
<span>CH</span>
</div>
<div>
<p class="eyebrow">SLEK concept demo</p>
<h1>完全雲端醫院：AI 臨床診斷邏輯訓練工作站</h1>
</div>
</div>
<a class="official-link" href="https://ssp.moe.gov.tw/cases/1046" target="_blank" rel="noreferrer">
官方案例來源
</a>
</header>
<section class="source-ribbon" aria-label="比賽來源">
<strong>來源</strong>
<span>大專校院創新創業實戰模擬學習平臺</span>
<span>教育部</span>
<span>113 年第一梯次成功案例</span>
<span>臺北醫學大學 · SLEK · 生醫材化領域</span>
</section>
<main class="clinical-workspace">
<aside class="patient-panel" aria-label="虛擬病人案例">
<div class="panel-heading">
<div>
<p class="section-kicker">Virtual patient</p>
<h2>虛擬病人案例</h2>
</div>
<button class="ghost-button" id="resetCase" type="button">重置</button>
</div>
<label class="field-label" for="caseSelect">訓練站別</label>
<select id="caseSelect" class="case-select"></select>
<div class="patient-visual" id="patientVisual" aria-hidden="true">
<div class="monitor-grid">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="pulse-line"></div>
</div>
<section class="patient-summary" id="patientSummary"></section>
<div class="metric-grid" aria-label="訓練指標">
<div>
<span class="metric-label">蒐證完整</span>
<strong id="evidenceMetric">0%</strong>
</div>
<div>
<span class="metric-label">安全性</span>
<strong id="safetyMetric">100</strong>
</div>
<div>
<span class="metric-label">使用時間</span>
<strong id="timeMetric">0 分</strong>
</div>
</div>
<section class="chart-log">
<div class="panel-heading slim">
<div>
<p class="section-kicker">Chart</p>
<h2>已蒐集資料</h2>
</div>
</div>
<ol id="chartLog" class="chart-list"></ol>
</section>
</aside>
<section class="training-panel" aria-label="臨床推理操作區">
<section class="work-surface action-surface">
<div class="surface-heading">
<div>
<p class="section-kicker">OSCE station</p>
<h2>問診與檢查選擇</h2>
</div>
<span class="surface-note" id="targetTime"></span>
</div>
<div class="action-columns" id="actionGroups"></div>
</section>
<section class="work-surface coach-surface">
<div class="surface-heading">
<div>
<p class="section-kicker">Reasoning coach</p>
<h2>AI 診斷推理提示</h2>
</div>
<button id="coachButton" class="primary-button" type="button">更新提示</button>
</div>
<div class="coach-output" id="coachOutput" aria-live="polite"></div>
</section>
<div class="diagnosis-layout">
<section class="work-surface">
<div class="surface-heading">
<div>
<p class="section-kicker">Differential</p>
<h2>鑑別診斷</h2>
</div>
</div>
<div id="differentialList" class="differential-list"></div>
</section>
<section class="work-surface">
<div class="surface-heading">
<div>
<p class="section-kicker">Commit</p>
<h2>主要診斷</h2>
</div>
</div>
<div id="primaryDiagnosis" class="primary-options"></div>
<button id="submitCase" class="submit-button" type="button">提交給教師評分</button>
</section>
</div>
<section class="work-surface feedback-surface">
<div class="surface-heading">
<div>
<p class="section-kicker">Faculty</p>
<h2>教師回饋與成績紀錄</h2>
</div>
<button id="clearRecords" class="ghost-button" type="button">清除紀錄</button>
</div>
<div id="feedbackOutput" class="feedback-output"></div>
<div class="record-table-wrap">
<table class="record-table">
<thead>
<tr>
<th>時間</th>
<th>案例</th>
<th>分數</th>
<th>等第</th>
<th>主要診斷</th>
</tr>
</thead>
<tbody id="recordRows"></tbody>
</table>
</div>
</section>
</section>
</main>
<footer class="app-footer">
<p>教育展示用離線 demo；所有案例皆為模擬資料，不作為真實醫療診斷、治療或分流依據。</p>
</footer>
<script src="app.js"></script>
</body>
</html>