371 lines
20 KiB
PHP
371 lines
20 KiB
PHP
<?php
|
|
require_once 'includes/header.php';
|
|
|
|
$symbol = $_GET['symbol'] ?? 'BTC';
|
|
$type = $_GET['type'] ?? 'spot';
|
|
?>
|
|
|
|
<style>
|
|
.trade-container { height: calc(100vh - 62px); overflow: hidden; background-color: #0b0e11; }
|
|
.market-list { height: 100%; overflow-y: auto; background-color: #0b0e11; border-right: 1px solid #2b2f36; }
|
|
.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 #2b2f36; }
|
|
|
|
.market-bar { background-color: #0b0e11; border-bottom: 1px solid #2b2f36; }
|
|
.chart-container { flex-grow: 1; min-height: 400px; }
|
|
|
|
.trade-tabs .nav-link { color: #848e9c; border: none; font-weight: 600; padding: 10px 15px; font-size: 0.85rem; background: transparent; }
|
|
.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; }
|
|
|
|
/* Shrinked Crypto Item Style */
|
|
.crypto-item { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); cursor: pointer; transition: background 0.2s; }
|
|
.crypto-item:hover { background-color: #1e2329; }
|
|
.crypto-item.active { background-color: #1e2329; border-left: 2px solid var(--okx-blue); }
|
|
.crypto-icon { width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; }
|
|
.crypto-name-text { font-size: 0.75rem; font-weight: 600; }
|
|
.crypto-sub-text { font-size: 0.65rem; color: #848e9c; }
|
|
.crypto-price-text { font-size: 0.75rem; font-weight: 600; }
|
|
.crypto-change-text { font-size: 0.65rem; }
|
|
|
|
.btn-buy { background-color: #0ecb81; color: white; border: none; font-weight: bold; transition: opacity 0.2s; }
|
|
.btn-buy:hover { opacity: 0.9; color: white; }
|
|
.btn-sell { background-color: #f6465d; color: white; border: none; font-weight: bold; transition: opacity 0.2s; }
|
|
.btn-sell:hover { opacity: 0.9; color: white; }
|
|
|
|
.percent-btn { font-size: 0.65rem; padding: 2px 5px; background: #2b2f36; border: 1px solid #3b3f46; color: #848e9c; border-radius: 4px; }
|
|
.percent-btn:hover { background: #3b3f46; color: white; }
|
|
|
|
@media (max-width: 991px) {
|
|
.trade-container { height: auto; overflow: visible; }
|
|
.market-list { display: none; }
|
|
.order-sidebar { border-left: none; border-top: 1px solid #2b2f36; padding-bottom: 80px; }
|
|
.chart-container { min-height: 300px; }
|
|
}
|
|
</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-2 border-bottom border-secondary">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-transparent border-0 text-muted"><i class="fas fa-search"></i></span>
|
|
<input type="text" id="market-search" class="form-control bg-transparent text-white border-0 shadow-none" placeholder="<?php echo mt('Search Pairs'); ?>" style="font-size: 0.75rem;">
|
|
</div>
|
|
</div>
|
|
<div id="crypto-list-container">
|
|
<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="24" class="me-2">
|
|
<h5 class="mb-0 fw-bold text-white" style="font-size: 1.1rem;"><?php echo $symbol; ?>/USDT <span class="badge bg-secondary ms-2" style="font-size: 0.6rem; vertical-align: middle;"><?php echo mt(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" style="font-size: 0.7rem;">≈ $0.00</div>
|
|
</div>
|
|
<div>
|
|
<div class="small text-muted" style="font-size: 0.7rem;">24h <?php echo mt('Change'); ?></div>
|
|
<div id="24h-change" class="fw-bold" style="font-size: 0.8rem;">--</div>
|
|
</div>
|
|
<div class="d-none d-md-block">
|
|
<div class="small text-muted" style="font-size: 0.7rem;">24h <?php echo mt('High'); ?></div>
|
|
<div id="24h-high" class="fw-bold text-white" style="font-size: 0.8rem;">--</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": "<?php echo ($lang == 'zh' ? 'zh_CN' : '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 overflow-auto" style="background-color: #0b0e11;">
|
|
<ul class="nav nav-tabs trade-tabs border-bottom border-secondary sticky-top bg-dark" id="bottomTabs">
|
|
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#open-orders"><?php echo mt('Open Orders'); ?></a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#order-history"><?php echo mt('Order History'); ?></a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#positions"><?php echo mt('Positions'); ?></a></li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active p-2" id="open-orders">
|
|
<table class="table table-dark table-sm small align-middle mb-0">
|
|
<thead>
|
|
<tr class="text-muted border-0" style="font-size: 0.7rem;">
|
|
<th><?php echo mt('Time'); ?></th>
|
|
<th><?php echo mt('Pair'); ?></th>
|
|
<th><?php echo mt('Type'); ?></th>
|
|
<th><?php echo mt('Side'); ?></th>
|
|
<th><?php echo mt('Price'); ?></th>
|
|
<th><?php echo mt('Amount'); ?></th>
|
|
<th><?php echo mt('Filled'); ?></th>
|
|
<th><?php echo mt('Action'); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="open-orders-list">
|
|
<tr><td colspan="8" class="text-center py-5 text-muted"><?php echo mt('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: 320px; display: flex; flex-direction: column;">
|
|
<div class="p-2 d-flex justify-content-between small text-muted border-bottom border-secondary" style="background: #0b0e11; font-size: 0.65rem;">
|
|
<span><?php echo mt('Price'); ?> (USDT)</span>
|
|
<span><?php echo mt('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-1 fs-5 fw-bold text-success bg-black bg-opacity-25 border-top border-bottom border-secondary">
|
|
<span id="book-price">--</span>
|
|
</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 bg-dark p-1 rounded-pill" id="order-type-tabs">
|
|
<button class="nav-link active py-1 px-3 rounded-pill" id="tab-limit" style="font-size: 0.7rem; color: #848e9c;"><?php echo mt('Limit'); ?></button>
|
|
<button class="nav-link py-1 px-3 rounded-pill" id="tab-market" style="font-size: 0.7rem; color: #848e9c;"><?php echo mt('Market'); ?></button>
|
|
</div>
|
|
<?php if ($type === 'contract'): ?>
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-dark border-secondary dropdown-toggle py-0" type="button" data-bs-toggle="dropdown" id="leverage-btn" style="font-size: 0.7rem;">20x</button>
|
|
<ul class="dropdown-menu dropdown-menu-dark">
|
|
<li><a class="dropdown-item" href="#" onclick="setLeverage(10)">10x</a></li>
|
|
<li><a class="dropdown-item active" href="#" onclick="setLeverage(20)">20x</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="setLeverage(50)">50x</a></li>
|
|
<li><a class="dropdown-item" href="#" onclick="setLeverage(100)">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; ?>">
|
|
<input type="hidden" id="user-balance" value="<?php echo $user['balance_usdt'] ?? 0; ?>">
|
|
|
|
<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.05); font-size: 0.85rem;"><?php echo mt('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.05); font-size: 0.85rem;"><?php echo mt('Sell'); ?></label>
|
|
</div>
|
|
|
|
<div class="mb-2" id="price-input-group">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted" style="min-width: 60px; font-size: 0.7rem;"><?php echo mt('Price'); ?></span>
|
|
<input type="number" id="order-price" class="form-control bg-dark text-white border-secondary shadow-none" step="0.01" style="font-size: 0.8rem;">
|
|
<span class="input-group-text bg-dark border-secondary text-muted" style="font-size: 0.7rem;">USDT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted" style="min-width: 60px; font-size: 0.7rem;"><?php echo mt($type === 'contract' ? 'Lots' : 'Amount'); ?></span>
|
|
<input type="number" id="order-amount" class="form-control bg-dark text-white border-secondary shadow-none" placeholder="0.00" style="font-size: 0.8rem;">
|
|
<span class="input-group-text bg-dark border-secondary text-muted" style="font-size: 0.7rem;"><?php echo $symbol; ?></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between gap-1 mb-2">
|
|
<button type="button" class="percent-btn flex-grow-1" onclick="setPercent(0.25)">25%</button>
|
|
<button type="button" class="percent-btn flex-grow-1" onclick="setPercent(0.50)">50%</button>
|
|
<button type="button" class="percent-btn flex-grow-1" onclick="setPercent(0.75)">75%</button>
|
|
<button type="button" class="percent-btn flex-grow-1" onclick="setPercent(1.00)">100%</button>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between small text-muted mb-4 px-1" style="font-size: 0.7rem;">
|
|
<span><?php echo mt('Available'); ?></span>
|
|
<span class="text-white"><?php echo number_format($user['balance_usdt'] ?? 0, 2); ?> USDT</span>
|
|
</div>
|
|
|
|
<?php if ($type === 'contract'): ?>
|
|
<div class="row g-2 mb-4">
|
|
<div class="col-6">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted px-2" style="min-width: unset; font-size: 0.7rem;">TP</span>
|
|
<input type="number" id="tp-price" class="form-control bg-dark text-white border-secondary shadow-none" placeholder="<?php echo mt('Price'); ?>" style="font-size: 0.7rem;">
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-text bg-dark border-secondary text-muted px-2" style="min-width: unset; font-size: 0.7rem;">SL</span>
|
|
<input type="number" id="sl-price" class="form-control bg-dark text-white border-secondary shadow-none" placeholder="<?php echo mt('Price'); ?>" style="font-size: 0.7rem;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<button type="button" id="submit-btn" class="btn btn-buy w-100 py-3 mb-3 fs-6 rounded-3" onclick="submitOrder()">
|
|
<?php echo mt('Buy'); ?> <?php echo $symbol; ?>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
<script>
|
|
let currentLeverage = 20;
|
|
|
|
function setLeverage(lev) {
|
|
currentLeverage = lev;
|
|
const btn = document.getElementById('leverage-btn');
|
|
if (btn) btn.innerText = lev + 'x';
|
|
calculateMax();
|
|
}
|
|
|
|
function calculateMax() {
|
|
const balance = parseFloat(document.getElementById('user-balance').value);
|
|
const priceInput = document.getElementById('order-price');
|
|
let price = parseFloat(priceInput.value);
|
|
|
|
const symbol = document.getElementById('current-symbol').value;
|
|
const isMarket = document.getElementById('tab-market').classList.contains('active');
|
|
|
|
if (isMarket || !price) {
|
|
if (window.currentMarketData && window.currentMarketData[symbol]) {
|
|
price = window.currentMarketData[symbol].price;
|
|
}
|
|
}
|
|
|
|
if (price > 0) {
|
|
let max = balance / price;
|
|
if (document.getElementById('trade-type').value === 'contract') {
|
|
max *= currentLeverage;
|
|
}
|
|
// Save max to a hidden property or global for setPercent to use
|
|
window.currentMaxAmount = max;
|
|
|
|
if (isMarket) {
|
|
priceInput.value = price.toFixed(2);
|
|
}
|
|
}
|
|
}
|
|
|
|
function setPercent(p) {
|
|
if (window.currentMaxAmount > 0) {
|
|
document.getElementById('order-amount').value = (window.currentMaxAmount * p).toFixed(4);
|
|
}
|
|
}
|
|
|
|
function submitOrder() {
|
|
const amount = document.getElementById('order-amount').value;
|
|
if (!amount || amount <= 0) {
|
|
alert('Please enter a valid amount.');
|
|
return;
|
|
}
|
|
|
|
const side = document.querySelector('input[name="side"]:checked').value;
|
|
const type = document.getElementById('tab-limit').classList.contains('active') ? 'Limit' : 'Market';
|
|
const symbol = document.getElementById('current-symbol').value;
|
|
const price = type === 'Limit' ? document.getElementById('order-price').value : 'Market';
|
|
|
|
// Add to simulated history
|
|
const list = document.getElementById('open-orders-list');
|
|
const row = `
|
|
<tr class="border-secondary">
|
|
<td>${new Date().toLocaleTimeString()}</td>
|
|
<td>${symbol}/USDT</td>
|
|
<td>${type}</td>
|
|
<td class="${side === 'buy' ? 'text-success' : 'text-danger'}">${side.toUpperCase()}</td>
|
|
<td>${price}</td>
|
|
<td>${amount}</td>
|
|
<td>0%</td>
|
|
<td><button class="btn btn-sm btn-link text-danger p-0 text-decoration-none">Cancel</button></td>
|
|
</tr>
|
|
`;
|
|
|
|
if (list.innerHTML.includes('No open orders') || list.innerHTML.includes('无挂单')) {
|
|
list.innerHTML = row;
|
|
} else {
|
|
list.innerHTML = row + list.innerHTML;
|
|
}
|
|
|
|
alert('Order submitted successfully!');
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Initial max calculation
|
|
setTimeout(calculateMax, 1000);
|
|
setInterval(calculateMax, 3000);
|
|
|
|
// Limit/Market toggle
|
|
document.getElementById('tab-limit').addEventListener('click', function() {
|
|
document.getElementById('price-input-group').style.display = 'block';
|
|
this.classList.add('active');
|
|
document.getElementById('tab-market').classList.remove('active');
|
|
calculateMax();
|
|
});
|
|
|
|
document.getElementById('tab-market').addEventListener('click', function() {
|
|
document.getElementById('price-input-group').style.display = 'none';
|
|
this.classList.add('active');
|
|
document.getElementById('tab-limit').classList.remove('active');
|
|
calculateMax();
|
|
});
|
|
|
|
// 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;
|
|
const buyText = '<?php echo mt('Buy'); ?>';
|
|
const sellText = '<?php echo mt('Sell'); ?>';
|
|
if (e.target.value === 'buy') {
|
|
btn.className = 'btn btn-buy w-100 py-3 mb-3 fs-6 rounded-3';
|
|
btn.textContent = buyText + ' ' + sym;
|
|
} else {
|
|
btn.className = 'btn btn-sell w-100 py-3 mb-3 fs-6 rounded-3';
|
|
btn.textContent = sellText + ' ' + sym;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|