393 lines
24 KiB
PHP
393 lines
24 KiB
PHP
<?php
|
|
function renderTerminal($activeTab = 'spot') {
|
|
global $lang, $user;
|
|
$currentSymbol = $_GET['symbol'] ?? 'BTC';
|
|
$currentSymbol = strtoupper($currentSymbol);
|
|
|
|
$full_coins = [
|
|
['symbol' => 'BTC', 'name' => 'Bitcoin', 'price' => '64,234.50', 'change' => '+2.45%'],
|
|
['symbol' => 'ETH', 'name' => 'Ethereum', 'price' => '3,456.20', 'change' => '+1.12%'],
|
|
['symbol' => 'USDT', 'name' => 'Tether', 'price' => '1.00', 'change' => '+0.01%'],
|
|
['symbol' => 'BNB', 'name' => 'BNB', 'price' => '598.40', 'change' => '-0.56%'],
|
|
['symbol' => 'SOL', 'name' => 'Solana', 'price' => '145.20', 'change' => '+5.67%'],
|
|
['symbol' => 'XRP', 'name' => 'Ripple', 'price' => '0.62', 'change' => '-1.23%'],
|
|
['symbol' => 'ADA', 'name' => 'Cardano', 'price' => '0.58', 'change' => '+0.89%'],
|
|
['symbol' => 'DOGE', 'name' => 'Dogecoin', 'price' => '0.16', 'change' => '+12.4%'],
|
|
['symbol' => 'DOT', 'name' => 'Polkadot', 'price' => '8.45', 'change' => '-2.11%'],
|
|
['symbol' => 'MATIC', 'name' => 'Polygon', 'price' => '0.92', 'change' => '+1.56%'],
|
|
['symbol' => 'LINK', 'name' => 'Chainlink', 'price' => '18.40', 'change' => '+3.22%'],
|
|
['symbol' => 'AVAX', 'name' => 'Avalanche', 'price' => '45.20', 'change' => '+4.12%'],
|
|
['symbol' => 'SHIB', 'name' => 'Shiba Inu', 'price' => '0.000027', 'change' => '-3.45%'],
|
|
['symbol' => 'TRX', 'name' => 'TRON', 'price' => '0.12', 'change' => '+0.56%'],
|
|
['symbol' => 'BCH', 'name' => 'Bitcoin Cash', 'price' => '456.20', 'change' => '+2.12%'],
|
|
['symbol' => 'LTC', 'name' => 'Litecoin', 'price' => '84.50', 'change' => '+1.45%'],
|
|
['symbol' => 'UNI', 'name' => 'Uniswap', 'price' => '7.20', 'change' => '-2.12%'],
|
|
];
|
|
?>
|
|
<link rel="stylesheet" href="/assets/css/terminal.css?v=<?= time() ?>">
|
|
<div class="terminal-container">
|
|
<div class="terminal-main">
|
|
<!-- Left Sidebar -->
|
|
<div class="terminal-sidebar">
|
|
<!-- Top Nav Tabs moved here for alignment -->
|
|
<div class="terminal-top-nav sidebar-tabs">
|
|
<a href="/binary.php?symbol=<?= $currentSymbol ?>" class="terminal-tab <?= $activeTab === 'binary' ? 'active' : '' ?>"><?= __('sec_contract') ?></a>
|
|
<a href="/trade.php?symbol=<?= $currentSymbol ?>" class="terminal-tab <?= $activeTab === 'spot' ? 'active' : '' ?>"><?= __('spot') ?></a>
|
|
<a href="/contract.php?symbol=<?= $currentSymbol ?>" class="terminal-tab <?= $activeTab === 'contract' ? 'active' : '' ?>"><?= __('contract') ?></a>
|
|
</div>
|
|
<div class="sidebar-search">
|
|
<input type="text" placeholder="<?= __('search') ?? 'Search' ?> / USDT" class="shadow-sm">
|
|
</div>
|
|
<div class="coin-list-container">
|
|
<?php
|
|
foreach ($full_coins as $c): ?>
|
|
<div class="coin-row <?= $c['symbol'] === $currentSymbol ? 'active' : '' ?>" onclick="location.href='?symbol=<?= $c['symbol'] ?>'">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-light p-1 rounded-circle me-2" style="width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;">
|
|
<img src="<?= getCoinIcon($c['symbol']) ?>" alt="<?= $c['symbol'] ?>" style="width: 18px; height: 18px; margin: 0;">
|
|
</div>
|
|
<div>
|
|
<div class="symbol fw-bold text-white"><?= $c['symbol'] ?></div>
|
|
<div class="change <?= strpos($c['change'], '+') !== false ? 'text-success' : 'text-danger' ?>" style="font-size: 10px;"><?= $c['change'] ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="price fw-bold text-white"><?= $c['price'] ?></div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Center Content -->
|
|
<div class="terminal-content">
|
|
<div class="content-header">
|
|
<div class="header-pair fw-bold fs-5 text-white"><?= $currentSymbol ?>/USDT</div>
|
|
<div class="header-stat">
|
|
<label><?= __('last_price') ?></label>
|
|
<span class="text-success price-jump fw-bold">64,234.50</span>
|
|
</div>
|
|
<div class="header-stat">
|
|
<label>24h <?= __('change_24h') ?></label>
|
|
<span class="text-success fw-bold">+2.45%</span>
|
|
</div>
|
|
<div class="header-stat d-none d-md-flex">
|
|
<label>24h High</label>
|
|
<span class="text-white">65,120.00</span>
|
|
</div>
|
|
<div class="header-stat d-none d-md-flex">
|
|
<label>24h Low</label>
|
|
<span class="text-white">63,450.00</span>
|
|
</div>
|
|
<div class="header-stat d-none d-lg-flex">
|
|
<label>24h <?= __('vol_24h') ?></label>
|
|
<span class="text-white fw-bold bg-dark px-2 rounded" style="background: rgba(255,255,255,0.05) !important;">12,456.23</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kline-container">
|
|
<!-- TradingView Widget BEGIN -->
|
|
<div class="tradingview-widget-container" style="height:100%;width:100%">
|
|
<div id="tradingview_54321" style="height:100%;width:100%"></div>
|
|
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
|
|
<script type="text/javascript">
|
|
new TradingView.widget(
|
|
{
|
|
"autosize": true,
|
|
"symbol": "BINANCE:<?= $currentSymbol ?>USDT",
|
|
"interval": "D",
|
|
"timezone": "Etc/UTC",
|
|
"theme": "dark",
|
|
"style": "1",
|
|
"locale": "<?= $lang === 'zh' ? 'zh_CN' : 'en' ?>",
|
|
"toolbar_bg": "#f1f3f6",
|
|
"enable_publishing": false,
|
|
"hide_side_toolbar": false,
|
|
"allow_symbol_change": true,
|
|
"container_id": "tradingview_54321"
|
|
}
|
|
);
|
|
</script>
|
|
</div>
|
|
<!-- TradingView Widget END -->
|
|
</div>
|
|
|
|
<div class="trading-panels">
|
|
<?php if ($activeTab === 'binary'): ?>
|
|
<div class="binary-order-panel w-100">
|
|
<div class="section-title mb-2"><?= __('cycle_settlement') ?? 'Cycle / Settlement' ?></div>
|
|
<div class="cycle-grid mb-3">
|
|
<button class="cycle-btn active" onclick="selectCycle(this, 60, 8, '100-4999')">60S/8%</button>
|
|
<button class="cycle-btn" onclick="selectCycle(this, 90, 12, '5000-29999')">90S/12%</button>
|
|
<button class="cycle-btn" onclick="selectCycle(this, 120, 15, '30000-99999')">120S/15%</button>
|
|
<button class="cycle-btn" onclick="selectCycle(this, 180, 20, '100000-299999')">180S/20%</button>
|
|
<button class="cycle-btn" onclick="selectCycle(this, 300, 30, '300000+')">300S/30%</button>
|
|
</div>
|
|
|
|
<div class="section-title mb-2"><?= __('purchase_amount') ?? 'Purchase Amount' ?> (USDT)</div>
|
|
<div class="amount-input-wrapper mb-3">
|
|
<input type="number" id="binary-amount" class="form-control bg-black text-white border-secondary" placeholder="100-4999" oninput="calculateProfit()">
|
|
</div>
|
|
|
|
<div class="quick-amounts d-flex gap-2 mb-3">
|
|
<?php foreach([10, 50, 100, 300, 500, 1000] as $amt): ?>
|
|
<button class="btn btn-dark btn-sm flex-fill" onclick="setBinaryAmount(<?= $amt ?>)"><?= $amt ?></button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between mb-3 small align-items-center">
|
|
<div class="text-muted"><?= __('available_balance') ?> <span class="text-white ms-1 fw-bold">1,000.00</span> USDT</div>
|
|
<div class="text-muted"><span class="text-success fw-bold fs-6" id="profit-display">0.00</span> USDT</div>
|
|
</div>
|
|
|
|
<div class="row g-2">
|
|
<div class="col-6">
|
|
<button class="btn btn-success w-100 py-3 fw-bold rounded-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
|
<div class="fs-5"><?= __('buy_up') ?></div>
|
|
<div class="small opacity-75 fw-normal profit-rate-hint"><?= __('profit') ?> 8%</div>
|
|
</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<button class="btn btn-danger w-100 py-3 fw-bold rounded-3 h-100 d-flex flex-column align-items-center justify-content-center">
|
|
<div class="fs-5"><?= __('buy_down') ?></div>
|
|
<div class="small opacity-75 fw-normal profit-rate-hint"><?= __('profit') ?> 8%</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentProfitRate = 8;
|
|
function selectCycle(btn, seconds, profit, hint) {
|
|
document.querySelectorAll('.cycle-btn').forEach(el => el.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
currentProfitRate = profit;
|
|
document.getElementById('binary-amount').placeholder = hint;
|
|
|
|
// Update profit hints on buttons
|
|
document.querySelectorAll('.profit-rate-hint').forEach(el => {
|
|
el.innerText = '<?= __("profit") ?> ' + profit + '%';
|
|
});
|
|
calculateProfit();
|
|
}
|
|
|
|
function setBinaryAmount(amt) {
|
|
document.getElementById('binary-amount').value = amt;
|
|
calculateProfit();
|
|
}
|
|
|
|
function calculateProfit() {
|
|
const amount = parseFloat(document.getElementById('binary-amount').value) || 0;
|
|
const profit = (amount * currentProfitRate / 100).toFixed(2);
|
|
document.getElementById('profit-display').innerText = profit + ' USDT';
|
|
}
|
|
</script>
|
|
|
|
<?php else: ?>
|
|
<div class="order-form-container w-100">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="order-form-tabs m-0 d-flex gap-2">
|
|
<button class="active btn btn-sm btn-outline-secondary py-1 px-3">Limit</button>
|
|
<button class="btn btn-sm btn-outline-secondary py-1 px-3">Market</button>
|
|
</div>
|
|
<div class="small text-muted"><?= __('assets') ?>: <span class="text-white">1,000.00 USDT</span></div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-6">
|
|
<div class="input-group-custom mb-3">
|
|
<label class="small text-muted mb-1 d-block">Buy Price</label>
|
|
<div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between">
|
|
<input type="number" value="64234.50" class="bg-transparent border-0 text-white w-75 outline-none" style="outline: none;">
|
|
<span class="suffix text-muted small">USDT</span>
|
|
</div>
|
|
</div>
|
|
<div class="input-group-custom mb-3">
|
|
<label class="small text-muted mb-1 d-block">Amount</label>
|
|
<div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between">
|
|
<input type="number" placeholder="0.00" class="bg-transparent border-0 text-white w-75 outline-none" style="outline: none;">
|
|
<span class="suffix text-muted small"><?= $currentSymbol ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-1 mb-3">
|
|
<?php foreach(['25%','50%','75%','100%'] as $p): ?>
|
|
<button class="btn btn-dark btn-sm py-0 flex-fill" style="font-size: 10px;"><?= $p ?></button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<button class="btn btn-success w-100 py-3 fw-bold rounded-3">Buy <?= $currentSymbol ?></button>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="input-group-custom mb-3">
|
|
<label class="small text-muted mb-1 d-block">Sell Price</label>
|
|
<div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between">
|
|
<input type="number" value="64234.50" class="bg-transparent border-0 text-white w-75 outline-none" style="outline: none;">
|
|
<span class="suffix text-muted small">USDT</span>
|
|
</div>
|
|
</div>
|
|
<div class="input-group-custom mb-3">
|
|
<label class="small text-muted mb-1 d-block">Amount</label>
|
|
<div class="input-wrapper bg-black p-2 rounded border border-secondary d-flex justify-content-between">
|
|
<input type="number" placeholder="0.00" class="bg-transparent border-0 text-white w-75 outline-none" style="outline: none;">
|
|
<span class="suffix text-muted small"><?= $currentSymbol ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex gap-1 mb-3">
|
|
<?php foreach(['25%','50%','75%','100%'] as $p): ?>
|
|
<button class="btn btn-dark btn-sm py-0 flex-fill" style="font-size: 10px;"><?= $p ?></button>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<button class="btn btn-danger w-100 py-3 fw-bold rounded-3">Sell <?= $currentSymbol ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<script>
|
|
// Simulating price jump
|
|
setInterval(() => {
|
|
const el = document.querySelector('.price-jump');
|
|
if (!el) return;
|
|
const current = parseFloat(el.innerText.replace(',', ''));
|
|
const diff = (Math.random() - 0.5) * 10;
|
|
const next = (current + diff).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
|
el.innerText = next;
|
|
el.style.color = diff > 0 ? '#26a69a' : '#ef5350';
|
|
setTimeout(() => el.style.color = '#26a69a', 500);
|
|
}, 2000);
|
|
</script>
|
|
|
|
|
|
<div class="order-history p-0">
|
|
<div class="d-flex gap-0 border-bottom border-secondary bg-dark history-tabs">
|
|
<h6 class="px-4 py-3 mb-0 active text-primary bg-black" onclick="showHistoryTab('open')" id="tab-open" style="cursor: pointer; font-size: 13px; font-weight: bold; border-bottom: 2px solid var(--term-primary) !important;">当前委托 (Open Orders)</h6>
|
|
<h6 class="px-4 py-3 mb-0 text-muted" onclick="showHistoryTab('settlement')" id="tab-settlement" style="cursor: pointer; font-size: 13px;">结算部位 (Settlement)</h6>
|
|
<h6 class="px-4 py-3 mb-0 text-muted" onclick="showHistoryTab('history')" id="tab-history" style="cursor: pointer; font-size: 13px;">成交历史 (Trade History)</h6>
|
|
<h6 class="px-4 py-3 mb-0 text-muted" onclick="showHistoryTab('assets')" id="tab-assets" style="cursor: pointer; font-size: 13px;">资产 (Assets)</h6>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table class="table table-dark table-sm mb-0" id="history-table" style="font-size: 12px;">
|
|
<thead>
|
|
<tr class="text-muted" style="background: rgba(255,255,255,0.02);">
|
|
<th class="ps-3 py-2">时间</th>
|
|
<th class="py-2">交易对</th>
|
|
<th class="py-2">类型</th>
|
|
<th class="py-2">方向</th>
|
|
<th class="py-2">价格</th>
|
|
<th class="py-2">数量</th>
|
|
<th class="py-2">成交额</th>
|
|
<th class="py-2">状态</th>
|
|
<th class="pe-3 py-2 text-end">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="history-body">
|
|
<!-- Data injected by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Sidebar: Order Book -->
|
|
<div class="terminal-right-sidebar">
|
|
<div class="order-book">
|
|
<div class="ob-header">
|
|
<span>Price(USDT)</span>
|
|
<span>Amount(<?= $currentSymbol ?>)</span>
|
|
</div>
|
|
<div class="ob-list asks">
|
|
<?php for($i=0;$i<12;$i++):
|
|
$p = 64235 + (12-$i) * 1.5;
|
|
$a = rand(10, 1000) / 1000;
|
|
$w = rand(10, 90);
|
|
?>
|
|
<div class="ob-row">
|
|
<span class="price"><?= number_format($p, 2) ?></span>
|
|
<span class="amount"><?= number_format($a, 4) ?></span>
|
|
<div class="ob-row-bg" style="width: <?= $w ?>%"></div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<div class="ob-mid-price">
|
|
<span class="val text-success">64,234.50</span>
|
|
<span class="small text-muted">≈ $64,234.50</span>
|
|
</div>
|
|
<div class="ob-list bids">
|
|
<?php for($i=0;$i<12;$i++):
|
|
$p = 64233 - $i * 1.5;
|
|
$a = rand(10, 1000) / 1000;
|
|
$w = rand(10, 90);
|
|
?>
|
|
<div class="ob-row">
|
|
<span class="price"><?= number_format($p, 2) ?></span>
|
|
<span class="amount"><?= number_format($a, 4) ?></span>
|
|
<div class="ob-row-bg" style="width: <?= $w ?>%"></div>
|
|
</div>
|
|
<?php endfor; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const historyData = {
|
|
open: [
|
|
{time: '2026-02-16 15:45:12', pair: 'BTC/USDT', type: 'Limit', side: 'Buy', price: '64,100.00', amount: '0.5000', total: '32,050.00', status: 'Pending'},
|
|
{time: '2026-02-16 15:40:05', pair: '<?= $currentSymbol ?>/USDT', type: 'Limit', side: 'Sell', price: '64,500.00', amount: '0.2500', total: '16,125.00', status: 'Pending'}
|
|
],
|
|
settlement: [
|
|
{time: '2026-02-16 14:30:11', pair: 'BTC/USDT', type: 'Binary', side: 'Buy Up', price: '64,234.50', amount: '100.00', total: '108.00', status: 'Profit'},
|
|
{time: '2026-02-16 13:15:22', pair: 'ETH/USDT', type: 'Binary', side: 'Buy Down', price: '3,456.20', amount: '50.00', total: '0.00', status: 'Loss'}
|
|
],
|
|
history: [
|
|
{time: '2026-02-16 12:00:00', pair: 'SOL/USDT', type: 'Market', side: 'Buy', price: '142.30', amount: '100.00', total: '14,230.00', status: 'Filled'}
|
|
],
|
|
assets: [
|
|
{time: '-', pair: 'USDT', type: 'Wallet', side: '-', price: '1.00', amount: '1,000.00', total: '1,000.00', status: 'Available'},
|
|
{time: '-', pair: 'BTC', type: 'Wallet', side: '-', price: '64,234.50', amount: '0.0500', total: '3,211.73', status: 'Available'}
|
|
]
|
|
};
|
|
|
|
function showHistoryTab(tab) {
|
|
// Update tabs UI
|
|
document.querySelectorAll('.history-tabs h6').forEach(el => {
|
|
el.classList.remove('active', 'text-primary', 'bg-black');
|
|
el.classList.add('text-muted');
|
|
el.style.borderBottom = 'none';
|
|
});
|
|
const activeTab = document.getElementById('tab-' + tab);
|
|
activeTab.classList.add('active', 'text-primary', 'bg-black');
|
|
activeTab.classList.remove('text-muted');
|
|
activeTab.style.borderBottom = '2px solid var(--term-primary)';
|
|
|
|
// Update table content
|
|
const body = document.getElementById('history-body');
|
|
body.innerHTML = '';
|
|
|
|
if (!historyData[tab] || historyData[tab].length === 0) {
|
|
body.innerHTML = '<tr><td colspan="9" class="text-center py-5 text-muted">No records found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
historyData[tab].forEach(row => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td class="ps-3 py-3 text-muted">${row.time}</td>
|
|
<td class="py-3 fw-bold text-white">${row.pair}</td>
|
|
<td class="py-3">${row.type}</td>
|
|
<td class="py-3 ${row.side === 'Buy' ? 'text-success' : (row.side === 'Sell' ? 'text-danger' : 'text-white')}">${row.side}</td>
|
|
<td class="py-3">${row.price}</td>
|
|
<td class="py-3">${row.amount}</td>
|
|
<td class="py-3">${row.total}</td>
|
|
<td class="py-3"><span class="badge bg-success bg-opacity-10 text-success">${row.status}</span></td>
|
|
<td class="pe-3 py-3 text-end"><button class="btn btn-sm btn-link text-muted p-0">Details</button></td>
|
|
`;
|
|
body.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
// Initialize with open orders
|
|
showHistoryTab('open');
|
|
</script>
|
|
<?php
|
|
}
|
|
?>
|