<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 푸드 칼로리 분석기</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen font-sans">
<div class="bg-white w-full max-w-md rounded-2xl shadow-xl overflow-hidden min-h-[650px] flex flex-col">
<div class="bg-indigo-600 text-white p-5 text-center text-xl font-bold tracking-wide">
🍽️ AI 식단 분석기
</div>
<div class="p-6 flex-1 flex flex-col gap-7">
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">음식 사진 업로드</label>
<div class="border-2 border-dashed border-gray-300 rounded-xl p-4 text-center cursor-pointer hover:bg-gray-50 transition duration-200" onclick="document.getElementById('fileInput').click()">
<div id="imagePlaceholder" class="text-gray-400 py-6">
<svg class="mx-auto h-12 w-12 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<p class="font-medium">터치하여 사진을 선택하세요</p>
</div>
<img id="imagePreview" class="hidden w-full h-56 object-cover rounded-lg shadow-sm" />
</div>
<input type="file" id="fileInput" class="hidden" accept="image/*" onchange="previewImage(event)">
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">식사 종류</label>
<div class="flex gap-3">
<label class="flex-1 cursor-pointer">
<input type="radio" name="mealType" value="아침" class="peer hidden" checked>
<div class="text-center py-3 border border-gray-200 rounded-xl peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 font-medium transition duration-200 shadow-sm">아침</div>
</label>
<label class="flex-1 cursor-pointer">
<input type="radio" name="mealType" value="점심" class="peer hidden">
<div class="text-center py-3 border border-gray-200 rounded-xl peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 font-medium transition duration-200 shadow-sm">점심</div>
</label>
<label class="flex-1 cursor-pointer">
<input type="radio" name="mealType" value="저녁" class="peer hidden">
<div class="text-center py-3 border border-gray-200 rounded-xl peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600 font-medium transition duration-200 shadow-sm">저녁</div>
</label>
</div>
</div>
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">섭취 시간</label>
<input type="time" class="w-full border border-gray-300 rounded-xl p-3 text-gray-800 font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-sm transition duration-200" value="12:00">
</div>
<button class="mt-auto w-full bg-gray-900 text-white font-bold text-lg py-4 rounded-xl hover:bg-gray-800 transition duration-200 shadow-lg active:scale-95 flex justify-center items-center gap-2">
칼로리 분석하기 ✨
</button>
</div>
</div>
<script>
function previewImage(event) {
const reader = new FileReader();
reader.onload = function() {