|
|
<!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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="app" class="h-screen flex flex-col hidden"> |
|
|
|
|
|
<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 id="content" class="flex-1 overflow-y-auto pb-16"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('splash').classList.add('hidden'); |
|
|
document.getElementById('app').classList.remove('hidden'); |
|
|
document.getElementById('splash-page').classList.remove('hidden'); |
|
|
}, 2000); |
|
|
|
|
|
|
|
|
const navButtons = document.querySelectorAll('.nav-btn'); |
|
|
const pages = document.querySelectorAll('[id$="-page"]'); |
|
|
|
|
|
navButtons.forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const targetPage = button.getAttribute('data-page'); |
|
|
|
|
|
|
|
|
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'); |
|
|
|
|
|
|
|
|
pages.forEach(page => { |
|
|
page.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById(targetPage).classList.remove('hidden'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('start-btn').addEventListener('click', () => { |
|
|
document.getElementById('splash-page').classList.add('hidden'); |
|
|
document.getElementById('register-page').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('complete-register').addEventListener('click', () => { |
|
|
document.getElementById('register-page').classList.add('hidden'); |
|
|
document.getElementById('main-page').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const chatInput = document.querySelector('#caretalk-page input'); |
|
|
const chatContainer = document.getElementById('chat-container'); |
|
|
|
|
|
document.querySelector('#caretalk-page button').addEventListener('click', () => { |
|
|
if(chatInput.value.trim() !== '') { |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
}, 1000); |
|
|
|
|
|
|
|
|
chatInput.value = ''; |
|
|
|
|
|
|
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
