508 lines
32 KiB
PHP
508 lines
32 KiB
PHP
<?php
|
|
include 'header.php';
|
|
require_once 'db/config.php';
|
|
|
|
$user_id = $_SESSION['user_id'] ?? null;
|
|
?>
|
|
|
|
<style>
|
|
/* Global layout enforcement */
|
|
html, body {
|
|
background: #0b0e11;
|
|
min-width: 1280px;
|
|
max-width: 1920px;
|
|
margin: 0 auto;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
html, body {
|
|
min-width: 100%;
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
.navbar, footer { display: none !important; }
|
|
body { padding-bottom: 0 !important; }
|
|
}
|
|
|
|
.trading-container {
|
|
display: flex;
|
|
background: #0b0e11;
|
|
min-height: calc(100vh - 64px);
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.trading-container { min-height: calc(100vh - 50px); flex-direction: column; }
|
|
}
|
|
|
|
.left-col { width: 260px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
|
|
.center-col { flex: 1; min-width: 600px; background: #0b0e11; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
|
|
.right-col { width: 320px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; }
|
|
|
|
@media (max-width: 991px) {
|
|
.left-col, .right-col { display: none !important; }
|
|
.center-col { min-width: 100%; }
|
|
}
|
|
|
|
/* Category Tabs above Search */
|
|
.category-tabs { display: flex; padding: 15px 15px 5px; gap: 8px; }
|
|
.category-tab { flex: 1; text-align: center; padding: 6px 0; background: #2b3139; border-radius: 4px; font-size: 11px; color: #848e9c; cursor: pointer; transition: all 0.2s; white-space: nowrap; border: 1px solid transparent; }
|
|
.category-tab.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
|
|
|
|
/* Search Box */
|
|
.search-box { padding: 5px 15px 10px; position: relative; }
|
|
.search-box i { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); color: #848e9c; font-size: 12px; }
|
|
.search-box input { width: 100%; background: #2b3139; border: 1px solid transparent; border-radius: 4px; padding: 8px 10px 8px 30px; color: white; font-size: 13px; outline: none; }
|
|
.search-box input:focus { border-color: var(--primary-color); }
|
|
|
|
#pairs-list { flex: 1; overflow-y: auto; }
|
|
.pair-item { display: flex; align-items: center; padding: 10px 15px; cursor: pointer; transition: all 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02); }
|
|
.pair-item:hover { background: #1e2329; }
|
|
.pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }
|
|
.coin-icon { width: 22px; height: 22px; margin-right: 12px; border-radius: 50%; flex-shrink: 0; background: #2b3139; }
|
|
|
|
.chart-header { padding: 8px 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; flex-wrap: nowrap; gap: 20px; height: 50px; }
|
|
.chart-box { flex: 1; min-height: 350px; height: 350px; background: #0b0e11; border-bottom: 1px solid #2b3139; }
|
|
|
|
.record-tabs { display: flex; background: #161a1e; border-bottom: 1px solid #2b3139; padding: 0 15px; }
|
|
.record-tab { padding: 10px 0; margin-right: 25px; font-size: 13px; color: #848e9c; cursor: pointer; position: relative; }
|
|
.record-tab.active { color: white; font-weight: 600; }
|
|
.record-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-color); }
|
|
.records-content { min-height: 200px; height: 220px; overflow-y: auto; background: #161a1e; }
|
|
|
|
@media (max-width: 991px) {
|
|
.records-content { min-height: 200px; padding-bottom: 20px; height: auto; }
|
|
.chart-box { min-height: 320px; height: 320px; }
|
|
}
|
|
|
|
.order-panel { padding: 12px 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
|
|
.panel-label { color: #848e9c; font-size: 11px; margin-bottom: 6px; font-weight: 500; }
|
|
.duration-grid { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
|
|
.duration-grid::-webkit-scrollbar { display: none; }
|
|
.time-btn { flex: 1; min-width: 70px; background: #2b3139; border: 1px solid transparent; color: #eaecef; padding: 6px 4px; border-radius: 4px; font-size: 11px; cursor: pointer; text-align: center; display: flex; flex-direction: column; align-items: center; transition: all 0.2s; }
|
|
.time-btn.active { background: rgba(0, 82, 255, 0.1); border-color: var(--primary-color); color: var(--primary-color); font-weight: bold; }
|
|
.time-btn .rate { font-size: 9px; font-weight: bold; margin-top: 2px; }
|
|
|
|
.input-group { background: #2b3139; border-radius: 4px; padding: 6px 12px; display: flex; align-items: center; border: 1px solid transparent; transition: border-color 0.2s; }
|
|
.input-group:focus-within { border-color: var(--primary-color); }
|
|
.input-group input { background: transparent; border: none; color: white; flex: 1; text-align: left; outline: none; font-size: 13px; width: 100%; }
|
|
.input-group .unit { color: #848e9c; margin-left: 8px; font-size: 11px; }
|
|
|
|
.balance-info { display: flex; justify-content: space-between; font-size: 10px; color: #848e9c; margin-top: 4px; }
|
|
.trade-btn { flex: 1; padding: 10px; border-radius: 4px; font-weight: bold; font-size: 14px; border: none; cursor: pointer; transition: transform 0.1s; }
|
|
.trade-btn:active { transform: scale(0.98); }
|
|
.btn-up { background: #0ecb81; color: white; }
|
|
.btn-down { background: #f6465d; color: white; }
|
|
|
|
/* Order Book Styles */
|
|
.order-book-header { padding: 10px 15px; font-size: 12px; font-weight: 600; border-bottom: 1px solid #2b3139; color: white; background: #161a1e; }
|
|
.ob-row { display: flex; justify-content: space-between; padding: 3px 15px; font-size: 12px; position: relative; height: 20px; align-items: center; }
|
|
.ob-price { flex: 1; font-weight: 500; }
|
|
.ob-amount { flex: 1; text-align: right; color: #eaecef; }
|
|
.ob-total { flex: 1; text-align: right; color: #848e9c; }
|
|
.ob-bg-sell { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(246, 70, 93, 0.1); z-index: 0; }
|
|
.ob-bg-buy { position: absolute; right: 0; top: 0; bottom: 0; background: rgba(14, 203, 129, 0.1); z-index: 0; }
|
|
|
|
/* Adjusted for 20 rows of asks and bids */
|
|
#ob-asks { height: 400px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
|
|
#ob-bids { height: 400px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
|
|
|
|
/* Mobile Nav */
|
|
.m-trade-nav { display: none; background: #161a1e; border-bottom: 1px solid #2b3139; position: sticky; top: 0; z-index: 100; }
|
|
.m-trade-nav a { flex: 1; text-align: center; padding: 14px; font-size: 14px; color: #848e9c; text-decoration: none; border-bottom: 2px solid transparent; }
|
|
.m-trade-nav a.active { color: var(--primary-color); border-bottom-color: var(--primary-color); font-weight: bold; }
|
|
|
|
.m-currency-bar { display: none; overflow-x: auto; background: #161a1e; padding: 10px; gap: 10px; border-bottom: 1px solid #2b3139; scrollbar-width: none; }
|
|
.m-currency-bar::-webkit-scrollbar { display: none; }
|
|
.m-coin-item { flex-shrink: 0; background: #2b3139; padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 6px; border: 1px solid transparent; }
|
|
.m-coin-item.active { border-color: var(--primary-color); background: rgba(0, 82, 255, 0.1); }
|
|
.m-coin-item img { width: 16px; height: 16px; border-radius: 50%; }
|
|
|
|
@media (max-width: 991px) {
|
|
.m-trade-nav { display: flex; }
|
|
.m-currency-bar { display: flex; }
|
|
.chart-header { gap: 10px; padding: 10px 15px; overflow-x: auto; scrollbar-width: none; }
|
|
.chart-header::-webkit-scrollbar { display: none; }
|
|
.stats-item { flex-shrink: 0; }
|
|
}
|
|
|
|
.progress-bar-container { width: 100%; height: 3px; background: #2b3139; border-radius: 2px; margin-top: 8px; overflow: hidden; }
|
|
.progress-bar-fill { height: 100%; background: var(--primary-color); width: 0%; transition: width 1s linear; }
|
|
|
|
.stats-item { display: flex; flex-direction: column; justify-content: center; }
|
|
.stats-label { font-size: 10px; color: #848e9c; margin-bottom: 1px; white-space: nowrap; }
|
|
.stats-value { font-size: 12px; font-weight: 600; color: white; white-space: nowrap; }
|
|
|
|
/* Countdown Modal (Beautiful Square with Circular Timer) */
|
|
.option-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 3000; display: none; align-items: center; justify-content: center; backdrop-filter: blur(8px); }
|
|
.option-modal-content { background: #1e2329; width: 420px; height: 420px; border-radius: 24px; padding: 30px; border: 1px solid #2b3139; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
|
|
|
|
.circular-timer-box { position: relative; width: 120px; height: 120px; margin-bottom: 10px; }
|
|
.circular-timer-svg { transform: rotate(-90deg); width: 120px; height: 120px; }
|
|
.circular-timer-bg { fill: none; stroke: #2b3139; stroke-width: 8; }
|
|
.circular-timer-progress { fill: none; stroke: var(--primary-color); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 351.85; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
|
|
.timer-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: 800; color: white; font-family: 'Courier New', monospace; }
|
|
|
|
.modal-symbol { font-size: 20px; font-weight: 800; color: white; margin-bottom: 2px; }
|
|
.modal-dir { font-size: 13px; font-weight: 700; padding: 4px 16px; border-radius: 20px; margin-bottom: 15px; }
|
|
|
|
.modal-info-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; background: rgba(255,255,255,0.03); padding: 15px; border-radius: 16px; margin-bottom: 15px; }
|
|
.info-item { display: flex; flex-direction: column; gap: 4px; }
|
|
.info-label { color: #848e9c; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.info-value { color: white; font-size: 14px; font-weight: 700; }
|
|
|
|
.modal-live-box { text-align: center; width: 100%; }
|
|
.live-label { color: #848e9c; font-size: 12px; margin-bottom: 5px; }
|
|
.live-price { font-size: 24px; font-weight: 800; transition: color 0.3s; }
|
|
.profit-estimate { font-size: 14px; font-weight: 700; margin-top: 4px; }
|
|
|
|
.modal-footer-note { font-size: 11px; color: #5e6673; text-align: center; line-height: 1.4; }
|
|
</style>
|
|
|
|
<div class="m-trade-nav">
|
|
<a href="spot.php"><?php echo __('nav_spot'); ?></a>
|
|
<a href="futures.php"><?php echo __('nav_futures'); ?></a>
|
|
<a href="options.php" class="active"><?php echo __('nav_options'); ?></a>
|
|
</div>
|
|
|
|
<div class="m-currency-bar" id="m-coin-list"></div>
|
|
|
|
<div class="trading-container">
|
|
<div class="left-col d-none d-lg-flex">
|
|
<div class="category-tabs">
|
|
<div class="category-tab active" onclick="location.href='options.php'"><?php echo $lang == 'zh' ? '秒合约' : 'Options'; ?></div>
|
|
<div class="category-tab" onclick="location.href='spot.php'"><?php echo $lang == 'zh' ? '现货交易' : 'Spot'; ?></div>
|
|
<div class="category-tab" onclick="location.href='futures.php'"><?php echo $lang == 'zh' ? '合约交易' : 'Futures'; ?></div>
|
|
</div>
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>" oninput="filterPairs()">
|
|
</div>
|
|
<div id="pairs-list"></div>
|
|
</div>
|
|
|
|
<div class="center-col">
|
|
<div class="chart-header">
|
|
<div style="display: flex; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid #2b3139;">
|
|
<img id="curr-icon" src="" class="coin-icon" style="margin:0; width:28px; height:28px;">
|
|
<div>
|
|
<div style="font-weight: 800; font-size: 16px; line-height: 1.2;"><span id="curr-pair">BTC/USDT</span></div>
|
|
<div style="font-size: 10px; color: var(--primary-color); font-weight: 600;"><?php echo __('nav_options'); ?></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stats-item">
|
|
<div id="curr-price" style="font-size: 18px; font-weight: 800; color: #0ecb81; line-height: 1.2;">--</div>
|
|
<div id="curr-change" style="font-size: 11px; font-weight: 600;">--</div>
|
|
</div>
|
|
|
|
<div class="stats-item">
|
|
<span class="stats-label"><?php echo __('24h_high'); ?></span>
|
|
<span class="stats-value" id="h-high">--</span>
|
|
</div>
|
|
<div class="stats-item">
|
|
<span class="stats-label"><?php echo __('24h_low'); ?></span>
|
|
<span class="stats-value" id="h-low">--</span>
|
|
</div>
|
|
<div class="stats-item">
|
|
<span class="stats-label"><?php echo __('24h_vol'); ?></span>
|
|
<span class="stats-value" id="h-vol">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chart-box"><div id="tv_chart_container" style="height: 100%;"></div></div>
|
|
|
|
<div class="order-panel">
|
|
<div style="display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; gap: 15px; align-items: end;">
|
|
<div>
|
|
<div class="panel-label"><?php echo __('settlement_time'); ?></div>
|
|
<div class="duration-grid">
|
|
<div class="time-btn active" data-duration="60" data-rate="8" data-min="100">60S <span class="rate">8%</span></div>
|
|
<div class="time-btn" data-duration="90" data-rate="12" data-min="5000">90S <span class="rate">12%</span></div>
|
|
<div class="time-btn" data-duration="120" data-rate="15" data-min="30000">120S <span class="rate">15%</span></div>
|
|
<div class="time-btn" data-duration="180" data-rate="20" data-min="100000">180S <span class="rate">20%</span></div>
|
|
<div class="time-btn" data-duration="300" data-rate="32" data-min="300000">300S <span class="rate">32%</span></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="panel-label"><?php echo __('buy_amount'); ?></div>
|
|
<div class="input-group">
|
|
<input type="number" id="option-amount" placeholder="<?php echo __('min_order'); ?> 100">
|
|
<span class="unit">USDT</span>
|
|
</div>
|
|
<div class="balance-info">
|
|
<span><?php echo __('available'); ?>: <span id="usdt-balance" style="color:white">0.00</span></span>
|
|
<span id="potential-profit" style="color: #0ecb81; font-weight: bold;">+0.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display:flex; gap:8px;">
|
|
<button class="trade-btn btn-up" onclick="placeOptionOrder('up')"><?php echo __('buy_up'); ?></button>
|
|
<button class="trade-btn btn-down" onclick="placeOptionOrder('down')"><?php echo __('buy_down'); ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="records-section">
|
|
<div class="record-tabs">
|
|
<div class="record-tab active" onclick="switchRecords('pending')"><?php echo __('in_progress'); ?></div>
|
|
<div class="record-tab" onclick="switchRecords('completed')"><?php echo __('settled'); ?></div>
|
|
</div>
|
|
<div class="records-content" id="records-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-col d-none d-lg-flex">
|
|
<div class="order-book-header"><?php echo __('order_book'); ?></div>
|
|
<div style="padding: 10px 0; display: flex; flex-direction: column; flex: 1;">
|
|
<div id="ob-asks" style="height: 400px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;"></div>
|
|
<div style="padding: 10px; border-top: 1px solid #2b3139; border-bottom: 1px solid #2b3139; margin: 5px 0; text-align: center; background: #161a1e;">
|
|
<span id="ob-mid-price" style="font-size: 16px; font-weight: 800; color: #0ecb81;">--</span>
|
|
</div>
|
|
<div id="ob-bids" style="height: 400px; display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-modal" id="order-modal">
|
|
<div class="option-modal-content">
|
|
<div class="modal-symbol" id="modal-symbol">BTC/USDT</div>
|
|
<div class="modal-dir" id="modal-dir">BUY UP</div>
|
|
|
|
<div class="circular-timer-box">
|
|
<svg class="circular-timer-svg">
|
|
<circle class="circular-timer-bg" cx="60" cy="60" r="56"></circle>
|
|
<circle class="circular-timer-progress" id="circular-progress" cx="60" cy="60" r="56"></circle>
|
|
</svg>
|
|
<div class="timer-text" id="modal-timer">00</div>
|
|
</div>
|
|
|
|
<div class="modal-live-box">
|
|
<div class="live-label"><?php echo __('current_price'); ?></div>
|
|
<div class="live-price" id="modal-price-live">--</div>
|
|
<div class="profit-estimate" id="modal-profit-estimate">--</div>
|
|
</div>
|
|
|
|
<div class="modal-info-grid">
|
|
<div class="info-item">
|
|
<div class="info-label"><?php echo __('opening_price'); ?></div>
|
|
<div class="info-value" id="modal-open-price">--</div>
|
|
</div>
|
|
<div class="info-item" style="text-align: right;">
|
|
<div class="info-label"><?php echo __('buy_amount'); ?></div>
|
|
<div class="info-value" id="modal-amount">--</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-footer-note">
|
|
<?php echo __('options_instruction'); ?>: <?php echo __('options_wait_settle'); ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
|
|
<script>
|
|
let currentPair = 'BTCUSDT'; let currentPrice = 0; let currentDuration = 60; let currentRate = 0.08; let currentMin = 100; let currentStatus = 'pending'; let searchQuery = '';
|
|
const pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'SHIBUSDT', 'TRXUSDT', 'AVAXUSDT', 'LINKUSDT', 'BCHUSDT', 'UNIUSDT', 'ETCUSDT', 'NEARUSDT', 'FILUSDT', 'ALGOUSDT', 'FTMUSDT', 'SANDUSDT', 'MANAUSDT', 'AXSUSDT', 'ATOMUSDT', 'HBARUSDT', 'ICPUSDT', 'VETUSDT'];
|
|
const marketData = {};
|
|
|
|
function getIcon(s) {
|
|
const symbol = s.replace('USDT', '').toLowerCase();
|
|
return `https://assets.coincap.io/assets/icons/${symbol}@2x.png`;
|
|
}
|
|
|
|
function initChart(symbol) { new TradingView.widget({ "width": "100%", "height": "100%", "symbol": "BINANCE:" + symbol, "interval": "1", "theme": "dark", "style": "1", "locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>", "container_id": "tv_chart_container", "backgroundColor": "#0b0e11", "hide_side_toolbar": true }); }
|
|
initChart(currentPair);
|
|
|
|
const ws = new WebSocket('wss://stream.binance.com:9443/ws/' + pairs.map(p => p.toLowerCase() + '@ticker').join('/'));
|
|
ws.onmessage = (e) => {
|
|
const d = JSON.parse(e.data);
|
|
if (d.s === currentPair) { currentPrice = parseFloat(d.c); updatePriceUI(d); updateOrderBook(); updateModalLive(); }
|
|
marketData[d.s] = d; renderPairs();
|
|
};
|
|
|
|
function updatePriceUI(d) {
|
|
const pStr = currentPrice.toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
document.getElementById('curr-price').innerText = pStr;
|
|
document.getElementById('ob-mid-price').innerText = pStr;
|
|
const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
|
|
document.getElementById('curr-price').style.color = color;
|
|
document.getElementById('ob-mid-price').style.color = color;
|
|
document.getElementById('curr-change').innerText = (d.P >= 0 ? '+' : '') + d.P + '%';
|
|
document.getElementById('curr-change').style.color = color;
|
|
const hHigh = document.getElementById('h-high'); if (hHigh) hHigh.innerText = parseFloat(d.h).toLocaleString();
|
|
const hLow = document.getElementById('h-low'); if (hLow) hLow.innerText = parseFloat(d.l).toLocaleString();
|
|
const hVol = document.getElementById('h-vol'); if (hVol) hVol.innerText = (parseFloat(d.v)/1000).toFixed(1) + 'K';
|
|
}
|
|
|
|
function updateOrderBook() {
|
|
const asks = document.getElementById('ob-asks'); const bids = document.getElementById('ob-bids');
|
|
let aHtml = ''; let bHtml = ''; const rowCount = 20;
|
|
for (let i = 0; i < rowCount; i++) {
|
|
const aPrice = currentPrice * (1 + (rowCount - i) * 0.0001);
|
|
const aAmt = (Math.random() * 2).toFixed(4);
|
|
aHtml += `<div class="ob-row"><div class="ob-bg-sell" style="width:${Math.random()*80}%"></div><span class="ob-price" style="color:#f6465d">${aPrice.toFixed(2)}</span><span class="ob-amount">${aAmt}</span><span class="ob-total">${(aPrice*aAmt).toFixed(2)}</span></div>`;
|
|
const bPrice = currentPrice * (1 - (i + 1) * 0.0001);
|
|
const bAmt = (Math.random() * 2).toFixed(4);
|
|
bHtml += `<div class="ob-row"><div class="ob-bg-buy" style="width:${Math.random()*80}%"></div><span class="ob-price" style="color:#0ecb81">${bPrice.toFixed(2)}</span><span class="ob-amount">${bAmt}</span><span class="ob-total">${(bPrice*bAmt).toFixed(2)}</span></div>`;
|
|
}
|
|
asks.innerHTML = aHtml; bids.innerHTML = bHtml;
|
|
}
|
|
|
|
function renderPairs() {
|
|
const list = document.getElementById('pairs-list'); const mBar = document.getElementById('m-coin-list');
|
|
let lHtml = ''; let mHtml = '';
|
|
pairs.forEach(p => {
|
|
const d = marketData[p] || {c: 0, P: 0}; const icon = getIcon(p); const active = p === currentPair; const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
|
|
const disp = p.replace('USDT', '') + '/USDT';
|
|
if (searchQuery === '' || disp.includes(searchQuery)) {
|
|
lHtml += `<div class="pair-item ${active ? 'active' : ''}" onclick="switchPair('${p}')"><img src="${icon}" class="coin-icon" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT','')}&background=2b3139&color=fff'"> <div style="flex:1"><div style="font-weight:700; font-size:13px">${disp}</div></div> <div style="text-align:right"><div style="font-size:13px; font-weight:bold">${parseFloat(d.c).toLocaleString()}</div><div style="font-size:11px; color:${color}">${(d.P >= 0 ? '+' : '') + d.P}%</div></div></div>`;
|
|
}
|
|
mHtml += `<div class="m-coin-item ${active ? 'active' : ''}" onclick="switchPair('${p}')"><img src="${icon}" onerror="this.src='https://ui-avatars.com/api/?name=${p.replace('USDT','')}&background=2b3139&color=fff'"><span>${p.replace('USDT', '')}</span></div>`;
|
|
});
|
|
if(list) list.innerHTML = lHtml; if(mBar) mBar.innerHTML = mHtml;
|
|
}
|
|
|
|
function filterPairs() { searchQuery = document.getElementById('pair-search').value.toUpperCase(); renderPairs(); }
|
|
|
|
function switchPair(p) {
|
|
currentPair = p; const icon = getIcon(p);
|
|
document.getElementById('curr-pair').innerText = p.replace('USDT', '') + '/USDT';
|
|
const iconEl = document.getElementById('curr-icon');
|
|
iconEl.src = icon;
|
|
iconEl.onerror = function() { this.src = `https://ui-avatars.com/api/?name=${p.replace('USDT','')}&background=2b3139&color=fff`; };
|
|
initChart(p); renderPairs();
|
|
}
|
|
|
|
document.querySelectorAll('.time-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
currentDuration = parseInt(this.dataset.duration); currentRate = parseInt(this.dataset.rate) / 100; currentMin = parseInt(this.dataset.min);
|
|
document.querySelectorAll('.time-btn').forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
document.getElementById('option-amount').placeholder = `<?php echo __('min_order'); ?> ${currentMin}`;
|
|
updatePotentialProfit();
|
|
});
|
|
});
|
|
|
|
function updatePotentialProfit() {
|
|
const amt = parseFloat(document.getElementById('option-amount').value) || 0;
|
|
const profit = (amt * currentRate).toFixed(2);
|
|
document.getElementById('potential-profit').innerText = '+' + profit;
|
|
}
|
|
|
|
document.getElementById('option-amount').addEventListener('input', updatePotentialProfit);
|
|
|
|
async function placeOptionOrder(dir) {
|
|
const amt = parseFloat(document.getElementById('option-amount').value);
|
|
if (!amt || amt < currentMin) return alert('<?php echo __('min_amount'); ?>: ' + currentMin + ' USDT');
|
|
const resp = await fetch('api/place_option_order.php', { method: 'POST', body: JSON.stringify({ symbol: currentPair, amount: amt, direction: dir, duration: currentDuration, opening_price: currentPrice }) });
|
|
const res = await resp.json();
|
|
if (res.success) {
|
|
showCountdownModal(dir, amt, currentPrice, currentDuration, currentRate);
|
|
document.getElementById('option-amount').value = ''; updateBalance(); fetchOrders();
|
|
} else alert(res.error);
|
|
}
|
|
|
|
let modalInterval = null;
|
|
let modalActiveRate = 0;
|
|
function showCountdownModal(dir, amount, openPrice, duration, rate) {
|
|
const modal = document.getElementById('order-modal');
|
|
const timer = document.getElementById('modal-timer');
|
|
const dirEl = document.getElementById('modal-dir');
|
|
const progress = document.getElementById('circular-progress');
|
|
|
|
modalActiveRate = rate;
|
|
document.getElementById('modal-symbol').innerText = currentPair.replace('USDT','') + '/USDT';
|
|
document.getElementById('modal-open-price').innerText = openPrice.toLocaleString();
|
|
document.getElementById('modal-amount').innerText = amount + ' USDT';
|
|
|
|
dirEl.innerText = dir === 'up' ? '<?php echo __('buy_up'); ?>' : '<?php echo __('buy_down'); ?>';
|
|
dirEl.style.background = dir === 'up' ? 'rgba(14, 203, 129, 0.2)' : 'rgba(246, 70, 93, 0.2)';
|
|
dirEl.style.color = dir === 'up' ? '#0ecb81' : '#f6465d';
|
|
|
|
let remaining = duration;
|
|
const total = duration;
|
|
timer.innerText = remaining;
|
|
modal.style.display = 'flex';
|
|
|
|
const circumference = 2 * Math.PI * 56;
|
|
progress.style.strokeDasharray = circumference;
|
|
|
|
if(modalInterval) clearInterval(modalInterval);
|
|
modalInterval = setInterval(() => {
|
|
remaining--;
|
|
timer.innerText = remaining < 10 ? '0' + remaining : remaining;
|
|
const offset = circumference - (remaining / total) * circumference;
|
|
progress.style.strokeDashoffset = offset;
|
|
|
|
if(remaining <= 0) {
|
|
clearInterval(modalInterval);
|
|
setTimeout(() => { modal.style.display = 'none'; fetchOrders(); }, 2000);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
function updateModalLive() {
|
|
const modal = document.getElementById('order-modal');
|
|
const priceEl = document.getElementById('modal-price-live');
|
|
const profitEl = document.getElementById('modal-profit-estimate');
|
|
|
|
if(modal.style.display === 'flex') {
|
|
const openPrice = parseFloat(document.getElementById('modal-open-price').innerText.replace(/,/g, ''));
|
|
const dir = document.getElementById('modal-dir').innerText.includes('UP') || document.getElementById('modal-dir').innerText.includes('涨') ? 'up' : 'down';
|
|
const amount = parseFloat(document.getElementById('modal-amount').innerText);
|
|
|
|
const isProfit = dir === 'up' ? currentPrice >= openPrice : currentPrice <= openPrice;
|
|
const color = isProfit ? '#0ecb81' : '#f6465d';
|
|
|
|
priceEl.innerText = currentPrice.toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
priceEl.style.color = color;
|
|
|
|
const profitVal = isProfit ? (amount * modalActiveRate).toFixed(2) : '-' + amount.toFixed(2);
|
|
profitEl.innerText = '<?php echo __('estimated_profit'); ?>: ' + (isProfit ? '+' : '') + profitVal + ' USDT';
|
|
profitEl.style.color = color;
|
|
}
|
|
}
|
|
|
|
function switchRecords(s) { currentStatus = s; document.querySelectorAll('.record-tab').forEach(t => t.classList.remove('active')); event.target.classList.add('active'); fetchOrders(); }
|
|
|
|
async function fetchOrders() {
|
|
const resp = await fetch('api/get_option_orders.php?status=' + currentStatus); const res = await resp.json();
|
|
const list = document.getElementById('records-list');
|
|
if (res.success && res.data.length > 0) {
|
|
list.innerHTML = res.data.map(o => `
|
|
<div style="padding:15px; border-bottom:1px solid #2b3139; font-size:13px">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:8px">
|
|
<div><span style="color:${o.direction==='up'?'#0ecb81':'#f6465d'}; font-weight:800; font-size:14px">${o.direction==='up'?'▲':'▼'} ${o.symbol}</span> <span style="font-size:11px; color:#848e9c; margin-left:8px">${o.created_at}</span></div>
|
|
<div style="font-weight:800; color:${parseFloat(o.profit)>=0?'#0ecb81':'#f6465d'}; font-size:15px">${currentStatus==='pending'?'--':(parseFloat(o.profit)>=0?'+':'')+parseFloat(o.profit).toFixed(2)}</div>
|
|
</div>
|
|
<div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; color:#848e9c; font-size:11px">
|
|
<div><?php echo __('amount'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.amount).toFixed(2)}</span></div>
|
|
<div><?php echo __('opening_price'); ?><br><span style="color:white; font-weight:bold">${parseFloat(o.opening_price).toLocaleString()}</span></div>
|
|
<div>${currentStatus==='pending'?'<?php echo __('time'); ?>':'<?php echo __('closing_price'); ?>'}<br><span style="color:white; font-weight:bold">${currentStatus==='pending'?o.duration+'s':parseFloat(o.closing_price).toLocaleString()}</span></div>
|
|
</div>
|
|
${currentStatus==='pending'?`<div class="progress-bar-container"><div class="progress-bar-fill" id="pb-${o.id}" data-start="${new Date(o.created_at).getTime()}" data-duration="${o.duration}"></div></div>`:''}
|
|
</div>
|
|
`).join('');
|
|
if (currentStatus === 'pending') updateProgressBars();
|
|
} else list.innerHTML = `<div style="padding:60px 20px; text-align:center; color:#848e9c"><i class="fas fa-file-invoice" style="font-size:40px; margin-bottom:15px; display:block; opacity:0.3"></i><?php echo __('no_records'); ?></div>`;
|
|
}
|
|
|
|
function updateProgressBars() {
|
|
const bars = document.querySelectorAll('.progress-bar-fill'); const now = Date.now();
|
|
bars.forEach(bar => { const start = parseInt(bar.dataset.start); const dur = parseInt(bar.dataset.duration) * 1000; const elapsed = now - start; bar.style.width = Math.min(100, (elapsed / dur) * 100) + '%'; });
|
|
if (currentStatus === 'pending' && bars.length > 0) setTimeout(updateProgressBars, 1000);
|
|
}
|
|
|
|
async function updateBalance() {
|
|
const resp = await fetch('api/get_assets.php'); const res = await resp.json();
|
|
if (res.success) {
|
|
const usdt = res.data.find(a => a.symbol === 'USDT'); const bal = usdt ? parseFloat(usdt.amount).toFixed(2) : '0.00';
|
|
document.getElementById('usdt-balance').innerText = bal;
|
|
}
|
|
}
|
|
setInterval(fetchOrders, 3000); updateBalance(); switchPair(currentPair);
|
|
</script>
|
|
<?php include 'footer.php'; ?>
|