282 lines
17 KiB
PHP
282 lines
17 KiB
PHP
<?php
|
|
require_once 'includes/header.php';
|
|
|
|
$symbol = $_GET['symbol'] ?? 'BTC';
|
|
$type = $_GET['type'] ?? 'spot'; // spot or contract
|
|
|
|
// Add some trade-specific translations
|
|
$trade_translations = [
|
|
'Open Orders' => ['en' => 'Open Orders', 'zh' => '当前委托', 'ja' => 'オープンオーダー', 'ko' => '미체결 주문', 'ru' => 'Открытые ордера', 'fr' => 'Ordres ouverts', 'es' => 'Órdenes abiertas', 'de' => 'Offene Orders'],
|
|
'Order History' => ['en' => 'Order History', 'zh' => '历史委托', 'ja' => 'オーダー履歴', 'ko' => '주문 내역', 'ru' => 'История ордеров', 'fr' => 'Historique des ordres', 'es' => 'Historial de órdenes', 'de' => 'Orderverlauf'],
|
|
'Positions' => ['en' => 'Positions', 'zh' => '持仓', 'ja' => 'ポジション', 'ko' => '포지션', 'ru' => 'Позиции', 'fr' => 'Positions', 'es' => 'Posiciones', 'de' => 'Positionen'],
|
|
'Limit' => ['en' => 'Limit', 'zh' => '限价', 'ja' => '指値', 'ko' => '지정가', 'ru' => 'Лимит', 'fr' => 'Limite', 'es' => 'Límite', 'de' => 'Limit'],
|
|
'Market' => ['en' => 'Market', 'zh' => '市价', 'ja' => '成行', 'ko' => '시장가', 'ru' => 'Рынок', 'fr' => 'Marché', 'es' => 'Mercado', 'de' => 'Markt'],
|
|
'Buy' => ['en' => 'Buy', 'zh' => '买入', 'ja' => '買い', 'ko' => '매수', 'ru' => 'Купить', 'fr' => 'Acheter', 'es' => 'Comprar', 'de' => 'Kaufen'],
|
|
'Sell' => ['en' => 'Sell', 'zh' => '卖出', 'ja' => '売り', 'ko' => '매도', 'ru' => 'Продать', 'fr' => 'Vendre', 'es' => 'Vender', 'de' => 'Verkaufen'],
|
|
'Price' => ['en' => 'Price', 'zh' => '价格', 'ja' => '価格', 'ko' => '가격', 'ru' => 'Цена', 'fr' => 'Prix', 'es' => 'Precio', 'de' => 'Preis'],
|
|
'Amount' => ['en' => 'Amount', 'zh' => '数量', 'ja' => '数量', 'ko' => '수량', 'ru' => 'Количество', 'fr' => 'Montant', 'es' => 'Cantidad', 'de' => 'Betrag'],
|
|
'Available' => ['en' => 'Available', 'zh' => '可用', 'ja' => '利用可能', 'ko' => '사용 가능', 'ru' => 'Доступно', 'fr' => 'Disponible', 'es' => 'Disponible', 'de' => 'Verfügbar'],
|
|
'Time' => ['en' => 'Time', 'zh' => '时间', 'ja' => '時間', 'ko' => '시간', 'ru' => 'Время', 'fr' => 'Temps', 'es' => 'Hora', 'de' => 'Zeit'],
|
|
'Type' => ['en' => 'Type', 'zh' => '类型', 'ja' => 'タイプ', 'ko' => '유형', 'ru' => 'Тип', 'fr' => 'Type', 'es' => 'Tipo', 'de' => 'Typ'],
|
|
'Side' => ['en' => 'Side', 'zh' => '方向', 'ja' => '売買', 'ko' => '구분', 'ru' => 'Сторона', 'fr' => 'Côté', 'es' => 'Lado', 'de' => 'Seite'],
|
|
'Action' => ['en' => 'Action', 'zh' => '操作', 'ja' => '操作', 'ko' => '작업', 'ru' => 'Действие', 'fr' => 'Action', 'es' => 'Acción', 'de' => 'Aktion'],
|
|
];
|
|
|
|
function tt($key) {
|
|
global $lang, $trade_translations;
|
|
return $trade_translations[$key][$lang] ?? ($trade_translations[$key]['en'] ?? $key);
|
|
}
|
|
?>
|
|
|
|
<style>
|
|
.trade-container { height: calc(100vh - 62px); overflow: hidden; background-color: var(--bg-color); }
|
|
.market-list { height: 100%; overflow-y: auto; background-color: #0b0e11; border-right: 1px solid var(--border-color); }
|
|
.trade-main { height: 100%; display: flex; flex-direction: column; background-color: #161a1e; }
|
|
.order-sidebar { height: 100%; overflow-y: auto; background-color: #0b0e11; border-left: 1px solid var(--border-color); }
|
|
|
|
.market-bar { background-color: #0b0e11; border-bottom: 1px solid var(--border-color); }
|
|
.chart-container { flex-grow: 1; min-height: 450px; }
|
|
|
|
.trade-tabs .nav-link { color: #848e9c; border: none; font-weight: 600; padding: 12px 20px; font-size: 0.9rem; }
|
|
.trade-tabs .nav-link.active { color: var(--okx-blue); background: transparent; border-bottom: 2px solid var(--okx-blue); }
|
|
|
|
.order-book-row { display: flex; justify-content: space-between; font-size: 0.75rem; padding: 2px 10px; position: relative; cursor: pointer; }
|
|
.order-book-row:hover { background-color: rgba(255,255,255,0.05); }
|
|
.order-book-row .price { z-index: 1; font-family: 'Roboto Mono', monospace; }
|
|
.order-book-row .amount { z-index: 1; color: #848e9c; }
|
|
.order-book-row.ask .price { color: #f6465d; }
|
|
.order-book-row.bid .price { color: #0ecb81; }
|
|
|
|
.depth-bg { position: absolute; right: 0; top: 0; height: 100%; opacity: 0.15; z-index: 0; transition: width 0.3s; }
|
|
.depth-bg.ask { background-color: #f6465d; }
|
|
.depth-bg.bid { background-color: #0ecb81; }
|
|
|
|
.crypto-item { padding: 10px 15px; border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer; transition: background 0.2s; }
|
|
.crypto-item:hover { background-color: #1e2329; }
|
|
.crypto-item.active { background-color: #1e2329; border-left: 3px solid var(--okx-blue); }
|
|
.crypto-icon { width: 24px; height: 24px; margin-right: 10px; }
|
|
|
|
.btn-buy { background-color: #0ecb81; color: white; border: none; font-weight: bold; }
|
|
.btn-buy:hover { background-color: #0ba367; }
|
|
.btn-sell { background-color: #f6465d; color: white; border: none; font-weight: bold; }
|
|
.btn-sell:hover { background-color: #d13e50; }
|
|
|
|
/* Fix visibility */
|
|
.text-white { color: #fff !important; }
|
|
.text-muted { color: #848e9c !important; }
|
|
</style>
|
|
|
|
<div class="container-fluid trade-container px-0">
|
|
<div class="row g-0 h-100">
|
|
<!-- Market List (Left) -->
|
|
<div class="col-lg-2 market-list d-none d-lg-block">
|
|
<div class="p-3">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted"><i class="fas fa-search"></i></span>
|
|
<input type="text" id="market-search" class="form-control bg-dark text-white border-secondary" placeholder="Search Pairs">
|
|
</div>
|
|
</div>
|
|
<div id="crypto-list-container">
|
|
<!-- Loaded via JS -->
|
|
<div class="text-center py-5"><div class="spinner-border spinner-border-sm text-primary"></div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Trading Area (Middle) -->
|
|
<div class="col-lg-7 trade-main">
|
|
<!-- Market Info Bar -->
|
|
<div class="market-bar p-2 d-flex align-items-center flex-wrap gap-4">
|
|
<div class="d-flex align-items-center me-2 ps-2">
|
|
<img id="current-coin-icon" src="https://static.okx.com/cdn/oksupport/asset/currency/icon/<?php echo strtolower($symbol); ?>.png" width="28" class="me-2">
|
|
<h5 class="mb-0 fw-bold text-white"><?php echo $symbol; ?>/USDT <span class="badge bg-secondary ms-2 small" style="font-size: 0.7rem;"><?php echo strtoupper($type); ?></span></h5>
|
|
</div>
|
|
<div>
|
|
<div id="last-price" class="fw-bold text-success fs-5">--</div>
|
|
<div id="price-fiat" class="small text-muted">≈ ¥0.00</div>
|
|
</div>
|
|
<div>
|
|
<div class="small text-muted">24h <?php echo tt('Change'); ?></div>
|
|
<div id="24h-change" class="fw-bold">--</div>
|
|
</div>
|
|
<div>
|
|
<div class="small text-muted">24h High</div>
|
|
<div id="24h-high" class="fw-bold text-white">--</div>
|
|
</div>
|
|
<div>
|
|
<div class="small text-muted">24h Low</div>
|
|
<div id="24h-low" class="fw-bold text-white">--</div>
|
|
</div>
|
|
<div>
|
|
<div class="small text-muted">24h Volume</div>
|
|
<div id="24h-vol" class="fw-bold text-white">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart -->
|
|
<div class="chart-container border-bottom border-secondary">
|
|
<div id="tradingview_chart" class="h-100"></div>
|
|
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
|
|
<script type="text/javascript">
|
|
function initChart(symbol) {
|
|
new TradingView.widget({
|
|
"autosize": true,
|
|
"symbol": "BINANCE:" + symbol + "USDT",
|
|
"interval": "15",
|
|
"theme": "dark",
|
|
"style": "1",
|
|
"locale": "en",
|
|
"container_id": "tradingview_chart",
|
|
"hide_side_toolbar": false,
|
|
"allow_symbol_change": true,
|
|
"save_image": false,
|
|
"backgroundColor": "#161a1e",
|
|
"gridColor": "rgba(255, 255, 255, 0.05)"
|
|
});
|
|
}
|
|
initChart("<?php echo $symbol; ?>");
|
|
</script>
|
|
</div>
|
|
|
|
<!-- Orders/History (Bottom) -->
|
|
<div class="flex-grow-1" style="background-color: #0b0e11;">
|
|
<ul class="nav nav-tabs trade-tabs border-bottom border-secondary" id="bottomTabs">
|
|
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#open-orders"><?php echo tt('Open Orders'); ?></a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#order-history"><?php echo tt('Order History'); ?></a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#positions"><?php echo tt('Positions'); ?></a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#assets"><?php echo mt('Assets'); ?></a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active p-3" id="open-orders">
|
|
<table class="table table-dark table-sm small">
|
|
<thead>
|
|
<tr class="text-muted">
|
|
<th><?php echo tt('Time'); ?></th>
|
|
<th>Pair</th>
|
|
<th><?php echo tt('Type'); ?></th>
|
|
<th><?php echo tt('Side'); ?></th>
|
|
<th><?php echo tt('Price'); ?></th>
|
|
<th><?php echo tt('Amount'); ?></th>
|
|
<th>Filled</th>
|
|
<th><?php echo tt('Action'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="open-orders-list">
|
|
<tr><td colspan="8" class="text-center py-4 text-muted">No open orders</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Sidepanel (Right) -->
|
|
<div class="col-lg-3 order-sidebar">
|
|
<!-- Order Book -->
|
|
<div class="order-book p-0 border-bottom border-secondary" style="height: 400px; display: flex; flex-direction: column;">
|
|
<div class="p-2 d-flex justify-content-between small text-muted border-bottom border-secondary" style="background: #161a1e;">
|
|
<span><?php echo tt('Price'); ?> (USDT)</span>
|
|
<span><?php echo tt('Amount'); ?> (<?php echo $symbol; ?>)</span>
|
|
</div>
|
|
<div id="order-book-asks" style="flex: 1; overflow: hidden; display: flex; flex-direction: column-reverse;"></div>
|
|
<div id="mid-price-row" class="px-3 py-2 fs-5 fw-bold text-success bg-dark border-top border-bottom border-secondary">
|
|
<span id="book-price">--</span>
|
|
<i class="fas fa-arrow-up fs-6 ms-2"></i>
|
|
</div>
|
|
<div id="order-book-bids" style="flex: 1; overflow: hidden;"></div>
|
|
</div>
|
|
|
|
<!-- Order Entry Form -->
|
|
<div class="p-3">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="nav nav-pills small" id="order-type-tabs">
|
|
<button class="nav-link active py-1 px-3" data-bs-toggle="pill"><?php echo tt('Limit'); ?></button>
|
|
<button class="nav-link py-1 px-3" data-bs-toggle="pill"><?php echo tt('Market'); ?></button>
|
|
</div>
|
|
<?php if ($type === 'contract'): ?>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle py-0" type="button" data-bs-toggle="dropdown">20x</button>
|
|
<ul class="dropdown-menu dropdown-menu-dark">
|
|
<li><a class="dropdown-item" href="#">10x</a></li>
|
|
<li><a class="dropdown-item active" href="#">20x</a></li>
|
|
<li><a class="dropdown-item" href="#">50x</a></li>
|
|
<li><a class="dropdown-item" href="#">100x</a></li>
|
|
</ul>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<form id="order-form">
|
|
<input type="hidden" id="current-symbol" value="<?php echo $symbol; ?>">
|
|
<input type="hidden" id="trade-type" value="<?php echo $type; ?>">
|
|
|
|
<div class="btn-group w-100 mb-3" role="group">
|
|
<input type="radio" class="btn-check" name="side" id="side-buy" value="buy" checked>
|
|
<label class="btn btn-outline-success border-0 py-2 fw-bold" for="side-buy" style="background-color: rgba(14, 203, 129, 0.1);"><?php echo tt('Buy'); ?></label>
|
|
<input type="radio" class="btn-check" name="side" id="side-sell" value="sell">
|
|
<label class="btn btn-outline-danger border-0 py-2 fw-bold" for="side-sell" style="background-color: rgba(246, 70, 93, 0.1);"><?php echo tt('Sell'); ?></label>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted" style="width: 70px;"><?php echo tt('Price'); ?></span>
|
|
<input type="number" id="order-price" class="form-control bg-dark text-white border-secondary" step="0.01">
|
|
<span class="input-group-text bg-dark border-secondary text-muted">USDT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted" style="width: 70px;"><?php echo tt('Amount'); ?></span>
|
|
<input type="number" id="order-amount" class="form-control bg-dark text-white border-secondary" placeholder="0.00">
|
|
<span class="input-group-text bg-dark border-secondary text-muted"><?php echo $symbol; ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<div class="d-flex justify-content-between small text-muted mb-2">
|
|
<span><?php echo tt('Available'); ?></span>
|
|
<span class="text-white"><?php echo number_format($user['balance_usdt'] ?? 0, 2); ?> USDT</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between gap-1">
|
|
<button type="button" class="btn btn-sm btn-dark border-secondary flex-grow-1 py-0" style="font-size: 0.65rem;">25%</button>
|
|
<button type="button" class="btn btn-sm btn-dark border-secondary flex-grow-1 py-0" style="font-size: 0.65rem;">50%</button>
|
|
<button type="button" class="btn btn-sm btn-dark border-secondary flex-grow-1 py-0" style="font-size: 0.65rem;">75%</button>
|
|
<button type="button" class="btn btn-sm btn-dark border-secondary flex-grow-1 py-0" style="font-size: 0.65rem;">100%</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="submit-btn" class="btn btn-buy w-100 py-3 mb-3 fs-5">
|
|
<?php echo tt('Buy'); ?> <?php echo $symbol; ?>
|
|
</button>
|
|
|
|
<div class="row g-2 small text-muted">
|
|
<div class="col-6">Est. Fee: 0.1%</div>
|
|
<div class="col-6 text-end">Max <?php echo tt('Buy'); ?>: 0.00</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Switch side coloring
|
|
document.querySelectorAll('input[name="side"]').forEach(radio => {
|
|
radio.addEventListener('change', (e) => {
|
|
const btn = document.getElementById('submit-btn');
|
|
const sym = document.getElementById('current-symbol').value;
|
|
if (e.target.value === 'buy') {
|
|
btn.className = 'btn btn-buy w-100 py-3 mb-3 fs-5';
|
|
btn.textContent = '<?php echo tt('Buy'); ?> ' + sym;
|
|
} else {
|
|
btn.className = 'btn btn-sell w-100 py-3 mb-3 fs-5';
|
|
btn.textContent = '<?php echo tt('Sell'); ?> ' + sym;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|