saintzealot/i-ching
2
1<!DOCTYPE html>2<html lang="zh-CN">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=device-width, initial-scale=1" />6<title>64 卦体检 · I-Ching dev</title>7<style>8 :root {9 --bg-page: #050a08;10 --bg-deep: #0a1612;11 --text: #e8d9b8;12 --text-dim: #8a7a5a;13 --gold: #c9a961;14 --gold-dim: #8a6b33;15 }16 * { box-sizing: border-box; }17 html, body { margin: 0; padding: 0; color: var(--text);18 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;19 background: var(--bg-page); min-height: 100vh;20 }21 body.bg-cosmos {22 background:23 radial-gradient(ellipse at 50% 35%, var(--bg-deep) 0%, #050a08 55%, #020604 100%);24 }25 body.bg-grey { background: #151515; }26 27 /* 控制面板 */28 .panel {29 position: sticky; top: 0; z-index: 100;30 background: rgba(0,0,0,0.85);31 backdrop-filter: blur(12px);32 padding: 10px 16px; border-bottom: 1px solid #222;33 display: flex; flex-wrap: wrap; gap: 18px; align-items: center;34 font-size: 12px;35 }36 .panel .group { display: flex; gap: 4px; align-items: center; }37 .panel label { color: var(--text-dim); margin-right: 6px; font-size: 11px; }38 .panel button {39 padding: 4px 10px; background: transparent; color: var(--text);40 border: 1px solid #333; border-radius: 3px; cursor: pointer;41 font-size: 11px; font-family: inherit;42 }43 .panel button:hover { border-color: #555; }44 .panel button.active {45 background: var(--gold-dim); color: #1a0f00;46 border-color: var(--gold); font-weight: 600;47 }48 49 /* Halo 层：默认隐藏，只在对应 body class 下显示 */50 .halo {51 position: fixed; left: 50%; top: 50%;52 width: 420px; height: 420px; margin: -210px 0 0 -210px;53 border-radius: 50%; pointer-events: none; z-index: 1;54 display: none;55 }56 body.cosmos-low .halo.cosmos,57 body.cosmos-high .halo.cosmos,58 body.coin-low .halo.coin,59 body.coin-high .halo.coin { display: block; }60 61 .halo.cosmos { filter: blur(24px); top: 35%; }62 body.cosmos-low .halo.cosmos { background: radial-gradient(circle, rgba(201,169,97,0.18) 0%, transparent 62%); }63 body.cosmos-high .halo.cosmos { background: radial-gradient(circle, rgba(201,169,97,0.30) 0%, transparent 62%); }64 65 .halo.coin { filter: blur(22px); top: 65%; }66 body.coin-low .halo.coin { background: radial-gradient(circle, rgba(201,169,97,0.14) 0%, transparent 60%); }67 body.coin-high .halo.coin { background: radial-gradient(circle, rgba(201,169,97,0.22) 0%, transparent 60%); }68 69 /* 网格：桌面 8 列，窄屏 4 列 */70 .grid {71 position: relative; z-index: 2;72 display: grid; grid-template-columns: repeat(8, 1fr);73 gap: 24px 12px; padding: 24px 16px;74 max-width: 1200px; margin: 0 auto;75 }76 @media (max-width: 900px) {77 .grid { grid-template-columns: repeat(4, 1fr); }78 }79 @media (max-width: 500px) {80 .grid { grid-template-columns: repeat(3, 1fr); gap: 20px 8px; }81 }82 83 .hex-card { text-align: center; }84 .hex-card .num {85 font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px;86 margin-top: 6px;87 }88 .hex-card .name {89 font-family: 'SimSun', 'Songti SC', serif;90 font-size: 14px; color: var(--text); margin-top: 4px;91 letter-spacing: 2px;92 }93 94 /* 爻线（严格 copy frontend/index.html `.hexes .col .h-line` + .yin 重构版）*/95 .lines {96 display: inline-flex; flex-direction: column-reverse; gap: 6px;97 }98 .h-line {99 width: 86px; height: 8px; position: relative; border-radius: 1px;100 background: linear-gradient(90deg,101 #6b4a1c 0%, #c9a961 18%, #ead29a 50%, #c9a961 82%, #6b4a1c 100%);102 box-shadow: inset 0 1px 0 rgba(255,220,160,0.22),103 inset 0 -1px 0 rgba(0,0,0,0.35);104 }105 .h-line.yin {106 /* B 方案 substrate 当前版：暗铜垂直渐变 + inset top shadow */107 background: linear-gradient(180deg,108 #2a1d10 0%, #4a3520 50%, #2a1d10 100%);109 box-shadow: inset 0 1px 1px rgba(0,0,0,0.45);110 display: flex; gap: 18px;111 }112 .h-line.yin::before,113 .h-line.yin::after {114 content: ""; flex: 1; height: 100%; border-radius: 1px;115 background: linear-gradient(90deg,116 #6b4a1c 0%, #c9a961 22%, #ead29a 50%, #c9a961 78%, #6b4a1c 100%);117 box-shadow: inset 0 1px 0 rgba(255,220,160,0.22),118 inset 0 -1px 0 rgba(0,0,0,0.35);119 }120 121 /* 对照模式：恢复原始 transparent gap，查看未修复前的样子 */122 body.gap-transparent .h-line.yin {123 background: transparent;124 box-shadow: none;125 }126 127 /* sibling 版 yin：JS 往每个 yin 塞两个 .yin-half 子 div。128 * 默认隐藏（使用 ::before/::after 版本），开关打开时显示 + 隐藏 pseudo。129 * 视觉预期：与 ::before/::after 版本每像素一致——用来证明 DOM 结构不影响渲染。 */130 .h-line.yin .yin-half { display: none; }131 body.yin-sibling .h-line.yin::before,132 body.yin-sibling .h-line.yin::after { content: none; }133 body.yin-sibling .h-line.yin .yin-half {134 display: block; flex: 1; height: 100%; border-radius: 1px;135 background: linear-gradient(90deg,136 #6b4a1c 0%, #c9a961 22%, #ead29a 50%, #c9a961 78%, #6b4a1c 100%);137 box-shadow: inset 0 1px 0 rgba(255,220,160,0.22),138 inset 0 -1px 0 rgba(0,0,0,0.35);139 }140 141 /* 高亮"重灾户"（4+ 阴连排）*/142 body.flag-dense .hex-card.dense-yin {143 outline: 1px solid rgba(200,90,90,0.4);144 outline-offset: 4px;145 border-radius: 2px;146 }147 148 .footer {149 text-align: center; padding: 24px; color: var(--text-dim);150 font-size: 11px; position: relative; z-index: 2;151 }152</style>153</head>154<body>155 156<div class="halo cosmos"></div>157<div class="halo coin"></div>158 159<div class="panel">160 <div class="group">161 <label>背景</label>162 <button data-group="bg" data-value="black" class="active">纯黑</button>163 <button data-group="bg" data-value="cosmos">星幕</button>164 <button data-group="bg" data-value="grey">中灰</button>165 </div>166 <div class="group">167 <label>Cosmos halo</label>168 <button data-group="cosmos" data-value="off" class="active">关</button>169 <button data-group="cosmos" data-value="low">0.18</button>170 <button data-group="cosmos" data-value="high">0.30</button>171 </div>172 <div class="group">173 <label>Coin halo</label>174 <button data-group="coin" data-value="off" class="active">关</button>175 <button data-group="coin" data-value="low">0.14</button>176 <button data-group="coin" data-value="high">0.22</button>177 </div>178 <div class="group">179 <label>Gap</label>180 <button data-group="gap" data-value="fill" class="active">填色 (B)</button>181 <button data-group="gap" data-value="transparent">原版 transparent</button>182 </div>183 <div class="group">184 <label>Yin 结构</label>185 <button data-group="sibling" data-value="off" class="active">::before/::after (当前)</button>186 <button data-group="sibling" data-value="on">两个 sibling div</button>187 </div>188 <div class="group">189 <label>标记</label>190 <button data-group="flag" data-value="off" class="active">关</button>191 <button data-group="flag" data-value="dense">圈 4+ 连阴</button>192 </div>193</div>194 195<div class="grid" id="grid"></div>196 197<div class="footer">198 64 卦体检页 · dev only · 爻线 CSS 与结果页 <code>.hexes .col .h-line</code> 1:1 对齐199</div>200 201<!-- 文件搬到 /dev-tools/ 后，path 不再嵌套 assets/ 目录 -->202<script src="all-hexagrams.js"></script>203 204</body>205</html>206