From 8c573f2492c52dfac10963b57a6c25e3c208fbd3 Mon Sep 17 00:00:00 2001
From: wangzhiming <1115712903@qq.com>
Date: Thu, 22 May 2025 17:00:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20templates?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/index.html | 842 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 842 insertions(+)
 create mode 100644 templates/index.html
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..03d6d10
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,842 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>皇极经世卦象计算系统</title>
+    <style>
+        body {
+            font-family: 'Microsoft YaHei', sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+            color: #333;
+        }
+        .container {
+            max-width: 1000px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            text-align: center;
+            color: #8B4513;
+            margin-bottom: 30px;
+            font-size: 24px;
+        }
+        .input-group {
+            margin-bottom: 20px;
+        }
+        .input-row {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        label {
+            font-weight: bold;
+            min-width: 100px;
+            margin-right: 10px;
+        }
+        input {
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            margin-right: 15px;
+        }
+        button {
+            padding: 8px 20px;
+            background-color: #8B4513;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+            font-size: 16px;
+            margin-top: 10px;
+        }
+        button:hover {
+            background-color: #A0522D;
+        }
+        .divider {
+            border-top: 1px solid #ddd;
+            margin: 20px 0;
+        }
+        .result-date {
+            text-align: center;
+            font-weight: bold;
+            margin-bottom: 20px;
+            font-size: 18px;
+        }
+        .gua-types {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 5px;
+            text-align: center;
+        }
+        .gua-type {
+            font-weight: bold;
+            flex: 1;
+        }
+        .gua-names {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 20px;
+            text-align: center;
+        }
+        .gua-name {
+            flex: 1;
+            padding: 8px;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: all 0.3s;
+            font-size: 18px;
+        }
+        .gua-name:hover {
+            background-color: #f0f0f0;
+        }
+        .gua-name.active {
+            background-color: #8B4513;
+            color: white;
+        }
+        .gua-content {
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+            min-height: 80px;
+            margin-top: 10px;
+        }
+        .gua-content-title {
+            font-weight: bold;
+            margin-bottom: 10px;
+            font-size: 18px;
+        }
+        .hidden {
+            display: none;
+        }
+        .error {
+            color: red;
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #ffeeee;
+            border-radius: 4px;
+        }
+        .loading {
+            text-align: center;
+            margin: 20px 0;
+        }
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            border-radius: 50%;
+            border-top: 4px solid #8B4513;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 10px;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* 修改卦象图片和内容布局样式 */
+        .gua-image-container {
+            text-align: center;
+            margin-bottom: 15px;
+        }
+        
+        .gua-image {
+            max-width: 200px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+        
+        .gua-detail-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        
+        .gua-text-info {
+            margin-top: 15px;
+            text-align: center;
+            width: 100%;
+        }
+        
+        .gua-text-info p {
+            margin: 8px 0;
+            text-align: center;
+        }
+        
+        /* 修改后的运势选项卡样式 */
+        .luck-tabs {
+            display: flex;
+            margin-top: 20px;
+            border-bottom: 1px solid #ddd;
+            flex-wrap: wrap;
+        }
+
+        .luck-tab {
+            padding: 8px 15px;
+            cursor: pointer;
+            border: 1px solid transparent;
+            border-bottom: none;
+            border-radius: 4px 4px 0 0;
+            margin-right: 5px;
+            margin-bottom: 5px;
+            background-color: #f0f0f0;
+            font-size: 14px;
+        }
+
+        .luck-tab.active {
+            background-color: #8B4513;
+            color: white;
+            border-color: #ddd;
+        }
+
+        /* 运势对比视图样式 */
+        .luck-comparison {
+            display: flex;
+            margin-top: 15px;
+        }
+        
+        .luck-column {
+            flex: 1;
+            padding: 15px;
+            border: 1px solid #ddd;
+            margin: 0 5px;
+            background-color: white;
+            border-radius: 4px;
+        }
+        
+        .luck-column-title {
+            font-weight: bold;
+            text-align: center;
+            margin-bottom: 15px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #eee;
+        }
+        
+        .luck-year-item {
+            text-align: center; /* 内容居中 */
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px dashed #eee;
+        }
+        
+        .luck-year-item:last-child {
+            border-bottom: none;
+        }
+        
+        .luck-year-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+            color: #8B4513;
+        }
+
+        /* 响应式调整 */
+        @media (max-width: 768px) {
+            .luck-comparison {
+                flex-direction: column;
+            }
+            
+            .luck-column {
+                margin: 5px 0;
+            }
+            
+            .luck-tab {
+                flex: 0 0 calc(50% - 10px);
+                margin-bottom: 5px;
+                border-radius: 4px;
+                border: 1px solid #ddd;
+            }
+        }
+        /* 新增日历样式 */
+        .calendar {
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            padding: 15px;
+        }
+        
+        .calendar-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        
+        .calendar-title {
+            font-size: 18px;
+            font-weight: bold;
+            color: #8B4513;
+        }
+        
+        .calendar-nav {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .calendar-nav button {
+            background: #8B4513;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 5px 10px;
+            cursor: pointer;
+        }
+        
+        .calendar-weekdays {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            text-align: center;
+            margin-bottom: 10px;
+            font-weight: bold;
+        }
+        
+        .calendar-days {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 5px;
+        }
+        
+        .calendar-day {
+            aspect-ratio: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+            position: relative;
+            padding: 5px;
+        }
+        
+        .calendar-day:hover {
+            background: #f0f0f0;
+        }
+        
+        .calendar-day.active {
+            background: #8B4513;
+            color: white;
+        }
+        
+        .calendar-day.today {
+            font-weight: bold;
+            color: #8B4513;
+        }
+        
+        .calendar-day.today.active {
+            color: white;
+        }
+        
+        .day-number {
+            font-size: 16px;
+        }
+        
+        .day-trigram {
+            font-size: 12px;
+            margin-top: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            width: 100%;
+            text-align: center;
+        }
+        
+        /* 日运势详情样式 */
+        .day-luck-detail {
+            margin-top: 20px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            background: white;
+        }
+        
+        .day-luck-title {
+            font-size: 18px;
+            font-weight: bold;
+            margin-bottom: 15px;
+            color: #8B4513;
+            text-align: center;
+        }
+        
+        .day-luck-content {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+        
+        .day-luck-item {
+            flex: 1;
+            min-width: 200px;
+            padding: 10px;
+            border: 1px solid #eee;
+            border-radius: 4px;
+        }
+        
+        .day-luck-item-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+            color: #8B4513;
+        }
+
+        .luck-year-content {
+            display: flex;
+            align-items: flex-start;
+            gap: 15px;
+            padding: 10px;
+        }
+
+        .luck-year-image {
+            flex-shrink: 0;
+            width: 80px;
+            height: 80px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            object-fit: contain;
+        }
+
+        .luck-year-text {
+            flex-grow: 1;
+        }
+
+        .luck-year-title {
+            font-weight: bold;
+            margin-bottom: 8px;
+            color: #8B4513;
+        }
+
+        .luck-year-piwen {
+            color: #666;
+            line-height: 1.5;
+        }
+        
+    </style>
+</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">
+            <div class="divider"></div>
+            <div class="result-date" id="result-date"></div>
+            
+            <div class="gua-types">
+                <div class="gua-type">年卦</div>
+                <div class="gua-type">月卦</div>
+                <div class="gua-type">日卦</div>
+                <div class="gua-type">时卦</div>
+                <div class="gua-type">吉凶卦</div>
+            </div>
+            
+            <div class="gua-names">
+                <div class="gua-name" data-gua="year"></div>
+                <div class="gua-name" data-gua="month"></div>
+                <div class="gua-name" data-gua="day"></div>
+                <div class="gua-name" data-gua="hour"></div>
+                <div class="gua-name" data-gua="luck"></div>
+            </div>
+            
+            <div class="gua-content">
+                <div class="gua-content-title" id="gua-title"></div>
+                <div id="gua-detail"></div>
+            </div>
+            
+            <!-- 修改后的运势选项卡 -->
+            <div class="luck-tabs">
+                <div class="luck-tab active" data-tab="year">年运势对比</div>
+                <div class="luck-tab" data-tab="month">月运势对比</div>
+                
+            </div>
+            
+            <div class="luck-content">
+                <div id="year-content">
+                    <!-- 年运势对比内容将在这里动态生成 -->
+                    <div class="luck-comparison">
+                        <div class="luck-column">
+                            <div class="luck-column-title">年天时运势</div>
+                            <div id="year-tianshi-content"></div>
+                        </div>
+                        <div class="luck-column">
+                            <div class="luck-column-title">年人运走势</div>
+                            <div id="year-renyun-content"></div>
+                        </div>
+                    </div>
+                    
+                </div>
+                
+                <div id="month-content" class="hidden">
+                    <!-- 月运势对比内容将在这里动态生成 -->
+                    <div class="luck-comparison">
+                        <div class="luck-column">
+                            <div class="luck-column-title">月天时运势</div>
+                            <div id="month-tianshi-content"></div>
+                        </div>
+                        <div class="luck-column">
+                            <div class="luck-column-title">月人运走势</div>
+                            <div id="month-renyun-content"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 新增日运势内容 -->
+                <div id="day-content" class="hidden">
+                    <div class="calendar" id="calendar-container"></div>
+                    <div class="day-luck-detail" id="day-luck-detail">
+                        <div class="day-luck-title">选择日期查看详细运势</div>
+                        <div class="day-luck-content">
+                            <div class="day-luck-item">
+                                <div class="day-luck-item-title">天时卦象</div>
+                                <div id="day-tianshi-content"></div>
+                            </div>
+                            <div class="day-luck-item">
+                                <div class="day-luck-item-title">人运卦象</div>
+                                <div id="day-renyun-content"></div>
+                            </div>
+                        </div>
+                    </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>
+        // 存储当前卦象数据
+        let currentGuaData = {};
+        const baseImagePath = '/static/gua_images/'; // 卦象图片基础路径
+        
+        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) {
+                    currentGuaData = data.result;
+                    
+                    // 显示计算日期
+                    document.getElementById('result-date').textContent = `基础卦象`;
+                    
+                    // 更新卦名显示
+                    document.querySelector('[data-gua="year"]').textContent = currentGuaData.year_gua.trigram;
+                    document.querySelector('[data-gua="month"]').textContent = currentGuaData.month_gua.trigram;
+                    document.querySelector('[data-gua="day"]').textContent = currentGuaData.day_gua.trigram;
+                    document.querySelector('[data-gua="hour"]').textContent = currentGuaData.hour_gua.trigram;
+                    document.querySelector('[data-gua="luck"]').textContent = currentGuaData.luck_gua.trigram;
+                    
+                    // 默认显示年卦内容
+                    showGuaContent('year');
+                    document.querySelector('[data-gua="year"]').classList.add('active');
+                    
+                    // 显示运势内容
+                    showLuckContent('year');
+                    
+                    // 生成所有运势内容
+                    generateLuckContent();
+                    
+                    resultContainer.classList.remove('hidden');
+                } else {
+                    showError(data.error || '计算失败');
+                }
+            } catch (error) {
+                showError('网络请求失败: ' + error.message);
+            } finally {
+                loading.classList.add('hidden');
+            }
+        });
+        
+        // 点击卦名显示对应内容
+        document.querySelectorAll('.gua-name').forEach(name => {
+            name.addEventListener('click', function() {
+                // 移除所有active类
+                document.querySelectorAll('.gua-name').forEach(n => n.classList.remove('active'));
+                // 给当前点击的添加active类
+                this.classList.add('active');
+                
+                const guaType = this.getAttribute('data-gua');
+                showGuaContent(guaType);
+            });
+        });
+        
+        // 点击运势选项卡
+        document.querySelectorAll('.luck-tab').forEach(tab => {
+            tab.addEventListener('click', function() {
+                // 移除所有active类
+                document.querySelectorAll('.luck-tab').forEach(t => t.classList.remove('active'));
+                // 给当前点击的添加active类
+                this.classList.add('active');
+                
+                const tabType = this.getAttribute('data-tab');
+                showLuckContent(tabType);
+            });
+        });
+        
+        function showGuaContent(guaType) {
+            const guaData = currentGuaData[`${guaType}_gua`];
+            const guaName = guaData.trigram;
+            
+            // 构建图片路径
+            const imagePath = `${baseImagePath}${guaName}卦.png`;
+            
+            // 清空标题（因为现在标题也放在内容区）
+            document.getElementById('gua-title').textContent = '';
+            
+            document.getElementById('gua-detail').innerHTML = `
+                <div class="gua-detail-container">
+                    <div class="gua-image-container">
+                        <img src="${imagePath}" alt="${guaName}卦象图" class="gua-image" 
+                            onerror="this.style.display='none'">
+                    </div>
+                    <div class="gua-content-title">卦名：${guaName}</div>
+                    <div class="gua-text-info">
+                        <p><strong>命卦批文：</strong>${guaData.piwen || '无批文信息'}</p>
+                    </div>
+                </div>
+            `;
+        }
+        
+        function showLuckContent(tabType) {
+            // 隐藏所有内容区域
+            document.getElementById('year-content').classList.add('hidden');
+            document.getElementById('month-content').classList.add('hidden');
+            
+            // 显示选中的内容区域
+            document.getElementById(`${tabType}-content`).classList.remove('hidden');
+        }
+        
+        function generateLuckContent() {
+            // 生成年运势对比内容
+            generateYearLuckContent();
+            
+            // 生成月运势对比内容
+            generateMonthLuckContent();
+        }
+        
+        // 修改 generateYearLuckContent 函数
+        function generateYearLuckContent() {
+            // 年天时运势
+            let tianshiHtml = '';
+            if (currentGuaData.luck_tianshi_years && currentGuaData.luck_tianshi_years.length > 0) {
+                currentGuaData.luck_tianshi_years.forEach(item => {
+                    const imagePath = `${baseImagePath}${item.trigram}卦.png`;
+                    tianshiHtml += `
+                        <div class="luck-year-item">
+                            <div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
+                                <div style="flex-shrink: 0;">
+                                    <img src="${imagePath}" alt="${item.trigram}卦象图" 
+                                        style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
+                                        onerror="this.style.display='none'">
+                                </div>
+                                <div>
+                                    <div class="luck-year-title">${item.year}年：${item.trigram}</div>
+                                    <p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+            } else {
+                tianshiHtml = '<p>暂无年天时运势数据</p>';
+            }
+            document.getElementById('year-tianshi-content').innerHTML = tianshiHtml;
+            
+            // 年人运走势
+            let renyunHtml = '';
+            if (currentGuaData.luck_years && currentGuaData.luck_years.length > 0) {
+                currentGuaData.luck_years.forEach(item => {
+                    const imagePath = `${baseImagePath}${item.trigram}卦.png`;
+                    renyunHtml += `
+                        <div class="luck-year-item">
+                            <div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
+                                <div style="flex-shrink: 0;">
+                                    <img src="${imagePath}" alt="${item.trigram}卦象图" 
+                                        style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
+                                        onerror="this.style.display='none'">
+                                </div>
+                                <div>
+                                    <div class="luck-year-title">${item.year}年：${item.trigram}</div>
+                                    <p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+            } else {
+                renyunHtml = '<p>暂无年人运走势数据</p>';
+            }
+            document.getElementById('year-renyun-content').innerHTML = renyunHtml;
+        }
+        
+        // 修改 generateMonthLuckContent 函数
+        function generateMonthLuckContent() {
+            // 月天时运势
+            let monthTianshiHtml = '';
+            if (currentGuaData.luck_tianshi_month && currentGuaData.luck_tianshi_month.length > 0) {
+                currentGuaData.luck_tianshi_month.forEach(item => {
+                    const imagePath = `${baseImagePath}${item.trigram}卦.png`;
+                    monthTianshiHtml += `
+                        <div class="luck-year-item">
+                            <div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
+                                <div style="flex-shrink: 0;">
+                                    <img src="${imagePath}" alt="${item.trigram}卦象图" 
+                                        style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
+                                        onerror="this.style.display='none'">
+                                </div>
+                                <div>
+                                    <div class="luck-year-title">${item.month}月：${item.trigram}</div>
+                                    <p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+            } else {
+                monthTianshiHtml = '<p>暂无月天时运势数据</p>';
+            }
+            document.getElementById('month-tianshi-content').innerHTML = monthTianshiHtml;
+            
+            // 月人运走势
+            let monthRenyunHtml = '';
+            if (currentGuaData.luck_years_month && currentGuaData.luck_years_month.length > 0) {
+                currentGuaData.luck_years_month.forEach(item => {
+                    const imagePath = `${baseImagePath}${item.trigram}卦.png`;
+                    monthRenyunHtml += `
+                        <div class="luck-year-item">
+                            <div class="luck-year-content" style="display: flex; align-items: center; gap: 15px;">
+                                <div style="flex-shrink: 0;">
+                                    <img src="${imagePath}" alt="${item.trigram}卦象图" 
+                                        style="width: 80px; height: 80px; object-fit: contain; border: 1px solid #ddd; border-radius: 4px;"
+                                        onerror="this.style.display='none'">
+                                </div>
+                                <div>
+                                    <div class="luck-year-title">${item.month}月：${item.trigram}</div>
+                                    <p><strong>批文：</strong>${item.piwen || '无批文信息'}</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                });
+            } else {
+                monthRenyunHtml = '<p>暂无月人运走势数据</p>';
+            }
+            document.getElementById('month-renyun-content').innerHTML = monthRenyunHtml;
+        }
+        
+        function showDayLuckDetail(date) {
+            
+            // 查找天时卦象
+            const tianshiData = currentGuaData.luck_tianshi_days.find(d => d.date === date);
+            let tianshiHtml = '<p>无数据</p>';
+            if (tianshiData) {
+                tianshiHtml = `
+                    <p><strong>卦名：</strong>${tianshiData.trigram}</p>
+                    <p><strong>批文：</strong>${tianshiData.piwen || '无批文信息'}</p>
+                `;
+            }
+            document.getElementById('day-tianshi-content').innerHTML = tianshiHtml;
+            
+            // 查找人运卦象
+            const renyunData = currentGuaData.luck_days.find(d => d.date === date);
+            let renyunHtml = '<p>无数据</p>';
+            if (renyunData) {
+                renyunHtml = `
+                    <p><strong>卦名：</strong>${renyunData.trigram}</p>
+                    <p><strong>批文：</strong>${renyunData.piwen || '无批文信息'}</p>
+                `;
+            }
+            document.getElementById('day-renyun-content').innerHTML = renyunHtml;
+            
+            // 更新标题
+            document.querySelector('#day-luck-detail .day-luck-title').textContent = 
+                `${date} 日运势详情`;
+        }
+        
+        // 修改showLuckContent函数，添加日历生成
+        function showLuckContent(tabType) {
+            // 隐藏所有内容区域
+            document.getElementById('year-content').classList.add('hidden');
+            document.getElementById('month-content').classList.add('hidden');
+            document.getElementById('day-content').classList.add('hidden');
+            
+            // 显示选中的内容区域
+            const contentElement = document.getElementById(`${tabType}-content`);
+            contentElement.classList.remove('hidden');
+            
+            // 如果是日运势，初始化日历
+            if (tabType === 'day') {
+                const today = new Date();
+                generateCalendar(today.getFullYear(), today.getMonth());
+                
+                // 默认显示今天的运势
+                const todayStr = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+                const todayElement = document.querySelector(`.calendar-day[data-date="${todayStr}"]`);
+                if (todayElement) {
+                    todayElement.classList.add('active');
+                    showDayLuckDetail(todayStr);
+                }
+            }
+        }
+        
+        // 修改generateLuckContent函数，添加日运势生成
+        function generateLuckContent() {
+            // 年运势对比内容
+            generateYearLuckContent();
+            
+            // 月运势对比内容
+            generateMonthLuckContent();
+            
+            // 日运势日历会在点击选项卡时生成
+        }
+
+
+
+    </script>
+</body>
+</html>
\ No newline at end of file
