<!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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700&family=Noto+Sans+KR:wght@300;400;700&display=swap');
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #fdf6e3;
}
.fortune-text {
font-family: 'Nanum Myeongjo', serif;
}
/* 쿠키 흔들리는 애니메이션 */
@keyframes shake {
0% { transform: rotate(0deg); }
25% { transform: rotate(5deg); }
50% { transform: rotate(0eg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.animate-shake {
animation: shake 0.5s ease-in-out;
}
/* 쪽지 나타나는 효과 */
@keyframes unfold {
from {
opacity: 0;
transform: scaleY(0) translateY(20px);
}
to {
opacity: 1;
transform: scaleY(1) translateY(0);
}
}
.paper-reveal {
animation: unfold 0.6s ease-out forwards;
transform-origin: top;
}
.cursor-pointer {
cursor: pointer;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen text-slate-800 p-4">
<div class="max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden border border-amber-100">
<!-- 헤더 -->
<div class="bg-amber-500 p-6 text-center">
<h1 class="text-3xl font-bold text-white tracking-wider fortune-text">오늘의 운세</h1>
<p class="text-amber-100 mt-2 text-sm">당신의 하루를 위한 조언을 확인하세요</p>
</div>
<!-- 메인 컨텐츠 -->
<div class="p-8 flex flex-col items-center justify-center min-h-[400px]">
<!-- 상태 1: 쿠키가 닫혀있을 때 -->
<div id="cookie-container" class="cursor-pointer transition-transform hover:scale-105 active:scale-95" onclick="crackCookie()">
<!-- 닫힌 쿠키 SVG -->
<svg id="closed-cookie" class="w-48 h-48 text-amber-400 drop-shadow-md" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 10.15 4.64 8.45 5.71 7.11L12.59 14H19.5C18.42 17.46 15.49 20 12 20Z"/>
<path d="M13 13L6.5 6.5C8.04 5.27 10 4.5 12.15 4.5C15.65 4.5 18.6 6.88 19.5 10H13V13Z" fill="#F59E0B"/>
</svg>
<p class="text-center mt-6 text-gray-500 animate-pulse">쿠키를 클릭해서 열어보세요</p>
</div>
<!-- 상태 2: 결과 화면 (숨김 처리됨) -->
<div id="result-container" class="hidden flex-col items-center w-full">
<!-- 열린 쿠키 아이콘 -->
<div class="flex gap-2 mb-6">
<svg class="w-16 h-16 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C13.85 22 15.57 21.46 17.03 20.53L12 15.5L6.97 20.53C4.08 18.8 2.56 15.28 3.08 11.96L12 2V2Z" opacity="0.5"/>
</svg>
<svg class="w-16 h-16 text-amber-400" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L12 15.5L17.03 20.53C19.92 18.8 21.44 15.28 20.92 11.96L12 2Z" />
</svg>
</div>
<!-- 운세 쪽지 -->
<div class="paper-reveal bg-yellow-50 border-2 border-yellow-200 p-6 rounded-lg shadow-sm w-full text-center relative mb-8">
<div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-yellow-200 w-4 h-4 rotate-45"></div>
<p class="text-gray-400 text-xs mb-2 tracking-widest uppercase">Lucky Message</p>
<h2 id="fortune-message" class="text-xl md:text-2xl font-bold text-gray-800 fortune-text leading-relaxed keep-all">
<!-- 자바스크립트로 메시지가 입력됩니다 -->
</h2>
<div class="mt-4 pt-4 border-t border-yellow-200 flex justify-center gap-4 text-xs text-gray-400">
<span>행운의 숫자: <span id="lucky-number" class="font-bold text-amber-600">7</span></span>
<span>|</span>
<span>행운의 색: <span id="lucky-color" class="font-bold text-amber-600">Red</span></span>
</div>
</div>
<!-- 다시하기 버튼 -->
<button onclick="resetCookie()" class="px-6 py-3 bg-slate-800 text-white rounded-full hover:bg-slate-700 transition-colors shadow-lg font-medium flex items-center gap-2">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
다른 쿠키 열기
</button>
</div>
</div>
</div>
<script>
// 운세 데이터베이스
const fortunes = [
"생각지도 못한 곳에서 행운이 찾아옵니다.",
"잠시 휴식을 취하세요. 더 멀리 갈 수 있는 힘이 생깁니다.",
"오랫동안 기다려온 소식이 곧 도착할 것입니다.",
"당신의 직관을 믿으세요. 정답은 이미 당신 안에 있습니다.",
"작은 친절이 큰 기쁨으로 되돌아올 것입니다.",
"지금 고민하는 일은 시간이 해결해 줄 것입니다.",
"새로운 시작을 하기에 아주 좋은 날입니다.",
"가까운 사람에게 감사의 마음을 표현해보세요.",
"오늘의 노력이 내일의 큰 결실이 됩니다.",
"뜻밖의 재물을 얻거나 좋은 선물을 받게 됩니다.",
"어려움이 있다면 주변에 도움을 요청하세요. 해결책이 보입니다.",
"당신의 미소가 누군가의 하루를 밝게 만듭니다.",
"과거에 얽매이지 말고 미래를 향해 나아가세요.",
"겸손한 태도가 당신의 가치를 더욱 높여줄 것입니다.",
"오늘은 당신이 주인공입니다. 자신감을 가지세요.",
"잃어버렸다고 생각했던 것을 다시 찾게 될 수 있습니다.",
"변화를 두려워하지 마세요. 더 좋은 기회가 옵니다."
];
const colors = ["Red", "Blue", "Green", "Yellow", "Purple", "Gold", "Silver", "Orange"];
// DOM 요소 가져오기
const cookieContainer = document.getElementById('cookie-container');
const resultContainer = document.getElementById('result-container');
const fortuneMessage = document.getElementById('fortune-message');
const luckyNumberSpan = document.getElementById('lucky-number');
const luckyColorSpan = document.getElementById('lucky-color');
const closedCookieSvg = document.getElementById('closed-cookie');
// 쿠키 깨기 함수
function crackCookie() {
// 흔들리는 애니메이션 추가
closedCookieSvg.classList.add('animate-shake');
// 0.5초(애니메이션 시간) 후 결과 보여주기
setTimeout(() => {
// 운세 랜덤 선택
const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
const randomNumber = Math.floor(Math.random() * 99) + 1;
const randomColor = colors[Math.floor(Math.random() * colors.length)];
// 텍스트 업데이트
fortuneMessage.textContent = `"${randomFortune}"`;
luckyNumberSpan.textContent = randomNumber;
luckyColorSpan.textContent = randomColor;
// 화면 전환
cookieContainer.classList.add('hidden');
resultContainer.classList.remove('hidden');
resultContainer.classList.add('flex');
// 애니메이션 클래스 제거 (다음 번을 위해)
closedCookieSvg.classList.remove('animate-shake');
}, 500);
}
// 초기화 함수
function resetCookie() {
resultContainer.classList.add('hidden');
resultContainer.classList.remove('flex');
cookieContainer.classList.remove('hidden');
}
</script>
</body>
</html>