425 lines
17 KiB
HTML
425 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BitMatrix Pro Exchange - BTC/USDT</title>
|
||
<style>
|
||
/* === 全局样式 === */
|
||
:root {
|
||
--bg-dark: #12161c;
|
||
--bg-panel: #1e2329;
|
||
--text-primary: #eaecef;
|
||
--text-secondary: #848e9c;
|
||
--up: #0ecb81;
|
||
--down: #f6465d;
|
||
--accent: #fcd535;
|
||
--border: #2b3139;
|
||
}
|
||
|
||
body {
|
||
background-color: var(--bg-dark);
|
||
color: var(--text-primary);
|
||
font-family: 'Binance Plex', Arial, sans-serif;
|
||
margin: 0;
|
||
font-size: 12px;
|
||
overflow: hidden; /* 防止原生那种长滚动 */
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
a { text-decoration: none; color: var(--text-secondary); }
|
||
a:hover { color: var(--accent); }
|
||
ul { list-style: none; padding: 0; margin: 0; }
|
||
h1, h2, h3, h4 { margin: 0; font-weight: 500; }
|
||
hr { border: 0; border-top: 1px solid var(--border); margin: 0; }
|
||
|
||
/* === 顶部通告 (干扰) === */
|
||
#top-banner {
|
||
background: #2b3139;
|
||
color: var(--text-secondary);
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 5px;
|
||
font-size: 11px;
|
||
gap: 20px;
|
||
}
|
||
#top-banner p { margin: 0; }
|
||
/* 隐藏掉纯广告 */
|
||
#top-banner p:nth-child(3) { display: none; }
|
||
|
||
/* === 头部导航 === */
|
||
#header {
|
||
background: var(--bg-panel);
|
||
padding: 10px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid var(--border);
|
||
height: 40px;
|
||
}
|
||
#header h1 { font-size: 16px; color: var(--accent); }
|
||
#header nav a { margin: 0 10px; font-weight: bold; }
|
||
#header div span { margin-left: 15px; }
|
||
#header strong { color: var(--down); } /* 价格跌了是红色 */
|
||
|
||
/* === 主布局 (Grid) === */
|
||
#main-layout {
|
||
display: grid;
|
||
grid-template-columns: 250px 1fr 300px; /* 左中右三栏 */
|
||
flex: 1;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* === 左侧：市场列表 === */
|
||
#market-sidebar {
|
||
background: var(--bg-dark);
|
||
border-right: 1px solid var(--border);
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
}
|
||
#market-sidebar h3 { color: var(--text-secondary); margin-bottom: 10px; font-size: 14px; }
|
||
#market-sidebar form { display: flex; gap: 5px; margin-bottom: 10px; }
|
||
#market-sidebar input { background: #2b3139; border: none; color: white; padding: 5px; border-radius: 4px; width: 100%; }
|
||
#market-sidebar li a { display: block; padding: 8px 5px; border-radius: 2px; }
|
||
#market-sidebar li a:hover { background: var(--bg-panel); }
|
||
|
||
/* === 中间：图表与盘口 === */
|
||
#center-panel {
|
||
display: grid;
|
||
grid-template-rows: 60% 40%; /* 上图下盘口 */
|
||
border-right: 1px solid var(--border);
|
||
}
|
||
|
||
/* K线图占位优化 */
|
||
#chart-area {
|
||
background: var(--bg-panel);
|
||
border-bottom: 1px solid var(--border);
|
||
position: relative;
|
||
}
|
||
#chart-area > div:first-child {
|
||
border: none !important;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: var(--text-secondary);
|
||
}
|
||
/* 延迟警告美化 */
|
||
#chart-area > div:last-child {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: rgba(246, 70, 93, 0.2) !important;
|
||
color: var(--down);
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
border: 1px solid var(--down);
|
||
}
|
||
|
||
/* 订单簿 */
|
||
#order-book {
|
||
padding: 10px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-template-rows: auto 1fr;
|
||
gap: 10px;
|
||
overflow: hidden;
|
||
background: var(--bg-dark);
|
||
}
|
||
#order-book h3 { grid-column: 1 / -1; font-size: 13px; color: var(--text-secondary); margin-bottom: 5px; }
|
||
|
||
.book-column ul { font-family: 'Courier New', monospace; }
|
||
.book-column li { display: flex; justify-content: space-between; padding: 2px 0; }
|
||
|
||
/* 卖盘 (红) */
|
||
.book-column:nth-child(2) li span:first-child { color: var(--down); }
|
||
/* 买盘 (绿) */
|
||
.book-column:nth-child(5) li span:first-child { color: var(--up); }
|
||
|
||
/* 广告行隐藏 */
|
||
.book-ad { display: none; }
|
||
|
||
/* 当前价格居中 */
|
||
.current-price {
|
||
grid-column: 1 / -1;
|
||
text-align: center;
|
||
padding: 10px 0;
|
||
font-size: 20px;
|
||
color: var(--text-primary);
|
||
border-top: 1px solid var(--border);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
|
||
/* === 右侧：交易与聊天 === */
|
||
#right-panel {
|
||
background: var(--bg-panel);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 交易表单 */
|
||
#trade-form { padding: 15px; }
|
||
#trade-form form > div { margin-bottom: 10px; }
|
||
#trade-form label { display: block; color: var(--text-secondary); margin-bottom: 4px; }
|
||
#trade-form input[type="text"] {
|
||
width: 100%; box-sizing: border-box;
|
||
background: #2b3139; border: 1px solid var(--border);
|
||
color: white; padding: 8px; border-radius: 4px; text-align: right;
|
||
}
|
||
|
||
.btn-group { display: flex; gap: 10px; margin-top: 15px; }
|
||
.btn-group button { flex: 1; padding: 10px; border: none; border-radius: 4px; cursor: pointer; color: white; font-weight: bold; }
|
||
.btn-group button:first-child { background: var(--up); }
|
||
.btn-group button:last-child { background: var(--down); }
|
||
|
||
/* 杠杆警告美化 */
|
||
#trade-form > form > div:nth-last-child(2) {
|
||
border: 1px solid var(--border) !important;
|
||
background: #2b3139;
|
||
color: var(--text-secondary);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* 实时成交 */
|
||
#recent-trades { padding: 10px; flex: 1; overflow-y: hidden; }
|
||
#recent-trades li { display: flex; justify-content: space-between; color: var(--text-secondary); font-family: monospace; }
|
||
#recent-trades li:nth-child(odd) { color: var(--up); }
|
||
#recent-trades li:nth-child(even) { color: var(--down); }
|
||
|
||
/* 聊天室 */
|
||
#chat-room {
|
||
height: 200px;
|
||
border-top: 1px solid var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--bg-dark);
|
||
}
|
||
#chat-room h3 { padding: 8px; background: var(--bg-panel); font-size: 12px; }
|
||
.chat-messages { flex: 1; overflow-y: auto; padding: 5px; font-size: 11px; }
|
||
.chat-messages p { margin: 2px 0; line-height: 1.4; }
|
||
.chat-messages strong { color: #848e9c; cursor: pointer; }
|
||
#chat-room form { display: flex; border-top: 1px solid var(--border); }
|
||
#chat-room input { flex: 1; background: transparent; border: none; color: white; padding: 8px; }
|
||
|
||
/* === 底部 === */
|
||
#footer {
|
||
background: var(--bg-panel);
|
||
border-top: 1px solid var(--border);
|
||
padding: 5px 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #5e6673;
|
||
font-size: 11px;
|
||
}
|
||
#footer p { margin: 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="app-root">
|
||
|
||
<div id="top-banner">
|
||
<p><strong>[系统公告]</strong> 由于节点维护，ERC-20 代币提现将延迟 2 小时到账。</p>
|
||
<p><strong>[风险提示]</strong> 加密货币价格波动剧烈，请理性投资。</p>
|
||
<p><strong>[广告]</strong> 注册即送 5000 USDT 体验金！点击领取 >></p>
|
||
</div>
|
||
|
||
<div id="header">
|
||
<h1>BitMatrix Pro | 专业版交易终端</h1>
|
||
<nav>
|
||
<a href="#">法币交易</a> |
|
||
<a href="#">币币交易</a> |
|
||
<a href="#">合约交易 (100x)</a> |
|
||
<a href="#">理财挖矿</a> |
|
||
<a href="#">NFT 市场</a>
|
||
</nav>
|
||
<div>
|
||
<span>当前价格: <strong id="header-price">98,542.00</strong> USD</span>
|
||
<span>24h 涨跌: -2.4%</span>
|
||
<span>用户: User_888 (未认证)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="main-layout">
|
||
|
||
<div id="market-sidebar">
|
||
<h3>市场列表</h3>
|
||
<form>
|
||
<input type="text" placeholder="搜索币种...">
|
||
<button type="button" style="display:none;">搜</button>
|
||
</form>
|
||
<ul>
|
||
<li><a href="#">BTC/USDT - 98,542.00</a></li>
|
||
<li><a href="#">ETH/USDT - 3,850.00</a></li>
|
||
<li><a href="#">SOL/USDT - 145.20</a></li>
|
||
<li><a href="#">DOGE/USDT - 0.12</a></li>
|
||
<li><a href="#" style="color:#f6465d;">PEPE/USDT (热) - 0.00001</a></li>
|
||
<li><a href="#" style="color:#f6465d;">SCAM/USDT (新) - 1.00</a></li>
|
||
<li><a href="#">BNB/USDT - 600.00</a></li>
|
||
</ul>
|
||
|
||
<div style="margin-top:20px; color:#555; font-size:11px;">
|
||
<h4>新手任务</h4>
|
||
<p>1. 完成 KYC 认证 (未完成)</p>
|
||
<p>2. 首次充值 $100 (未完成)</p>
|
||
<p>3. 开启合约账户 (未完成)</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="center-panel">
|
||
|
||
<div id="chart-area">
|
||
<div style="border: 1px solid black; height: 300px; padding: 20px;">
|
||
<h3>[Interactive K-Line Chart Loading...]</h3>
|
||
<p>TradingView Module not loaded.</p>
|
||
<p>Loading scripts...</p>
|
||
<p>Connecting to WebSocket wss://api.bitmatrix.com...</p>
|
||
</div>
|
||
<div style="background-color: yellow;">
|
||
<small>Warning: Connection latency > 500ms. Data may be delayed.</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="order-book">
|
||
<h3>订单簿 (深度图)</h3>
|
||
|
||
<div class="book-column">
|
||
<h4>卖盘 (Asks)</h4>
|
||
<ul>
|
||
<li><span>98,545.00</span> - <span>0.52 BTC</span></li>
|
||
<li><span>98,544.50</span> - <span>0.11 BTC</span></li>
|
||
<li><span>98,544.00</span> - <span>1.20 BTC</span></li>
|
||
<li><span>98,543.50</span> - <span>0.05 BTC</span></li>
|
||
<li><span>98,543.00</span> - <span>0.88 BTC</span></li>
|
||
<li><span>98,542.50</span> - <span>2.00 BTC</span></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="book-ad">
|
||
<p>--- 广告：使用 BNB 抵扣手续费，享受 7.5 折优惠 ---</p>
|
||
</div>
|
||
|
||
<div class="current-price">
|
||
<h2>98,542.00 <small style="font-size:14px; color:#888;">≈ ¥705,321.00</small></h2>
|
||
</div>
|
||
|
||
<div class="book-column">
|
||
<h4>买盘 (Bids)</h4>
|
||
<ul>
|
||
<li><span>98,541.50</span> - <span>0.33 BTC</span></li>
|
||
<li><span>98,541.00</span> - <span>5.00 BTC</span></li>
|
||
<li><span>98,540.50</span> - <span>0.20 BTC</span></li>
|
||
<li><span>98,540.00</span> - <span>1.50 BTC</span></li>
|
||
<li><span>98,539.50</span> - <span>0.10 BTC</span></li>
|
||
<li><span>98,539.00</span> - <span>0.01 BTC</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="right-panel">
|
||
|
||
<div id="trade-form">
|
||
<h3>现货交易</h3>
|
||
<form>
|
||
<div>
|
||
<label>类型:</label>
|
||
<input type="radio" name="type" checked> 限价
|
||
<input type="radio" name="type"> 市价
|
||
</div>
|
||
<div>
|
||
<label>价格 (USDT):</label>
|
||
<input type="text" value="98542.00">
|
||
</div>
|
||
<div>
|
||
<label>数量 (BTC):</label>
|
||
<input type="text" placeholder="最小 0.0001">
|
||
</div>
|
||
|
||
<div style="border: 1px dashed red; margin: 5px; padding: 5px;">
|
||
<input type="checkbox"> <strong>开启 100x 杠杆 (高风险)</strong>
|
||
<br><small>借币利率 0.05%/天</small>
|
||
</div>
|
||
|
||
<div class="btn-group">
|
||
<button type="button" onclick="executeTrade('buy')">买入 BTC</button>
|
||
<button type="button" onclick="executeTrade('sell')">卖出 BTC</button>
|
||
</div>
|
||
</form>
|
||
<p style="margin-top:10px; color:#aaa;">可用余额: 0.00 USDT <a href="#" style="color:#fcd535;">[充值]</a></p>
|
||
</div>
|
||
|
||
<div id="recent-trades">
|
||
<h3 style="padding:10px; border-bottom:1px solid #2b3139;">最新成交</h3>
|
||
<ul id="trade-list">
|
||
<li><small>12:00:01</small> - 98,542.00 - 0.0021</li>
|
||
<li><small>12:00:02</small> - 98,541.50 - 0.0100</li>
|
||
<li><small>12:00:02</small> - 98,542.10 - 0.5000</li>
|
||
<li><small>12:00:03</small> - 98,542.00 - 0.0001</li>
|
||
<li><small>12:00:05</small> - 98,542.00 - 0.0332</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div id="chat-room">
|
||
<h3>Trollbox 聊天室 (999+)</h3>
|
||
<div class="chat-messages">
|
||
<p><strong>Trader_A:</strong> BTC 要崩了，快跑！</p>
|
||
<p><strong>MoonBoi:</strong> 楼上傻子，这是技术性回调。</p>
|
||
<p style="color:#f6465d;"><strong>Admin_Bot:</strong> 请勿在聊天室发布广告。</p>
|
||
<p style="opacity:0.5;"><strong>Scammer_01:</strong> 加我 V 信送内幕消息：SuperWin888</p>
|
||
<p><strong>Whale_Watcher:</strong> 监测到 5000 BTC 转入交易所。</p>
|
||
<p><strong>Noob:</strong> 为什么我的提现还没到？</p>
|
||
<p style="color:#fcd535;"><strong>System:</strong> 用户 User_999 爆仓了。</p>
|
||
</div>
|
||
<form>
|
||
<input type="text" placeholder="登录后发言..." disabled>
|
||
<button disabled style="background:#2b3139; color:#aaa; border:none;">发送</button>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div id="footer">
|
||
<p>联系我们 | API 文档 | 费率标准 | 上币申请</p>
|
||
<p>© 2025 BitMatrix. All rights reserved.</p>
|
||
<p>Disclaimer: Digital assets are highly volatile.</p>
|
||
<p>Server Time: 2025-12-22 12:00:00 UTC</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function executeTrade(type) {
|
||
if(type === 'buy') {
|
||
alert("错误：可用 USDT 余额不足，请充值。");
|
||
} else {
|
||
alert("错误：可用 BTC 余额不足，请充值。");
|
||
}
|
||
}
|
||
|
||
// 简单的价格模拟跳动
|
||
setInterval(() => {
|
||
const priceEl = document.getElementById('header-price');
|
||
let current = parseFloat(priceEl.innerText.replace(',',''));
|
||
let change = (Math.random() - 0.5) * 10;
|
||
let newPrice = (current + change).toFixed(2);
|
||
priceEl.innerText = newPrice;
|
||
|
||
// 同时也往成交列表加一条假数据
|
||
const list = document.getElementById('trade-list');
|
||
const li = document.createElement('li');
|
||
li.innerHTML = `<small>12:00:0${Math.floor(Math.random()*9)}</small> - ${newPrice} - ${(Math.random()).toFixed(4)}`;
|
||
li.style.color = change > 0 ? '#0ecb81' : '#f6465d';
|
||
list.prepend(li);
|
||
if(list.children.length > 20) list.lastElementChild.remove();
|
||
|
||
}, 2000);
|
||
</script>
|
||
|
||
</body>
|
||
</html> |