<!DOCTYPE html>

<head>

<title>Goshen AI Food Analyzer</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@400;600;800&display=swap');

body { font-family: 'Pretendard', sans-serif; }

.gradient-brand { background: linear-gradient(135deg, #8e2de2 0%, #4a00e0 100%); }

.btn-active { border-color: #4a00e0 !important; background-color: #f5f3ff !important; color: #4a00e0 !important; font-weight: 800; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; }

</style>

</head>

<span class="text-xs bg-white/20 px-3 py-1 rounded-full backdrop-blur-md italic">Powered by Goshen AI</span>

</div>

</header>

<span class="w-1.5 h-1.5 rounded-full bg-purple-600"></span> 음식 사진 첨부

</p>

</div>

</div>

</button>

</div>

<span class="w-1.5 h-1.5 rounded-full bg-purple-600"></span> 식사 시간

</p>

</div>

분석 시작하기

</button>

<div>

<p id="resTag" class="text-[10px] uppercase tracking-widest text-purple-400 font-bold mb-1">Diet Analysis Report</p>

</div>

</div>

</div>

</div>

"고단백 식단입니다! 피부 탄력 유지에 아주 좋은 선택이네요."

</p>

</div>

</main>

</div>

const fileInput = document.getElementById('fileInput');

const dropzone = document.getElementById('dropzone');

const previewContainer = document.getElementById('previewContainer');

const imagePreview = document.getElementById('imagePreview');

const uploadPlaceholder = document.getElementById('uploadPlaceholder');

const analyzeBtn = document.getElementById('analyzeBtn');

const resultArea = document.getElementById('resultArea');

let selectedType = "";

// 이미지 파일 처리

dropzone.onclick = () => fileInput.click();

fileInput.onchange = (e) => {

const file = e.target.files[0];

if (file && file.type.startsWith('image/')) {

const reader = new FileReader();

reader.onload = (event) => {

imagePreview.src = event.target.result;

previewContainer.classList.remove('hidden');

uploadPlaceholder.classList.add('hidden');

validateForm();

};

reader.readAsDataURL(file);

}

};

// 업로드 리셋

function resetUpload(e) {

e.stopPropagation();

fileInput.value = "";

previewContainer.classList.add('hidden');

uploadPlaceholder.classList.remove('hidden');

validateForm();

}

// 식사 선택 기능

function selectMeal(btn) {

document.querySelectorAll('.meal-btn').forEach(b => b.classList.remove('btn-active'));

btn.classList.add('btn-active');

selectedType = btn.getAttribute('data-type');

validateForm();

}

// 분석 버튼 활성화 체크

function validateForm() {

if (fileInput.files.length > 0 && selectedType !== "") {

analyzeBtn.disabled = false;

analyzeBtn.classList.remove('bg-gray-200', 'text-gray-400');

analyzeBtn.classList.add('gradient-brand', 'text-white');

} else {

analyzeBtn.disabled = true;

analyzeBtn.classList.add('bg-gray-200', 'text-gray-400');

analyzeBtn.classList.remove('gradient-brand', 'text-white');

}

// 분석 시뮬레이션

function startAnalysis() {

analyzeBtn.disabled = true;

analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> AI 인식 중...';

// 결과 창 가리고 시작 (재분석 시 대비)

resultArea.classList.add('hidden');

setTimeout(() => {

analyzeBtn.innerHTML = '분석 완료';

document.getElementById('resTitle').innerText = `${selectedType} 식사 분석 결과`;

// 임의의 칼로리 생성 (테스트용)

const randomKcal = Math.floor(Math.random() * (700 - 300 + 1)) + 300;

document.getElementById('resKcal').innerText = randomKcal;

resultArea.classList.remove('hidden');

// 결과창으로 부드럽게 스크롤

window.scrollTo({

top: document.body.scrollHeight,

behavior: 'smooth'

});

}, 1800);

}

</script>

</body>

</html>