web: professional trading-terminal redesign — dark theme, chart grid, progress bars
This commit is contained in:
jackyu66git
+126
-107
@@ -4,138 +4,157 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ChanMacro — 市场状态</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<style>
|
||||
:root { --bg: #0d1117; --card: #161b22; --border: #30363d; --text: #e6edf3; --muted: #8b949e;
|
||||
--green: #3fb950; --red: #f85149; --orange: #d29922; --blue: #58a6ff; }
|
||||
body { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
|
||||
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
|
||||
.hero-regime { font-size: 3rem; font-weight: 700; }
|
||||
.hero-conf { font-size: 1.2rem; color: var(--muted); }
|
||||
.factor-value { font-size: 2.2rem; font-weight: 700; color: var(--text); }
|
||||
.factor-label { color: var(--muted); font-size: 0.85rem; }
|
||||
.regime-TREND { color: var(--green); }
|
||||
.regime-RANGE { color: var(--orange); }
|
||||
.regime-PANIC { color: var(--red); }
|
||||
.bucket-EXTREME, .bucket-STRONG { color: var(--green); }
|
||||
.bucket-NORMAL { color: var(--orange); }
|
||||
.bucket-WEAK, .bucket-PANIC { color: var(--red); }
|
||||
.badge-regime { font-size: 0.85rem; padding: 4px 12px; border-radius: 20px; }
|
||||
.badge-TREND { background: #1a3a1a; color: var(--green); }
|
||||
.badge-RANGE { background: #3a2a0a; color: var(--orange); }
|
||||
.badge-PANIC { background: #3a0a0a; color: var(--red); }
|
||||
.narrative { color: var(--muted); font-size: 0.9rem; }
|
||||
canvas { max-height: 300px; }
|
||||
.text-muted { color: var(--muted) !important; }
|
||||
.table { color: var(--text); }
|
||||
.table-dark { --bs-table-color: var(--text); --bs-table-bg: var(--card); }
|
||||
.form-select { background-color: var(--card); color: var(--text); border-color: var(--border); }
|
||||
.btn-primary { background-color: var(--blue); border-color: var(--blue); }
|
||||
strong { color: var(--text); }
|
||||
small { color: var(--muted); }
|
||||
* { 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="container-fluid py-3 px-4">
|
||||
<div class="app">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h4 class="mb-0">ChanMacro <span class="text-muted fs-6">市场状态</span></h4>
|
||||
<small class="text-muted" id="update-time"></small>
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge bg-secondary" id="db-status">加载中...</span>
|
||||
<h1><span>Chan</span>Macro</h1>
|
||||
</div>
|
||||
<div class="time"><span class="dot"></span> <span id="update-time">加载中...</span></div>
|
||||
</div>
|
||||
|
||||
<!-- Hero: Regime -->
|
||||
<div class="card p-4 mb-3 text-center">
|
||||
<div class="hero-conf mb-1">当前制度</div>
|
||||
<div class="hero-regime" id="hero-regime">—</div>
|
||||
<div>
|
||||
<span class="badge-regime" id="hero-badge">—</span>
|
||||
<span class="ms-2" style="color:#8b949e">置信度 <strong id="hero-conf" style="color:#e6edf3">—</strong></span>
|
||||
<span class="ms-2" style="color:#8b949e">成熟度 <strong id="hero-maturity" style="color:#e6edf3">—</strong></span>
|
||||
<!-- 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="row g-3 mb-3">
|
||||
<div class="col-md-3">
|
||||
<div class="card p-3 h-100">
|
||||
<div class="factor-label">价格结构</div>
|
||||
<div class="factor-value" id="f-price">—</div>
|
||||
<div class="text-muted small" id="f-price-sub"></div>
|
||||
<div class="narrative mt-1" id="f-price-narr"></div>
|
||||
</div>
|
||||
<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="col-md-3">
|
||||
<div class="card p-3 h-100">
|
||||
<div class="factor-label">市场广度</div>
|
||||
<div class="factor-value" id="f-breadth">—</div>
|
||||
<div class="text-muted small" id="f-breadth-sub"></div>
|
||||
<div class="narrative mt-1" id="f-breadth-narr"></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="col-md-3">
|
||||
<div class="card p-3 h-100">
|
||||
<div class="factor-label">OI 状态</div>
|
||||
<div class="factor-value fs-4" id="f-oi">—</div>
|
||||
<div class="text-muted small" id="f-oi-sub"></div>
|
||||
<div class="narrative mt-1" id="f-oi-narr"></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="col-md-3">
|
||||
<div class="card p-3 h-100">
|
||||
<div class="factor-label">波动率</div>
|
||||
<div class="factor-value" id="f-vol">—</div>
|
||||
<div class="text-muted small" id="f-vol-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 Row -->
|
||||
<div class="row g-3 mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="card p-3">
|
||||
<h6 class="mb-3">制度历史</h6>
|
||||
<canvas id="chart-regime"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card p-3">
|
||||
<h6 class="mb-3">市场广度</h6>
|
||||
<canvas id="chart-breadth"></canvas>
|
||||
</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="card p-3">
|
||||
<h6 class="mb-3">信号期望查询</h6>
|
||||
<div class="row g-2 align-items-end">
|
||||
<div class="col-auto">
|
||||
<select class="form-select form-select-sm" 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>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button class="btn btn-sm btn-primary" onclick="loadExpectancy()">查询</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="badge bg-secondary" id="exp-sufficiency">—</span>
|
||||
</div>
|
||||
<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>
|
||||
<div class="table-responsive mt-2">
|
||||
<table class="table table-sm table-dark mb-0" style="--bs-table-bg:#161b22">
|
||||
<thead><tr><th>层级</th><th>样本</th><th>有效样本</th><th>原始胜率</th><th>后验胜率</th><th>平均收益</th></tr></thead>
|
||||
<tbody id="exp-layers"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="mt-2 text-muted small" id="exp-summary"></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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user