101 lines
5.3 KiB
HTML
101 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>大六壬 · {{name}}</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Noto Serif SC', 'Songti SC', serif; background: #0a0a1a; color: #e8e0d0; min-height: 100vh; display: flex; justify-content: center; padding: 20px; }
|
|
.container { max-width: 800px; width: 100%; }
|
|
|
|
.header { text-align: center; padding: 40px 0 20px; border-bottom: 2px solid #8b6914; margin-bottom: 30px; }
|
|
.header h1 { font-size: 28px; color: #d4a843; letter-spacing: 8px; margin-bottom: 8px; }
|
|
.header .subtitle { font-size: 14px; color: #8a7a5a; letter-spacing: 4px; }
|
|
.header .info-line { font-size: 15px; color: #c8b070; margin-top: 12px; }
|
|
|
|
.plate-section { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius: 12px; border: 1px solid #3a3a5a; padding: 20px; margin-bottom: 24px; }
|
|
.plate-section h2 { font-size: 18px; color: #d4a843; letter-spacing: 4px; margin-bottom: 16px; text-align: center; }
|
|
.plate-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; text-align: center; }
|
|
.plate-cell { background: rgba(255,255,255,0.03); border-radius: 6px; padding: 8px 2px; border: 1px solid #2a2a4a; }
|
|
.plate-cell .label { font-size: 10px; color: #6a5a3a; }
|
|
.plate-cell .value { font-size: 16px; color: #d4a843; margin-top: 4px; }
|
|
.plate-cell .general { font-size: 11px; color: #8a7a5a; margin-top: 2px; }
|
|
|
|
.sike-section { background: linear-gradient(135deg, #1e1e30 0%, #1a2040 100%); border-radius: 12px; border: 1px solid #3a3a5a; padding: 24px; margin-bottom: 24px; }
|
|
.sike-section h2 { font-size: 18px; color: #d4a843; letter-spacing: 4px; margin-bottom: 16px; text-align: center; border-bottom: 1px solid #3a3a5a; padding-bottom: 12px; }
|
|
.sike-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
|
.sike-card { background: rgba(255,255,255,0.03); border-radius: 8px; padding: 14px; border: 1px solid #2a2a4a; }
|
|
.sike-card .label { font-size: 12px; color: #8a7a5a; letter-spacing: 2px; }
|
|
.sike-card .value { font-size: 18px; color: #d4a843; margin-top: 6px; }
|
|
.sike-card .detail { font-size: 12px; color: #7a6a4a; margin-top: 4px; }
|
|
|
|
.sanchuan-section { background: linear-gradient(135deg, #1e1e30 0%, #1a2040 100%); border-radius: 12px; border: 1px solid #3a3a5a; padding: 24px; margin-bottom: 24px; }
|
|
.sanchuan-section h2 { font-size: 18px; color: #d4a843; letter-spacing: 4px; margin-bottom: 16px; text-align: center; border-bottom: 1px solid #3a3a5a; padding-bottom: 12px; }
|
|
.sanchuan-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
|
|
.sanchuan-card { background: rgba(255,255,255,0.03); border-radius: 8px; padding: 16px; border: 1px solid #2a2a4a; text-align: center; }
|
|
.sanchuan-card .label { font-size: 12px; color: #8a7a5a; letter-spacing: 2px; }
|
|
.sanchuan-card .value { font-size: 28px; color: #d4a843; margin-top: 8px; text-shadow: 0 0 15px rgba(212,168,67,0.3); }
|
|
.sanchuan-card .rule { font-size: 11px; color: #6a5a3a; margin-top: 8px; }
|
|
|
|
.info-section { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
|
|
.info-card { background: linear-gradient(135deg, #1e1e30 0%, #1a2040 100%); border-radius: 12px; border: 1px solid #3a3a5a; padding: 16px; text-align: center; }
|
|
.info-card .label { font-size: 12px; color: #8a7a5a; }
|
|
.info-card .value { font-size: 16px; color: #c8b070; margin-top: 6px; }
|
|
|
|
.analysis-section { background: linear-gradient(135deg, #1e1e30 0%, #1a2040 100%); border-radius: 12px; border: 1px solid #3a3a5a; padding: 24px; margin-bottom: 24px; }
|
|
.analysis-section h2 { font-size: 18px; color: #d4a843; letter-spacing: 4px; margin-bottom: 16px; text-align: center; border-bottom: 1px solid #3a3a5a; padding-bottom: 12px; }
|
|
.analysis-content { font-size: 15px; color: #c8b070; line-height: 2; }
|
|
|
|
.disclaimer { text-align: center; padding: 20px; font-size: 12px; color: #5a5a6a; border-top: 1px solid #2a2a3a; margin-top: 20px; line-height: 1.6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>大 六 壬</h1>
|
|
<div class="subtitle">DA LIU REN</div>
|
|
<div class="info-line">{{dayStem}}{{dayBranch}}日 {{hourBranch}}时 · {{question}}</div>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<div class="info-card"><div class="label">月将</div><div class="value">{{yueJiang}}</div></div>
|
|
<div class="info-card"><div class="label">昼夜</div><div class="value">{{dayNight}}</div></div>
|
|
<div class="info-card"><div class="label">贵人</div><div class="value">{{nobleman}}</div></div>
|
|
<div class="info-card"><div class="label">旬空</div><div class="value">{{xunkong}}</div></div>
|
|
</div>
|
|
|
|
<div class="plate-section">
|
|
<h2>天 地 盘</h2>
|
|
<div class="plate-grid">
|
|
{{plate_cells}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sike-section">
|
|
<h2>四 课</h2>
|
|
<div class="sike-grid">
|
|
{{sike_cells}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="sanchuan-section">
|
|
<h2>三 传</h2>
|
|
<div class="sanchuan-grid">
|
|
{{sanchuan_cells}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="analysis-section">
|
|
<h2>综 合 断 语</h2>
|
|
<div class="analysis-content">{{analysis}}</div>
|
|
</div>
|
|
|
|
<div class="disclaimer">
|
|
本分析基于传统大六壬理论框架，仅供文化研究与娱乐参考<br>
|
|
不构成医疗、投资、婚姻、法律等任何决策依据
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|