PDF to HTML by MaxAI.co

<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Kiwi 八字命理 | V8.5 強制對齊版</title>

<script crossorigin
src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"><
/script>
<script
src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script
src="https://unpkg.com/lunar-javascript@1.6.12/lunar.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;6
00;900&display=swap');
body {
font-family: 'Noto Serif TC', serif;
background-color: #1c1917;
background-image: radial-gradient(#44403c 1px, transparent
1px);
background-size: 20px 20px;
color: #d6d3d1;
-webkit-tap-highlight-color: transparent;
}
/* iOS Input Reset (關鍵修正) */
input[type="date"], input[type="time"] {
-webkit-appearance: none;
appearance: none;
background-color: #292524; /* bg-stone-800 */
}
/* 高級配色 */
.text-gold { color: #fbbf24; }
.bg-gold { background-color: #fbbf24; color: #451a03; }
.border-gold { border-color: #fbbf24; }
/* 五行配色 */

.wood { color: #4ade80; } .bg-wood { background-color:
#166534; }
.fire { color: #f87171; } .bg-fire { background-color:
#991b1b; }
.earth { color: #fcd34d; } .bg-earth { background-color:
#854d0e; }
.metal { color: #a8a29e; } .bg-metal { background-color:
#44403c; }
.water { color: #60a5fa; } .bg-water { background-color:
#1e3a8a; }
.card-premium {
background: #292524;
border: 1px solid #44403c;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.watermark-fixed {
position: fixed;
bottom: 12px;
right: 12px;
background: rgba(251, 191, 36, 0.9);
color: #000;
padding: 4px 12px;
border-radius: 99px;
font-size: 11px;
font-weight: bold;
z-index: 9999;
pointer-events: none;
}
/* 隱藏捲軸 */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width:
none; }
/* Modal 動畫 */
@keyframes modalPop {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
.modal-content { animation: modalPop 0.3s ease-out forwards; }
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">

const { useState, useEffect } = React;
// --- 1. 資料庫 (完整內容) ---
const DA_YUN_DETAILS = {
'比肩': { slogan: '結交朋友，競爭合作', summary: '這十年是「建立
自我、拓展人脈」的時期。', career: '競爭大，適合創業合夥，需白紙黑字。',
wealth: '開銷大，投資宜保守，不宜借貸。', love: '感情比較自我，易忽略伴侶。',
health: '體力不錯，但防過勞。' },
'劫財': { slogan: '忙碌奔波，人際考驗', summary: '這十年是「衝勁
十足、但也容易破耗」的時期。', career: '事業心強，喜冒險。職場小人多。',
wealth: '財來財去，易有大筆開銷，勿擔保。', love: '易有情敵，或因朋友忽略伴侶。
', health: '情緒急躁，注意意外受傷。' },
'食神': { slogan: '才華展現，安逸享受', summary: '這十年是「發揮
創意、追求生活品質」的時期。', career: '適合技術、設計、藝術。學習新技能。',
wealth: '靠技術腦袋賺錢，財源穩定。', love: '感情豐富，懂浪漫，利生育。',
health: '心寬體胖，注意腸胃與血糖。' },
'傷官': { slogan: '突破現狀，叛逆變動', summary: '這十年是「求新
求變、不甘平凡」的時期。', career: '反應快創意多，易換工作或創業。', wealth: '
敢冒險投資，大賺大賠。', love: '感情波折，眼光高，易挑剔。', health: '精神緊張
，注意神經衰弱。' },
'偏財': { slogan: '商機無限，意外之財', summary: '這十年是「追求
財富、享受人生」的時期。', career: '適合經商、投資、副業。商業嗅覺敏銳。',
wealth: '財運佳，有橫財運，但也易揮霍。', love: '桃花爆棚，異性緣極佳。',
health: '注意交際應酬傷身。' },
'正財': { slogan: '薪水穩定，成家立業', summary: '這十年是「腳踏
實地、累積資產」的時期。', career: '工作穩定，按部就班，利升遷。', wealth: '正
財佳，薪水成長，利買房。', love: '容易結婚，遇到賢內助/好老公。', health: '生活
規律，健康無礙。' },
'七殺': { slogan: '壓力挑戰，權力鬥爭', summary: '這十年是「壓力
巨大、但也可能掌權」的時期。', career: '有大突破但高壓。利管理職。', wealth: '
險中求財，易因決策錯誤損失。', love: '女性偏桃花旺，男性專注事業。', health: '
易有急症、意外、開刀。' },
'正官': { slogan: '名聲地位，按部就班', summary: '這十年是「重視
名聲、循規蹈矩」的時期。', career: '官運亨通，利考試、升遷、公職。', wealth: '
收入穩定，來自職位提升。', love: '女命夫運佳，男命子女運佳。', health: '生活作
息正常。' },
'偏印': { slogan: '靈感獨特，孤獨思考', summary: '這十年是「鑽研
學問、心靈成長」的時期。', career: '適合研究、設計、冷門領域。', wealth: '靠特
殊技能賺錢。', love: '感情冷淡，溝通不良。', health: '注意慢性病、失眠。' },
'正印': { slogan: '貴人相助，平穩安定', summary: '這十年是「休養
生息、獲得庇蔭」的時期。', career: '工作平穩，利進修。貴人運強。', wealth: '財
運平平，易得長輩贈與。', love: '感情溫吞被動，重精神交流。', health: '健康佳，
但易發懶。' }
};
const DAY_MASTER_DB = {
'甲': { slogan: '參天大樹，正直仁慈', trait: '您是「甲木」人，象
徵參天大樹。個性正直、仁慈，有強烈的向上心與責任感。', love: '感情上您比較木訥，

不善於製造浪漫，但非常專一且負責。', career: '適合需要持續累積、垂直發展的行業，
如教育、公務員、建築。' },
'乙': { slogan: '花草藤蔓，能屈能伸', trait: '您是「乙木」人，象
徵花草藤蔓。個性溫柔細膩，適應力極強，像藤蔓一樣能繞過障礙。', love: '在愛情中，
您溫柔體貼，很會照顧人，但也容易缺乏安全感。', career: '適合需要手腕、靈活性與美
感的行業，如公關、設計、藝術。' },
'丙': { slogan: '太陽之火，熱情奔放', trait: '您是「丙火」人，象
徵天上的太陽。個性熱情開朗，充滿活力，像陽光一樣無私地照耀他人。', love: '您的愛
像烈火一樣炙熱且直接。喜歡一個人會主動追求，毫不掩飾。', career: '適合站在舞台中
央、需要展現魅力的工作，如演藝、銷售、媒體。' },
'丁': { slogan: '燈燭星光，溫暖細膩', trait: '您是「丁火」人，象
徵夜晚的燈燭。外表溫和有禮，內心卻燃燒著熱情，心思非常細膩。', love: '您是天生的
浪漫種子，重視氣氛。在感情中容易多愁善感。', career: '適合需要專注、細心與思考的
行業，如研究、心理諮商、策劃。' },
'戊': { slogan: '高山厚土，沈穩重信', trait: '您是「戊土」人，象
徵高山。個性沈穩厚重，極度講信用，承諾的事一定做到。', love: '您的愛情是慢熱型的
，不會一見鍾情，但給予伴侶的安全感無人能比。', career: '適合需要信用與承載力的行
業，如房地產、保險、銀行。' },
'己': { slogan: '田園濕土，包容萬物', trait: '您是「己土」人，象
徵田園濕土。個性內斂含蓄，多才多藝，做事有條理且重視細節。', love: '在感情中您比
較被動且謹慎。很會照顧人，像媽媽一樣噓寒問暖。', career: '適合需要耐心與培育的行
業，如護理、教育、秘書、會計。' },
'庚': { slogan: '刀劍鋼鐵，剛毅果決', trait: '您是「庚金」人，象
徵剛硬的鋼鐵。個性剛毅果決，講義氣，執行力極強，吃苦耐勞。', love: '愛恨分明，最
討厭曖昧不清。在關係中您比較強勢，喜歡主導。', career: '適合需要決斷力與開拓性的
行業，如軍警、司法、專案經理。' },
'辛': { slogan: '珠寶首飾，精緻亮麗', trait: '您是「辛金」人，象
徵精緻的珠寶。重視面子與形象，口才好，心思敏捷，外柔內剛。', love: '您是外貌協會
，對伴侶品味有要求。喜歡被寵愛，像公主/王子一樣。', career: '適合需要美感與口才
的行業，如設計、金融、醫美、演藝。' },
'壬': { slogan: '江河大水，奔放不羈', trait: '您是「壬水」人，象
徵奔流的江河。聰明豪爽，交際廣闊，但不喜歡受約束，有時任性。', love: '桃花運通常
很好，幽默風趣。但心很難定下來，討厭被束縛。', career: '適合流動性強、變化快的行
業，如貿易、運輸、旅遊、投資。' },
'癸': { slogan: '雨露之水，溫柔滲透', trait: '您是「癸水」人，象
徵滋潤萬物的雨露。個性溫柔內向，心思細密，善於觀察人性。', love: '在感情中被動且
神祕。渴望靈魂伴侶，一旦愛上會非常深情。', career: '適合需要創意與幕後策劃的行業
，如企劃、寫作、心理學。' }
};
const YEAR_2026_DB = {
'木': { summary: '食傷生財年 - 才華與機會並存', career: '事業運
：★★★★☆ 創意源源不絕，適合創業或新企劃，但忌功高震主。', wealth: '財運：
★★★☆☆ 靠技術腦袋賺錢。開銷大，宜強迫儲蓄。', love: '感情：★★★☆☆ 男性主
動出擊成功率高，女性易有口角。', health: '健康：★★☆☆☆ 注意過勞與肝膽保養，
早睡早起。' },
'火': { summary: '比劫奪財年 - 人際與競爭激烈', career: '事業運
：★★☆☆☆ 競爭對手強勁，防搶功，合約要看清。', wealth: '財運：★☆☆☆☆ 勿借
錢、勿高風險投資，花錢投資自己最安全。', love: '感情：★★☆☆☆ 防第三者或爛桃花

，單身者機會多但雜。', health: '健康：★★★☆☆ 火氣旺，注意心血管與情緒急躁問
題。' },
'土': { summary: '印星生身年 - 貴人與學習提升', career: '事業運
：★★★★★ 貴人運旺，利升遷、考照、進修。', wealth: '財運：★★★☆☆ 適合投資
固定資產，長輩有資助機會。', love: '感情：★★★★☆ 追求穩定，利透過長輩介紹對
象。', health: '健康：★★★★☆ 少動易胖，注意腸胃消化與甜食控制。' },
'金': { summary: '官殺剋身年 - 壓力與權力並重', career: '事業運
：★★★☆☆ 責任加重壓力大，但也是升官掌權好機會。', wealth: '財運：★★☆☆☆
正財穩偏財弱，小心因工作失誤破財。', love: '感情：★★★★★ 女性桃花極旺，男性因
忙碌忽略伴侶。', health: '健康：★★☆☆☆ 注意呼吸系統、肺部保養與皮膚過敏。'
},
'水': { summary: '財星高照年 - 慾望與機會湧現', career: '事業運
：★★★★☆ 野心大商機多，適合業務或貿易投資。', wealth: '財運：★★★★★ 財氣
沖天，機會多，但防財多身弱。', love: '感情：★★★★☆ 男性異性緣佳，女性看重經濟
能力。', health: '健康：★★☆☆☆ 注意腎臟、泌尿系統與過度透支體力。' }
};
// --- 2. 輔助運算邏輯 ---
const getZodiacEmoji = (animal) => {
const map = { '鼠':'🐀', '牛':'🐂', '虎':'🐅', '兔':'🐇', '
龍':'🐲', '蛇':'🐍', '馬':'🐎', '羊':'🐐', '猴':'🐒', '雞':'🐓', '狗
':'🐕', '豬':'🐖' };
return map[animal] || '🐾';
};
const getElementInfo = (char) => {
if (!char) return { type: '', class: '', bg: 'bg-gray-700'
};
const map = {
'甲': { type: '木', class: 'wood', bg: 'bg-wood' }, '乙
': { type: '木', class: 'wood', bg: 'bg-wood' },
'丙': { type: '火', class: 'fire', bg: 'bg-fire' }, '丁
': { type: '火', class: 'fire', bg: 'bg-fire' },
'戊': { type: '土', class: 'earth', bg: 'bg-earth' }, '
己': { type: '土', class: 'earth', bg: 'bg-earth' },
'庚': { type: '金', class: 'metal', bg: 'bg-metal' }, '
辛': { type: '金', class: 'metal', bg: 'bg-metal' },
'壬': { type: '水', class: 'water', bg: 'bg-water' }, '
癸': { type: '水', class: 'water', bg: 'bg-water' },
'子': { type: '水', class: 'water', bg: 'bg-water' }, '
丑': { type: '土', class: 'earth', bg: 'bg-earth' },
'寅': { type: '木', class: 'wood', bg: 'bg-wood' }, '卯
': { type: '木', class: 'wood', bg: 'bg-wood' },
'辰': { type: '土', class: 'earth', bg: 'bg-earth' }, '
巳': { type: '火', class: 'fire', bg: 'bg-fire' },
'午': { type: '火', class: 'fire', bg: 'bg-fire' }, '未
': { type: '土', class: 'earth', bg: 'bg-earth' },
'申': { type: '金', class: 'metal', bg: 'bg-metal' }, '
酉': { type: '金', class: 'metal', bg: 'bg-metal' },

'戌': { type: '土', class: 'earth', bg: 'bg-earth' }, '
亥': { type: '水', class: 'water', bg: 'bg-water' }
};
return map[char] || { type: '', class: '', bg:
'bg-gray-700' };
};
const getTenGod = (dayGan, targetGan) => {
const stems = ['甲','乙','丙','丁','戊','己','庚','辛','壬
','癸'];
const dIdx = stems.indexOf(dayGan);
const tIdx = stems.indexOf(targetGan);
if(dIdx < 0 || tIdx < 0) return '';
const gods = ['比肩','劫財','食神','傷官','偏財','正財','七殺
','正官','偏印','正印'];
return gods[(tIdx - dIdx + 10) % 10];
};
const getLifeStage = (dType, zType) => {
if (dType === zType) return '帝旺';
const map = { '木':'水', '火':'木', '土':'火', '金':'土', '
水':'金' };
if (map[dType] === zType) return '長生';
if (map[zType] === dType) return '病';
return '平';
};
const analyzeStrength = (counts, dayGan) => {
const myType = getElementInfo(dayGan).type;
const same = counts[myType] || 0;
const map = { '木':'水', '火':'木', '土':'火', '金':'土', '水
':'金' };
const parent = counts[map[myType]] || 0;
const isStrong = (same + parent) >= 4;
const entries = Object.entries(counts);
const weak = entries.sort((a,b) => a[1] - b[1])[0];
const healthMap = {
'木': '肝膽、神經、眼睛。', '火': '心血管、情緒。',
'土': '脾胃、消化。', '金': '呼吸道、肺。', '水': '腎臟、泌
尿。'
};
return {
isStrong,
desc: isStrong ? '身強 (Strong)' : '身弱 (Weak)',
lucky: isStrong ? `喜用：食傷、財星` : `喜用：印星、比劫`,
advice: isStrong ? '建議：多發揮才華或追求事業財富。' : '建
議：多依賴長輩貴人或結交益友。',
health: `⚠ 注意：五行「${weak[0]}」較弱，留意
${healthMap[weak[0]]}`

};
};
// --- 3. UI 組件 ---
const Modal = ({ isOpen, onClose, data, strength }) => {
if (!isOpen || !data) return null;
let specialAdvice = "";
if (['比肩', '劫財', '偏印', '正印'].includes(data.tenGod)) {
specialAdvice = strength.isStrong
? "⚠ 您八字本身能量已強，這十年又走幫身運，需特別注意「過
度自信、固執、競爭激烈」的問題。宜謙虛低調。"
: "✅ 您八字偏弱，這十年走幫身運是「大好運」！貴人多，朋友
多，是衝刺事業、擴展人脈的最佳時機。";
} else {
specialAdvice = strength.isStrong
? "✅ 您八字身強，這十年走消耗運（食傷財官），剛好能發揮您
的才華與能力，是「名利雙收」的黃金期！"
: "⚠ 您八字偏弱，這十年走消耗運，會感到壓力較大、體力透
支。賺錢雖多但身體易累，需多休息，量力而為。";
}
return (
<div className="fixed inset-0 bg-black/80 z-50 flex
items-center justify-center p-4" onClick={onClose}>
<div className="bg-stone-900 border border-gold
rounded-2xl w-full max-w-lg overflow-hidden relative modal-content
shadow-2xl" onClick={e => e.stopPropagation()}>
<div className="bg-gold p-4 flex
justify-between items-center text-stone-900">
<div>
<div className="text-xs font-bold
opacity-80">{data.startYear} - {data.endYear} ({data.gan}{data.zhi}運)
</div>
<div className="text-xl
font-black">{data.tenGod}大運 - {data.details.slogan}</div>
</div>
<button onClick={onClose}
className="bg-black/20 hover:bg-black/30 p-2 rounded-full
transition"><i data-lucide="x" size={20}/></button>
</div>
<div className="p-6 overflow-y-auto
max-h-[70vh] text-gray-300 space-y-4">
<div className="bg-stone-800 p-3
rounded-lg border-l-4 border-gold">
<h4 className="font-bold text-white
text-sm mb-1">💡 總運勢</h4>
<p className="text-sm
leading-relaxed">{data.details.summary}</p>
</div>
<div className={`p-3 rounded-lg border-l-4

${strength.isStrong ? 'border-red-500 bg-red-900/20' :
'border-blue-500 bg-blue-900/20'}`}>
<h4 className="font-bold text-white
text-sm mb-1">⚖ 給您的專屬建議 ({strength.desc})</h4>
<p className="text-sm leading-relaxed
text-gray-200">{specialAdvice}</p>
</div>
<div className="grid grid-cols-1
md:grid-cols-2 gap-4">
<div>
<h5 className="text-gold text-xs
font-bold uppercase mb-1 flex items-center gap-1"><i
data-lucide="briefcase" size={12}/> 事業</h5>
<p className="text-xs
leading-relaxed">{data.details.career}</p>
</div>
<div>
<h5 className="text-gold text-xs
font-bold uppercase mb-1 flex items-center gap-1"><i
data-lucide="coins" size={12}/> 財運</h5>
<p className="text-xs
leading-relaxed">{data.details.wealth}</p>
</div>
<div>
<h5 className="text-gold text-xs
font-bold uppercase mb-1 flex items-center gap-1"><i
data-lucide="heart" size={12}/> 感情</h5>
<p className="text-xs
leading-relaxed">{data.details.love}</p>
</div>
<div>
<h5 className="text-gold text-xs
font-bold uppercase mb-1 flex items-center gap-1"><i
data-lucide="activity" size={12}/> 健康</h5>
<p className="text-xs
leading-relaxed">{data.details.health}</p>
</div>
</div>
</div>
<div className="bg-stone-800 p-3 text-center
text-xs text-gray-500 border-t border-gray-700">點擊遮罩關閉視窗</div>
</div>
</div>
);
};
const SectionTitle = ({ icon, text, color }) => (
<h3 className={`flex items-center gap-2 font-bold text-lg
mb-4 pb-2 border-b border-gray-700 ${color || 'text-gold'}`}>

{icon} {text}
</h3>
);
const App = () => {
const [inputDate, setInputDate] = useState('');
const [inputTime, setInputTime] = useState('12:00');
const [gender, setGender] = useState(1);
const [result, setResult] = useState(null);
const [libReady, setLibReady] = useState(false);
const [loading, setLoading] = useState(false);
const [modalOpen, setModalOpen] = useState(false);
const [activeDaYun, setActiveDaYun] = useState(null);
useEffect(() => {
const checkLib = () => {
if (typeof window.Solar !== 'undefined' && typeof
window.Lunar !== 'undefined') {
setLibReady(true);
if (window.lucide)
window.lucide.createIcons();
} else { setTimeout(checkLib, 500); }
};
checkLib();
}, []);
useEffect(() => { if (result && window.lucide)
window.lucide.createIcons(); }, [result]);
const handleCalculate = () => {
if (!inputDate) { alert("請輸入日期"); return; }
if (!libReady) { alert("系統初始化中"); return; }
setLoading(true);
setTimeout(() => {
try {
const [y, m, d] =
inputDate.split('-').map(Number);
const [h, min] =
inputTime.split(':').map(Number);
const solar = Solar.fromYmdHms(y, m, d, h,
min, 0);
const lunar = solar.getLunar();
const bazi = lunar.getEightChar();
const dayGan = bazi.getDayGan();
// 大運
const yun = bazi.getYun(gender);
const daYunArr = yun.getDaYun();

setResult({
solar: `${y}年${m}月${d}日 ${h}:${min}`,
lunar: `${lunar.getYearInGanZhi()}年
${lunar.getMonthInChinese()}月 ${lunar.getDayInChinese()}日
${lunar.getTimeZhi()}時`,
animal: lunar.getYearShengXiao(),
dayGan, pillars, counts, trait, strength,
predict2026, daYunList
});
setLoading(false);
} catch (e) {
setLoading(false);
alert("計算錯誤: " + e.message);
}
}, 800);
};
const openDaYunModal = (yun) => { setActiveDaYun(yun);
setModalOpen(true); };
return (
<div className="min-h-screen pb-20 flex flex-col
items-center">
<Modal isOpen={modalOpen} onClose={() =>
setModalOpen(false)} data={activeDaYun} strength={result ?
result.strength : {}} />
<header className="w-full bg-stone-900 text-gold
py-6 text-center shadow-2xl border-b border-gold relative
overflow-hidden">
<div className="absolute top-2 left-0 w-full
text-center z-20">
<p className="text-[10px]
text-stone-500">© 2026 Kiwi Astrology Professional Service</p>
</div>
<div className="absolute top-0 left-0 w-full
h-full bg-gold opacity-5"></div>
<h1 className="text-3xl font-black
tracking-widest relative z-10 mt-2">Kiwi 八字命理</h1>
<p className="text-xs text-stone-400 mt-2
uppercase tracking-[0.2em] relative z-10">V8.5 Perfect Align</p>
</header>
<div className="w-full max-w-2xl px-4 mt-8">
<div className="card-premium p-6 rounded-2xl
mb-10">
<h2 className="text-lg font-bold
text-white mb-6 flex items-center gap-2 border-b border-gray-700

pb-3">
<i data-lucide="user-plus"
className="text-gold"></i> 輸入資料 (Start)
</h2>
<div className="grid grid-cols-2 gap-4">
<div className="col-span-2">
<label className="block
text-gray-400 text-xs font-bold mb-2 uppercase">性別 (Gender)</label>
<div className="grid grid-cols-2
gap-4">
<button
onClick={()=>setGender(1)} className={`h-[54px] rounded-xl border-2
font-bold text-sm transition-all flex items-center justify-center
${gender===1?'bg-blue-900 border-blue-500 text-white
shadow-[0_0_10px_rgba(59,130,246,0.5)]':'bg-stone-800 border-gray-700
text-gray-500'}`}>男 Male</button>
<button
onClick={()=>setGender(0)} className={`h-[54px] rounded-xl border-2
font-bold text-sm transition-all flex items-center justify-center
${gender===0?'bg-pink-900 border-pink-500 text-white
shadow-[0_0_10px_rgba(236,72,153,0.5)]':'bg-stone-800 border-gray-700
text-gray-500'}`}>女 Female</button>
</div>
</div>
<div className="col-span-1">
<label className="block
text-gray-400 text-xs font-bold mb-2">國曆日期</label>
<input type="date"
className="w-full h-[54px] px-3 border-2 border-gray-600 rounded-xl
bg-stone-800 text-white focus:border-gold outline-none"
value={inputDate} onChange={e => setInputDate(e.target.value)} />
</div>
<div className="col-span-1">
<label className="block
text-gray-400 text-xs font-bold mb-2">出生時間</label>
<input type="time"
className="w-full h-[54px] px-3 border-2 border-gray-600 rounded-xl
bg-stone-800 text-white focus:border-gold outline-none"
value={inputTime} onChange={e => setInputTime(e.target.value)} />
</div>
<div className="col-span-2">
<button onClick={handleCalculate}
disabled={loading || !libReady}
className={`w-full mt-2 py-4
rounded-xl font-bold text-lg shadow-lg flex justify-center
items-center gap-2
${loading ? 'bg-gray-700
text-gray-400' : 'bg-gold text-stone-900 hover:bg-yellow-400 transform
active:scale-95 transition-all'}`}>

{loading ? '大師運算中...' :
(libReady ? '✨ 觀看完整詳解' : '系統載入中...')}
</button>
</div>
</div>
</div>
{result && (
<div className="space-y-8
animate-fade-in-up">
{/* 1. 生肖與命盤 */}
<div className="card-premium p-6
rounded-2xl">
<div className="flex items-center
gap-4 mb-6 bg-stone-800 p-4 rounded-xl border border-gold/30">
<div className="text-5xl
bg-black rounded-full p-2 border-2 border-gold
shadow-lg">{getZodiacEmoji(result.animal)}</div>
<div>
<div className="text-xs
text-gold uppercase tracking-wider mb-1">Zodiac Sign</div>
<div className="text-2xl
font-black text-white">生肖屬{result.animal}</div>
</div>
</div>
<div className="text-xs
text-gray-400 mb-2">農曆 {result.lunar}</div>
<div className="grid grid-cols-4
gap-2">
{result.pillars.map((p, i) =>
(
<div key={i}
className={`p-3 rounded-xl text-center border ${p.hl ? 'border-gold
bg-stone-800' : 'border-gray-700'}`}>
<div
className="text-[10px] text-gray-500 mb-1">{p.t}</div>
<div className="h-5
mb-1 flex justify-center">{p.god && <span className="text-[10px]
bg-gray-700 px-2 rounded text-gray-300">{p.god}</span>}</div>
<div
className={`text-2xl font-black
${getElementInfo(p.g).class}`}>{p.g}</div>
<div
className={`text-2xl font-black
${getElementInfo(p.z).class}`}>{p.z}</div>
<div className="mt-2
text-[10px] text-gray-500 border-t border-gray-700 pt-1">{p.yun}</div>
</div>

))}
</div>
</div>
{/* 2. 十年大運互動版 */}
<div className="card-premium p-6
rounded-2xl border-l-4 border-purple-500">
<SectionTitle icon={<i
data-lucide="trending-up" className="text-purple-500"/>} text="十年大運
詳解 (點擊查看)" color="text-gold" />
<div className="overflow-x-auto
scrollbar-hide pb-2">
<div className="flex gap-3
w-max">
{result.daYunList.map((yun, i) => (
<button key={i}
onClick={() => openDaYunModal(yun)}
className={`relative p-3 rounded-xl border min-w-[100px] text-center
flex flex-col items-center transition-all transform hover:scale-105
active:scale-95
${yun.isCurrent ?
'bg-purple-900/50 border-purple-400
shadow-[0_0_15px_rgba(168,85,247,0.3)]' : 'bg-stone-800
border-gray-700 hover:border-gray-500'}`}>
{yun.isCurrent &&
<div className="absolute -top-2 left-1/2 -translate-x-1/2
bg-purple-500 text-white text-[9px] px-2 py-0.5 rounded-full font-bold
whitespace-nowrap">目前</div>}
<div
className="text-[10px] text-gray-400
mb-1">{yun.startYear}~{yun.endYear}</div>
<div
className="text-xs font-bold text-gold mb-1">{yun.tenGod}</div>
<div
className="flex gap-1 text-xl font-black my-1">
<span
className={getElementInfo(yun.gan).class}>{yun.gan}</span>
<span
className={getElementInfo(yun.zhi).class}>{yun.zhi}</span>
</div>
</button>
))}
</div>
</div>
</div>
{/* 3. 本命解析 */}

<div className="card-premium p-6
rounded-2xl border-l-4 border-wood">
<SectionTitle icon={<i
data-lucide="book-open" className="text-wood"/>} text={`本命解析：
${result.dayGan}${getElementInfo(result.dayGan).type}`} />
<div className="mb-4">
<h4 className="font-bold
text-white text-lg mb-2">{result.trait.slogan}</h4>
<p className="text-sm
text-gray-300 leading-relaxed text-justify">{result.trait.trait}</p>
</div>
<div className="grid grid-cols-1
md:grid-cols-2 gap-6 mt-6 pt-4 border-t border-gray-700">
<div>
<h5 className="font-bold
text-white text-sm mb-2 text-pink-400">❤ 愛情觀</h5>
<p className="text-xs
text-gray-400 leading-relaxed text-justify">{result.trait.love}</p>
</div>
<div>
<h5 className="font-bold
text-white text-sm mb-2 text-blue-400">💼 事業方向</h5>
<p className="text-xs
text-gray-400 leading-relaxed text-justify">{result.trait.career}</p>
</div>
</div>
</div>
{/* 4. 強弱與健康 */}
<div className="card-premium p-6
rounded-2xl border-l-4 border-water">
<SectionTitle icon={<i
data-lucide="activity" className="text-water"/>} text="能量診斷與健康" />
<div className="flex gap-2 mb-4">
<span className={`px-3 py-1
rounded text-xs font-bold text-black
${result.strength.desc.includes('Strong') ? 'bg-red-400' :
'bg-blue-400'}`}>{result.strength.desc}</span>
<span className="px-3 py-1
rounded text-xs font-bold bg-gray-700
text-gray-300">{result.strength.lucky}</span>
</div>
<p className="text-sm
text-gray-300 mb-4">{result.strength.advice}</p>
<div className="bg-stone-800 p-4
rounded-xl border border-gray-600">
<h5 className="font-bold
text-white text-sm mb-2 text-red-400">🚑 健康警訊</h5>
<p className="text-xs

text-gray-400 leading-relaxed">{result.strength.health}</p>
</div>
<div className="mt-6 space-y-2">
{['木','火','土','金','水
'].map(e => (
<div key={e}
className="flex items-center text-xs">
<span className={`w-8
text-center font-bold ${getElementInfo(e).class}`}>{e}</span>
<div className="flex-1
bg-gray-800 h-1.5 rounded-full overflow-hidden mx-2">
<div
className={`h-full ${getElementInfo(e).bg}`} style={{width:
`${(result.counts[e]/8)*100}%`}}></div>
</div>
<span className="w-4
text-gray-500">{result.counts[e]}</span>
</div>
))}
</div>
</div>
{/* 5. 2026 流年詳解 */}
<div className="bg-gradient-to-br
from-red-900 to-stone-900 p-6 rounded-2xl border border-red-700
relative overflow-hidden shadow-2xl">
<div className="absolute
right-[-20px] top-[-20px] text-red-600 opacity-20"><i
data-lucide="flame" size={150} /></div>
<div className="relative z-10">
<div className="flex
items-center gap-3 mb-6">
<div className="bg-red-600
text-white px-3 py-1 rounded text-sm font-bold shadow-lg">2026 丙午火年
</div>
<div className="text-gold
font-bold text-lg">流年運勢詳解</div>
</div>
<h3 className="text-2xl
font-bold text-white mb-4">{result.predict2026.summary}</h3>
<div className="space-y-4">
<div
className="bg-black/30 p-4 rounded-xl backdrop-blur-sm border
border-white/10">
<p className="text-sm
text-gray-200 leading-relaxed">{result.predict2026.career}</p>
</div>
<div
className="bg-black/30 p-4 rounded-xl backdrop-blur-sm border

border-white/10">
<p className="text-sm
text-gray-200 leading-relaxed">{result.predict2026.wealth}</p>
</div>
<div className="grid
grid-cols-1 md:grid-cols-2 gap-4">
<div
className="bg-black/30 p-4 rounded-xl backdrop-blur-sm border
border-white/10"><p className="text-xs text-gray-300
leading-relaxed">{result.predict2026.love}</p></div>
<div
className="bg-black/30 p-4 rounded-xl backdrop-blur-sm border
border-white/10"><p className="text-xs text-gray-300
leading-relaxed">{result.predict2026.health}</p></div>
</div>
</div>
</div>
</div>
<div className="text-center text-xs
text-gray-600 pb-10">
<p>© 2026 Kiwi Astrology
Professional Service</p>
</div>
</div>
)}
</div>
<div className="watermark-fixed">Kiwi製作/請勿盜用
</div>
</div>
);
};
const root =
ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>