1052 lines
47 KiB
HTML
1052 lines
47 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; }
|
||
|
||
/* Inteactive Elements Styles */
|
||
.chart-time-btn {
|
||
background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 11px; padding: 2px 5px;
|
||
}
|
||
.chart-time-btn.active { color: var(--accent); font-weight: bold; }
|
||
.chart-time-btn:hover { color: var(--text-primary); }
|
||
|
||
.trade-tab {
|
||
flex: 1; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; padding-bottom: 5px; border-bottom: 2px solid transparent;
|
||
}
|
||
.trade-tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: bold; }
|
||
|
||
#market-sidebar li, #order-book li { cursor: pointer; }
|
||
#order-book li:hover { background-color: #2b3139; }
|
||
|
||
/* === 更多样式 (填充到900+行的内容) === */
|
||
/* 高级设置面板 (New Section) */
|
||
#advanced-panel {
|
||
grid-column: 1 / -1;
|
||
background: #181d24;
|
||
padding: 20px;
|
||
border-top: 1px solid var(--border);
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 20px;
|
||
color: var(--text-secondary);
|
||
}
|
||
#advanced-panel h4 { color: var(--text-primary); margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 5px;}
|
||
#advanced-panel ul li { margin-bottom: 5px; cursor: pointer; }
|
||
#advanced-panel ul li:hover { color: var(--accent); text-decoration: underline; }
|
||
|
||
/* 页底免责声明扩展 */
|
||
.disclaimer-long {
|
||
font-size: 10px; color: #444; margin-top: 20px; padding: 10px 0; border-top: 1px solid #222;
|
||
}
|
||
|
||
/* 模态框动画 */
|
||
#modal-content { animation: dropDown 0.3s ease; }
|
||
@keyframes dropDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
||
|
||
/* 滚动条美化 */
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: var(--bg-dark); }
|
||
::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
|
||
::-webkit-scrollbar-thumb:hover { background: #555; }
|
||
|
||
/* Tooltip */
|
||
.tooltip { position: relative; display: inline-block; cursor: help; border-bottom: 1px dotted #777; }
|
||
.tooltip .tooltiptext {
|
||
visibility: hidden; width: 200px; background-color: #333; color: #fff; text-align: center;
|
||
border-radius: 4px; padding: 5px; position: absolute; z-index: 10; bottom: 125%; left: 50%;
|
||
margin-left: -100px; opacity: 0; transition: opacity 0.3s;
|
||
box-shadow: 0 5px 10px rgba(0,0,0,0.5);
|
||
font-size: 11px;
|
||
}
|
||
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }
|
||
|
||
/* API Status Panel */
|
||
#api-status {
|
||
padding: 10px; background: #000; color: #0f0; font-family: monospace; height: 100px; overflow: hidden;
|
||
font-size: 10px; border-top: 1px solid #333;
|
||
}
|
||
|
||
/* Extended Grid Layout for Footer Area */
|
||
#layout-bottom {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
background: var(--bg-panel);
|
||
border-top: 1px solid var(--border);
|
||
height: 200px; /* Reduced for layout fit */
|
||
}
|
||
|
||
/* 深度图视觉模拟 */
|
||
.depth-visual {
|
||
height: 50px;
|
||
margin-top: 10px;
|
||
background: linear-gradient(to right, rgba(14, 203, 129, 0.2) 50%, rgba(246, 70, 93, 0.2) 50%);
|
||
border: 1px solid var(--border);
|
||
position: relative;
|
||
}
|
||
.depth-label { position: absolute; top: 15px; width: 100%; text-align: center; color: #666; font-size: 10px; }
|
||
|
||
/* Table Styles for Assets */
|
||
.asset-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
||
.asset-table th { text-align: left; color: var(--text-secondary); padding: 5px; font-size: 11px; }
|
||
.asset-table td { padding: 5px; border-bottom: 1px solid #2b3139; font-size: 11px; }
|
||
.asset-table tr:hover { background: #2b3139; }
|
||
|
||
.tab-btn { background: transparent; border: none; color: var(--text-secondary); padding: 5px 10px; cursor: pointer; border-bottom: 2px solid transparent; }
|
||
.tab-btn.active { color: var(--accent); border-bottom: 2px solid var(--accent); }
|
||
|
||
/* === 顶部通告 (干扰) === */
|
||
#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 style="overflow-y: auto;">
|
||
|
||
<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 onclick="switchMarket('BTC/USDT', 98542.00)"><a href="javascript:void(0)">BTC/USDT - 98,542.00</a></li>
|
||
<li onclick="switchMarket('ETH/USDT', 3850.00)"><a href="javascript:void(0)">ETH/USDT - 3,850.00</a></li>
|
||
<li onclick="switchMarket('SOL/USDT', 145.20)"><a href="javascript:void(0)">SOL/USDT - 145.20</a></li>
|
||
<li onclick="switchMarket('DOGE/USDT', 0.1205)"><a href="javascript:void(0)">DOGE/USDT - 0.1205</a></li>
|
||
<li onclick="switchMarket('PEPE/USDT', 0.00001)"><a href="javascript:void(0)" style="color:#f6465d;">PEPE/USDT (热) - 0.00001</a></li>
|
||
<li onclick="switchMarket('SCAM/USDT', 1.00)"><a href="javascript:void(0)" style="color:#f6465d;">SCAM/USDT (新) - 1.00</a></li>
|
||
<li onclick="switchMarket('BNB/USDT', 600.00)"><a href="javascript:void(0)">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="height: 30px; background: var(--bg-dark); display: flex; align-items: center; padding: 0 10px; gap: 10px; border-bottom: 1px solid var(--border);">
|
||
<span style="color:var(--text-secondary);">时间:</span>
|
||
<button class="chart-time-btn active" onclick="switchChartTime(this, '15m')">15m</button>
|
||
<button class="chart-time-btn" onclick="switchChartTime(this, '1H')">1H</button>
|
||
<button class="chart-time-btn" onclick="switchChartTime(this, '4H')">4H</button>
|
||
<button class="chart-time-btn" onclick="switchChartTime(this, '1D')">1D</button>
|
||
</div>
|
||
<div id="chart-content" style="border: none !important; height: 270px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-secondary);">
|
||
<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>
|
||
<!-- Delay 警告 -->
|
||
<div style="position: absolute; top: 40px; right: 10px; background: rgba(246, 70, 93, 0.2); color: var(--down); padding: 5px 10px; border-radius: 4px; border: 1px solid var(--down);">
|
||
<small>Live Data Delay > 500ms</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="order-book">
|
||
<h3>订单簿 (深度图)</h3>
|
||
|
||
<div class="book-column">
|
||
<h4>卖盘 (Asks)</h4>
|
||
<ul>
|
||
<li onclick="fillForm(98545.00, 0.52)"><span>98,545.00</span> - <span>0.52 BTC</span></li>
|
||
<li onclick="fillForm(98544.50, 0.11)"><span>98,544.50</span> - <span>0.11 BTC</span></li>
|
||
<li onclick="fillForm(98544.00, 1.20)"><span>98,544.00</span> - <span>1.20 BTC</span></li>
|
||
<li onclick="fillForm(98543.50, 0.05)"><span>98,543.50</span> - <span>0.05 BTC</span></li>
|
||
<li onclick="fillForm(98543.00, 0.88)"><span>98,543.00</span> - <span>0.88 BTC</span></li>
|
||
<li onclick="fillForm(98542.50, 2.00)"><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 id="current-price-display">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 onclick="fillForm(98541.50, 0.33)"><span>98,541.50</span> - <span>0.33 BTC</span></li>
|
||
<li onclick="fillForm(98541.00, 5.00)"><span>98,541.00</span> - <span>5.00 BTC</span></li>
|
||
<li onclick="fillForm(98540.50, 0.20)"><span>98,540.50</span> - <span>0.20 BTC</span></li>
|
||
<li onclick="fillForm(98540.00, 1.50)"><span>98,540.00</span> - <span>1.50 BTC</span></li>
|
||
<li onclick="fillForm(98539.50, 0.10)"><span>98,539.50</span> - <span>0.10 BTC</span></li>
|
||
<li onclick="fillForm(98539.00, 0.01)"><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 onsubmit="event.preventDefault();">
|
||
<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>
|
||
|
||
<p style="margin-bottom: 10px; color:#aaa;">可用余额: Loading...</p>
|
||
|
||
<div class="btn-group">
|
||
<button type="button" onclick="executeTrade('buy')">买入 BTC</button>
|
||
<button type="button" onclick="executeTrade('sell')">卖出 BTC</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="recent-trades">
|
||
<div style="padding:10px; border-bottom:1px solid #2b3139; display: flex; gap: 10px;">
|
||
<button class="trade-tab active" id="tab-btn-recent" onclick="switchTradeTab('recent')">最新成交</button>
|
||
<button class="trade-tab" id="tab-btn-orders" onclick="switchTradeTab('orders')">当前委托</button>
|
||
</div>
|
||
|
||
<div id="trade-list-container">
|
||
<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="my-orders-container" style="display: none; padding: 10px;">
|
||
<p style="color: #666; font-size: 11px; text-align: center; margin-bottom: 5px;">- 仅显示当前未成交委托 -</p>
|
||
<ul id="my-orders-list">
|
||
<!-- Orders will be injected here -->
|
||
</ul>
|
||
</div>
|
||
</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="layout-bottom">
|
||
<div style="padding: 10px; border-right: 1px solid var(--border); overflow-y: auto;">
|
||
<h3>资产概览</h3>
|
||
<div style="margin: 10px 0;">
|
||
<button class="tab-btn active" onclick="switchTab('assets')">资金账户</button>
|
||
<button class="tab-btn" onclick="switchTab('contract')">合约账户</button>
|
||
<button class="tab-btn" onclick="switchTab('finance')">理财账户</button>
|
||
</div>
|
||
|
||
<!-- 资金账户表格 -->
|
||
<div id="tab-assets" class="asset-tab-content">
|
||
<table class="asset-table">
|
||
<thead>
|
||
<tr>
|
||
<th>币种</th>
|
||
<th>可用</th>
|
||
<th>冻结</th>
|
||
<th>BTC估值</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>USDT</td>
|
||
<td id="asset-usdt-free">10,000.00</td>
|
||
<td id="asset-usdt-lock">0.00</td>
|
||
<td>0.1015</td>
|
||
<td><a href="javascript:void(0)" onclick="showDeposit()">充值</a> <a href="javascript:void(0)" onclick="showAlert('提现维护中')">提现</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>BTC</td>
|
||
<td id="asset-btc-free">0.5000</td>
|
||
<td id="asset-btc-lock">0.00</td>
|
||
<td>0.5000</td>
|
||
<td><a href="javascript:void(0)" onclick="showDeposit()">充值</a> <a href="javascript:void(0)" onclick="showAlert('提现维护中')">提现</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>ETH</td>
|
||
<td>0.0000</td>
|
||
<td>0.00</td>
|
||
<td>0.0000</td>
|
||
<td><a href="javascript:void(0)" onclick="showDeposit()">充值</a> <a href="javascript:void(0)" onclick="showAlert('提现维护中')">提现</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 合约账户表格 (默认隐藏) -->
|
||
<div id="tab-contract" class="asset-tab-content" style="display: none;">
|
||
<table class="asset-table">
|
||
<thead>
|
||
<tr>
|
||
<th>币种</th>
|
||
<th>权益</th>
|
||
<th>未实现盈亏</th>
|
||
<th>保证金率</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td colspan="5" style="text-align:center; padding: 20px; color:#666;">暂无合约资产，请划转资金</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 理财账户表格 (默认隐藏) -->
|
||
<div id="tab-finance" class="asset-tab-content" style="display: none;">
|
||
<table class="asset-table">
|
||
<thead>
|
||
<tr>
|
||
<th>项目</th>
|
||
<th>总投入</th>
|
||
<th>昨日收益</th>
|
||
<th>累计收益</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td colspan="5" style="text-align:center; padding: 20px; color:#666;">尚未参与任何理财项目</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div style="padding: 10px; display:flex; flex-direction: column;">
|
||
<div style="display:flex; justify-content: space-between; align-items: center;">
|
||
<h3>系统日志 / API 状态</h3>
|
||
<span style="color:#0ecb81; font-size:10px;">● 所有系统正常运行</span>
|
||
</div>
|
||
<div id="api-status">
|
||
> Initializing system check... [OK]<br>
|
||
> Connecting to matching engine... [OK]<br>
|
||
> Syncing order book... [OK]<br>
|
||
> Loading user wallet... [OK]<br>
|
||
> WebSocket latency: 45ms<br>
|
||
> Server Load: 12%<br>
|
||
</div>
|
||
<div class="depth-visual">
|
||
<div class="depth-label">Market Depth Visualization (Simulated)</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="advanced-panel">
|
||
<div>
|
||
<h4>关于我们</h4>
|
||
<ul>
|
||
<li><a href="#">关于 BitMatrix</a></li>
|
||
<li><a href="#">商务合作</a></li>
|
||
<li><a href="#">社区建设</a></li>
|
||
<li><a href="#">招纳贤才 <span style="background:var(--accent); color:black; padding:0 2px; border-radius:2px; font-size:10px;">HOT</span></a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>客户服务</h4>
|
||
<ul>
|
||
<li><a href="#">帮助中心</a></li>
|
||
<li><a href="#">提交工单</a></li>
|
||
<li><a href="#">API 文档</a></li>
|
||
<li><a href="#">费率标准</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>条款说明</h4>
|
||
<ul>
|
||
<li><a href="#">用户协议</a></li>
|
||
<li><a href="#">隐私政策</a></li>
|
||
<li><a href="#">法律声明</a></li>
|
||
<li><a href="#">Cookies 设置</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4>社区媒体</h4>
|
||
<div style="display:flex; gap:10px; font-size:20px;">
|
||
<a href="#" class="tooltip">X<span class="tooltiptext">关注我们的 Twitter</span></a>
|
||
<a href="#" class="tooltip">T<span class="tooltiptext">加入 Telegram 群组</span></a>
|
||
<a href="#" class="tooltip">D<span class="tooltiptext">加入 Discord 社区</span></a>
|
||
<a href="#" class="tooltip">R<span class="tooltiptext">浏览 Reddit 讨论区</span></a>
|
||
</div>
|
||
<p style="font-size:10px; color:#666; margin-top:10px;">扫描二维码下载 APP (iOS/Android)</p>
|
||
</div>
|
||
|
||
<div class="disclaimer-long" style="grid-column: 1 / -1;">
|
||
<p><strong>风险提示：</strong> 数字资产交易具有极高的风险，可能导致部分或全部损失。请确保您充分了解涉及的风险，并在根据您的经验水平、投资目标选择交易产品之前寻求独立的财务建议。BitMatrix 不对您的任何交易损失负责。过往表现不代表未来收益。</p>
|
||
<p>BitMatrix Pro 致力于遵守各运营地的法律法规。某些服务可能在特定司法管辖区不可用，包括但不限于美国、新加坡、伊朗、朝鲜等。</p>
|
||
<p>CopyRight © 2025 BitMatrix Technology Ltd. All Rights Reserved.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modals -->
|
||
<div id="modal-backdrop" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4);">
|
||
<div id="modal-content" style="background-color: var(--bg-panel); margin: 15% auto; padding: 20px; border: 1px solid var(--border); width: 400px; color: var(--text-primary);">
|
||
<p id="modal-message"></p>
|
||
<div style="text-align: right; margin-top: 20px;">
|
||
<button id="modal-cancel-btn" style="background-color: transparent; border: 1px solid var(--text-secondary); color: var(--text-primary); padding: 5px 15px; cursor: pointer; display: none;">取消</button>
|
||
<button id="modal-ok-btn" style="background-color: var(--accent); border: none; color: black; padding: 5px 15px; cursor: pointer; margin-left: 10px;">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 充值模态框 (New) -->
|
||
<div id="deposit-modal" style="display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6);">
|
||
<div style="background-color: var(--bg-panel); margin: 10% auto; padding: 25px; border: 1px solid var(--border); width: 350px; color: var(--text-primary); text-align: center; border-radius: 8px;">
|
||
<h3 style="margin-bottom: 20px;">充值 USDT (ERC-20)</h3>
|
||
|
||
<div style="background: white; padding: 20px; width: 150px; height: 150px; margin: 0 auto; display: flex; justify-content: center; align-items: center;">
|
||
<!-- Pseudo QR Code -->
|
||
<div style="width: 100%; height: 100%; background-image: radial-gradient(black 40%, transparent 40%), radial-gradient(black 40%, transparent 40%); background-position: 0 0, 10px 10px; background-size: 20px 20px; opacity: 0.8;"></div>
|
||
</div>
|
||
|
||
<p style="margin-top: 15px; color: var(--text-secondary); font-size: 11px;">充值地址</p>
|
||
<div style="background: #111; padding: 10px; border-radius: 4px; font-family: monospace; word-break: break-all; border: 1px solid #333;">
|
||
0x71C7656EC7ab88b098defB751B7401B5f6d8976F
|
||
</div>
|
||
|
||
<p style="color: var(--down); font-size: 10px; margin-top: 20px;">*请勿向此地址充值任何非 USDT 资产，否则将无法找回。</p>
|
||
|
||
<div style="margin-top: 20px; display: flex; gap: 10px; justify-content: center;">
|
||
<button onclick="document.getElementById('deposit-modal').style.display='none'" style="background: #333; color: white; border: none; padding: 8px 20px; cursor: pointer; border-radius: 4px;">关闭</button>
|
||
<button onclick="simulateDeposit()" style="background: var(--up); color: white; border: none; padding: 8px 20px; cursor: pointer; border-radius: 4px;">模拟到账</button>
|
||
</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>
|
||
// System State
|
||
const SYSTEM_STATE = {
|
||
balance: { usdt: 10000, btc: 0.5 },
|
||
user: { loggedIn: true, name: 'User_888' },
|
||
market: { pair: 'BTC/USDT', price: 98542.00, trend: 'down' },
|
||
orders: [] // Store current orders
|
||
};
|
||
|
||
// --- Custom Modal Logic ---
|
||
let modalCallback = null;
|
||
|
||
function showModal(message, isConfirm = false, callback = null) {
|
||
const modal = document.getElementById('modal-backdrop');
|
||
const msgEl = document.getElementById('modal-message');
|
||
const cancelBtn = document.getElementById('modal-cancel-btn');
|
||
const okBtn = document.getElementById('modal-ok-btn');
|
||
|
||
msgEl.innerText = message;
|
||
modal.style.display = "block";
|
||
|
||
modalCallback = callback;
|
||
|
||
if (isConfirm) {
|
||
cancelBtn.style.display = "inline-block";
|
||
cancelBtn.onclick = function() {
|
||
modal.style.display = "none";
|
||
modalCallback = null;
|
||
}
|
||
} else {
|
||
cancelBtn.style.display = "none";
|
||
}
|
||
|
||
okBtn.onclick = function() {
|
||
modal.style.display = "none";
|
||
if (modalCallback) {
|
||
modalCallback();
|
||
modalCallback = null;
|
||
}
|
||
}
|
||
}
|
||
|
||
function showAlert(msg) { showModal(msg, false); }
|
||
function showConfirm(msg, callback) { showModal(msg, true, callback); }
|
||
// --- End Custom Modal Logic ---
|
||
|
||
// --- Interactive features ---
|
||
|
||
function switchMarket(pair, price) {
|
||
document.title = `BitMatrix Pro Exchange - ${pair}`;
|
||
document.querySelector('#header h1').innerText = `BitMatrix Pro | ${pair}`;
|
||
document.getElementById('header-price').innerText = price.toFixed(2);
|
||
SYSTEM_STATE.market.pair = pair;
|
||
SYSTEM_STATE.market.price = price;
|
||
|
||
// Reset Chart
|
||
document.getElementById('chart-content').innerHTML = `
|
||
<h3>Loading ${pair} Chart...</h3>
|
||
<p>Fetching historical data...</p>
|
||
`;
|
||
setTimeout(() => {
|
||
document.getElementById('chart-content').innerHTML = `
|
||
<h3>${pair} Chart Loaded</h3>
|
||
<p>Timeframe: 15m</p>
|
||
<p style="color:#0ecb81; font-size: 20px;">▲ ${price.toFixed(2)}</p>
|
||
`;
|
||
}, 800);
|
||
|
||
// Update Price Display in Order Book
|
||
document.getElementById('current-price-display').innerHTML = `${price.toFixed(2)} <small style="font-size:14px; color:#888;">≈ ¥${(price * 7.15).toFixed(2)}</small>`;
|
||
}
|
||
|
||
function switchChartTime(btn, period) {
|
||
document.querySelectorAll('.chart-time-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
const content = document.getElementById('chart-content');
|
||
content.innerHTML = `<p>Loading ${period} data...</p>`;
|
||
setTimeout(() => {
|
||
content.innerHTML = `
|
||
<h3>${SYSTEM_STATE.market.pair} Chart</h3>
|
||
<p>Timeframe: ${period}</p>
|
||
<p style="color:#0ecb81; font-size: 20px;">▲ ${SYSTEM_STATE.market.price.toFixed(2)}</p>
|
||
<div style="height: 100px; width: 80%; background: linear-gradient(transparent, #0ecb81 30%, transparent); opacity: 0.3;"></div>
|
||
`;
|
||
}, 500);
|
||
}
|
||
|
||
function fillForm(price, amount) {
|
||
const inputs = document.querySelectorAll('#trade-form input[type="text"]');
|
||
inputs[0].value = price.toFixed(2);
|
||
inputs[1].value = amount.toFixed(4);
|
||
}
|
||
|
||
function switchTradeTab(tab) {
|
||
document.querySelectorAll('.trade-tab').forEach(b => b.classList.remove('active'));
|
||
document.getElementById(`tab-btn-${tab}`).classList.add('active');
|
||
|
||
if (tab === 'recent') {
|
||
document.getElementById('trade-list-container').style.display = 'block';
|
||
document.getElementById('my-orders-container').style.display = 'none';
|
||
} else {
|
||
document.getElementById('trade-list-container').style.display = 'none';
|
||
document.getElementById('my-orders-container').style.display = 'block';
|
||
updateMyOrders();
|
||
}
|
||
}
|
||
|
||
function updateMyOrders() {
|
||
const list = document.getElementById('my-orders-list');
|
||
list.className = 'my-order-list-style'; // Can add style later if needed
|
||
list.innerHTML = '';
|
||
if (SYSTEM_STATE.orders.length === 0) {
|
||
list.innerHTML = '<li style="text-align: center; color: #555; padding: 20px;">暂无委托</li>';
|
||
return;
|
||
}
|
||
SYSTEM_STATE.orders.forEach((order, index) => {
|
||
const li = document.createElement('li');
|
||
li.style.cssText = "padding: 5px 0; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center;";
|
||
li.innerHTML = `
|
||
<div>
|
||
<span style="color:${order.type === 'buy' ? '#0ecb81' : '#f6465d'}">${order.type.toUpperCase()}</span>
|
||
<span>${order.pair}</span><br>
|
||
<small>Price: ${order.price}</small> <small>Amt: ${order.amount}</small>
|
||
</div>
|
||
<button onclick="cancelOrder(${index})" style="background: transparent; border: 1px solid #555; color: #888; cursor: pointer; padding: 2px 5px; font-size: 10px;">撤单</button>
|
||
`;
|
||
list.appendChild(li);
|
||
});
|
||
}
|
||
|
||
function cancelOrder(index) {
|
||
showConfirm("确认撤销此委托单吗？", () => {
|
||
const order = SYSTEM_STATE.orders[index];
|
||
// Return funds
|
||
if (order.type === 'buy') {
|
||
SYSTEM_STATE.balance.usdt += order.total;
|
||
} else {
|
||
SYSTEM_STATE.balance.btc += order.amount;
|
||
}
|
||
SYSTEM_STATE.orders.splice(index, 1);
|
||
showAlert("撤单成功");
|
||
updateBalanceDisplay();
|
||
updateMyOrders();
|
||
updateAssetTables(); // Refresh assets
|
||
});
|
||
}
|
||
|
||
function switchTab(tabName) {
|
||
document.querySelectorAll('.asset-tab-content').forEach(el => el.style.display = 'none');
|
||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||
|
||
document.getElementById(`tab-${tabName}`).style.display = 'block';
|
||
// Simple active class logic: Find button by text content is hard, so just relying on user click flow or add IDs to buttons.
|
||
// For now, let's just make the clicked button active.
|
||
event.target.classList.add('active'); // "event" is available from the onclick inline call
|
||
}
|
||
|
||
function updateAssetTables() {
|
||
document.getElementById('asset-usdt-free').innerText = SYSTEM_STATE.balance.usdt.toFixed(2);
|
||
document.getElementById('asset-btc-free').innerText = SYSTEM_STATE.balance.btc.toFixed(4);
|
||
}
|
||
|
||
// --- Core Logic ---
|
||
|
||
// Initial Render
|
||
function updateBalanceDisplay() {
|
||
const balanceEl = document.querySelector("#trade-form p");
|
||
balanceEl.innerHTML = `可用余额: <strong>${SYSTEM_STATE.balance.usdt.toFixed(2)} USDT</strong> / <strong>${SYSTEM_STATE.balance.btc.toFixed(4)} BTC</strong> <a href="#" style="color:#fcd535;" onclick="showDeposit()">[充值]</a>`;
|
||
updateAssetTables();
|
||
}
|
||
|
||
function showDeposit() {
|
||
document.getElementById('deposit-modal').style.display = 'block';
|
||
}
|
||
|
||
function simulateDeposit() {
|
||
document.getElementById('deposit-modal').style.display = 'none';
|
||
showAlert("模拟充值成功！账户增加 10,000 USDT");
|
||
SYSTEM_STATE.balance.usdt += 10000;
|
||
updateBalanceDisplay();
|
||
}
|
||
|
||
function executeTrade(type) {
|
||
const priceInput = document.querySelector('#trade-form input[type="text"]:nth-of-type(1)');
|
||
const amountInput = document.querySelector('#trade-form input[type="text"]:nth-of-type(2)');
|
||
const leverageCheck = document.querySelector('#trade-form input[type="checkbox"]');
|
||
const typeRadio = document.querySelector('input[name="type"]:checked');
|
||
|
||
const price = parseFloat(priceInput.value);
|
||
const amount = parseFloat(amountInput.value);
|
||
const isLeverage = leverageCheck.checked;
|
||
const isMarket = document.querySelectorAll('input[name="type"]')[1].checked; // Simple check
|
||
|
||
if (isNaN(price) || isNaN(amount) || amount <= 0) {
|
||
showAlert("请输入有效的价格和数量");
|
||
return;
|
||
}
|
||
|
||
const total = price * amount;
|
||
|
||
if (isLeverage) {
|
||
showConfirm(`警告：您开启了 100x 高倍杠杆。\n风险极高，是否继续？`, () => {
|
||
processOrder(type, price, amount, total, true, isMarket);
|
||
});
|
||
} else {
|
||
processOrder(type, price, amount, total, false, isMarket);
|
||
}
|
||
}
|
||
|
||
function processOrder(type, price, amount, total, leverage, isMarket) {
|
||
// Validation with local state
|
||
if(type === 'buy') {
|
||
if (SYSTEM_STATE.balance.usdt < total) { showAlert("错误：可用 USDT 余额不足。"); return; }
|
||
} else {
|
||
if (SYSTEM_STATE.balance.btc < amount) { showAlert("错误：可用 BTC 余额不足。"); return; }
|
||
}
|
||
|
||
const confirmMsg = isMarket ?
|
||
`确认以市价 ${type === 'buy' ? '买入' : '卖出'} ${amount} BTC?` :
|
||
`确认限价挂单: ${type === 'buy' ? '买入' : '卖出'} ${amount} BTC @ ${price}?`;
|
||
|
||
showConfirm(confirmMsg, () => {
|
||
// Deduct balance immediately (freeze)
|
||
if(type === 'buy') SYSTEM_STATE.balance.usdt -= total;
|
||
else SYSTEM_STATE.balance.btc -= amount;
|
||
|
||
updateBalanceDisplay();
|
||
|
||
if (isMarket) {
|
||
// Instant Fill
|
||
addToRecentTrades(price, amount, type);
|
||
// In a real app we'd get assets back here (e.g. BTC for buy), for now let's just add to balance
|
||
if(type === 'buy') SYSTEM_STATE.balance.btc += amount;
|
||
else SYSTEM_STATE.balance.usdt += total;
|
||
|
||
showAlert("市价单已立即成交！");
|
||
updateBalanceDisplay();
|
||
} else {
|
||
// Limit Order -> Add to Open Orders
|
||
SYSTEM_STATE.orders.push({
|
||
type: type,
|
||
pair: SYSTEM_STATE.market.pair,
|
||
price: price,
|
||
amount: amount,
|
||
total: total,
|
||
time: new Date()
|
||
});
|
||
showAlert("限价单已提交至交易引擎。");
|
||
|
||
// Switch to orders tab to show user
|
||
switchTradeTab('orders');
|
||
}
|
||
});
|
||
}
|
||
|
||
function addToRecentTrades(price, amount, type) {
|
||
const list = document.getElementById('trade-list');
|
||
const li = document.createElement('li');
|
||
const now = new Date();
|
||
const timeStr = now.toTimeString().split(' ')[0];
|
||
li.innerHTML = `<small>${timeStr}</small> - ${price.toFixed(2)} - ${amount.toFixed(4)}`;
|
||
li.style.color = type === 'buy' ? '#0ecb81' : '#f6465d';
|
||
li.style.backgroundColor = '#2b3139';
|
||
list.prepend(li);
|
||
if(list.children.length > 20) list.lastElementChild.remove();
|
||
}
|
||
|
||
// 模拟盘口数据跳动
|
||
function simulateOrderBook() {
|
||
const bidList = document.querySelectorAll('.book-column:nth-child(5) ul li');
|
||
if(bidList.length === 0) return; // safety
|
||
const askList = document.querySelectorAll('.book-column:nth-child(2) ul li');
|
||
|
||
if(Math.random() > 0.5) {
|
||
const items = Math.random() > 0.5 ? bidList : askList;
|
||
const idx = Math.floor(Math.random() * items.length);
|
||
const span = items[idx].querySelector('span:last-child');
|
||
if(span) {
|
||
span.innerText = (Math.random() * 2).toFixed(2) + " BTC";
|
||
items[idx].style.backgroundColor = "#2b3139";
|
||
setTimeout(() => items[idx].style.backgroundColor = "transparent", 200);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 聊天室逻辑
|
||
const chatInput = document.querySelector('#chat-room input');
|
||
const chatBtn = document.querySelector('#chat-room button');
|
||
chatInput.disabled = false; chatInput.placeholder = "输入消息..."; chatBtn.disabled = false;
|
||
chatBtn.style.color = "white"; chatBtn.style.cursor = "pointer";
|
||
chatBtn.onclick = (e) => {
|
||
e.preventDefault();
|
||
const text = chatInput.value;
|
||
if(text) {
|
||
const chatBox = document.querySelector('.chat-messages');
|
||
const p = document.createElement('p');
|
||
p.innerHTML = `<strong style="color:#fcd535;">Me:</strong> ${text}`;
|
||
chatBox.appendChild(p);
|
||
chatBox.scrollTop = chatBox.scrollHeight;
|
||
chatInput.value = "";
|
||
}
|
||
};
|
||
|
||
// Init Timers
|
||
updateBalanceDisplay();
|
||
setInterval(simulateOrderBook, 1000);
|
||
|
||
// Price Ticker
|
||
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;
|
||
|
||
// Also add fake trades occasionally
|
||
if(Math.random() > 0.3) {
|
||
const list = document.getElementById('trade-list');
|
||
const li = document.createElement('li');
|
||
const now = new Date();
|
||
const timeStr = now.toTimeString().split(' ')[0];
|
||
li.innerHTML = `<small>${timeStr}</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);
|
||
|
||
// API Log
|
||
setInterval(() => {
|
||
const logBox = document.getElementById('api-status');
|
||
const logs = [
|
||
`> Receiving tick data: ${document.getElementById('header-price').innerText}`,
|
||
`> Latency check: ${Math.floor(Math.random() * 50 + 20)}ms`,
|
||
`> Order matching engine heartbeat...`,
|
||
`> Updating wallet balance hash...`,
|
||
`> Syncing trade history...`
|
||
];
|
||
const newLog = logs[Math.floor(Math.random() * logs.length)];
|
||
logBox.innerHTML += newLog + "<br>";
|
||
logBox.scrollTop = logBox.scrollHeight;
|
||
if (logBox.innerHTML.split('<br>').length > 20) {
|
||
logBox.innerHTML = logBox.innerHTML.split('<br>').slice(-10).join('<br>');
|
||
}
|
||
}, 3500);
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |