Hugging Face's logo

Spaces:
Mineru
/
care
Running

App Files Community
Mineru commited on
Commit
5cc0c1d
·
verified ·
1 Parent(s): 0f396c1

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +624 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Care
3
- emoji: 🚀
4
- colorFrom: pink
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: care
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: pink
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,624 @@
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>육아퇴근</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>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: '#6BC8F2',
15
+ secondary: '#EF93BB',
16
+ accent: '#F8B74A',
17
+ success: '#4FBAA1',
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
25
+
26
+ body {
27
+ font-family: 'Noto Sans KR', sans-serif;
28
+ max-width: 430px;
29
+ margin: 0 auto;
30
+ position: relative;
31
+ height: 100vh;
32
+ background-color: #f8f9fa;
33
+ }
34
+
35
+ .slide-in {
36
+ animation: slideIn 0.3s forwards;
37
+ }
38
+
39
+ .slide-out {
40
+ animation: slideOut 0.3s forwards;
41
+ }
42
+
43
+ @keyframes slideIn {
44
+ from { transform: translateX(100%); }
45
+ to { transform: translateX(0); }
46
+ }
47
+
48
+ @keyframes slideOut {
49
+ from { transform: translateX(0); }
50
+ to { transform: translateX(100%); }
51
+ }
52
+
53
+ .fade-in {
54
+ animation: fadeIn 0.5s;
55
+ }
56
+
57
+ @keyframes fadeIn {
58
+ from { opacity: 0; }
59
+ to { opacity: 1; }
60
+ }
61
+
62
+ .chip-selected {
63
+ box-shadow: 0 0 0 2px #6BC8F2;
64
+ }
65
+
66
+ .record-card {
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ .record-card:hover {
71
+ transform: translateY(-2px);
72
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
73
+ }
74
+
75
+ .chat-bubble {
76
+ max-width: 70%;
77
+ border-radius: 1rem;
78
+ padding: 0.75rem;
79
+ margin-bottom: 0.5rem;
80
+ }
81
+
82
+ .user-bubble {
83
+ background-color: #6BC8F2;
84
+ color: white;
85
+ align-self: flex-end;
86
+ border-bottom-right-radius: 0.25rem;
87
+ }
88
+
89
+ .ai-bubble {
90
+ background-color: #f1f1f1;
91
+ color: #333;
92
+ align-self: flex-start;
93
+ border-bottom-left-radius: 0.25rem;
94
+ }
95
+ </style>
96
+ </head>
97
+ <body class="relative overflow-x-hidden">
98
+ <!-- Splash Screen -->
99
+ <div id="splash" class="absolute inset-0 bg-white flex flex-col items-center justify-center z-50 fade-in">
100
+ <div class="w-40 h-40 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center mb-6">
101
+ <i class="fas fa-baby text-white text-6xl"></i>
102
+ </div>
103
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">육아퇴근</h1>
104
+ <p class="text-gray-500">아이 돌봄을 더 쉽게, 더 즐겁게</p>
105
+ </div>
106
+
107
+ <!-- Main Container -->
108
+ <div id="app" class="h-screen flex flex-col hidden">
109
+ <!-- Header -->
110
+ <header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between sticky top-0 z-10">
111
+ <h1 class="text-xl font-bold text-gray-800">육아퇴근</h1>
112
+ <div class="flex items-center space-x-3">
113
+ <button class="text-gray-600">
114
+ <i class="fas fa-bell"></i>
115
+ </button>
116
+ <button class="text-gray-600">
117
+ <i class="fas fa-user-circle text-xl"></i>
118
+ </button>
119
+ </div>
120
+ </header>
121
+
122
+ <!-- Main Content -->
123
+ <main id="content" class="flex-1 overflow-y-auto pb-16">
124
+ <!-- Splash Page (hidden by default) -->
125
+ <div id="splash-page" class="h-full flex flex-col items-center justify-center bg-white">
126
+ <div class="w-40 h-40 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center mb-6">
127
+ <i class="fas fa-baby text-white text-6xl"></i>
128
+ </div>
129
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">육아퇴근</h1>
130
+ <p class="text-gray-500 mb-8">아이 돌��을 더 쉽게, 더 즐겁게</p>
131
+ <button id="start-btn" class="bg-primary text-white px-8 py-3 rounded-full font-medium hover:bg-blue-400 transition">
132
+ 시작하기
133
+ </button>
134
+ </div>
135
+
136
+ <!-- Registration Page -->
137
+ <div id="register-page" class="hidden p-6 bg-white">
138
+ <h2 class="text-2xl font-bold text-gray-800 mb-6">아이 정보 등록</h2>
139
+
140
+ <div class="mb-6">
141
+ <label class="block text-gray-700 mb-2">아이 이름</label>
142
+ <input type="text" placeholder="아이 이름을 입력해주세요" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
143
+ </div>
144
+
145
+ <div class="mb-6">
146
+ <label class="block text-gray-700 mb-2">출산 예정일 또는 출생일</label>
147
+ <input type="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary">
148
+ </div>
149
+
150
+ <div class="mb-8">
151
+ <label class="block text-gray-700 mb-2">성별</label>
152
+ <div class="flex space-x-4">
153
+ <button class="flex-1 py-3 border border-gray-300 rounded-lg flex items-center justify-center">
154
+ <i class="fas fa-mars text-blue-500 mr-2"></i>
155
+ <span>남아</span>
156
+ </button>
157
+ <button class="flex-1 py-3 border border-gray-300 rounded-lg flex items-center justify-center">
158
+ <i class="fas fa-venus text-pink-500 mr-2"></i>
159
+ <span>여아</span>
160
+ </button>
161
+ </div>
162
+ </div>
163
+
164
+ <button id="complete-register" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-400 transition">
165
+ 등록 완료
166
+ </button>
167
+ </div>
168
+
169
+ <!-- Main Page -->
170
+ <div id="main-page" class="hidden p-4">
171
+ <div class="bg-gradient-to-r from-primary to-secondary p-4 rounded-xl text-white mb-6">
172
+ <h2 class="font-bold text-lg mb-1">현재 추천 컨텐츠</h2>
173
+ <p class="text-sm opacity-90">5개월 아기에게 적합한 활동을 추천해요</p>
174
+ </div>
175
+
176
+ <div class="mb-6">
177
+ <h3 class="font-bold text-gray-800 mb-3">개월 수 선택</h3>
178
+ <div class="flex overflow-x-auto pb-2 space-x-2">
179
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">신생아</button>
180
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">1개월</button>
181
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">2개월</button>
182
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">3개월</button>
183
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">4개월</button>
184
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap chip-selected">5개월</button>
185
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">6개월</button>
186
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">7개월</button>
187
+ <button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">8개월</button>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="grid grid-cols-2 gap-3 mb-4">
192
+ <div class="bg-white p-3 rounded-xl shadow-sm record-card">
193
+ <div class="w-full h-32 bg-primary rounded-lg mb-2 flex items-center justify-center">
194
+ <i class="fas fa-music text-white text-3xl"></i>
195
+ </div>
196
+ <h3 class="font-medium text-sm">감각 발달 음악</h3>
197
+ <p class="text-xs text-gray-500">5개월 아기에게 적합</p>
198
+ </div>
199
+ <div class="bg-white p-3 rounded-xl shadow-sm record-card">
200
+ <div class="w-full h-32 bg-secondary rounded-lg mb-2 flex items-center justify-center">
201
+ <i class="fas fa-book text-white text-3xl"></i>
202
+ </div>
203
+ <h3 class="font-medium text-sm">첫 그림�� 추천</h3>
204
+ <p class="text-xs text-gray-500">5개월 아기에게 적합</p>
205
+ </div>
206
+ <div class="bg-white p-3 rounded-xl shadow-sm record-card">
207
+ <div class="w-full h-32 bg-accent rounded-lg mb-2 flex items-center justify-center">
208
+ <i class="fas fa-utensils text-white text-3xl"></i>
209
+ </div>
210
+ <h3 class="font-medium text-sm">이유식 시작 가이드</h3>
211
+ <p class="text-xs text-gray-500">5개월 아기에게 적합</p>
212
+ </div>
213
+ <div class="bg-white p-3 rounded-xl shadow-sm record-card">
214
+ <div class="w-full h-32 bg-success rounded-lg mb-2 flex items-center justify-center">
215
+ <i class="fas fa-baby-carriage text-white text-3xl"></i>
216
+ </div>
217
+ <h3 class="font-medium text-sm">기저귀 선택 팁</h3>
218
+ <p class="text-xs text-gray-500">5개월 아기에게 적합</p>
219
+ </div>
220
+ </div>
221
+
222
+ <h3 class="font-bold text-gray-800 mb-3 mt-6">5개월 아기 성장 발달</h3>
223
+ <div class="bg-white rounded-xl p-4 shadow-sm mb-6">
224
+ <div class="flex items-start mb-3">
225
+ <div class="bg-primary bg-opacity-10 p-2 rounded-lg mr-3">
226
+ <i class="fas fa-ruler text-primary"></i>
227
+ </div>
228
+ <div>
229
+ <h4 class="font-medium text-gray-800">신체 발달</h4>
230
+ <p class="text-sm text-gray-600">뒤집기를 시도하고, 물건을 잡을 수 있어요</p>
231
+ </div>
232
+ </div>
233
+ <div class="flex items-start mb-3">
234
+ <div class="bg-secondary bg-opacity-10 p-2 rounded-lg mr-3">
235
+ <i class="fas fa-brain text-secondary"></i>
236
+ </div>
237
+ <div>
238
+ <h4 class="font-medium text-gray-800">인지 발달</h4>
239
+ <p class="text-sm text-gray-600">낯선 사람을 구분하고 반응을 보이기 시작해요</p>
240
+ </div>
241
+ </div>
242
+ <div class="flex items-start">
243
+ <div class="bg-accent bg-opacity-10 p-2 rounded-lg mr-3">
244
+ <i class="fas fa-comment-dots text-accent"></i>
245
+ </div>
246
+ <div>
247
+ <h4 class="font-medium text-gray-800">언어 발달</h4>
248
+ <p class="text-sm text-gray-600">옹알이가 다양해지고 소리에 반응해요</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Record Page -->
255
+ <div id="record-page" class="hidden p-4">
256
+ <h2 class="text-xl font-bold text-gray-800 mb-4">기록</h2>
257
+
258
+ <div class="bg-white rounded-xl p-4 shadow-sm mb-6">
259
+ <div class="flex justify-between items-center mb-3">
260
+ <h3 class="font-medium text-gray-800">오늘의 활동 요약</h3>
261
+ <button class="text-primary text-sm font-medium">더보기</button>
262
+ </div>
263
+
264
+ <div class="grid grid-cols-3 gap-2 text-center">
265
+ <div class="p-2">
266
+ <div class="bg-primary bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-1">
267
+ <i class="fas fa-bottle-water text-primary"></i>
268
+ </div>
269
+ <p class="text-xs font-medium">수유</p>
270
+ <p class="text-xs text-gray-500">4회</p>
271
+ </div>
272
+ <div class="p-2">
273
+ <div class="bg-secondary bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-1">
274
+ <i class="fas fa-baby text-secondary"></i>
275
+ </div>
276
+ <p class="text-xs font-medium">기저귀</p>
277
+ <p class="text-xs text-gray-500">6회</p>
278
+ </div>
279
+ <div class="p-2">
280
+ <div class="bg-accent bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-1">
281
+ <i class="fas fa-moon text-accent"></i>
282
+ </div>
283
+ <p class="text-xs font-medium">수면</p>
284
+ <p class="text-xs text-gray-500">3시간</p>
285
+ </div>
286
+ </div>
287
+ </div>
288
+
289
+ <div class="flex justify-between items-center mb-4">
290
+ <h3 class="font-medium text-gray-800">활동 기록</h3>
291
+ <div class="flex space-x-2">
292
+ <button class="px-3 py-1 bg-gray-100 rounded-full text-xs flex items-center">
293
+ <i class="fas fa-filter text-gray-500 mr-1"></i>
294
+ <span>필터</span>
295
+ </button>
296
+ <button class="px-3 py-1 bg-primary text-white rounded-full text-xs">
297
+ + 기록
298
+ </button>
299
+ </div>
300
+ </div>
301
+
302
+ <div class="space-y-3">
303
+ <div class="bg-white rounded-lg p-3 shadow-sm record-card">
304
+ <div class="flex items-center">
305
+ <div class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
306
+ <i class="fas fa-bottle-water text-xs"></i>
307
+ </div>
308
+ <div class="flex-1">
309
+ <h4 class="font-medium text-sm">수유 기록</h4>
310
+ <p class="text-xs text-gray-500">오전 10:30 • 분유 120ml</p>
311
+ </div>
312
+ <button class="text-gray-400">
313
+ <i class="fas fa-ellipsis-v"></i>
314
+ </button>
315
+ </div>
316
+ </div>
317
+
318
+ <div class="bg-white rounded-lg p-3 shadow-sm record-card">
319
+ <div class="flex items-center">
320
+ <div class="bg-secondary text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
321
+ <i class="fas fa-baby text-xs"></i>
322
+ </div>
323
+ <div class="flex-1">
324
+ <h4 class="font-medium text-sm">기저귀 교체</h4>
325
+ <p class="text-xs text-gray-500">오전 11:15 • 대변</p>
326
+ </div>
327
+ <button class="text-gray-400">
328
+ <i class="fas fa-ellipsis-v"></i>
329
+ </button>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="bg-white rounded-lg p-3 shadow-sm record-card">
334
+ <div class="flex items-center">
335
+ <div class="bg-accent text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
336
+ <i class="fas fa-moon text-xs"></i>
337
+ </div>
338
+ <div class="flex-1">
339
+ <h4 class="font-medium text-sm">낮잠</h4>
340
+ <p class="text-xs text-gray-500">오후 1:00 - 오후 2:30 (1시간 30분)</p>
341
+ </div>
342
+ <button class="text-gray-400">
343
+ <i class="fas fa-ellipsis-v"></i>
344
+ </button>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="bg-white rounded-lg p-3 shadow-sm record-card">
349
+ <div class="flex items-center">
350
+ <div class="bg-success text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
351
+ <i class="fas fa-temperature-high text-xs"></i>
352
+ </div>
353
+ <div class="flex-1">
354
+ <h4 class="font-medium text-sm">체온 측정</h4>
355
+ <p class="text-xs text-gray-500">오후 4:20 • 36.8°C</p>
356
+ </div>
357
+ <button class="text-gray-400">
358
+ <i class="fas fa-ellipsis-v"></i>
359
+ </button>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+
365
+ <!-- CareTalk Page -->
366
+ <div id="caretalk-page" class="hidden h-full flex flex-col">
367
+ <div class="p-4 bg-white shadow-sm">
368
+ <h2 class="text-xl font-bold text-gray-800">케어톡</h2>
369
+ <p class="text-sm text-gray-500">육아 전문 AI와 대화해보세요</p>
370
+ </div>
371
+
372
+ <div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-3">
373
+ <div class="flex flex-col">
374
+ <div class="ai-bubble chat-bubble">
375
+ <p>안녕하세요! 육아퇴근 AI 도우미입니다. 😊<br>육아 관련 어떤 고민이 있으신가요?</p>
376
+ </div>
377
+ </div>
378
+
379
+ <div class="flex flex-col">
380
+ <div class="user-bubble chat-bubble">
381
+ <p>5개월 아기 이유식 시작할 때 주의할 점이 뭐예요?</p>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="flex flex-col">
386
+ <div class="ai-bubble chat-bubble">
387
+ <p>5개월 아기 이유식 시작 시 주의할 점은:<br>
388
+ 1. 쌀미음 같은 순한 음식부터 시작<br>
389
+ 2. 하루 1회, 1-2스푼으로 시작<br>
390
+ 3. 알레르기 유발 음식은 피하기<br>
391
+ 4. 아기의 반응 꼭 관찰하기<br>
392
+ 더 자세한 정보를 원하시나요?</p>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="p-3 bg-white border-t border-gray-200">
398
+ <div class="flex items-center">
399
+ <button class="text-gray-500 mx-2">
400
+ <i class="fas fa-microphone"></i>
401
+ </button>
402
+ <input type="text" placeholder="메시지를 입력하세요..." class="flex-1 border border-gray-300 rounded-full px-4 py-2 focus:outline-none focus:ring-1 focus:ring-primary">
403
+ <button class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center ml-2">
404
+ <i class="fas fa-paper-plane"></i>
405
+ </button>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- CareService Page -->
411
+ <div id="careservice-page" class="hidden p-4">
412
+ <h2 class="text-xl font-bold text-gray-800 mb-4">케어 서비스</h2>
413
+
414
+ <div class="bg-gradient-to-r from-primary to-secondary p-4 rounded-xl text-white mb-6">
415
+ <h3 class="font-bold text-lg mb-1">추천 서비스</h3>
416
+ <p class="text-sm opacity-90">5개월 아기에게 적합한 서비스</p>
417
+ </div>
418
+
419
+ <div class="space-y-4">
420
+ <div class="bg-white rounded-xl p-4 shadow-sm record-card">
421
+ <div class="flex items-start">
422
+ <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
423
+ <i class="fas fa-utensils text-primary text-2xl"></i>
424
+ </div>
425
+ <div class="flex-1">
426
+ <h3 class="font-bold text-gray-800 mb-1">이유식 전문가</h3>
427
+ <p class="text-sm text-gray-600 mb-2">5개월 아기 맞춤형 이유식 조리 및 영양 상담</p>
428
+ <div class="flex flex-wrap gap-1">
429
+ <span class="px-2 py-1 bg-primary bg-opacity-10 text-primary text-xs rounded-full">이유식</span>
430
+ <span class="px-2 py-1 bg-primary bg-opacity-10 text-primary text-xs rounded-full">영양</span>
431
+ <span class="px-2 py-1 bg-primary bg-opacity-10 text-primary text-xs rounded-full">5개월</span>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+
437
+ <div class="bg-white rounded-xl p-4 shadow-sm record-card">
438
+ <div class="flex items-start">
439
+ <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
440
+ <i class="fas fa-baby text-secondary text-2xl"></i>
441
+ </div>
442
+ <div class="flex-1">
443
+ <h3 class="font-bold text-gray-800 mb-1">산후도우미</h3>
444
+ <p class="text-sm text-gray-600 mb-2">경험 많은 산후조리사가 돌봄 서비스 제공</p>
445
+ <div class="flex flex-wrap gap-1">
446
+ <span class="px-2 py-1 bg-secondary bg-opacity-10 text-secondary text-xs rounded-full">산후조리</span>
447
+ <span class="px-2 py-1 bg-secondary bg-opacity-10 text-secondary text-xs rounded-full">24시간</span>
448
+ <span class="px-2 py-1 bg-secondary bg-opacity-10 text-secondary text-xs rounded-full">전문가</span>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+
454
+ <div class="bg-white rounded-xl p-4 shadow-sm record-card">
455
+ <div class="flex items-start">
456
+ <div class="w-16 h-16 bg-accent bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
457
+ <i class="fas fa-home text-accent text-2xl"></i>
458
+ </div>
459
+ <div class="flex-1">
460
+ <h3 class="font-bold text-gray-800 mb-1">가사도우미</h3>
461
+ <p class="text-sm text-gray-600 mb-2">육아로 바쁜 일상 속 가사 일을 도와드립니다</p>
462
+ <div class="flex flex-wrap gap-1">
463
+ <span class="px-2 py-1 bg-accent bg-opacity-10 text-accent text-xs rounded-full">청소</span>
464
+ <span class="px-2 py-1 bg-accent bg-opacity-10 text-accent text-xs rounded-full">세탁</span>
465
+ <span class="px-2 py-1 bg-accent bg-opacity-10 text-accent text-xs rounded-full">요리</span>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+
471
+ <div class="bg-white rounded-xl p-4 shadow-sm record-card">
472
+ <div class="flex items-start">
473
+ <div class="w-16 h-16 bg-success bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
474
+ <i class="fas fa-hand-holding-heart text-success text-2xl"></i>
475
+ </div>
476
+ <div class="flex-1">
477
+ <h3 class="font-bold text-gray-800 mb-1">아이돌보미</h3>
478
+ <p class="text-sm text-gray-600 mb-2">자격증 소지 전문 돌보미가 안전하게 돌봐드립니다</p>
479
+ <div class="flex flex-wrap gap-1">
480
+ <span class="px-2 py-1 bg-success bg-opacity-10 text-success text-xs rounded-full">전문가</span>
481
+ <span class="px-2 py-1 bg-success bg-opacity-10 text-success text-xs rounded-full">안전</span>
482
+ <span class="px-2 py-1 bg-success bg-opacity-10 text-success text-xs rounded-full">시간제</span>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </main>
490
+
491
+ <!-- Bottom Navigation -->
492
+ <nav class="bg-white border-t border-gray-200 py-2 px-4 flex justify-around items-center fixed bottom-0 w-full max-w-md">
493
+ <button class="nav-btn flex flex-col items-center text-primary" data-page="main-page">
494
+ <i class="fas fa-home text-lg"></i>
495
+ <span class="text-xs mt-1">홈</span>
496
+ </button>
497
+ <button class="nav-btn flex flex-col items-center text-gray-500" data-page="record-page">
498
+ <i class="fas fa-clipboard-list text-lg"></i>
499
+ <span class="text-xs mt-1">기록</span>
500
+ </button>
501
+ <button class="nav-btn flex flex-col items-center text-gray-500" data-page="caretalk-page">
502
+ <i class="fas fa-comment-dots text-lg"></i>
503
+ <span class="text-xs mt-1">케어톡</span>
504
+ </button>
505
+ <button class="nav-btn flex flex-col items-center text-gray-500" data-page="careservice-page">
506
+ <i class="fas fa-hands-helping text-lg"></i>
507
+ <span class="text-xs mt-1">서비스</span>
508
+ </button>
509
+ </nav>
510
+ </div>
511
+
512
+ <script>
513
+ // Hide splash screen after 2 seconds
514
+ setTimeout(() => {
515
+ document.getElementById('splash').classList.add('hidden');
516
+ document.getElementById('app').classList.remove('hidden');
517
+ document.getElementById('splash-page').classList.remove('hidden');
518
+ }, 2000);
519
+
520
+ // Navigation functionality
521
+ const navButtons = document.querySelectorAll('.nav-btn');
522
+ const pages = document.querySelectorAll('[id$="-page"]');
523
+
524
+ navButtons.forEach(button => {
525
+ button.addEventListener('click', () => {
526
+ const targetPage = button.getAttribute('data-page');
527
+
528
+ // Update active state
529
+ navButtons.forEach(btn => {
530
+ btn.classList.remove('text-primary');
531
+ btn.classList.add('text-gray-500');
532
+ });
533
+ button.classList.remove('text-gray-500');
534
+ button.classList.add('text-primary');
535
+
536
+ // Hide all pages
537
+ pages.forEach(page => {
538
+ page.classList.add('hidden');
539
+ });
540
+
541
+ // Show target page
542
+ document.getElementById(targetPage).classList.remove('hidden');
543
+ });
544
+ });
545
+
546
+ // Start button click handler
547
+ document.getElementById('start-btn').addEventListener('click', () => {
548
+ document.getElementById('splash-page').classList.add('hidden');
549
+ document.getElementById('register-page').classList.remove('hidden');
550
+ });
551
+
552
+ // Complete registration button
553
+ document.getElementById('complete-register').addEventListener('click', () => {
554
+ document.getElementById('register-page').classList.add('hidden');
555
+ document.getElementById('main-page').classList.remove('hidden');
556
+
557
+ // Set main page as active in nav
558
+ navButtons.forEach(btn => {
559
+ btn.classList.remove('text-primary');
560
+ btn.classList.add('text-gray-500');
561
+ if(btn.getAttribute('data-page') === 'main-page') {
562
+ btn.classList.remove('text-gray-500');
563
+ btn.classList.add('text-primary');
564
+ }
565
+ });
566
+ });
567
+
568
+ // Chip selection functionality
569
+ const chips = document.querySelectorAll('.chip');
570
+ chips.forEach(chip => {
571
+ chip.addEventListener('click', () => {
572
+ chips.forEach(c => c.classList.remove('chip-selected', 'bg-primary', 'text-white'));
573
+ chip.classList.add('chip-selected', 'bg-primary', 'text-white');
574
+ });
575
+ });
576
+
577
+ // Simulate chat functionality
578
+ const chatInput = document.querySelector('#caretalk-page input');
579
+ const chatContainer = document.getElementById('chat-container');
580
+
581
+ document.querySelector('#caretalk-page button').addEventListener('click', () => {
582
+ if(chatInput.value.trim() !== '') {
583
+ // Add user message
584
+ const userMsg = document.createElement('div');
585
+ userMsg.className = 'flex flex-col';
586
+ userMsg.innerHTML = `
587
+ <div class="user-bubble chat-bubble">
588
+ <p>${chatInput.value}</p>
589
+ </div>
590
+ `;
591
+ chatContainer.appendChild(userMsg);
592
+
593
+ // Simulate AI response after a delay
594
+ setTimeout(() => {
595
+ const aiMsg = document.createElement('div');
596
+ aiMsg.className = 'flex flex-col';
597
+ aiMsg.innerHTML = `
598
+ <div class="ai-bubble chat-bubble">
599
+ <p>AI가 "${chatInput.value}"에 대한 답변을 준비 중입니다. 실제 앱에서는 전문 AI가 상세한 답변을 제공해 드릴 거예요!</p>
600
+ </div>
601
+ `;
602
+ chatContainer.appendChild(aiMsg);
603
+
604
+ // Scroll to bottom
605
+ chatContainer.scrollTop = chatContainer.scrollHeight;
606
+ }, 1000);
607
+
608
+ // Clear input
609
+ chatInput.value = '';
610
+
611
+ // Scroll to bottom
612
+ chatContainer.scrollTop = chatContainer.scrollHeight;
613
+ }
614
+ });
615
+
616
+ // Allow pressing Enter to send message
617
+ chatInput.addEventListener('keypress', (e) => {
618
+ if(e.key === 'Enter') {
619
+ document.querySelector('#caretalk-page button').click();
620
+ }
621
+ });
622
+ </script>
623
+ <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=Mineru/care" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
624
+ </html>