Hugging Face's logo

Spaces:
hunie
/
snm
Running

App Files Community
hunie commited on
Commit
b29e90d
·
verified ·
1 Parent(s): b61b609

치매진단 AI 어드민을 만들고 싶어 추론결과를 관리하는 용도로 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +543 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Snm
3
- emoji: 📉
4
- colorFrom: red
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: snm
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,543 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>치매진단 AI 관리자 대시보드</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s ease;
13
+ }
14
+ .sidebar-collapsed {
15
+ width: 70px;
16
+ }
17
+ .sidebar-expanded {
18
+ width: 250px;
19
+ }
20
+ .main-content {
21
+ transition: margin-left 0.3s ease;
22
+ }
23
+ .notification-badge {
24
+ position: absolute;
25
+ top: -5px;
26
+ right: -5px;
27
+ font-size: 10px;
28
+ background-color: #ef4444;
29
+ color: white;
30
+ border-radius: 50%;
31
+ width: 18px;
32
+ height: 18px;
33
+ display: flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ }
37
+ .patient-card:hover {
38
+ transform: translateY(-5px);
39
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
40
+ }
41
+ .dark-mode {
42
+ background-color: #1a202c;
43
+ color: #f7fafc;
44
+ }
45
+ .dark-mode .bg-white {
46
+ background-color: #2d3748 !important;
47
+ color: #f7fafc !important;
48
+ }
49
+ .dark-mode .text-gray-800 {
50
+ color: #f7fafc !important;
51
+ }
52
+ .dark-mode .border-gray-200 {
53
+ border-color: #4a5568 !important;
54
+ }
55
+ </style>
56
+ </head>
57
+ <body class="bg-gray-100 font-sans">
58
+ <div class="flex h-screen overflow-hidden">
59
+ <!-- 사이드바 -->
60
+ <div class="sidebar sidebar-expanded bg-blue-800 text-white flex flex-col">
61
+ <div class="p-4 flex items-center justify-between border-b border-blue-700">
62
+ <h1 class="text-xl font-bold whitespace-nowrap">치매진단 AI</h1>
63
+ <button id="toggleSidebar" class="text-white focus:outline-none">
64
+ <i class="fas fa-bars"></i>
65
+ </button>
66
+ </div>
67
+ <div class="p-4 border-b border-blue-700 flex items-center">
68
+ <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center mr-3">
69
+ <i class="fas fa-user-md text-white"></i>
70
+ </div>
71
+ <div class="user-info whitespace-nowrap">
72
+ <p class="font-semibold">관리자 님</p>
73
+ <p class="text-xs text-blue-200">슈퍼관리자</p>
74
+ </div>
75
+ </div>
76
+ <nav class="flex-1 overflow-y-auto">
77
+ <ul class="space-y-2 p-2">
78
+ <li>
79
+ <a href="#" class="flex items-center p-3 rounded-lg bg-blue-700 text-white">
80
+ <i class="fas fa-tachometer-alt mr-3"></i>
81
+ <span class="whitespace-nowrap">대시보드</span>
82
+ </a>
83
+ </li>
84
+ <li>
85
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 text-white">
86
+ <i class="fas fa-users mr-3"></i>
87
+ <span class="whitespace-nowrap">환자 관리</span>
88
+ </a>
89
+ </li>
90
+ <li>
91
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 text-white">
92
+ <i class="fas fa-brain mr-3"></i>
93
+ <span class="whitespace-nowrap">진단 결과</span>
94
+ </a>
95
+ </li>
96
+ <li>
97
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 text-white">
98
+ <i class="fas fa-chart-line mr-3"></i>
99
+ <span class="whitespace-nowrap">통계 분석</span>
100
+ </a>
101
+ </li>
102
+ <li>
103
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 text-white">
104
+ <i class="fas fa-cog mr-3"></i>
105
+ <span class="whitespace-nowrap">시스템 설정</span>
106
+ </a>
107
+ </li>
108
+ <li>
109
+ <a href="#" class="flex items-center p-3 rounded-lg hover:bg-blue-700 text-white">
110
+ <i class="fas fa-user-shield mr-3"></i>
111
+ <span class="whitespace-nowrap">권한 관리</span>
112
+ </a>
113
+ </li>
114
+ </ul>
115
+ </nav>
116
+ <div class="p-4 border-t border-blue-700">
117
+ <button id="darkModeToggle" class="flex items-center p-3 rounded-lg hover:bg-blue-700 text-white w-full">
118
+ <i class="fas fa-moon mr-3"></i>
119
+ <span class="whitespace-nowrap">다크 모드</span>
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- 메인 콘텐츠 -->
125
+ <div class="main-content flex-1 overflow-auto" style="margin-left: 250px;">
126
+ <!-- 헤더 -->
127
+ <header class="bg-white shadow-sm p-4 flex justify-between items-center">
128
+ <h2 class="text-xl font-semibold text-gray-800">대시보드</h2>
129
+ <div class="flex items-center space-x-4">
130
+ <div class="relative">
131
+ <button class="text-gray-600 focus:outline-none">
132
+ <i class="fas fa-bell text-xl"></i>
133
+ <span class="notification-badge">5</span>
134
+ </button>
135
+ </div>
136
+ <div class="flex items-center">
137
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
138
+ <i class="fas fa-user text-blue-600"></i>
139
+ </div>
140
+ <span class="text-gray-700">관리자</span>
141
+ </div>
142
+ </div>
143
+ </header>
144
+
145
+ <!-- 메인 콘텐츠 영역 -->
146
+ <main class="p-6">
147
+ <!-- 요약 카드 -->
148
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
149
+ <div class="bg-white rounded-lg shadow p-6">
150
+ <div class="flex items-center justify-between">
151
+ <div>
152
+ <p class="text-gray-500">총 환자 수</p>
153
+ <h3 class="text-2xl font-bold text-gray-800">1,248</h3>
154
+ <p class="text-sm text-green-500 flex items-center">
155
+ <i class="fas fa-arrow-up mr-1"></i> 12% 증가
156
+ </p>
157
+ </div>
158
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
159
+ <i class="fas fa-users text-blue-600 text-xl"></i>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ <div class="bg-white rounded-lg shadow p-6">
164
+ <div class="flex items-center justify-between">
165
+ <div>
166
+ <p class="text-gray-500">오늘의 진단</p>
167
+ <h3 class="text-2xl font-bold text-gray-800">42</h3>
168
+ <p class="text-sm text-red-500 flex items-center">
169
+ <i class="fas fa-arrow-down mr-1"></i> 5% 감소
170
+ </p>
171
+ </div>
172
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
173
+ <i class="fas fa-brain text-green-600 text-xl"></i>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ <div class="bg-white rounded-lg shadow p-6">
178
+ <div class="flex items-center justify-between">
179
+ <div>
180
+ <p class="text-gray-500">치매 위험군</p>
181
+ <h3 class="text-2xl font-bold text-gray-800">187</h3>
182
+ <p class="text-sm text-green-500 flex items-center">
183
+ <i class="fas fa-arrow-up mr-1"></i> 8% 증가
184
+ </p>
185
+ </div>
186
+ <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center">
187
+ <i class="fas fa-exclamation-triangle text-yellow-600 text-xl"></i>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ <div class="bg-white rounded-lg shadow p-6">
192
+ <div class="flex items-center justify-between">
193
+ <div>
194
+ <p class="text-gray-500">AI 정확도</p>
195
+ <h3 class="text-2xl font-bold text-gray-800">92.5%</h3>
196
+ <p class="text-sm text-green-500 flex items-center">
197
+ <i class="fas fa-arrow-up mr-1"></i> 1.2% 향상
198
+ </p>
199
+ </div>
200
+ <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
201
+ <i class="fas fa-robot text-purple-600 text-xl"></i>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- 차트 영역 -->
208
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
209
+ <div class="bg-white rounded-lg shadow p-6">
210
+ <div class="flex justify-between items-center mb-4">
211
+ <h3 class="text-lg font-semibold text-gray-800">주간 진단 추이</h3>
212
+ <select class="border border-gray-300 rounded px-3 py-1 text-sm focus:outline-none">
213
+ <option>최근 7일</option>
214
+ <option>최근 30일</option>
215
+ <option>최근 90일</option>
216
+ </select>
217
+ </div>
218
+ <canvas id="diagnosisChart" height="250"></canvas>
219
+ </div>
220
+ <div class="bg-white rounded-lg shadow p-6">
221
+ <div class="flex justify-between items-center mb-4">
222
+ <h3 class="text-lg font-semibold text-gray-800">치매 단계 분포</h3>
223
+ <select class="border border-gray-300 rounded px-3 py-1 text-sm focus:outline-none">
224
+ <option>전체</option>
225
+ <option>65세 이상</option>
226
+ <option>65세 미만</option>
227
+ </select>
228
+ </div>
229
+ <canvas id="dementiaStageChart" height="250"></canvas>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- 최근 진단 결과 -->
234
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-6">
235
+ <div class="p-6 border-b border-gray-200">
236
+ <h3 class="text-lg font-semibold text-gray-800">최근 진단 결과</h3>
237
+ </div>
238
+ <div class="overflow-x-auto">
239
+ <table class="min-w-full divide-y divide-gray-200">
240
+ <thead class="bg-gray-50">
241
+ <tr>
242
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">환자 ID</th>
243
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">이름</th>
244
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">나이</th>
245
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">진단 일시</th>
246
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">결과</th>
247
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">확률</th>
248
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">조치</th>
249
+ </tr>
250
+ </thead>
251
+ <tbody class="bg-white divide-y divide-gray-200">
252
+ <tr>
253
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PT-10045</td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">김철수</td>
255
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">72</td>
256
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 14:30</td>
257
+ <td class="px-6 py-4 whitespace-nowrap">
258
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">고위험</span>
259
+ </td>
260
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">87.3%</td>
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
262
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
263
+ <button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button>
264
+ </td>
265
+ </tr>
266
+ <tr>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PT-10044</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">이영희</td>
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">68</td>
270
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 13:15</td>
271
+ <td class="px-6 py-4 whitespace-nowrap">
272
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">중간위험</span>
273
+ </td>
274
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">65.2%</td>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
276
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
277
+ <button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button>
278
+ </td>
279
+ </tr>
280
+ <tr>
281
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PT-10043</td>
282
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">박민수</td>
283
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">75</td>
284
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 11:45</td>
285
+ <td class="px-6 py-4 whitespace-nowrap">
286
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">저위험</span>
287
+ </td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32.1%</td>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
290
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
291
+ <button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button>
292
+ </td>
293
+ </tr>
294
+ <tr>
295
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PT-10042</td>
296
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">정순자</td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">81</td>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 10:20</td>
299
+ <td class="px-6 py-4 whitespace-nowrap">
300
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">고위험</span>
301
+ </td>
302
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">91.5%</td>
303
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
304
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
305
+ <button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button>
306
+ </td>
307
+ </tr>
308
+ <tr>
309
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">PT-10041</td>
310
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">김영호</td>
311
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">70</td>
312
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-06-15 09:30</td>
313
+ <td class="px-6 py-4 whitespace-nowrap">
314
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">중간위험</span>
315
+ </td>
316
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">58.7%</td>
317
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
318
+ <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-eye"></i></button>
319
+ <button class="text-green-600 hover:text-green-900"><i class="fas fa-edit"></i></button>
320
+ </td>
321
+ </tr>
322
+ </tbody>
323
+ </table>
324
+ </div>
325
+ <div class="px-6 py-4 bg-gray-50 text-right">
326
+ <button class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none">
327
+ 더 보기 <i class="fas fa-chevron-right ml-1"></i>
328
+ </button>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- 위험군 환자 카드 -->
333
+ <div class="mb-6">
334
+ <h3 class="text-lg font-semibold text-gray-800 mb-4">고위험군 환자 목록</h3>
335
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
336
+ <div class="patient-card bg-white rounded-lg shadow overflow-hidden transition duration-300">
337
+ <div class="bg-red-600 px-4 py-2">
338
+ <h4 class="text-white font-semibold">김철수 (72세)</h4>
339
+ </div>
340
+ <div class="p-4">
341
+ <div class="flex justify-between mb-3">
342
+ <span class="text-sm text-gray-500">진단일: 2023-06-15</span>
343
+ <span class="text-sm font-semibold text-red-600">위험도: 87.3%</span>
344
+ </div>
345
+ <div class="mb-3">
346
+ <p class="text-sm text-gray-700">최근 증상: 기억력 저하, 길 찾기 어려움, 반복적인 질문</p>
347
+ </div>
348
+ <div class="flex justify-between">
349
+ <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
350
+ <i class="fas fa-file-medical mr-1"></i> 상세 기록
351
+ </button>
352
+ <button class="text-sm bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded flex items-center">
353
+ <i class="fas fa-bell mr-1"></i> 알림 보내기
354
+ </button>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ <div class="patient-card bg-white rounded-lg shadow overflow-hidden transition duration-300">
359
+ <div class="bg-red-600 px-4 py-2">
360
+ <h4 class="text-white font-semibold">정순자 (81세)</h4>
361
+ </div>
362
+ <div class="p-4">
363
+ <div class="flex justify-between mb-3">
364
+ <span class="text-sm text-gray-500">진단일: 2023-06-15</span>
365
+ <span class="text-sm font-semibold text-red-600">위험도: 91.5%</span>
366
+ </div>
367
+ <div class="mb-3">
368
+ <p class="text-sm text-gray-700">최근 증상: 시간 개념 상실, 가족 인식 불가, 식사 거부</p>
369
+ </div>
370
+ <div class="flex justify-between">
371
+ <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
372
+ <i class="fas fa-file-medical mr-1"></i> 상세 기록
373
+ </button>
374
+ <button class="text-sm bg-red-600 hover:bg-red-700 text-white px-3 py-1 rounded flex items-center">
375
+ <i class="fas fa-bell mr-1"></i> 알림 보내기
376
+ </button>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ <div class="patient-card bg-white rounded-lg shadow overflow-hidden transition duration-300">
381
+ <div class="bg-orange-500 px-4 py-2">
382
+ <h4 class="text-white font-semibold">이영희 (68세)</h4>
383
+ </div>
384
+ <div class="p-4">
385
+ <div class="flex justify-between mb-3">
386
+ <span class="text-sm text-gray-500">진단일: 2023-06-15</span>
387
+ <span class="text-sm font-semibold text-orange-600">위험도: 65.2%</span>
388
+ </div>
389
+ <div class="mb-3">
390
+ <p class="text-sm text-gray-700">최근 증상: 단기 기억력 저하, 계산 능력 감소, 기분 변화</p>
391
+ </div>
392
+ <div class="flex justify-between">
393
+ <button class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
394
+ <i class="fas fa-file-medical mr-1"></i> 상세 기록
395
+ </button>
396
+ <button class="text-sm bg-orange-500 hover:bg-orange-600 text-white px-3 py-1 rounded flex items-center">
397
+ <i class="fas fa-bell mr-1"></i> 알림 보내기
398
+ </button>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </div>
404
+ </main>
405
+ </div>
406
+ </div>
407
+
408
+ <script>
409
+ // 사이드바 토글 기능
410
+ const toggleSidebar = document.getElementById('toggleSidebar');
411
+ const sidebar = document.querySelector('.sidebar');
412
+ const mainContent = document.querySelector('.main-content');
413
+ const userInfo = document.querySelector('.user-info');
414
+
415
+ toggleSidebar.addEventListener('click', () => {
416
+ sidebar.classList.toggle('sidebar-collapsed');
417
+ sidebar.classList.toggle('sidebar-expanded');
418
+
419
+ if (sidebar.classList.contains('sidebar-collapsed')) {
420
+ mainContent.style.marginLeft = '70px';
421
+ userInfo.style.display = 'none';
422
+ } else {
423
+ mainContent.style.marginLeft = '250px';
424
+ userInfo.style.display = 'block';
425
+ }
426
+ });
427
+
428
+ // 다크 모드 토글 기능
429
+ const darkModeToggle = document.getElementById('darkModeToggle');
430
+ const body = document.body;
431
+
432
+ darkModeToggle.addEventListener('click', () => {
433
+ body.classList.toggle('dark-mode');
434
+
435
+ if (body.classList.contains('dark-mode')) {
436
+ darkModeToggle.innerHTML = '<i class="fas fa-sun mr-3"></i><span class="whitespace-nowrap">라이트 모드</span>';
437
+ } else {
438
+ darkModeToggle.innerHTML = '<i class="fas fa-moon mr-3"></i><span class="whitespace-nowrap">다크 모드</span>';
439
+ }
440
+ });
441
+
442
+ // 차트 초기화
443
+ document.addEventListener('DOMContentLoaded', function() {
444
+ // 주간 진단 추이 차트
445
+ const diagnosisCtx = document.getElementById('diagnosisChart').getContext('2d');
446
+ const diagnosisChart = new Chart(diagnosisCtx, {
447
+ type: 'line',
448
+ data: {
449
+ labels: ['6/9', '6/10', '6/11', '6/12', '6/13', '6/14', '6/15'],
450
+ datasets: [
451
+ {
452
+ label: '전체 진단 수',
453
+ data: [32, 28, 35, 40, 38, 45, 42],
454
+ borderColor: 'rgba(59, 130, 246, 1)',
455
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
456
+ tension: 0.3,
457
+ fill: true
458
+ },
459
+ {
460
+ label: '치매 위험군',
461
+ data: [8, 7, 9, 12, 10, 14, 11],
462
+ borderColor: 'rgba(239, 68, 68, 1)',
463
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
464
+ tension: 0.3,
465
+ fill: true
466
+ }
467
+ ]
468
+ },
469
+ options: {
470
+ responsive: true,
471
+ plugins: {
472
+ legend: {
473
+ position: 'top',
474
+ },
475
+ tooltip: {
476
+ mode: 'index',
477
+ intersect: false,
478
+ }
479
+ },
480
+ scales: {
481
+ y: {
482
+ beginAtZero: true
483
+ }
484
+ }
485
+ }
486
+ });
487
+
488
+ // 치매 단계 분포 차트
489
+ const dementiaStageCtx = document.getElementById('dementiaStageChart').getContext('2d');
490
+ const dementiaStageChart = new Chart(dementiaStageCtx, {
491
+ type: 'doughnut',
492
+ data: {
493
+ labels: ['정상', '경도인지장애', '초기 치매', '중등도 치매', '중증 치매'],
494
+ datasets: [{
495
+ data: [650, 320, 187, 65, 26],
496
+ backgroundColor: [
497
+ 'rgba(74, 222, 128, 0.8)',
498
+ 'rgba(250, 204, 21, 0.8)',
499
+ 'rgba(249, 115, 22, 0.8)',
500
+ 'rgba(239, 68, 68, 0.8)',
501
+ 'rgba(126, 34, 206, 0.8)'
502
+ ],
503
+ borderColor: [
504
+ 'rgba(74, 222, 128, 1)',
505
+ 'rgba(250, 204, 21, 1)',
506
+ 'rgba(249, 115, 22, 1)',
507
+ 'rgba(239, 68, 68, 1)',
508
+ 'rgba(126, 34, 206, 1)'
509
+ ],
510
+ borderWidth: 1
511
+ }]
512
+ },
513
+ options: {
514
+ responsive: true,
515
+ plugins: {
516
+ legend: {
517
+ position: 'right',
518
+ },
519
+ tooltip: {
520
+ callbacks: {
521
+ label: function(context) {
522
+ const label = context.label || '';
523
+ const value = context.raw || 0;
524
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
525
+ const percentage = Math.round((value / total) * 100);
526
+ return `${label}: ${value} (${percentage}%)`;
527
+ }
528
+ }
529
+ }
530
+ }
531
+ }
532
+ });
533
+
534
+ // 다크 모드 변경 시 차트 업데이트
535
+ darkModeToggle.addEventListener('click', function() {
536
+ // 차트 색상 업데이트 로직 추가 가능
537
+ diagnosisChart.update();
538
+ dementiaStageChart.update();
539
+ });
540
+ });
541
+ </script>
542
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hunie/snm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
543
+ </html>