diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..f0dfa0d
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>皇极经世卦象计算系统</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>皇极经世卦象计算</h1>
+        <div class="input-group">
+            <label for="date-input">请输入日期：</label>
+            <input type="date" id="date-input" required>
+            <label for="time-input">时间：</label>
+            <input type="time" id="time-input" step="1" value="00:00:00">
+
+            <button id="calculate-btn">计算卦象</button>
+        </div>
+        
+        <div id="result-container" class="hidden">
+            <h2>计算结果</h2>
+            <div class="result-grid">
+                <div class="result-item">
+                    <span class="label">计算日期：</span>
+                    <span id="result-date" class="value"></span>
+                </div>
+                <div class="result-item">
+                    <span class="label">年卦：</span>
+                    <span id="year-gua" class="value"></span>
+                </div>
+                <div class="result-item">
+                    <span class="label">月卦：</span>
+                    <span id="month-gua" class="value"></span>
+                </div>
+                <div class="result-item">
+                    <span class="label">日卦：</span>
+                    <span id="day-gua" class="value"></span>
+                </div>
+                <div class="result-item">
+                    <span class="label">时卦：</span>
+                    <span id="hour-gua" class="value"></span>
+                </div>
+                <div class="result-item">
+                    <span class="label">吉凶卦：</span>
+                    <span id="luck-gua" class="value"></span>
+                </div>
+                <div class="result-item">
+                    <span class="label">前后十年吉凶：</span>
+                    <div id="luck-years" class="value"></div>
+                </div>
+            </div>
+        </div>
+        
+        <div id="error-message" class="error hidden"></div>
+        
+        <div id="loading" class="loading hidden">
+            <div class="spinner"></div>
+            <p>计算中，请稍候...</p>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('calculate-btn').addEventListener('click', async () => {
+            const dateInput = document.getElementById('date-input');
+            const resultContainer = document.getElementById('result-container');
+            const errorMessage = document.getElementById('error-message');
+            const loading = document.getElementById('loading');
+            
+            const timeInput = document.getElementById('time-input');
+            // 验证输入
+            if (!dateInput.value) {
+                showError('请选择日期');
+                return;
+            }
+            
+            // 显示加载状态
+            loading.classList.remove('hidden');
+            resultContainer.classList.add('hidden');
+            errorMessage.classList.add('hidden');
+            
+
+            // 组合日期和时间
+            const dateStr = dateInput.value;
+            const timeStr = timeInput.value + (timeInput.value.length === 5 ? ':00' : ''); // 补全秒数
+            try {
+                const response = await fetch('/calculate', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                    },
+                    body: `date=${dateStr}&time=${timeStr}`
+                });
+                
+                const data = await response.json();
+                
+                if (data.success) {
+                    // 解析并显示结果
+                    const result = data.result;
+
+                    // 计算日期
+                    document.getElementById('result-date').textContent = result.date;
+                    // 通用格式化函数
+                    const formatGuaDisplay = (gua) => {
+                        return `
+            卦名：${gua.trigram}
+            爻值：${gua.yao1}${gua.yao2}${gua.yao3}${gua.yao4}${gua.yao5}${gua.yao6}
+            二进制：${gua.value_2binary}
+                        `;
+                    };
+                    // 更新各卦象显示
+                    document.getElementById('year-gua').innerHTML = `<pre>${formatGuaDisplay(result.year_gua)}</pre>`;
+                    document.getElementById('month-gua').innerHTML = `<pre>${formatGuaDisplay(result.month_gua)}</pre>`;
+                    document.getElementById('day-gua').innerHTML = `<pre>${formatGuaDisplay(result.day_gua)}</pre>`;
+                    document.getElementById('hour-gua').innerHTML = `<pre>${formatGuaDisplay(result.hour_gua)}</pre>`;
+                    document.getElementById('luck-gua').innerHTML = `<pre>${formatGuaDisplay(result.luck_gua)}</pre>`;
+                    // document.getElementById('result-date').textContent = result.date;
+                    // document.getElementById('day-gua').textContent = result.day_gua.trigram;
+                    //const dayGua = result.day_gua;
+                    //document.getElementById('day-gua').innerHTML = `
+//<pre>
+//卦名：${dayGua.trigram}
+//爻值：${dayGua.yao1}${dayGua.yao2}${dayGua.yao3}${dayGua.yao4}${dayGua.yao5}${dayGua.yao6}
+//</pre>
+//    `;
+// 显示年份吉凶结果
+                    if (result.luck_years && result.luck_years.length > 0) {
+                                            const luckYearsHTML = result.luck_years.map(year => `
+                                                <div class="year-luck-item">
+                                                    <strong>${year.year}年：</strong>
+                                                    卦名：${year.trigram}<br>
+                                                    爻值：${year.yaoAll}
+                                                </div>
+                                            `).join('');
+                                            document.getElementById('luck-years').innerHTML = luckYearsHTML;
+                                        } else {
+                                            document.getElementById('luck-years').textContent = '无年份吉凶数据';
+                                        }
+                    resultContainer.classList.remove('hidden');
+                } else {
+                    showError(data.error || '计算失败');
+                }
+            } catch (error) {
+                showError('网络请求失败: ' + error.message);
+            } finally {
+                loading.classList.add('hidden');
+            }
+        });
+        
+        function showError(message) {
+            const errorElement = document.getElementById('error-message');
+            errorElement.textContent = message;
+            errorElement.classList.remove('hidden');
+        }
+    </script>
+</body>
+</html>
\ No newline at end of file
