164 lines
7.9 KiB
HTML
164 lines
7.9 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>ChanMacro — 市场状态</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { background: #0a0e14; color: #c9d1d9; font-family: -apple-system, BlinkMacSystemFont, "SF Mono", monospace; }
|
|
.app { max-width: 1200px; margin: 0 auto; padding: 20px 24px; }
|
|
|
|
/* Header */
|
|
.header { display: flex; justify-content: space-between; align-items: flex-end; padding: 20px 0 28px;
|
|
border-bottom: 1px solid #1c2333; margin-bottom: 24px; }
|
|
.header h1 { font-size: 22px; font-weight: 600; letter-spacing: 1px; }
|
|
.header h1 span { color: #58a6ff; }
|
|
.header .time { color: #5c6675; font-size: 13px; }
|
|
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3fb950;
|
|
margin-right: 6px; animation: pulse 2s infinite; }
|
|
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
|
|
|
|
/* Regime Hero */
|
|
.hero { display: flex; gap: 16px; margin-bottom: 24px; }
|
|
.hero-card { flex: 1; background: #11161e; border: 1px solid #1c2333; border-radius: 8px; padding: 20px 24px; }
|
|
.hero-card.main { flex: 2; display: flex; align-items: center; gap: 28px; }
|
|
.regime-badge { display: inline-block; padding: 5px 16px; border-radius: 4px; font-size: 13px;
|
|
font-weight: 600; letter-spacing: 2px; }
|
|
.regime-badge.trend { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.3); }
|
|
.regime-badge.range { background: rgba(210,153,34,0.12); color: #d29922; border: 1px solid rgba(210,153,34,0.3); }
|
|
.regime-badge.panic { background: rgba(248,81,73,0.12); color: #f85149; border: 1px solid rgba(248,81,73,0.3); }
|
|
.regime-name { font-size: 42px; font-weight: 700; letter-spacing: 2px; }
|
|
.regime-name.trend { color: #3fb950; }
|
|
.regime-name.range { color: #d29922; }
|
|
.regime-name.panic { color: #f85149; }
|
|
.hero-stat { text-align: center; }
|
|
.hero-stat .val { font-size: 28px; font-weight: 600; color: #e6edf3; }
|
|
.hero-stat .lbl { font-size: 11px; color: #5c6675; letter-spacing: 1px; margin-top: 4px; }
|
|
|
|
/* Factor Grid */
|
|
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
|
|
.fcard { background: #11161e; border: 1px solid #1c2333; border-radius: 8px; padding: 18px 20px; }
|
|
.fcard .title { font-size: 11px; color: #5c6675; letter-spacing: 1.5px; margin-bottom: 10px; }
|
|
.fcard .score { font-size: 38px; font-weight: 700; margin-bottom: 4px; }
|
|
.fcard .sub { font-size: 12px; color: #5c6675; }
|
|
.fcard .bar-wrap { height: 3px; background: #1c2333; border-radius: 2px; margin-top: 12px; }
|
|
.fcard .bar { height: 100%; border-radius: 2px; transition: width 0.6s; }
|
|
|
|
/* Charts */
|
|
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
|
|
.chart-box { background: #11161e; border: 1px solid #1c2333; border-radius: 8px; padding: 18px 20px; }
|
|
.chart-box h3 { font-size: 12px; color: #5c6675; letter-spacing: 1.5px; margin-bottom: 14px; }
|
|
.chart-box canvas { max-height: 260px; }
|
|
|
|
/* Expectancy */
|
|
.exp { background: #11161e; border: 1px solid #1c2333; border-radius: 8px; padding: 18px 20px; }
|
|
.exp h3 { font-size: 12px; color: #5c6675; letter-spacing: 1.5px; margin-bottom: 14px; }
|
|
.exp-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
|
|
.exp select { background: #0a0e14; color: #c9d1d9; border: 1px solid #1c2333; padding: 6px 12px;
|
|
border-radius: 4px; font-size: 13px; }
|
|
.exp button { background: #1c3a5c; color: #58a6ff; border: 1px solid #2d4f7c; padding: 6px 18px;
|
|
border-radius: 4px; cursor: pointer; font-size: 13px; }
|
|
.exp button:hover { background: #254d7a; }
|
|
.exp .suff { font-size: 11px; padding: 3px 10px; border-radius: 3px; }
|
|
.suff-HIGH { background: rgba(63,185,80,0.12); color: #3fb950; }
|
|
.suff-MEDIUM { background: rgba(210,153,34,0.12); color: #d29922; }
|
|
.suff-LOW { background: rgba(248,81,73,0.12); color: #f85149; }
|
|
.suff-INSUFFICIENT { background: rgba(92,102,117,0.12); color: #5c6675; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
|
th { text-align: left; color: #5c6675; font-weight: 500; padding: 8px 10px; border-bottom: 1px solid #1c2333; }
|
|
td { padding: 7px 10px; border-bottom: 1px solid #0e1219; color: #8b949e; }
|
|
td strong { color: #e6edf3; }
|
|
.exp-summary { margin-top: 14px; font-size: 13px; color: #8b949e; padding: 10px 14px;
|
|
background: #0d1117; border-radius: 6px; border-left: 3px solid #58a6ff; }
|
|
.exp-summary strong { color: #e6edf3; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
|
|
<!-- Header -->
|
|
<div class="header">
|
|
<div>
|
|
<h1><span>Chan</span>Macro</h1>
|
|
</div>
|
|
<div class="time"><span class="dot"></span> <span id="update-time">加载中...</span></div>
|
|
</div>
|
|
|
|
<!-- Regime Hero -->
|
|
<div class="hero">
|
|
<div class="hero-card main">
|
|
<div>
|
|
<div class="regime-badge" id="hero-badge">—</div>
|
|
<div class="regime-name" id="hero-regime">—</div>
|
|
</div>
|
|
<div style="display:flex; gap:32px; margin-left:auto;">
|
|
<div class="hero-stat"><div class="val" id="hero-conf">—</div><div class="lbl">置信度</div></div>
|
|
<div class="hero-stat"><div class="val" id="hero-maturity">—</div><div class="lbl">成熟度</div></div>
|
|
</div>
|
|
</div>
|
|
<div class="hero-card" style="flex:1">
|
|
<div class="hero-stat"><div class="val" id="hero-ps">—</div><div class="lbl">价格结构</div></div>
|
|
</div>
|
|
<div class="hero-card" style="flex:1">
|
|
<div class="hero-stat"><div class="val" id="hero-br">—</div><div class="lbl">市场广度</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 Factor Cards -->
|
|
<div class="grid">
|
|
<div class="fcard">
|
|
<div class="title">价格结构 PRICE STRUCTURE</div>
|
|
<div class="score" id="f-price">—</div>
|
|
<div class="sub" id="f-price-sub"></div>
|
|
<div class="bar-wrap"><div class="bar" id="bar-price"></div></div>
|
|
</div>
|
|
<div class="fcard">
|
|
<div class="title">市场广度 BREADTH</div>
|
|
<div class="score" id="f-breadth">—</div>
|
|
<div class="sub" id="f-breadth-sub"></div>
|
|
<div class="bar-wrap"><div class="bar" id="bar-breadth"></div></div>
|
|
</div>
|
|
<div class="fcard">
|
|
<div class="title">持仓状态 OI MATRIX</div>
|
|
<div class="score" id="f-oi" style="font-size:24px">—</div>
|
|
<div class="sub" id="f-oi-sub"></div>
|
|
</div>
|
|
<div class="fcard">
|
|
<div class="title">波动率 VOLATILITY</div>
|
|
<div class="score" id="f-vol">—</div>
|
|
<div class="sub" id="f-vol-sub"></div>
|
|
<div class="bar-wrap"><div class="bar" id="bar-vol"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts -->
|
|
<div class="charts">
|
|
<div class="chart-box"><h3>制度历史 REGIME HISTORY</h3><canvas id="chart-regime"></canvas></div>
|
|
<div class="chart-box"><h3>市场广度 BREADTH</h3><canvas id="chart-breadth"></canvas></div>
|
|
</div>
|
|
|
|
<!-- Expectancy -->
|
|
<div class="exp">
|
|
<h3>信号期望 SIGNAL EXPECTANCY</h3>
|
|
<div class="exp-row">
|
|
<select id="exp-signal">
|
|
<option value="B3">B3 · 三买</option><option value="B2">B2 · 二买</option><option value="B1">B1 · 一买</option>
|
|
<option value="S3">S3 · 三卖</option><option value="S2">S2 · 二卖</option><option value="S1">S1 · 一卖</option>
|
|
</select>
|
|
<button onclick="loadExpectancy()">查询</button>
|
|
<span class="suff" id="exp-sufficiency">—</span>
|
|
</div>
|
|
<table>
|
|
<thead><tr><th>层级</th><th>样本</th><th>有效样本</th><th>原始胜率</th><th>后验胜率</th><th>平均收益</th></tr></thead>
|
|
<tbody id="exp-layers"></tbody>
|
|
</table>
|
|
<div class="exp-summary" id="exp-summary"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/dashboard.js"></script>
|
|
</body>
|
|
</html>
|