Hugging Face's logo

Spaces:
Mineru
/
care
Running

App Files Community
care / index.html
Mineru's picture
Mineru
Add 2 files
5cc0c1d verified
raw
history blame contribute delete
33.7 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>์œก์•„ํ‡ด๊ทผ</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#6BC8F2',
secondary: '#EF93BB',
accent: '#F8B74A',
success: '#4FBAA1',
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
body {
font-family: 'Noto Sans KR', sans-serif;
max-width: 430px;
margin: 0 auto;
position: relative;
height: 100vh;
background-color: #f8f9fa;
}
.slide-in {
animation: slideIn 0.3s forwards;
}
.slide-out {
animation: slideOut 0.3s forwards;
}
@keyframes slideIn {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slideOut {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.fade-in {
animation: fadeIn 0.5s;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.chip-selected {
box-shadow: 0 0 0 2px #6BC8F2;
}
.record-card {
transition: all 0.3s ease;
}
.record-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.chat-bubble {
max-width: 70%;
border-radius: 1rem;
padding: 0.75rem;
margin-bottom: 0.5rem;
}
.user-bubble {
background-color: #6BC8F2;
color: white;
align-self: flex-end;
border-bottom-right-radius: 0.25rem;
}
.ai-bubble {
background-color: #f1f1f1;
color: #333;
align-self: flex-start;
border-bottom-left-radius: 0.25rem;
}
</style>
</head>
<body class="relative overflow-x-hidden">
<!-- Splash Screen -->
<div id="splash" class="absolute inset-0 bg-white flex flex-col items-center justify-center z-50 fade-in">
<div class="w-40 h-40 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center mb-6">
<i class="fas fa-baby text-white text-6xl"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">์œก์•„ํ‡ด๊ทผ</h1>
<p class="text-gray-500">์•„์ด ๋Œ๋ด„์„ ๋” ์‰ฝ๊ฒŒ, ๋” ์ฆ๊ฒ๊ฒŒ</p>
</div>
<!-- Main Container -->
<div id="app" class="h-screen flex flex-col hidden">
<!-- Header -->
<header class="bg-white shadow-sm py-4 px-6 flex items-center justify-between sticky top-0 z-10">
<h1 class="text-xl font-bold text-gray-800">์œก์•„ํ‡ด๊ทผ</h1>
<div class="flex items-center space-x-3">
<button class="text-gray-600">
<i class="fas fa-bell"></i>
</button>
<button class="text-gray-600">
<i class="fas fa-user-circle text-xl"></i>
</button>
</div>
</header>
<!-- Main Content -->
<main id="content" class="flex-1 overflow-y-auto pb-16">
<!-- Splash Page (hidden by default) -->
<div id="splash-page" class="h-full flex flex-col items-center justify-center bg-white">
<div class="w-40 h-40 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center mb-6">
<i class="fas fa-baby text-white text-6xl"></i>
</div>
<h1 class="text-3xl font-bold text-gray-800 mb-2">์œก์•„ํ‡ด๊ทผ</h1>
<p class="text-gray-500 mb-8">์•„์ด ๋Œ๋ด„์„ ๋” ์‰ฝ๊ฒŒ, ๋” ์ฆ๊ฒ๊ฒŒ</p>
<button id="start-btn" class="bg-primary text-white px-8 py-3 rounded-full font-medium hover:bg-blue-400 transition">
์‹œ์ž‘ํ•˜๊ธฐ
</button>
</div>
<!-- Registration Page -->
<div id="register-page" class="hidden p-6 bg-white">
<h2 class="text-2xl font-bold text-gray-800 mb-6">์•„์ด ์ •๋ณด ๋“ฑ๋ก</h2>
<div class="mb-6">
<label class="block text-gray-700 mb-2">์•„์ด ์ด๋ฆ„</label>
<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">
</div>
<div class="mb-6">
<label class="block text-gray-700 mb-2">์ถœ์‚ฐ ์˜ˆ์ •์ผ ๋˜๋Š” ์ถœ์ƒ์ผ</label>
<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">
</div>
<div class="mb-8">
<label class="block text-gray-700 mb-2">์„ฑ๋ณ„</label>
<div class="flex space-x-4">
<button class="flex-1 py-3 border border-gray-300 rounded-lg flex items-center justify-center">
<i class="fas fa-mars text-blue-500 mr-2"></i>
<span>๋‚จ์•„</span>
</button>
<button class="flex-1 py-3 border border-gray-300 rounded-lg flex items-center justify-center">
<i class="fas fa-venus text-pink-500 mr-2"></i>
<span>์—ฌ์•„</span>
</button>
</div>
</div>
<button id="complete-register" class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-blue-400 transition">
๋“ฑ๋ก ์™„๋ฃŒ
</button>
</div>
<!-- Main Page -->
<div id="main-page" class="hidden p-4">
<div class="bg-gradient-to-r from-primary to-secondary p-4 rounded-xl text-white mb-6">
<h2 class="font-bold text-lg mb-1">ํ˜„์žฌ ์ถ”์ฒœ ์ปจํ…์ธ </h2>
<p class="text-sm opacity-90">5๊ฐœ์›” ์•„๊ธฐ์—๊ฒŒ ์ ํ•ฉํ•œ ํ™œ๋™์„ ์ถ”์ฒœํ•ด์š”</p>
</div>
<div class="mb-6">
<h3 class="font-bold text-gray-800 mb-3">๊ฐœ์›” ์ˆ˜ ์„ ํƒ</h3>
<div class="flex overflow-x-auto pb-2 space-x-2">
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">์‹ ์ƒ์•„</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">1๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">2๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">3๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">4๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap chip-selected">5๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">6๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">7๊ฐœ์›”</button>
<button class="chip px-4 py-2 bg-white border border-gray-200 rounded-full text-sm whitespace-nowrap">8๊ฐœ์›”</button>
</div>
</div>
<div class="grid grid-cols-2 gap-3 mb-4">
<div class="bg-white p-3 rounded-xl shadow-sm record-card">
<div class="w-full h-32 bg-primary rounded-lg mb-2 flex items-center justify-center">
<i class="fas fa-music text-white text-3xl"></i>
</div>
<h3 class="font-medium text-sm">๊ฐ๊ฐ ๋ฐœ๋‹ฌ ์Œ์•…</h3>
<p class="text-xs text-gray-500">5๊ฐœ์›” ์•„๊ธฐ์—๊ฒŒ ์ ํ•ฉ</p>
</div>
<div class="bg-white p-3 rounded-xl shadow-sm record-card">
<div class="w-full h-32 bg-secondary rounded-lg mb-2 flex items-center justify-center">
<i class="fas fa-book text-white text-3xl"></i>
</div>
<h3 class="font-medium text-sm">์ฒซ ๊ทธ๋ฆผ์ฑ… ์ถ”์ฒœ</h3>
<p class="text-xs text-gray-500">5๊ฐœ์›” ์•„๊ธฐ์—๊ฒŒ ์ ํ•ฉ</p>
</div>
<div class="bg-white p-3 rounded-xl shadow-sm record-card">
<div class="w-full h-32 bg-accent rounded-lg mb-2 flex items-center justify-center">
<i class="fas fa-utensils text-white text-3xl"></i>
</div>
<h3 class="font-medium text-sm">์ด์œ ์‹ ์‹œ์ž‘ ๊ฐ€์ด๋“œ</h3>
<p class="text-xs text-gray-500">5๊ฐœ์›” ์•„๊ธฐ์—๊ฒŒ ์ ํ•ฉ</p>
</div>
<div class="bg-white p-3 rounded-xl shadow-sm record-card">
<div class="w-full h-32 bg-success rounded-lg mb-2 flex items-center justify-center">
<i class="fas fa-baby-carriage text-white text-3xl"></i>
</div>
<h3 class="font-medium text-sm">๊ธฐ์ €๊ท€ ์„ ํƒ ํŒ</h3>
<p class="text-xs text-gray-500">5๊ฐœ์›” ์•„๊ธฐ์—๊ฒŒ ์ ํ•ฉ</p>
</div>
</div>
<h3 class="font-bold text-gray-800 mb-3 mt-6">5๊ฐœ์›” ์•„๊ธฐ ์„ฑ์žฅ ๋ฐœ๋‹ฌ</h3>
<div class="bg-white rounded-xl p-4 shadow-sm mb-6">
<div class="flex items-start mb-3">
<div class="bg-primary bg-opacity-10 p-2 rounded-lg mr-3">
<i class="fas fa-ruler text-primary"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์‹ ์ฒด ๋ฐœ๋‹ฌ</h4>
<p class="text-sm text-gray-600">๋’ค์ง‘๊ธฐ๋ฅผ ์‹œ๋„ํ•˜๊ณ , ๋ฌผ๊ฑด์„ ์žก์„ ์ˆ˜ ์žˆ์–ด์š”</p>
</div>
</div>
<div class="flex items-start mb-3">
<div class="bg-secondary bg-opacity-10 p-2 rounded-lg mr-3">
<i class="fas fa-brain text-secondary"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์ธ์ง€ ๋ฐœ๋‹ฌ</h4>
<p class="text-sm text-gray-600">๋‚ฏ์„  ์‚ฌ๋žŒ์„ ๊ตฌ๋ถ„ํ•˜๊ณ  ๋ฐ˜์‘์„ ๋ณด์ด๊ธฐ ์‹œ์ž‘ํ•ด์š”</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-accent bg-opacity-10 p-2 rounded-lg mr-3">
<i class="fas fa-comment-dots text-accent"></i>
</div>
<div>
<h4 class="font-medium text-gray-800">์–ธ์–ด ๋ฐœ๋‹ฌ</h4>
<p class="text-sm text-gray-600">์˜น์•Œ์ด๊ฐ€ ๋‹ค์–‘ํ•ด์ง€๊ณ  ์†Œ๋ฆฌ์— ๋ฐ˜์‘ํ•ด์š”</p>
</div>
</div>
</div>
</div>
<!-- Record Page -->
<div id="record-page" class="hidden p-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">๊ธฐ๋ก</h2>
<div class="bg-white rounded-xl p-4 shadow-sm mb-6">
<div class="flex justify-between items-center mb-3">
<h3 class="font-medium text-gray-800">์˜ค๋Š˜์˜ ํ™œ๋™ ์š”์•ฝ</h3>
<button class="text-primary text-sm font-medium">๋”๋ณด๊ธฐ</button>
</div>
<div class="grid grid-cols-3 gap-2 text-center">
<div class="p-2">
<div class="bg-primary bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-1">
<i class="fas fa-bottle-water text-primary"></i>
</div>
<p class="text-xs font-medium">์ˆ˜์œ </p>
<p class="text-xs text-gray-500">4ํšŒ</p>
</div>
<div class="p-2">
<div class="bg-secondary bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-1">
<i class="fas fa-baby text-secondary"></i>
</div>
<p class="text-xs font-medium">๊ธฐ์ €๊ท€</p>
<p class="text-xs text-gray-500">6ํšŒ</p>
</div>
<div class="p-2">
<div class="bg-accent bg-opacity-10 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-1">
<i class="fas fa-moon text-accent"></i>
</div>
<p class="text-xs font-medium">์ˆ˜๋ฉด</p>
<p class="text-xs text-gray-500">3์‹œ๊ฐ„</p>
</div>
</div>
</div>
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium text-gray-800">ํ™œ๋™ ๊ธฐ๋ก</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-100 rounded-full text-xs flex items-center">
<i class="fas fa-filter text-gray-500 mr-1"></i>
<span>ํ•„ํ„ฐ</span>
</button>
<button class="px-3 py-1 bg-primary text-white rounded-full text-xs">
+ ๊ธฐ๋ก
</button>
</div>
</div>
<div class="space-y-3">
<div class="bg-white rounded-lg p-3 shadow-sm record-card">
<div class="flex items-center">
<div class="bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-bottle-water text-xs"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-sm">์ˆ˜์œ  ๊ธฐ๋ก</h4>
<p class="text-xs text-gray-500">์˜ค์ „ 10:30 โ€ข ๋ถ„์œ  120ml</p>
</div>
<button class="text-gray-400">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="bg-white rounded-lg p-3 shadow-sm record-card">
<div class="flex items-center">
<div class="bg-secondary text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-baby text-xs"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-sm">๊ธฐ์ €๊ท€ ๊ต์ฒด</h4>
<p class="text-xs text-gray-500">์˜ค์ „ 11:15 โ€ข ๋Œ€๋ณ€</p>
</div>
<button class="text-gray-400">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="bg-white rounded-lg p-3 shadow-sm record-card">
<div class="flex items-center">
<div class="bg-accent text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-moon text-xs"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-sm">๋‚ฎ์ž </h4>
<p class="text-xs text-gray-500">์˜คํ›„ 1:00 - ์˜คํ›„ 2:30 (1์‹œ๊ฐ„ 30๋ถ„)</p>
</div>
<button class="text-gray-400">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
<div class="bg-white rounded-lg p-3 shadow-sm record-card">
<div class="flex items-center">
<div class="bg-success text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">
<i class="fas fa-temperature-high text-xs"></i>
</div>
<div class="flex-1">
<h4 class="font-medium text-sm">์ฒด์˜จ ์ธก์ •</h4>
<p class="text-xs text-gray-500">์˜คํ›„ 4:20 โ€ข 36.8ยฐC</p>
</div>
<button class="text-gray-400">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
</div>
</div>
</div>
<!-- CareTalk Page -->
<div id="caretalk-page" class="hidden h-full flex flex-col">
<div class="p-4 bg-white shadow-sm">
<h2 class="text-xl font-bold text-gray-800">์ผ€์–ดํ†ก</h2>
<p class="text-sm text-gray-500">์œก์•„ ์ „๋ฌธ AI์™€ ๋Œ€ํ™”ํ•ด๋ณด์„ธ์š”</p>
</div>
<div id="chat-container" class="flex-1 p-4 overflow-y-auto space-y-3">
<div class="flex flex-col">
<div class="ai-bubble chat-bubble">
<p>์•ˆ๋…•ํ•˜์„ธ์š”! ์œก์•„ํ‡ด๊ทผ AI ๋„์šฐ๋ฏธ์ž…๋‹ˆ๋‹ค. ๐Ÿ˜Š<br>์œก์•„ ๊ด€๋ จ ์–ด๋–ค ๊ณ ๋ฏผ์ด ์žˆ์œผ์‹ ๊ฐ€์š”?</p>
</div>
</div>
<div class="flex flex-col">
<div class="user-bubble chat-bubble">
<p>5๊ฐœ์›” ์•„๊ธฐ ์ด์œ ์‹ ์‹œ์ž‘ํ•  ๋•Œ ์ฃผ์˜ํ•  ์ ์ด ๋ญ์˜ˆ์š”?</p>
</div>
</div>
<div class="flex flex-col">
<div class="ai-bubble chat-bubble">
<p>5๊ฐœ์›” ์•„๊ธฐ ์ด์œ ์‹ ์‹œ์ž‘ ์‹œ ์ฃผ์˜ํ•  ์ ์€:<br>
1. ์Œ€๋ฏธ์Œ ๊ฐ™์€ ์ˆœํ•œ ์Œ์‹๋ถ€ํ„ฐ ์‹œ์ž‘<br>
2. ํ•˜๋ฃจ 1ํšŒ, 1-2์Šคํ‘ผ์œผ๋กœ ์‹œ์ž‘<br>
3. ์•Œ๋ ˆ๋ฅด๊ธฐ ์œ ๋ฐœ ์Œ์‹์€ ํ”ผํ•˜๊ธฐ<br>
4. ์•„๊ธฐ์˜ ๋ฐ˜์‘ ๊ผญ ๊ด€์ฐฐํ•˜๊ธฐ<br>
๋” ์ž์„ธํ•œ ์ •๋ณด๋ฅผ ์›ํ•˜์‹œ๋‚˜์š”?</p>
</div>
</div>
</div>
<div class="p-3 bg-white border-t border-gray-200">
<div class="flex items-center">
<button class="text-gray-500 mx-2">
<i class="fas fa-microphone"></i>
</button>
<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">
<button class="bg-primary text-white rounded-full w-8 h-8 flex items-center justify-center ml-2">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<!-- CareService Page -->
<div id="careservice-page" class="hidden p-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">์ผ€์–ด ์„œ๋น„์Šค</h2>
<div class="bg-gradient-to-r from-primary to-secondary p-4 rounded-xl text-white mb-6">
<h3 class="font-bold text-lg mb-1">์ถ”์ฒœ ์„œ๋น„์Šค</h3>
<p class="text-sm opacity-90">5๊ฐœ์›” ์•„๊ธฐ์—๊ฒŒ ์ ํ•ฉํ•œ ์„œ๋น„์Šค</p>
</div>
<div class="space-y-4">
<div class="bg-white rounded-xl p-4 shadow-sm record-card">
<div class="flex items-start">
<div class="w-16 h-16 bg-primary bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-utensils text-primary text-2xl"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-800 mb-1">์ด์œ ์‹ ์ „๋ฌธ๊ฐ€</h3>
<p class="text-sm text-gray-600 mb-2">5๊ฐœ์›” ์•„๊ธฐ ๋งž์ถคํ˜• ์ด์œ ์‹ ์กฐ๋ฆฌ ๋ฐ ์˜์–‘ ์ƒ๋‹ด</p>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-1 bg-primary bg-opacity-10 text-primary text-xs rounded-full">์ด์œ ์‹</span>
<span class="px-2 py-1 bg-primary bg-opacity-10 text-primary text-xs rounded-full">์˜์–‘</span>
<span class="px-2 py-1 bg-primary bg-opacity-10 text-primary text-xs rounded-full">5๊ฐœ์›”</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm record-card">
<div class="flex items-start">
<div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-baby text-secondary text-2xl"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-800 mb-1">์‚ฐํ›„๋„์šฐ๋ฏธ</h3>
<p class="text-sm text-gray-600 mb-2">๊ฒฝํ—˜ ๋งŽ์€ ์‚ฐํ›„์กฐ๋ฆฌ์‚ฌ๊ฐ€ ๋Œ๋ด„ ์„œ๋น„์Šค ์ œ๊ณต</p>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-1 bg-secondary bg-opacity-10 text-secondary text-xs rounded-full">์‚ฐํ›„์กฐ๋ฆฌ</span>
<span class="px-2 py-1 bg-secondary bg-opacity-10 text-secondary text-xs rounded-full">24์‹œ๊ฐ„</span>
<span class="px-2 py-1 bg-secondary bg-opacity-10 text-secondary text-xs rounded-full">์ „๋ฌธ๊ฐ€</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm record-card">
<div class="flex items-start">
<div class="w-16 h-16 bg-accent bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-home text-accent text-2xl"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-800 mb-1">๊ฐ€์‚ฌ๋„์šฐ๋ฏธ</h3>
<p class="text-sm text-gray-600 mb-2">์œก์•„๋กœ ๋ฐ”์œ ์ผ์ƒ ์† ๊ฐ€์‚ฌ ์ผ์„ ๋„์™€๋“œ๋ฆฝ๋‹ˆ๋‹ค</p>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-1 bg-accent bg-opacity-10 text-accent text-xs rounded-full">์ฒญ์†Œ</span>
<span class="px-2 py-1 bg-accent bg-opacity-10 text-accent text-xs rounded-full">์„ธํƒ</span>
<span class="px-2 py-1 bg-accent bg-opacity-10 text-accent text-xs rounded-full">์š”๋ฆฌ</span>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-4 shadow-sm record-card">
<div class="flex items-start">
<div class="w-16 h-16 bg-success bg-opacity-10 rounded-lg flex items-center justify-center mr-4">
<i class="fas fa-hand-holding-heart text-success text-2xl"></i>
</div>
<div class="flex-1">
<h3 class="font-bold text-gray-800 mb-1">์•„์ด๋Œ๋ณด๋ฏธ</h3>
<p class="text-sm text-gray-600 mb-2">์ž๊ฒฉ์ฆ ์†Œ์ง€ ์ „๋ฌธ ๋Œ๋ณด๋ฏธ๊ฐ€ ์•ˆ์ „ํ•˜๊ฒŒ ๋Œ๋ด๋“œ๋ฆฝ๋‹ˆ๋‹ค</p>
<div class="flex flex-wrap gap-1">
<span class="px-2 py-1 bg-success bg-opacity-10 text-success text-xs rounded-full">์ „๋ฌธ๊ฐ€</span>
<span class="px-2 py-1 bg-success bg-opacity-10 text-success text-xs rounded-full">์•ˆ์ „</span>
<span class="px-2 py-1 bg-success bg-opacity-10 text-success text-xs rounded-full">์‹œ๊ฐ„์ œ</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Bottom Navigation -->
<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">
<button class="nav-btn flex flex-col items-center text-primary" data-page="main-page">
<i class="fas fa-home text-lg"></i>
<span class="text-xs mt-1">ํ™ˆ</span>
</button>
<button class="nav-btn flex flex-col items-center text-gray-500" data-page="record-page">
<i class="fas fa-clipboard-list text-lg"></i>
<span class="text-xs mt-1">๊ธฐ๋ก</span>
</button>
<button class="nav-btn flex flex-col items-center text-gray-500" data-page="caretalk-page">
<i class="fas fa-comment-dots text-lg"></i>
<span class="text-xs mt-1">์ผ€์–ดํ†ก</span>
</button>
<button class="nav-btn flex flex-col items-center text-gray-500" data-page="careservice-page">
<i class="fas fa-hands-helping text-lg"></i>
<span class="text-xs mt-1">์„œ๋น„์Šค</span>
</button>
</nav>
</div>
<script>
// Hide splash screen after 2 seconds
setTimeout(() => {
document.getElementById('splash').classList.add('hidden');
document.getElementById('app').classList.remove('hidden');
document.getElementById('splash-page').classList.remove('hidden');
}, 2000);
// Navigation functionality
const navButtons = document.querySelectorAll('.nav-btn');
const pages = document.querySelectorAll('[id$="-page"]');
navButtons.forEach(button => {
button.addEventListener('click', () => {
const targetPage = button.getAttribute('data-page');
// Update active state
navButtons.forEach(btn => {
btn.classList.remove('text-primary');
btn.classList.add('text-gray-500');
});
button.classList.remove('text-gray-500');
button.classList.add('text-primary');
// Hide all pages
pages.forEach(page => {
page.classList.add('hidden');
});
// Show target page
document.getElementById(targetPage).classList.remove('hidden');
});
});
// Start button click handler
document.getElementById('start-btn').addEventListener('click', () => {
document.getElementById('splash-page').classList.add('hidden');
document.getElementById('register-page').classList.remove('hidden');
});
// Complete registration button
document.getElementById('complete-register').addEventListener('click', () => {
document.getElementById('register-page').classList.add('hidden');
document.getElementById('main-page').classList.remove('hidden');
// Set main page as active in nav
navButtons.forEach(btn => {
btn.classList.remove('text-primary');
btn.classList.add('text-gray-500');
if(btn.getAttribute('data-page') === 'main-page') {
btn.classList.remove('text-gray-500');
btn.classList.add('text-primary');
}
});
});
// Chip selection functionality
const chips = document.querySelectorAll('.chip');
chips.forEach(chip => {
chip.addEventListener('click', () => {
chips.forEach(c => c.classList.remove('chip-selected', 'bg-primary', 'text-white'));
chip.classList.add('chip-selected', 'bg-primary', 'text-white');
});
});
// Simulate chat functionality
const chatInput = document.querySelector('#caretalk-page input');
const chatContainer = document.getElementById('chat-container');
document.querySelector('#caretalk-page button').addEventListener('click', () => {
if(chatInput.value.trim() !== '') {
// Add user message
const userMsg = document.createElement('div');
userMsg.className = 'flex flex-col';
userMsg.innerHTML = `
<div class="user-bubble chat-bubble">
<p>${chatInput.value}</p>
</div>
`;
chatContainer.appendChild(userMsg);
// Simulate AI response after a delay
setTimeout(() => {
const aiMsg = document.createElement('div');
aiMsg.className = 'flex flex-col';
aiMsg.innerHTML = `
<div class="ai-bubble chat-bubble">
<p>AI๊ฐ€ "${chatInput.value}"์— ๋Œ€ํ•œ ๋‹ต๋ณ€์„ ์ค€๋น„ ์ค‘์ž…๋‹ˆ๋‹ค. ์‹ค์ œ ์•ฑ์—์„œ๋Š” ์ „๋ฌธ AI๊ฐ€ ์ƒ์„ธํ•œ ๋‹ต๋ณ€์„ ์ œ๊ณตํ•ด ๋“œ๋ฆด ๊ฑฐ์˜ˆ์š”!</p>
</div>
`;
chatContainer.appendChild(aiMsg);
// Scroll to bottom
chatContainer.scrollTop = chatContainer.scrollHeight;
}, 1000);
// Clear input
chatInput.value = '';
// Scroll to bottom
chatContainer.scrollTop = chatContainer.scrollHeight;
}
});
// Allow pressing Enter to send message
chatInput.addEventListener('keypress', (e) => {
if(e.key === 'Enter') {
document.querySelector('#caretalk-page button').click();
}
});
</script>
<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>
</html>