wangzhiming/huangjijingshi2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传文件至 templates

Browse Source
This commit is contained in:
wangzhiming 2025-05-22 17:00:36 +08:00
parent 4fdec5e5b7
commit 8c573f2492
1 changed files with 842 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

842
templates/index.html Normal file
View File

@ -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>