149 lines
8.4 KiB
PHP
149 lines
8.4 KiB
PHP
<?php
|
|
require_once __DIR__ . '/includes/lang.php';
|
|
require_once __DIR__ . '/includes/header.php';
|
|
|
|
$usdt_balance = 0;
|
|
if ($user) {
|
|
$stmt = db()->prepare("SELECT available FROM user_balances WHERE user_id = ? AND symbol = 'USDT'");
|
|
$stmt->execute([$user['id']]);
|
|
$bal = $stmt->fetch();
|
|
$usdt_balance = $bal['available'] ?? 0;
|
|
}
|
|
?>
|
|
<div class="container py-5 d-flex justify-content-center">
|
|
<div class="card bg-dark border-0 shadow-lg" style="width: 100%; max-width: 480px; border-radius: 28px; background: #0b0e11 !important; border: 1px solid #2b3139 !important; box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;">
|
|
<div class="card-body p-4">
|
|
<h3 class="fw-bold mb-4 text-white d-flex align-items-center gap-2">
|
|
<i class="bi bi-lightning-charge-fill text-primary"></i>
|
|
<?= __('swap') ?>
|
|
</h3>
|
|
|
|
<!-- From -->
|
|
<div class="p-4 mb-2 rounded-4" style="background: #161a1e; border: 1px solid #2b3139;">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="text-white opacity-50 small fw-bold text-uppercase" style="letter-spacing: 1px;"><?= __('from') ?></span>
|
|
<span class="text-white opacity-50 small"><?= __('balance') ?>: <span class="text-white fw-bold"><?= number_format($usdt_balance, 2) ?></span></span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<input type="number" class="form-control bg-transparent border-0 text-white fs-1 p-0 shadow-none w-50 fw-bold" placeholder="0.00" style="color: #fff !important; font-size: 32px !important;">
|
|
<div class="ms-auto dropdown">
|
|
<div class="d-flex align-items-center bg-dark p-2 rounded-pill px-3 border border-secondary cursor-pointer shadow-sm dropdown-toggle" data-bs-toggle="dropdown">
|
|
<img src="<?php echo getCoinIcon('USDT'); ?>" width="24" height="24" class="me-2 rounded-circle" id="from-coin-img">
|
|
<span class="fw-bold text-white" id="from-coin-symbol">USDT</span>
|
|
</div>
|
|
<ul class="dropdown-menu dropdown-menu-dark bg-dark border-secondary rounded-4 shadow-lg p-2" style="max-height: 300px; overflow-y: auto;">
|
|
<?php
|
|
$swap_coins = ['BTC', 'ETH', 'USDT', 'BNB', 'SOL', 'XRP', 'ADA', 'DOGE', 'DOT', 'MATIC', 'LINK', 'SHIB'];
|
|
foreach($swap_coins as $sc): ?>
|
|
<li><a class="dropdown-item rounded-3 py-2 d-flex align-items-center gap-2" href="#" onclick="selectCoin('from', '<?= $sc ?>', '<?= getCoinIcon($sc) ?>')">
|
|
<img src="<?= getCoinIcon($sc) ?>" width="20" height="20"> <?= $sc ?>
|
|
</a></li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Switch Icon -->
|
|
<div class="text-center my-n3 position-relative" style="z-index: 2;">
|
|
<div class="bg-primary border border-4 border-dark rounded-circle d-inline-flex p-2 shadow-lg" style="cursor: pointer; transition: all 0.3s;" onclick="switchCoins()">
|
|
<i class="bi bi-arrow-down-up text-white fs-5"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- To -->
|
|
<div class="p-4 mt-n1 mb-4 rounded-4" style="background: #161a1e; border: 1px solid #2b3139;">
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span class="text-white opacity-50 small fw-bold text-uppercase" style="letter-spacing: 1px;"><?= __('to') ?></span>
|
|
<span class="text-white opacity-50 small"><?= __('balance') ?>: <span class="text-white fw-bold">0.00</span></span>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<input type="number" class="form-control bg-transparent border-0 text-white fs-1 p-0 shadow-none w-50 fw-bold" placeholder="0.00" readonly style="color: #fff !important; opacity: 1; font-size: 32px !important;">
|
|
<div class="ms-auto dropdown">
|
|
<div class="d-flex align-items-center bg-dark p-2 rounded-pill px-3 border border-secondary cursor-pointer shadow-sm dropdown-toggle" data-bs-toggle="dropdown">
|
|
<img src="<?php echo getCoinIcon('BTC'); ?>" width="24" height="24" class="me-2 rounded-circle" id="to-coin-img">
|
|
<span class="fw-bold text-white" id="to-coin-symbol">BTC</span>
|
|
</div>
|
|
<ul class="dropdown-menu dropdown-menu-dark bg-dark border-secondary rounded-4 shadow-lg p-2" style="max-height: 300px; overflow-y: auto;">
|
|
<?php foreach($swap_coins as $sc): ?>
|
|
<li><a class="dropdown-item rounded-3 py-2 d-flex align-items-center gap-2" href="#" onclick="selectCoin('to', '<?= $sc ?>', '<?= getCoinIcon($sc) ?>')">
|
|
<img src="<?= getCoinIcon($sc) ?>" width="20" height="20"> <?= $sc ?>
|
|
</a></li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4 small px-3 py-3 rounded-4" style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05);">
|
|
<div class="d-flex justify-content-between text-white opacity-50 mb-2">
|
|
<span class="fw-medium"><?= __('rate') ?></span>
|
|
<span id="swap-rate" class="text-white fw-bold">1 BTC ≈ 64,234.50 USDT</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between text-white opacity-50 mb-2">
|
|
<span class="fw-medium"><?= __('price_impact') ?></span>
|
|
<span class="text-success fw-bold">< 0.01%</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between text-white opacity-50">
|
|
<span class="fw-medium"><?= __('slippage') ?></span>
|
|
<span class="text-white fw-bold">0.5%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn btn-primary w-100 py-3 rounded-pill fw-bold fs-5 shadow-primary transition-all active-scale" style="background: linear-gradient(135deg, #0062ff, #00d2ff); border: none;"><?= __('swap_now') ?></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const fromInput = document.querySelector('input[placeholder="0.00"]:not([readonly])');
|
|
const toInput = document.querySelector('input[readonly]');
|
|
const rateEl = document.getElementById('swap-rate');
|
|
let rate = 1 / 64234.50;
|
|
|
|
function selectCoin(type, symbol, icon) {
|
|
document.getElementById(type + '-coin-symbol').innerText = symbol;
|
|
document.getElementById(type + '-coin-img').src = icon;
|
|
// Update rate mockly
|
|
if (symbol === 'BTC') rate = 1 / 64234.50;
|
|
else if (symbol === 'ETH') rate = 1 / 3456.20;
|
|
else rate = 1;
|
|
updateCalculation();
|
|
}
|
|
|
|
function switchCoins() {
|
|
const fromSymbol = document.getElementById('from-coin-symbol').innerText;
|
|
const fromIcon = document.getElementById('from-coin-img').src;
|
|
const toSymbol = document.getElementById('to-coin-symbol').innerText;
|
|
const toIcon = document.getElementById('to-coin-img').src;
|
|
|
|
selectCoin('from', toSymbol, toIcon);
|
|
selectCoin('to', fromSymbol, fromIcon);
|
|
}
|
|
|
|
function updateCalculation() {
|
|
const val = parseFloat(fromInput.value) || 0;
|
|
toInput.value = (val * rate).toFixed(8);
|
|
const fromSymbol = document.getElementById('from-coin-symbol').innerText;
|
|
const toSymbol = document.getElementById('to-coin-symbol').innerText;
|
|
rateEl.innerText = `1 ${toSymbol} ≈ ${(1/rate).toLocaleString()} ${fromSymbol}`;
|
|
}
|
|
|
|
fromInput.addEventListener('input', updateCalculation);
|
|
|
|
// Animate switch icon
|
|
document.querySelector('.bg-primary.rounded-circle').addEventListener('click', function() {
|
|
this.style.transform = this.style.transform === 'rotate(180deg)' ? 'rotate(0deg)' : 'rotate(180deg)';
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.shadow-primary {
|
|
box-shadow: 0 10px 25px rgba(0, 98, 255, 0.4);
|
|
}
|
|
.cursor-pointer { cursor: pointer; }
|
|
#swap-rate { font-family: 'Roboto Mono', monospace; }
|
|
.active-scale:active { transform: scale(0.98); }
|
|
</style>
|
|
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|