615 lines
34 KiB
PHP
615 lines
34 KiB
PHP
<?php
|
|
if (session_status() === PHP_SESSION_NONE) { session_start(); }
|
|
if (!isset($_SESSION['user_id'])) { header('Location: login.php'); exit; }
|
|
include 'header.php';
|
|
|
|
$user_id = $_SESSION['user_id'];
|
|
$user_assets = [];
|
|
if ($user_id) {
|
|
// $db is already defined in header.php
|
|
$stmt = $db->prepare("SELECT balance FROM users WHERE id = ?");
|
|
$stmt->execute([$user_id]);
|
|
$usdt_balance = $stmt->fetchColumn();
|
|
$user_assets['USDT'] = (float)($usdt_balance ?: 0);
|
|
|
|
$stmt = $db->prepare("SELECT symbol, amount FROM user_assets WHERE user_id = ?");
|
|
$stmt->execute([$user_id]);
|
|
$assets_data = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
|
|
if ($assets_data) {
|
|
foreach ($assets_data as $symbol => $amount) {
|
|
$user_assets[$symbol] = (float)$amount;
|
|
}
|
|
}
|
|
}
|
|
?>
|
|
|
|
<style>
|
|
.trading-page-wrapper { display: flex; flex-direction: column; min-height: 100vh; background: #0b0e11; }
|
|
.trading-container { flex-grow: 1; display: flex; min-height: 800px; max-width: 1920px; margin: 0 auto; width: 100%; }
|
|
.left-col { width: 280px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
|
|
.center-col { flex: 1; min-width: 600px; display: flex; flex-direction: column; border-right: 1px solid #2b3139; }
|
|
.right-col { width: 300px; flex-shrink: 0; background: #161a1e; display: flex; flex-direction: column; }
|
|
|
|
.chart-header { flex-shrink: 0; height: 55px; padding: 0 20px; display: flex; align-items: center; background: #161a1e; border-bottom: 1px solid #2b3139; gap: 25px; }
|
|
.chart-box { height: 450px; flex-shrink: 0; background: #161a1e; border-bottom: 1px solid #2b3139; }
|
|
.bottom-content-wrapper { flex-grow: 1; background: #161a1e; display: flex; flex-direction: column; }
|
|
|
|
.col-header { padding: 15px; font-weight: 600; border-bottom: 1px solid #2b3139; font-size: 14px; color: #eaecef; height: 50px; display: flex; align-items: center; }
|
|
|
|
#pairs-list { height: 756px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
|
|
#pairs-list::-webkit-scrollbar { width: 4px; }
|
|
#pairs-list::-webkit-scrollbar-track { background: transparent; }
|
|
#pairs-list::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }
|
|
|
|
.coin-icon { width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; }
|
|
.stats-item { display: flex; flex-direction: column; }
|
|
.stats-label { font-size: 11px; color: #848e9c; }
|
|
.stats-value { font-size: 13px; font-weight: 600; color: white; }
|
|
|
|
.category-tabs { display: flex; padding: 15px 15px 10px; gap: 8px; }
|
|
.category-tab { flex: 1; text-align: center; padding: 8px 0; background: #2b3139; border-radius: 6px; font-size: 12px; color: #848e9c; cursor: pointer; transition: 0.2s; border: 1px solid transparent; }
|
|
.category-tab.active { background: rgba(0, 102, 255, 0.1); color: var(--primary-color); border-color: var(--primary-color); font-weight: bold; }
|
|
|
|
.search-box { padding: 0 15px 15px; position: relative; }
|
|
.search-box i { position: absolute; left: 25px; top: 12px; color: #848e9c; font-size: 12px; }
|
|
.search-box input { width: 100%; background: #2b3139; border: 1px solid transparent; border-radius: 6px; padding: 8px 10px 8px 35px; color: white; font-size: 13px; outline: none; transition: 0.2s; }
|
|
.search-box input:focus { border-color: var(--primary-color); }
|
|
|
|
.pair-item { display: flex; align-items: center; padding: 12px 15px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); height: 42px; }
|
|
.pair-item:hover { background: #1e2329; }
|
|
.pair-item.active { background: #1e2329; border-left: 3px solid var(--primary-color); }
|
|
|
|
/* Order Panel - New Layout */
|
|
.order-panel { padding: 20px; background: #161a1e; border-bottom: 1px solid #2b3139; }
|
|
.panel-row { margin-bottom: 15px; }
|
|
.panel-label { color: #848e9c; font-size: 13px; margin-bottom: 8px; font-weight: 500; display: block; }
|
|
|
|
.duration-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
|
|
.time-btn { background: #2b3139; border: 1px solid #3c424a; color: #eaecef; padding: 8px 4px; border-radius: 6px; font-size: 13px; cursor: pointer; text-align: center; font-weight: 600; transition: all 0.2s; }
|
|
.time-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: white; transform: translateY(-1px); }
|
|
.time-btn .rate { font-size: 10px; font-weight: 400; color: #0ecb81; margin-top: 1px; }
|
|
.time-btn.active .rate { color: #fff; opacity: 0.9; }
|
|
|
|
.input-wrapper { position: relative; }
|
|
.amount-input-group { background: #2b3139; border-radius: 6px; padding: 10px 12px; display: flex; align-items: center; border: 1px solid #3c424a; transition: 0.2s; }
|
|
.amount-input-group:focus-within { border-color: var(--primary-color); }
|
|
.amount-input-group input { background: transparent; border: none; color: white; flex: 1; outline: none; font-size: 16px; font-weight: 600; width: 100%; }
|
|
.amount-input-group .unit { color: #848e9c; font-weight: 600; font-size: 14px; }
|
|
|
|
.balance-info-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
|
|
.balance-info-row .label { color: #848e9c; }
|
|
.balance-info-row .value { color: #eaecef; font-weight: 600; }
|
|
.balance-info-row .profit-val { color: #0ecb81; font-weight: 700; }
|
|
|
|
.action-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
|
|
.trade-btn { padding: 12px; border-radius: 8px; font-weight: 800; font-size: 15px; border: none; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; }
|
|
.btn-up { background: #0ecb81; }
|
|
.btn-down { background: #f6465d; }
|
|
.trade-btn:hover { filter: brightness(1.1); }
|
|
|
|
/* Records */
|
|
.records-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
|
.record-tabs { display: flex; padding: 0 20px; border-bottom: 1px solid #2b3139; flex-shrink: 0; }
|
|
.record-tab { padding: 12px 0; margin-right: 25px; font-size: 13px; font-weight: 600; color: #848e9c; cursor: pointer; position: relative; }
|
|
.record-tab.active { color: white; }
|
|
.record-tab.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--primary-color); }
|
|
.table-responsive { height: 350px; overflow-y: auto; padding: 0; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
|
|
.table-responsive::-webkit-scrollbar { width: 4px; }
|
|
.table-responsive::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }
|
|
|
|
table { width: 100%; font-size: 12px; border-collapse: collapse; }
|
|
th { color: #848e9c; font-weight: 500; text-align: left; padding: 10px 15px; border-bottom: 1px solid #2b3139; background: #161a1e; position: sticky; top: 0; z-index: 10; }
|
|
td { padding: 10px 15px; border-bottom: 1px solid rgba(255,255,255,0.02); color: #eaecef; height: 38px; }
|
|
|
|
/* Order Book */
|
|
.ob-header { display: flex; justify-content: space-between; padding: 8px 15px; background: #161a1e; font-size: 11px; color: #848e9c; border-bottom: 1px solid #2b3139; }
|
|
.ob-row { display: flex; justify-content: space-between; padding: 4px 15px; font-size: 12px; }
|
|
.ob-row .price.up { color: #0ecb81; }
|
|
.ob-row .price.down { color: #f6465d; }
|
|
#order-book-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3139 transparent; }
|
|
#order-book-list::-webkit-scrollbar { width: 4px; }
|
|
#order-book-list::-webkit-scrollbar-thumb { background: #2b3139; border-radius: 10px; }
|
|
|
|
/* Countdown Modal Styles */
|
|
.countdown-modal {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; z-index: 10000;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.modal-content-card {
|
|
background: #161a1e; width: 360px; border-radius: 20px; padding: 30px; position: relative; color: white;
|
|
box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid #2b3139;
|
|
}
|
|
.modal-close {
|
|
position: absolute; top: 15px; right: 15px; width: 32px; height: 32px;
|
|
background: #2b3139; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
cursor: pointer; color: #848e9c; transition: 0.2s;
|
|
}
|
|
.modal-close:hover { background: #3c424a; color: white; }
|
|
.countdown-circle-wrap { display: flex; flex-direction: column; align-items: center; margin: 25px 0; }
|
|
.circle-progress { position: relative; width: 140px; height: 140px; }
|
|
.circle-progress svg { transform: rotate(-90deg); width: 140px; height: 140px; }
|
|
.circle-bg { fill: none; stroke: #2b3139; stroke-width: 10; }
|
|
.circle-bar {
|
|
fill: none; stroke: #0ecb81; stroke-width: 10; stroke-linecap: round;
|
|
stroke-dasharray: 408; stroke-dashoffset: 408; transition: stroke-dashoffset 0.1s linear;
|
|
}
|
|
.countdown-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 32px; font-weight: 800; }
|
|
.modal-info-row { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 14px; }
|
|
.modal-info-label { color: #848e9c; }
|
|
.modal-info-value { font-weight: 600; color: #eaecef; }
|
|
.modal-info-value.up { color: #0ecb81; }
|
|
.modal-info-value.down { color: #f6465d; }
|
|
.modal-footer-text { text-align: center; color: #848e9c; font-size: 12px; margin-top: 20px; border-top: 1px solid #2b3139; padding-top: 15px; }
|
|
|
|
#result-overlay {
|
|
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
|
background: #161a1e; border-radius: 20px; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 10;
|
|
}
|
|
.result-icon { font-size: 60px; margin-bottom: 20px; }
|
|
.result-title { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
|
|
.result-amount { font-size: 32px; font-weight: 800; margin-bottom: 30px; }
|
|
.result-btn { background: var(--primary-color); color: white; padding: 12px 40px; border-radius: 10px; font-weight: 700; cursor: pointer; border: none; }
|
|
</style>
|
|
|
|
<div class="trading-page-wrapper">
|
|
<div class="trading-container">
|
|
<!-- Left: Pair Selection -->
|
|
<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 __('nav_options'); ?></div>
|
|
<div class="category-tab" onclick="location.href='spot.php'"><?php echo __('nav_spot'); ?></div>
|
|
<div class="category-tab" onclick="location.href='futures.php'"><?php echo __('nav_futures'); ?></div>
|
|
</div>
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="pair-search" placeholder="<?php echo __('search_currency'); ?>">
|
|
</div>
|
|
<div id="pairs-list"></div>
|
|
</div>
|
|
|
|
<!-- Center: Chart & Order -->
|
|
<div class="center-col">
|
|
<div class="chart-header">
|
|
<div class="d-flex align-items-center" style="gap:12px;">
|
|
<img id="curr-icon" src="" class="coin-icon">
|
|
<span id="curr-pair" style="font-weight: 800; font-size: 18px; color:white;">--/--</span>
|
|
</div>
|
|
<div class="stats-item">
|
|
<div id="curr-price" style="font-size: 20px; font-weight: 800; color: #0ecb81; line-height: 1;">--</div>
|
|
<div id="curr-change" style="font-size: 12px; font-weight: 600; margin-top:2px;">--</div>
|
|
</div>
|
|
<div class="stats-item d-none d-md-flex"><span class="stats-label"><?php echo __('24h_high'); ?></span><span class="stats-value" id="h-high">--</span></div>
|
|
<div class="stats-item d-none d-md-flex"><span class="stats-label"><?php echo __('24h_low'); ?></span><span class="stats-value" id="h-low">--</span></div>
|
|
</div>
|
|
|
|
<div class="chart-box" id="tv_chart_container"></div>
|
|
|
|
<div class="bottom-content-wrapper">
|
|
<div class="order-panel">
|
|
<!-- Row 1: Duration -->
|
|
<div class="panel-row">
|
|
<label class="panel-label"><?php echo __('settlement_time'); ?> / <?php echo __('profit'); ?></label>
|
|
<div class="duration-grid">
|
|
<div class="time-btn active" data-duration="60" data-rate="8" data-min="100">60s<div class="rate">+8%</div></div>
|
|
<div class="time-btn" data-duration="90" data-rate="12" data-min="5000">90s<div class="rate">+12%</div></div>
|
|
<div class="time-btn" data-duration="120" data-rate="15" data-min="30000">120s<div class="rate">+15%</div></div>
|
|
<div class="time-btn" data-duration="180" data-rate="20" data-min="100000">180s<div class="rate">+20%</div></div>
|
|
<div class="time-btn" data-duration="300" data-rate="32" data-min="300000">300s<div class="rate">+32%</div></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2: Amount -->
|
|
<div class="panel-row" style="margin-bottom: 10px;">
|
|
<label class="panel-label"><?php echo __('buy_amount'); ?></label>
|
|
<div class="amount-input-group">
|
|
<input type="number" id="option-amount" value="100" placeholder="<?php echo __('min_amount'); ?> 100">
|
|
<span class="unit">USDT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2.5: Balance & Profit -->
|
|
<div class="balance-info-row">
|
|
<div>
|
|
<span class="label"><?php echo __('available'); ?>: </span>
|
|
<span class="value"><span id="usdt-balance">0.00</span> USDT</span>
|
|
</div>
|
|
<div>
|
|
<span class="label"><?php echo __('expected_profit'); ?>: </span>
|
|
<span class="profit-val" id="potential-profit">+0.00</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 3: Buttons -->
|
|
<div class="action-buttons">
|
|
<button class="trade-btn btn-up" id="btn-buy-up">
|
|
<i class="fas fa-arrow-up"></i> <?php echo __('buy_up'); ?>
|
|
</button>
|
|
<button class="trade-btn btn-down" id="btn-buy-down">
|
|
<i class="fas fa-arrow-down"></i> <?php echo __('buy_down'); ?>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="records-container">
|
|
<div class="record-tabs">
|
|
<div class="record-tab active" data-status="pending"><?php echo __('in_progress'); ?></div>
|
|
<div class="record-tab" data-status="completed"><?php echo __('settled'); ?></div>
|
|
</div>
|
|
<div class="table-responsive">
|
|
<table id="records-list"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right: Order Book -->
|
|
<div class="right-col d-none d-xl-flex">
|
|
<div class="col-header"><?php echo __('order_book'); ?></div>
|
|
<div class="ob-header">
|
|
<span><?php echo __('price'); ?>(USDT)</span>
|
|
<span><?php echo __('amount'); ?></span>
|
|
</div>
|
|
<div id="order-book-list">
|
|
<div id="asks-list"></div>
|
|
<div id="price-mid" style="padding:10px 15px; font-weight:800; text-align:center; font-size:16px; border-top:1px solid #2b3139; border-bottom:1px solid #2b3139;">--</div>
|
|
<div id="bids-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Countdown Modal -->
|
|
<div id="countdown-modal" class="countdown-modal">
|
|
<div class="modal-content-card">
|
|
<div class="modal-close" onclick="closeCountdownModal()"><i class="fas fa-times"></i></div>
|
|
<div style="font-size: 20px; font-weight: 800; text-align: left;" id="modal-symbol">--</div>
|
|
|
|
<div class="countdown-circle-wrap">
|
|
<div class="circle-progress">
|
|
<svg>
|
|
<circle class="circle-bg" cx="70" cy="70" r="65"></circle>
|
|
<circle id="circle-bar" class="circle-bar" cx="70" cy="70" r="65"></circle>
|
|
</svg>
|
|
<div class="countdown-text" id="countdown-timer">00:00</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-info-row">
|
|
<span class="modal-info-label"><?php echo __('current_price'); ?></span>
|
|
<span class="modal-info-value" id="modal-curr-price">--</span>
|
|
</div>
|
|
<div class="modal-info-row">
|
|
<span class="modal-info-label"><?php echo __('period'); ?></span>
|
|
<span class="modal-info-value" id="modal-period">--</span>
|
|
</div>
|
|
<div class="modal-info-row">
|
|
<span class="modal-info-label"><?php echo __('direction'); ?></span>
|
|
<span class="modal-info-value" id="modal-direction">--</span>
|
|
</div>
|
|
<div class="modal-info-row">
|
|
<span class="modal-info-label"><?php echo __('amount'); ?></span>
|
|
<span class="modal-info-value" id="modal-amount">--</span>
|
|
</div>
|
|
<div class="modal-info-row">
|
|
<span class="modal-info-label"><?php echo __('price'); ?></span>
|
|
<span class="modal-info-value" id="modal-price">--</span>
|
|
</div>
|
|
<div class="modal-info-row">
|
|
<span class="modal-info-label"><?php echo __('expected_profit'); ?></span>
|
|
<span class="modal-info-value up" id="modal-profit">--</span>
|
|
</div>
|
|
|
|
<div class="modal-footer-text">
|
|
<?php echo __('final_price_notice'); ?>
|
|
</div>
|
|
|
|
<div id="result-overlay">
|
|
<div class="result-icon" id="result-icon"></div>
|
|
<div class="result-title" id="result-title"></div>
|
|
<div class="result-amount" id="result-amount"></div>
|
|
<button class="result-btn" onclick="closeCountdownModal()"><?php echo __('confirm'); ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
|
|
<script>
|
|
const userAssets = <?php echo json_encode($user_assets); ?>;
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
let currentPair = 'BTCUSDT', currentPrice = 0, ws, chartWidget;
|
|
let selectedDuration = 60, selectedRate = 8, minAmount = 100;
|
|
const marketData = {};
|
|
const pairs = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'AVAXUSDT', 'DOTUSDT', 'MATICUSDT', 'LTCUSDT', 'TRXUSDT', 'LINKUSDT', 'UNIUSDT', 'ATOMUSDT', 'ETCUSDT', 'BCHUSDT', 'FILUSDT', 'ICPUSDT', 'NEARUSDT', 'AAVEUSDT', 'ALGOUSDT'];
|
|
let fetchOrdersInterval;
|
|
let activeOrdersTab = 'pending';
|
|
let countdownInterval;
|
|
|
|
const dom = {
|
|
currIcon: document.getElementById('curr-icon'),
|
|
currPair: document.getElementById('curr-pair'),
|
|
currPrice: document.getElementById('curr-price'),
|
|
currChange: document.getElementById('curr-change'),
|
|
hHigh: document.getElementById('h-high'),
|
|
hLow: document.getElementById('h-low'),
|
|
pairsList: document.getElementById('pairs-list'),
|
|
pairSearch: document.getElementById('pair-search'),
|
|
asksList: document.getElementById('asks-list'),
|
|
bidsList: document.getElementById('bids-list'),
|
|
midPrice: document.getElementById('price-mid'),
|
|
optionAmountInput: document.getElementById('option-amount'),
|
|
potentialProfit: document.getElementById('potential-profit'),
|
|
usdtBalance: document.getElementById('usdt-balance'),
|
|
recordsList: document.getElementById('records-list'),
|
|
|
|
// Modal DOM
|
|
modal: document.getElementById('countdown-modal'),
|
|
modalSymbol: document.getElementById('modal-symbol'),
|
|
modalTimer: document.getElementById('countdown-timer'),
|
|
modalCircle: document.getElementById('circle-bar'),
|
|
modalCurrPrice: document.getElementById('modal-curr-price'),
|
|
modalPeriod: document.getElementById('modal-period'),
|
|
modalDirection: document.getElementById('modal-direction'),
|
|
modalAmount: document.getElementById('modal-amount'),
|
|
modalPrice: document.getElementById('modal-price'),
|
|
modalProfit: document.getElementById('modal-profit'),
|
|
resultOverlay: document.getElementById('result-overlay'),
|
|
resultIcon: document.getElementById('result-icon'),
|
|
resultTitle: document.getElementById('result-title'),
|
|
resultAmount: document.getElementById('result-amount')
|
|
};
|
|
|
|
function updateAvailableBalance() {
|
|
dom.usdtBalance.innerText = parseFloat(userAssets.USDT || 0).toFixed(2);
|
|
}
|
|
|
|
function initChartWidget(symbol) {
|
|
if (chartWidget) { chartWidget = null; }
|
|
document.getElementById('tv_chart_container').innerHTML = '';
|
|
chartWidget = new TradingView.widget({
|
|
"autosize": true, "symbol": `BINANCE:${symbol}`,
|
|
"interval": "1", "timezone": "Etc/UTC", "theme": "dark", "style": "1",
|
|
"locale": "<?php echo $lang == 'zh' ? 'zh_CN' : 'en'; ?>",
|
|
"toolbar_bg": "#161a1e", "enable_publishing": false, "hide_side_toolbar": true, "allow_symbol_change": false,
|
|
"container_id": "tv_chart_container",
|
|
"studies": ["Volume@tv-basicstudies"],
|
|
"overrides": {
|
|
"paneProperties.background": "#161a1e",
|
|
"paneProperties.vertGridProperties.color": "rgba(255, 255, 255, 0.03)",
|
|
"paneProperties.horzGridProperties.color": "rgba(255, 255, 255, 0.03)",
|
|
"scalesProperties.textColor" : "#848e9c",
|
|
}
|
|
});
|
|
}
|
|
|
|
function connectWebSocket() {
|
|
if (ws) ws.close();
|
|
const tickerStreams = pairs.map(p => `${p.toLowerCase()}@ticker`).join('/');
|
|
const depthStream = `${currentPair.toLowerCase()}@depth20@100ms`;
|
|
ws = new WebSocket(`wss://stream.binance.com:9443/stream?streams=${tickerStreams}/${depthStream}`);
|
|
|
|
ws.onmessage = (event) => {
|
|
const { stream, data } = JSON.parse(event.data);
|
|
if (!data) return;
|
|
if (stream.endsWith('@ticker')) {
|
|
marketData[data.s] = data;
|
|
if (data.s === currentPair) {
|
|
currentPrice = parseFloat(data.c);
|
|
updatePriceUI(data);
|
|
dom.midPrice.innerText = currentPrice.toFixed(2);
|
|
dom.midPrice.style.color = data.P >= 0 ? '#0ecb81' : '#f6465d';
|
|
|
|
if (dom.modal.style.display === 'flex') {
|
|
dom.modalCurrPrice.innerText = currentPrice.toFixed(4);
|
|
dom.modalCurrPrice.style.color = data.P >= 0 ? '#0ecb81' : '#f6465d';
|
|
}
|
|
}
|
|
if (dom.pairsList.offsetParent) renderPairs();
|
|
} else if (stream.endsWith('@depth20@100ms')) {
|
|
renderOrderBook(data.bids, data.asks);
|
|
}
|
|
};
|
|
ws.onclose = () => setTimeout(connectWebSocket, 5000);
|
|
}
|
|
|
|
function renderOrderBook(bids, asks) {
|
|
const formatRow = (row, type) => `<div class="ob-row"><div class="price ${type}">${parseFloat(row[0]).toFixed(2)}</div><div>${parseFloat(row[1]).toFixed(3)}</div></div>`;
|
|
dom.asksList.innerHTML = asks.slice(0, 20).reverse().map(a => formatRow(a, 'down')).join('');
|
|
dom.bidsList.innerHTML = bids.slice(0, 20).map(b => formatRow(b, 'up')).join('');
|
|
}
|
|
|
|
function updatePriceUI(d) {
|
|
const color = d.P >= 0 ? '#0ecb81' : '#f6465d';
|
|
const priceStr = parseFloat(d.c).toLocaleString('en-US', {minimumFractionDigits: 2});
|
|
dom.currPrice.innerText = priceStr;
|
|
dom.currPrice.style.color = color;
|
|
dom.currChange.innerText = `${d.P >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%`;
|
|
dom.currChange.style.color = color;
|
|
dom.hHigh.innerText = parseFloat(d.h).toFixed(2);
|
|
dom.hLow.innerText = parseFloat(d.l).toFixed(2);
|
|
document.title = `${priceStr} | ${currentPair}`;
|
|
}
|
|
|
|
function renderPairs() {
|
|
const query = dom.pairSearch.value.toUpperCase();
|
|
dom.pairsList.innerHTML = pairs.filter(p => p.includes(query)).map(p => {
|
|
const d = marketData[p] || {};
|
|
const price = d.c ? parseFloat(d.c).toFixed(2) : '--';
|
|
const change = d.P ? `${parseFloat(d.P) >= 0 ? '+' : ''}${parseFloat(d.P).toFixed(2)}%` : '--';
|
|
const color = (d.P && parseFloat(d.P) >= 0) ? '#0ecb81' : '#f6465d';
|
|
return `<div class="pair-item ${p === currentPair ? 'active' : ''}" data-pair="${p}">
|
|
<img src="https://assets.coincap.io/assets/icons/${p.replace('USDT','').toLowerCase()}@2x.png" class="coin-icon" onerror="this.style.opacity=0">
|
|
<div style="flex:1"><div style="font-weight:600; color:white;">${p.replace('USDT','/USDT')}</div></div>
|
|
<div style="text-align:right"><div style="font-weight:600; color:white;">${price}</div><div style="font-size:11px; color:${color}">${change}</div></div>
|
|
</div>`;
|
|
}).join('');
|
|
}
|
|
|
|
function switchPair(pair) {
|
|
currentPair = pair;
|
|
dom.currPair.innerText = `${pair.replace('USDT', '/USDT')}`;
|
|
dom.currIcon.src = `https://assets.coincap.io/assets/icons/${pair.replace('USDT','').toLowerCase()}@2x.png`;
|
|
initChartWidget(pair);
|
|
renderPairs();
|
|
connectWebSocket();
|
|
}
|
|
|
|
function updatePotentialProfit() {
|
|
const amount = parseFloat(dom.optionAmountInput.value) || 0;
|
|
dom.potentialProfit.innerText = `+${(amount * (selectedRate / 100)).toFixed(2)}`;
|
|
}
|
|
|
|
window.closeCountdownModal = () => {
|
|
dom.modal.style.display = 'none';
|
|
dom.resultOverlay.style.display = 'none';
|
|
if (countdownInterval) clearInterval(countdownInterval);
|
|
};
|
|
|
|
function startCountdown(duration, orderId) {
|
|
let timeLeft = duration;
|
|
const total = duration;
|
|
dom.modalTimer.innerText = `00:${timeLeft < 10 ? '0' + timeLeft : timeLeft}`;
|
|
dom.modalCircle.style.strokeDashoffset = 0;
|
|
|
|
if (countdownInterval) clearInterval(countdownInterval);
|
|
|
|
countdownInterval = setInterval(async () => {
|
|
timeLeft--;
|
|
if (timeLeft <= 0) {
|
|
clearInterval(countdownInterval);
|
|
dom.modalTimer.innerText = "00:00";
|
|
dom.modalCircle.style.strokeDashoffset = 408;
|
|
|
|
// Show final result
|
|
try {
|
|
const r = await fetch(`api/get_option_orders.php?status=completed`);
|
|
const orders = await r.json();
|
|
const order = orders.find(o => o.id == orderId);
|
|
if (order) {
|
|
const profit = parseFloat(order.profit);
|
|
dom.resultIcon.innerHTML = profit > 0 ? '<i class="fas fa-trophy" style="color:#0ecb81"></i>' : '<i class="fas fa-times-circle" style="color:#f6465d"></i>';
|
|
dom.resultTitle.innerText = profit > 0 ? '<?php echo __('win'); ?>' : '<?php echo __('loss'); ?>';
|
|
dom.resultTitle.style.color = profit > 0 ? '#0ecb81' : '#f6465d';
|
|
dom.resultAmount.innerText = (profit > 0 ? '+' : '') + profit.toFixed(2) + ' USDT';
|
|
dom.resultAmount.style.color = profit > 0 ? '#0ecb81' : '#f6465d';
|
|
dom.resultOverlay.style.display = 'flex';
|
|
} else {
|
|
// Fallback if order not found immediately
|
|
setTimeout(() => startCountdown(0, orderId), 2000);
|
|
}
|
|
} catch(e) {}
|
|
return;
|
|
}
|
|
|
|
const minutes = Math.floor(timeLeft / 60);
|
|
const seconds = timeLeft % 60;
|
|
dom.modalTimer.innerText = `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
|
|
|
|
const offset = (408 * (total - timeLeft) / total);
|
|
dom.modalCircle.style.strokeDashoffset = offset;
|
|
}, 1000);
|
|
}
|
|
|
|
async function placeOrder(direction) {
|
|
const amount = parseFloat(dom.optionAmountInput.value);
|
|
if (isNaN(amount) || amount < minAmount) { alert("<?php echo __('min_amount'); ?>: " + minAmount + " USDT"); return; }
|
|
|
|
const btn = direction === 'up' ? document.getElementById('btn-buy-up') : document.getElementById('btn-buy-down');
|
|
const originalText = btn.innerHTML;
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
try {
|
|
const response = await fetch('api/place_option_order.php', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
pair: currentPair, amount: amount, direction: direction,
|
|
duration: selectedDuration, rate: selectedRate, price: currentPrice
|
|
})
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
// Show Modal
|
|
dom.modalSymbol.innerText = currentPair.replace('USDT', '');
|
|
dom.modalPeriod.innerText = selectedDuration + 's';
|
|
dom.modalDirection.innerText = direction === 'up' ? '<?php echo __('buy_up'); ?>' : '<?php echo __('buy_down'); ?>';
|
|
dom.modalDirection.className = 'modal-info-value ' + (direction === 'up' ? 'up' : 'down');
|
|
dom.modalAmount.innerText = amount + ' USDT';
|
|
dom.modalPrice.innerText = currentPrice.toFixed(4);
|
|
dom.modalProfit.innerText = '+' + (amount * (selectedRate / 100)).toFixed(2) + ' USDT';
|
|
dom.modalProfit.className = 'modal-info-value up';
|
|
dom.modal.style.display = 'flex';
|
|
dom.resultOverlay.style.display = 'none';
|
|
|
|
startCountdown(selectedDuration, result.order.id);
|
|
fetchOrders();
|
|
} else {
|
|
alert(result.error || "<?php echo __('error_placing_order'); ?>");
|
|
}
|
|
} catch(e) { alert("<?php echo __('network_error'); ?>"); }
|
|
finally { btn.disabled = false; btn.innerHTML = originalText; }
|
|
}
|
|
|
|
async function fetchOrders() {
|
|
try {
|
|
const r = await fetch(`api/get_option_orders.php?status=${activeOrdersTab}`);
|
|
const orders = await r.json();
|
|
renderOrders(orders);
|
|
} catch (e) {}
|
|
}
|
|
|
|
function renderOrders(orders) {
|
|
if (!orders || orders.length === 0) {
|
|
dom.recordsList.innerHTML = '<tr><td colspan="8" style="text-align:center; padding:40px; color:#848e9c"><?php echo __('no_records'); ?></td></tr>';
|
|
return;
|
|
}
|
|
let html = `<thead><tr><th><?php echo __('pair'); ?></th><th><?php echo __('direction'); ?></th><th><?php echo __('amount'); ?></th><th><?php echo __('opening_price'); ?></th><th><?php echo __('closing_price'); ?></th><th><?php echo __('profit'); ?></th><th><?php echo __('status'); ?></th><th><?php echo __('time'); ?></th></tr></thead><tbody>`;
|
|
orders.forEach(o => {
|
|
const color = o.direction === 'up' ? '#0ecb81' : '#f6465d';
|
|
const statusColor = o.status === 'completed' ? (parseFloat(o.profit) > 0 ? '#0ecb81' : '#f6465d') : '#ffc107';
|
|
html += `<tr>
|
|
<td style="font-weight:600">${o.symbol}</td>
|
|
<td style="color:${color}">${o.direction === 'up' ? '<?php echo __('buy_up'); ?>' : '<?php echo __('buy_down'); ?>'}</td>
|
|
<td>${parseFloat(o.amount).toFixed(2)}</td>
|
|
<td>${parseFloat(o.opening_price).toFixed(4)}</td>
|
|
<td>${o.closing_price ? parseFloat(o.closing_price).toFixed(4) : '--'}</td>
|
|
<td style="color:${statusColor}">${o.status === 'completed' ? (parseFloat(o.profit) > 0 ? '+' : '') + parseFloat(o.profit).toFixed(2) : '--'}</td>
|
|
<td style="color:${statusColor}">${o.status === 'completed' ? (parseFloat(o.profit) > 0 ? '<?php echo __('win'); ?>' : '<?php echo __('loss'); ?>') : '<?php echo __('in_progress'); ?>'}</td>
|
|
<td style="color:#848e9c">${o.created_at}</td>
|
|
</tr>`;
|
|
});
|
|
dom.recordsList.innerHTML = html + '</tbody>';
|
|
}
|
|
|
|
dom.pairsList.addEventListener('click', e => { const item = e.target.closest('.pair-item'); if (item) switchPair(item.dataset.pair); });
|
|
dom.pairSearch.addEventListener('input', renderPairs);
|
|
document.querySelectorAll('.time-btn').forEach(btn => btn.addEventListener('click', () => {
|
|
document.querySelector('.time-btn.active').classList.remove('active');
|
|
btn.classList.add('active');
|
|
selectedDuration = parseInt(btn.dataset.duration);
|
|
selectedRate = parseInt(btn.dataset.rate);
|
|
minAmount = parseInt(btn.dataset.min);
|
|
dom.optionAmountInput.placeholder = "<?php echo __('min_amount'); ?> " + minAmount;
|
|
updatePotentialProfit();
|
|
}));
|
|
dom.optionAmountInput.addEventListener('input', updatePotentialProfit);
|
|
document.getElementById('btn-buy-up').addEventListener('click', () => placeOrder('up'));
|
|
document.getElementById('btn-buy-down').addEventListener('click', () => placeOrder('down'));
|
|
document.querySelectorAll('.record-tab').forEach(tab => tab.addEventListener('click', () => {
|
|
document.querySelector('.record-tab.active').classList.remove('active');
|
|
tab.classList.add('active');
|
|
activeOrdersTab = tab.dataset.status;
|
|
fetchOrders();
|
|
}));
|
|
|
|
updateAvailableBalance();
|
|
switchPair('BTCUSDT');
|
|
updatePotentialProfit();
|
|
fetchOrders();
|
|
setInterval(fetchOrders, 5000);
|
|
});
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|