69 lines
3.7 KiB
HTML
69 lines
3.7 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; }
|
|
|
|
.info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
|
.info-card { background: linear-gradient(135deg, #1e1e30, #1a2040); border-radius: 8px; border: 1px solid #3a3a5a; padding: 12px; text-align: center; }
|
|
.info-card .label { font-size: 11px; color: #6a5a3a; letter-spacing: 1px; }
|
|
.info-card .value { font-size: 15px; color: #d4a843; margin-top: 4px; }
|
|
|
|
.palace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 24px; }
|
|
.palace-cell { background: linear-gradient(135deg, #1a1a2e, #16213e); border-radius: 10px; border: 1px solid #3a3a5a; padding: 12px; min-height: 140px; }
|
|
.palace-cell .palace-name { font-size: 13px; color: #8a7a5a; text-align: center; border-bottom: 1px solid #2a2a4a; padding-bottom: 6px; margin-bottom: 8px; }
|
|
.palace-cell .row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
|
|
.palace-cell .row .label { color: #6a5a3a; }
|
|
.palace-cell .row .value { color: #c8b070; }
|
|
.palace-cell .row .value.good { color: #4ade80; }
|
|
.palace-cell .row .value.bad { color: #f87171; }
|
|
.palace-cell .row .value.neutral { color: #d4a843; }
|
|
.palace-cell.highlight { border-color: #d4a843; box-shadow: 0 0 10px rgba(212,168,67,0.2); }
|
|
|
|
.analysis-section { background: linear-gradient(135deg, #1e1e30, #1a2040); 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">QI MEN DUN JIA</div>
|
|
<div class="info-line">{{dayStem}}{{dayBranch}}日 {{hourStem}}{{hourBranch}}时 · {{question}}</div>
|
|
</div>
|
|
|
|
<div class="info-grid">
|
|
<div class="info-card"><div class="label">遁局</div><div class="value">{{yinYang}}遁{{juNumber}}局</div></div>
|
|
<div class="info-card"><div class="label">旬空</div><div class="value">{{xunkong}}</div></div>
|
|
<div class="info-card"><div class="label">驿马</div><div class="value">{{horse}}</div></div>
|
|
<div class="info-card"><div class="label">值符宫</div><div class="value">{{zifu}}</div></div>
|
|
</div>
|
|
|
|
<div class="palace-grid">
|
|
{{palace_cells}}
|
|
</div>
|
|
|
|
<div class="analysis-section">
|
|
<h2>综 合 断 语</h2>
|
|
<div class="analysis-content">{{analysis}}</div>
|
|
</div>
|
|
|
|
<div class="disclaimer">
|
|
本分析基于传统奇门遁甲理论框架，仅供文化研究与娱乐参考<br>
|
|
不构成医疗、投资、婚姻、法律等任何决策依据
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|