<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오늘의 운세 - 1972년 3월 2일생</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'media',
theme: {
extend: {
fontFamily: {
sans: ['Noto Sans KR', 'sans-serif'],
serif: ['Noto Serif KR', 'serif'],
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
}
},
animation: {
fadeInUp: 'fadeInUp 0.7s ease-out forwards',
}
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.wood { color: #38a169; }
.fire { color: #e53e3e; }
.earth { color: #d69e2e; }
.metal { color: #718096; }
.water { color: #3182ce; }
.pillar-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pillar-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.3s; }
.stagger-3 { animation-delay: 0.5s; }
.stagger-4 { animation-delay: 0.7s; }
</style>
</head>
<body class="bg-[#fdfbf7] dark:bg-slate-950 text-gray-800 dark:text-slate-200 min-h-screen flex flex-col items-center py-8 px-4 overflow-x-hidden">
<!-- Header (Animated) -->
<header class="text-center mb-10 opacity-0 animate-fadeInUp stagger-1">
<div class="inline-block p-2 rounded-full bg-indigo-50 dark:bg-indigo-900/30 mb-4">
<i data-lucide="scroll" class="w-8 h-8 text-indigo-600 dark:text-indigo-400"></i>
</div>
<h1 class="text-3xl font-bold dark:text-white mb-2 font-serif">나의 사주와 오늘의 운세</h1>
<p class="text-gray-500 dark:text-slate-400">1972년 3월 2일 오전 05시 출생 (양력)</p>
</header>
<main class="w-full max-w-2xl space-y-8">
<!-- User's Saju Chart (Animated) -->
<section class="bg-white dark:bg-slate-900 rounded-2xl shadow-sm border border-gray-200 dark:border-slate-800 p-6 opacity-0 animate-fadeInUp stagger-2">
<h2 class="text-xl font-bold mb-6 flex items-center gap-2 dark:text-slate-100">
<i data-lucide="layout-grid" class="w-5 h-5 text-indigo-500"></i>
사주 원국 (四柱命式)
</h2>
<div class="grid grid-cols-4 gap-2 text-center">
<!-- Time Pillar -->
<div class="pillar-card bg-white dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-xl p-4 flex flex-col gap-2">
<span class="text-xs text-gray-400 dark:text-slate-500 font-medium">시주</span>
<span class="text-2xl font-bold metal">庚</span>
<span class="text-2xl font-bold wood">寅</span>
<span class="text-xs text-gray-400 mt-1">백호</span>
</div>
<!-- Day Pillar (Me) -->
<div class="pillar-card bg-white dark:bg-slate-800 border border-indigo-200 dark:border-indigo-500/50 rounded-xl p-4 flex flex-col gap-2 ring-2 ring-indigo-500 ring-offset-2 dark:ring-offset-slate-900">
<span class="text-xs text-indigo-600 dark:text-indigo-400 font-bold">일주</span>
<span class="text-3xl font-bold metal">辛</span>
<span class="text-3xl font-bold water">亥</span>
<span class="text-xs text-gray-400 mt-1 font-bold">본원</span>
</div>
<!-- Month Pillar -->
<div class="pillar-card bg-white dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-xl p-4 flex flex-col gap-2">
<span class="text-xs text-gray-400 dark:text-slate-500 font-medium">월주</span>
<span class="text-2xl font-bold water">壬</span>
<span class="text-2xl font-bold wood">寅</span>
<span class="text-xs text-gray-400 mt-1">망신</span>
</div>
<!-- Year Pillar -->
<div class="pillar-card bg-white dark:bg-slate-800 border border-gray-100 dark:border-slate-700 rounded-xl p-4 flex flex-col gap-2">
<span class="text-xs text-gray-400 dark:text-slate-500 font-medium">년주</span>
<span class="text-2xl font-bold water">壬</span>
<span class="text-2xl font-bold water">子</span>
<span class="text-xs text-gray-400 mt-1">도화</span>
</div>
</div>
<div class="mt-6 p-4 bg-gray-50 dark:bg-slate-800/50 rounded-lg">
<h3 class="font-bold text-gray-700 dark:text-slate-200 mb-2">기질 분석: 신해(辛亥) 일주</h3>
<p class="text-sm text-gray-600 dark:text-slate-400 leading-relaxed">
당신은 <strong>'물에 씻긴 보석'</strong>과 같은 형상입니다. 천간의 신금(辛金)은 섬세한 성정을, 지지의 해수(亥水)는 깊은 지혜를 상징합니다.
사주에 수(水)와 목(木)의 흐름이 좋아 재능을 발휘하는 힘이 강합니다.
</p>
</div>
</section>
<!-- Today's Fortune (Animated) -->
<section class="bg-gradient-to-br from-indigo-600 to-violet-700 dark:from-slate-800 dark:to-indigo-950 rounded-2xl shadow-lg p-6 text-white relative overflow-hidden opacity-0 animate-fadeInUp stagger-3">
<div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-white/10 rounded-full blur-xl"></div>
<div class="flex justify-between items-start mb-6">
<div>
<h2 class="text-xl font-bold flex items-center gap-2">
<i data-lucide="sparkles" class="w-5 h-5 text-yellow-300 animate-pulse"></i>
오늘의 운세
</h2>
<p id="current-date" class="text-indigo-200 dark:text-slate-400 text-sm mt-1"></p>
</div>
<div class="bg-white/20 dark:bg-slate-700/50 backdrop-blur-sm px-3 py-1 rounded-full text-[10px] font-medium uppercase tracking-wider">
일진(日辰) 분석완료
</div>
</div>
<div class="space-y-4">
<div class="bg-white/10 dark:bg-black/20 backdrop-blur-md rounded-xl p-5 border border-white/10">
<h3 class="font-bold text-yellow-300 mb-2 text-lg" id="fortune-title">운세를 불러오는 중...</h3>
<p class="text-indigo-50 dark:text-slate-300 leading-relaxed opacity-90 text-sm" id="fortune-text">
분석 중입니다.
</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-black/20 rounded-lg p-3 flex items-center gap-3">
<div class="bg-white/20 p-2 rounded-full">
<i data-lucide="shirt" class="w-4 h-4 text-white"></i>
</div>
<div>
<p class="text-[10px] text-indigo-300">행운의 색</p>
<p class="font-medium text-xs" id="lucky-color">-</p>
</div>
</div>
<div class="bg-black/20 rounded-lg p-3 flex items-center gap-3">
<div class="bg-white/20 p-2 rounded-full">
<i data-lucide="compass" class="w-4 h-4 text-white"></i>
</div>
<div>
<p class="text-[10px] text-indigo-300">행운의 방향</p>
<p class="font-medium text-xs" id="lucky-direction">-</p>
</div>
</div>
</div>
</div>
</section>
<!-- Advice Section (Animated) -->
<section class="bg-orange-50 dark:bg-slate-900/50 rounded-2xl border border-orange-100 dark:border-slate-800 p-6 opacity-0 animate-fadeInUp stagger-4">
<h3 class="font-bold text-orange-800 dark:text-orange-400 mb-3 flex items-center gap-2 text-sm">
<i data-lucide="lightbulb" class="w-4 h-4"></i>
개운(開運) 조언
</h3>
<ul class="space-y-2 text-xs text-gray-700 dark:text-slate-400">
<li class="flex items-start gap-2">
<span class="text-orange-500 font-bold">•</span>
<span>사주의 수(水)기운 조화를 위해 붉은 계열의 소품을 활용하면 열정과 활력을 더할 수 있습니다.</span>
</li>
<li class="flex items-start gap-2">
<span class="text-orange-500 font-bold">•</span>
<span>중요한 결정 전에는 차분한 명상으로 신금(辛金) 특유의 예리함을 가다듬으십시오.</span>
</li>
</ul>
</section>
</main>
<footer class="mt-12 text-center text-[10px] text-gray-400 dark:text-slate-600 pb-8">
<p>© 1972-03-02 Saju Analysis System<br>본 운세는 명리학적 원리에 기반한 가이드입니다.</p>
</footer>
<script>
// Lucide 아이콘 초기화
lucide.createIcons();
// 날짜 출력
const now = new Date();
const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
document.getElementById('current-date').textContent = now.toLocaleDateString('ko-KR', options);
// 운세 시뮬레이션 로직 (원래 구조 유지)
function getDailyFortune() {
const dateStr = now.toISOString().slice(0, 10);
const seed = dateStr.split('-').reduce((a, b) => parseInt(a) + parseInt(b), 0);
const fortunes = [
{
title: "금전운이 빛나는 하루",
text: "노력에 대한 결실이 맺히는 날입니다. 뜻밖의 소득이나 유익한 제안이 들어올 수 있으니 기회를 놓치지 마세요.",
color: "초록색 (Green)",
direction: "동쪽"
},
{
title: "명예가 따르는 길일",
text: "당신의 성실함이 빛을 발하여 주변의 인정을 받게 됩니다. 리더십을 발휘하기에 최적의 시기입니다.",
color: "붉은색 (Red)",
direction: "남쪽"
},
{
title: "내실을 다지는 시기",
text: "외부 활동보다는 계획을 점검하고 에너지를 충전하세요. 조용한 환경에서 새로운 아이디어가 샘솟습니다.",
color: "노란색 (Yellow)",
direction: "중앙"
},
{
title: "대인관계의 즐거움",
text: "오랜 인연으로부터 좋은 소식이 들려옵니다. 소통을 통해 문제를 해결하고 협력을 구하기에 좋은 날입니다.",
color: "흰색 (White)",
direction: "서쪽"
}
];
const fortuneIndex = (seed + 1972) % fortunes.length;
const selected = fortunes[fortuneIndex];
// UI 업데이트
setTimeout(() => {
document.getElementById('fortune-title').textContent = selected.title;
document.getElementById('fortune-text').textContent = selected.text;
document.getElementById('lucky-color').textContent = selected.color;
document.getElementById('lucky-direction').textContent = selected.direction;
}, 500); // 로딩 효과를 위해 약간의 지연
}
getDailyFortune();
</script>
</body>
</html>