1052 lines
48 KiB
HTML
1052 lines
48 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>
|
|
/* === Global Styles === */
|
|
: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; /* Prevent native long scroll */
|
|
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; }
|
|
|
|
/* === More Styles (Filling up content) === */
|
|
/* Advanced Settings Panel (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; }
|
|
|
|
/* Footer Disclaimer Extension */
|
|
.disclaimer-long {
|
|
font-size: 10px; color: #444; margin-top: 20px; padding: 10px 0; border-top: 1px solid #222;
|
|
}
|
|
|
|
/* Modal Animation */
|
|
#modal-content { animation: dropDown 0.3s ease; }
|
|
@keyframes dropDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
|
|
|
/* Scrollbar Styling */
|
|
::-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 Chart Visual Simulation */
|
|
.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 Notice (Interference) === */
|
|
#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; }
|
|
/* Hide pure ads */
|
|
#top-banner p:nth-child(3) { display: none; }
|
|
|
|
/* === Header Navigation === */
|
|
#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); } /* Red if price drops */
|
|
|
|
/* === Main Layout (Grid) === */
|
|
#main-layout {
|
|
display: grid;
|
|
grid-template-columns: 250px 1fr 300px; /* Left Middle Right 3 Columns */
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* === Left: Market List === */
|
|
#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); }
|
|
|
|
/* === Middle: Chart & Orderbook === */
|
|
#center-panel {
|
|
display: grid;
|
|
grid-template-rows: 60% 40%; /* Top Chart Bottom Orderbook */
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
/* K-Line Placeholder Optimization */
|
|
#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);
|
|
}
|
|
/* Latency Warning Styling */
|
|
#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);
|
|
}
|
|
|
|
/* Orderbook */
|
|
#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; }
|
|
|
|
/* Asks (Red) */
|
|
.book-column:nth-child(2) li span:first-child { color: var(--down); }
|
|
/* Bids (Green) */
|
|
.book-column:nth-child(5) li span:first-child { color: var(--up); }
|
|
|
|
/* Ad Row Hidden */
|
|
.book-ad { display: none; }
|
|
|
|
/* Centered Current Price */
|
|
.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: Trade & Chat === */
|
|
#right-panel {
|
|
background: var(--bg-panel);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Trade Form */
|
|
#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); }
|
|
|
|
/* Leverage Warning Styling */
|
|
#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 */
|
|
#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 */
|
|
#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 === */
|
|
#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>[System Notice]</strong> Due to node maintenance, ERC-20 token withdrawals will be delayed by 2 hours.</p>
|
|
<p><strong>[Risk Warning]</strong> Cryptocurrency prices are highly volatile. Please invest rationally.</p>
|
|
<p><strong>[Ad]</strong> Register to get 5000 USDT trial funds! Click to claim >></p>
|
|
</div>
|
|
|
|
<div id="header">
|
|
<h1>BitMatrix Pro | Professional Trading Terminal</h1>
|
|
<nav>
|
|
<a href="#">Fiat Trading</a> |
|
|
<a href="#">Spot Trading</a> |
|
|
<a href="#">Futures (100x)</a> |
|
|
<a href="#">Earn</a> |
|
|
<a href="#">NFT Market</a>
|
|
</nav>
|
|
<div>
|
|
<span>Price: <strong id="header-price">98,542.00</strong> USD</span>
|
|
<span>24h Chg: -2.4%</span>
|
|
<span>User: User_888 (Unverified)</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main-layout">
|
|
|
|
<div id="market-sidebar">
|
|
<h3>Market List</h3>
|
|
<form>
|
|
<input type="text" placeholder="Search coin...">
|
|
<button type="button" style="display:none;">Search</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 (Hot) - 0.00001</a></li>
|
|
<li onclick="switchMarket('SCAM/USDT', 1.00)"><a href="javascript:void(0)" style="color:#f6465d;">SCAM/USDT (New) - 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>Newcomer Tasks</h4>
|
|
<p>1. Complete KYC (Incomplete)</p>
|
|
<p>2. First Deposit $100 (Incomplete)</p>
|
|
<p>3. Open Futures Account (Incomplete)</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);">Time:</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 Warning -->
|
|
<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>Order Book (Depth)</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>--- Ad: Use BNB to deduct fees for a 25% discount ---</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>
|
|
|
|
<!-- Right: Trade & Chat -->
|
|
<div id="right-panel">
|
|
|
|
<div id="trade-form">
|
|
<h3>Spot Trading</h3>
|
|
<form onsubmit="event.preventDefault();">
|
|
<div>
|
|
<label>Type:</label>
|
|
<input type="radio" name="type" checked> Limit
|
|
<input type="radio" name="type"> Market
|
|
</div>
|
|
<div>
|
|
<label>Price (USDT):</label>
|
|
<input type="text" value="98542.00">
|
|
</div>
|
|
<div>
|
|
<label>Amount (BTC):</label>
|
|
<input type="text" placeholder="Min 0.0001">
|
|
</div>
|
|
|
|
<div style="border: 1px dashed red; margin: 5px; padding: 5px;">
|
|
<input type="checkbox"> <strong>Enable 100x Leverage (High Risk)</strong>
|
|
<br><small>Borrow Rate 0.05%/day</small>
|
|
</div>
|
|
|
|
<p style="margin-bottom: 10px; color:#aaa;">Available Balance: Loading...</p>
|
|
|
|
<div class="btn-group">
|
|
<button type="button" onclick="executeTrade('buy')">Buy BTC</button>
|
|
<button type="button" onclick="executeTrade('sell')">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')">Recent Trades</button>
|
|
<button class="trade-tab" id="tab-btn-orders" onclick="switchTradeTab('orders')">Open 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;">- Only showing open orders -</p>
|
|
<ul id="my-orders-list">
|
|
<!-- Orders will be injected here -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat-room">
|
|
<h3>Trollbox Chat (999+)</h3>
|
|
<div class="chat-messages">
|
|
<p><strong>Trader_A:</strong> BTC is crashing, run!</p>
|
|
<p><strong>MoonBoi:</strong> Idiot above, it's a technical correction.</p>
|
|
<p style="color:#f6465d;"><strong>Admin_Bot:</strong> Do not post ads in chat.</p>
|
|
<p style="opacity:0.5;"><strong>Scammer_01:</strong> Add my WeChat for insider info: SuperWin888</p>
|
|
<p><strong>Whale_Watcher:</strong> 5000 BTC inflow to exchange detected.</p>
|
|
<p><strong>Noob:</strong> Why hasn't my withdrawal arrived?</p>
|
|
<p style="color:#fcd535;"><strong>System:</strong> User User_999 liquidated.</p>
|
|
</div>
|
|
<form>
|
|
<input type="text" placeholder="Log in to chat..." disabled>
|
|
<button disabled style="background:#2b3139; color:#aaa; border:none;">Send</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div id="layout-bottom">
|
|
<div style="padding: 10px; border-right: 1px solid var(--border); overflow-y: auto;">
|
|
<h3>Assets Overview</h3>
|
|
<div style="margin: 10px 0;">
|
|
<button class="tab-btn active" onclick="switchTab('assets')">Fund Account</button>
|
|
<button class="tab-btn" onclick="switchTab('contract')">Futures Account</button>
|
|
<button class="tab-btn" onclick="switchTab('finance')">Earn Account</button>
|
|
</div>
|
|
|
|
<!-- Fund Account Table -->
|
|
<div id="tab-assets" class="asset-tab-content">
|
|
<table class="asset-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Coin</th>
|
|
<th>Available</th>
|
|
<th>Frozen</th>
|
|
<th>BTC Value</th>
|
|
<th>Action</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()">Deposit</a> <a href="javascript:void(0)" onclick="showAlert('Withdrawal in maintenance')">Withdraw</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()">Deposit</a> <a href="javascript:void(0)" onclick="showAlert('Withdrawal in maintenance')">Withdraw</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()">Deposit</a> <a href="javascript:void(0)" onclick="showAlert('Withdrawal in maintenance')">Withdraw</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Futures Account Table (Hidden by default) -->
|
|
<div id="tab-contract" class="asset-tab-content" style="display: none;">
|
|
<table class="asset-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Coin</th>
|
|
<th>Equity</th>
|
|
<th>Unrealized PNL</th>
|
|
<th>Margin Ratio</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="5" style="text-align:center; padding: 20px; color:#666;">No futures assets, please transfer funds</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Earn Account Table (Hidden by default) -->
|
|
<div id="tab-finance" class="asset-tab-content" style="display: none;">
|
|
<table class="asset-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Product</th>
|
|
<th>Total Stake</th>
|
|
<th>Yest. Yield</th>
|
|
<th>Total Yield</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="5" style="text-align:center; padding: 20px; color:#666;">No active earn products</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>System Log / API Status</h3>
|
|
<span style="color:#0ecb81; font-size:10px;">● All systems operational</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>About Us</h4>
|
|
<ul>
|
|
<li><a href="#">About BitMatrix</a></li>
|
|
<li><a href="#">Business Contact</a></li>
|
|
<li><a href="#">Community</a></li>
|
|
<li><a href="#">Careers <span style="background:var(--accent); color:black; padding:0 2px; border-radius:2px; font-size:10px;">HOT</span></a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Customer Service</h4>
|
|
<ul>
|
|
<li><a href="#">Help Center</a></li>
|
|
<li><a href="#">Submit Ticket</a></li>
|
|
<li><a href="#">API Documentation</a></li>
|
|
<li><a href="#">Fee Structure</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Terms & Conditions</h4>
|
|
<ul>
|
|
<li><a href="#">User Agreement</a></li>
|
|
<li><a href="#">Privacy Policy</a></li>
|
|
<li><a href="#">Legal Disclaimer</a></li>
|
|
<li><a href="#">Cookie Settings</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4>Communities</h4>
|
|
<div style="display:flex; gap:10px; font-size:20px;">
|
|
<a href="#" class="tooltip">X<span class="tooltiptext">Follow on Twitter</span></a>
|
|
<a href="#" class="tooltip">T<span class="tooltiptext">Join Telegram Group</span></a>
|
|
<a href="#" class="tooltip">D<span class="tooltiptext">Join Discord</span></a>
|
|
<a href="#" class="tooltip">R<span class="tooltiptext">Browse Reddit</span></a>
|
|
</div>
|
|
<p style="font-size:10px; color:#666; margin-top:10px;">Scan QR to download APP (iOS/Android)</p>
|
|
</div>
|
|
|
|
<div class="disclaimer-long" style="grid-column: 1 / -1;">
|
|
<p><strong>Risk Warning:</strong> Digital asset trading is highly risky and may result in partial or total loss. Please ensure you fully understand the risks involved and seek independent financial advice before choosing a trading product based on your experience level and investment objectives. BitMatrix is not responsible for any of your trading losses. Past performance is not indicative of future returns.</p>
|
|
<p>BitMatrix Pro is committed to complying with the laws and regulations of each place of operation. Certain services may not be available in certain jurisdictions, including but not limited to the United States, Singapore, Iran, North Korea, etc.</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;">Cancel</button>
|
|
<button id="modal-ok-btn" style="background-color: var(--accent); border: none; color: black; padding: 5px 15px; cursor: pointer; margin-left: 10px;">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Deposit Modal (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;">Deposit 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;">Deposit Address</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;">*Do not deposit non-USDT assets to this address, or they will be lost.</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;">Close</button>
|
|
<button onclick="simulateDeposit()" style="background: var(--up); color: white; border: none; padding: 8px 20px; cursor: pointer; border-radius: 4px;">Simulate Arrival</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer">
|
|
<p>Contact Us | API | Fees | Listing Application</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;">No Open Orders</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;">Cancel</button>
|
|
`;
|
|
list.appendChild(li);
|
|
});
|
|
}
|
|
|
|
function cancelOrder(index) {
|
|
showConfirm("Confirm to cancel this order?", () => {
|
|
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("Order cancelled successfully");
|
|
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 = `Available Balance: <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()">[Deposit]</a>`;
|
|
updateAssetTables();
|
|
}
|
|
|
|
function showDeposit() {
|
|
document.getElementById('deposit-modal').style.display = 'block';
|
|
}
|
|
|
|
function simulateDeposit() {
|
|
document.getElementById('deposit-modal').style.display = 'none';
|
|
showAlert("Simulate deposit success! Account added 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("Please enter valid price and amount");
|
|
return;
|
|
}
|
|
|
|
const total = price * amount;
|
|
|
|
if (isLeverage) {
|
|
showConfirm(`Warning: You have enabled 100x high leverage.\nThe risk is extremely high, continue?`, () => {
|
|
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("Error: Insufficient USDT balance."); return; }
|
|
} else {
|
|
if (SYSTEM_STATE.balance.btc < amount) { showAlert("Error: Insufficient BTC balance."); return; }
|
|
}
|
|
|
|
const confirmMsg = isMarket ?
|
|
`Confirm Market ${type === 'buy' ? 'Buy' : 'Sell'} ${amount} BTC?` :
|
|
`Confirm Limit Order: ${type === 'buy' ? 'Buy' : 'Sell'} ${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("Market order filled immediately!");
|
|
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("Limit order submitted to engine.");
|
|
|
|
// 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();
|
|
}
|
|
|
|
// Simulate order book data updates
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Chat room logic
|
|
const chatInput = document.querySelector('#chat-room input');
|
|
const chatBtn = document.querySelector('#chat-room button');
|
|
chatInput.disabled = false; chatInput.placeholder = "Enter message..."; 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> |