-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
137 lines (129 loc) · 5.48 KB
/
Copy pathindex.html
File metadata and controls
137 lines (129 loc) · 5.48 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
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emoto Support Platform</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- repo-snapshot:start -->
<section class="repo-snapshot repo-snapshot--chat" aria-label="專案辨識預覽：Emoto" style="--snap-bg: #f5f0f2; --snap-bg-2: #e8dfe3; --snap-ink: #2b2529; --snap-muted: #6f6369; --snap-accent: #c95f75; --snap-accent-2: #4b9a8e;">
<div class="snapshot-copy">
<p class="snapshot-kicker">Emotional support desk</p>
<div class="snapshot-name">Emoto</div>
<p class="snapshot-tagline">情緒溫度、支持任務和陪伴回覆並列，讓心理支持平台從截圖就有自己的語氣。</p>
<div class="snapshot-chips" aria-label="核心辨識元素">
<span>情緒溫度</span>
<span>支持任務</span>
<span>陪伴回覆</span>
</div>
</div>
<div class="snapshot-scene" aria-hidden="true">
<div class="snapshot-device">
<div class="snapshot-device-head">
<span>Support room</span>
<strong>今晚需要安定對話</strong>
</div>
<div class="snapshot-visual snapshot-visual--chat">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
</div>
<div class="snapshot-data-row">
<span><b>4</b>需求</span>
<span><b>12m</b>回覆</span>
<span><b>76</b>穩定度</span>
</div>
</div>
</div>
</section>
<!-- repo-snapshot:end -->
<div class="demo-boundary" role="note">
<strong>Prototype</strong>
<span>靜態互動原型；畫面資料、評分、AI、金流、醫療、法律與安全流程皆為示範，不代表原團隊官方產品或實際服務。</span>
</div>
<main class="app-shell">
<header class="topbar">
<div>
<p class="eyebrow">114 Healthy x Happy · 第九屆 · 佳作獎</p>
<h1>Emoto 線上心理支持平台</h1>
</div>
<a class="source-pill" href="https://incubation.ntunhs.edu.tw/tab/528/id/1834" target="_blank" rel="noreferrer">
<span>比賽來源</span>
<strong>Healthy x Happy 2025 第九屆決賽獲獎名單</strong>
</a>
</header>
<section class="metrics" aria-label="平台摘要">
<article class="metric">
<span>等待支持</span>
<strong id="metric-queue">18</strong>
<small>平均等待 6 分鐘</small>
</article>
<article class="metric amber">
<span>高關懷訊號</span>
<strong id="metric-risk">4</strong>
<small>需先做安全分流</small>
</article>
<article class="metric">
<span>可用支持者</span>
<strong id="metric-helpers">27</strong>
<small>8 位可立即接案</small>
</article>
<article class="metric dark">
<span>完成回訪</span>
<strong id="metric-followup">72%</strong>
<small>本週支持成效追蹤</small>
</article>
</section>
<section class="workspace">
<aside class="panel intake-panel" aria-label="情緒登記">
<div class="panel-head">
<p>情緒登記</p>
<button id="new-entry" class="ghost-button" type="button">新增</button>
</div>
<div class="entry-list" id="entry-list"></div>
</aside>
<section class="panel match-panel" aria-label="支持媒合">
<div class="panel-head">
<p>支持媒合</p>
<div class="segmented" aria-label="媒合模式">
<button class="segment active" data-mode="fit" type="button">契合</button>
<button class="segment" data-mode="fast" type="button">最快</button>
<button class="segment" data-mode="risk" type="button">關懷</button>
</div>
</div>
<div class="selected-entry" id="selected-entry"></div>
<div class="match-grid" id="match-grid"></div>
</section>
<aside class="panel care-panel" aria-label="危機分流">
<div class="panel-head">
<p>危機分流</p>
<span class="live-dot">監測中</span>
</div>
<div class="safety-card" id="safety-card"></div>
<div class="action-stack" id="action-stack"></div>
<details class="source-box">
<summary>獎項來源</summary>
<p>Healthy x Happy 2025 第九屆決賽獲獎名單，佳作獎，Emoto，情緒零時差：Emoto 線上心理支持平台。</p>
</details>
</aside>
</section>
<section class="lower-grid">
<article class="panel script-panel">
<div class="panel-head">
<p>支持腳本</p>
<button id="script-button" class="ghost-button" type="button">生成回覆</button>
</div>
<div class="script-box" id="script-box"></div>
</article>
<article class="panel progress-panel">
<div class="panel-head">
<p>成效追蹤</p>
<button id="follow-button" class="ghost-button" type="button">新增回訪</button>
</div>
<div class="progress-list" id="progress-list"></div>
</article>
</section>
</main>
<script src="app.js"></script>
</body>
</html>