292 lines
16 KiB
PHP
292 lines
16 KiB
PHP
<?php
|
||
require_once __DIR__ . '/includes/header.php';
|
||
|
||
if (!$user) {
|
||
header('Location: /auth/login.php');
|
||
exit;
|
||
}
|
||
|
||
// Fetch settings
|
||
$stmt = db()->query("SELECT setting_key, setting_value FROM system_settings");
|
||
$settings = $stmt->fetchAll(PDO::FETCH_KEY_PAIR);
|
||
|
||
$trc20_addr = $settings['usdt_trc20_address'] ?? 'TYv9V5J1P1eEwz7y3WqJg9M2yv7f7xXv3x';
|
||
$erc20_addr = $settings['usdt_erc20_address'] ?? '0x742d35Cc6634C0532925a3b844Bc454e4438f44e';
|
||
$bep20_addr = $settings['usdt_bep20_address'] ?? '0x742d35Cc6634C0532925a3b844Bc454e4438f44e';
|
||
?>
|
||
|
||
<div class="container py-4">
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-8">
|
||
<!-- Back Button -->
|
||
<div class="mb-4">
|
||
<a href="javascript:history.back()" class="text-white-50 text-decoration-none d-inline-flex align-items-center gap-2">
|
||
<i class="bi bi-arrow-left fs-4"></i>
|
||
<span><?= __('back') ?></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="card bg-surface border-secondary rounded-4 shadow-lg overflow-hidden mb-4">
|
||
<div class="card-header border-secondary bg-black bg-opacity-30 p-4">
|
||
<h4 class="mb-0 fw-bold d-flex align-items-center gap-3 text-white">
|
||
<i class="bi bi-wallet2 text-primary"></i>
|
||
<?= __('recharge') ?>
|
||
</h4>
|
||
</div>
|
||
|
||
<div class="card-body p-4">
|
||
<!-- Tabs -->
|
||
<ul class="nav nav-pills nav-fill mb-4 bg-black p-1 rounded-pill" id="rechargeTabs" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link active rounded-pill px-4" id="fiat-tab" data-bs-toggle="pill" data-bs-target="#fiat" type="button" role="tab"><?= __('fiat_recharge') ?></button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link rounded-pill px-4" id="crypto-tab" data-bs-toggle="pill" data-bs-target="#crypto" type="button" role="tab"><?= __('crypto_recharge') ?></button>
|
||
</li>
|
||
</ul>
|
||
|
||
<div class="tab-content" id="rechargeTabsContent">
|
||
<!-- Fiat Recharge -->
|
||
<div class="tab-pane fade show active" id="fiat" role="tabpanel">
|
||
<form id="fiatRechargeForm">
|
||
<div class="mb-4">
|
||
<label class="form-label text-white-50 small fw-bold mb-2"><?= __('select_currency') ?></label>
|
||
<select class="form-select bg-dark border-secondary text-white py-3" id="fiatCurrency" onchange="updateRate()">
|
||
<option value="USD" data-rate="1">🇺🇸 USD - US Dollar</option>
|
||
<option value="EUR" data-rate="0.92">🇪🇺 EUR - Euro</option>
|
||
<option value="GBP" data-rate="0.79">🇬🇧 GBP - British Pound</option>
|
||
<option value="CNY" data-rate="7.19">🇨🇳 CNY - Chinese Yuan</option>
|
||
<option value="JPY" data-rate="150.2">🇯🇵 JPY - Japanese Yen</option>
|
||
<option value="KRW" data-rate="1330.5">🇰🇷 KRW - Korean Won</option>
|
||
<option value="HKD" data-rate="7.82">🇭🇰 HKD - Hong Kong Dollar</option>
|
||
<option value="TWD" data-rate="31.5">🇹🇼 TWD - Taiwan Dollar</option>
|
||
<option value="SGD" data-rate="1.34">🇸🇬 SGD - Singapore Dollar</option>
|
||
<option value="MYR" data-rate="4.77">🇲🇾 MYR - Malaysian Ringgit</option>
|
||
<option value="THB" data-rate="35.8">🇹🇭 THB - Thai Baht</option>
|
||
<option value="VND" data-rate="24500">🇻🇳 VND - Vietnamese Dong</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="form-label text-white-50 small fw-bold mb-2"><?= __('fiat_amount') ?></label>
|
||
<div class="input-group">
|
||
<input type="number" class="form-control bg-dark border-secondary text-white py-3" id="fiatAmount" placeholder="0.00" oninput="calculateUSDT()">
|
||
<span class="input-group-text bg-dark border-secondary text-white-50 fw-bold" id="selectedCurrencyLabel">USD</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-5 p-4 bg-primary bg-opacity-10 border border-primary border-opacity-20 rounded-4">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<span class="text-white-50"><?= __('est_usdt') ?></span>
|
||
<span class="h4 mb-0 fw-bold text-primary" id="estUsdt">0.00 USDT</span>
|
||
</div>
|
||
<div class="mt-2 small text-white-50">
|
||
<i class="bi bi-info-circle me-1"></i>
|
||
<?= __('rate') ?>: 1 USDT ≈ <span id="currentRateText" class="text-white">1.00 USD</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-primary w-100 py-3 rounded-pill fw-bold shadow-lg" onclick="confirmFiatOrder()">
|
||
<?= __('confirm_order') ?>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- Crypto Recharge -->
|
||
<div class="tab-pane fade" id="crypto" role="tabpanel">
|
||
<div class="mb-4">
|
||
<label class="form-label text-white-50 small fw-bold mb-2"><?= __('coin') ?></label>
|
||
<div class="d-flex align-items-center gap-3 p-3 bg-dark border border-secondary rounded-4">
|
||
<img src="<?= getCoinIcon('USDT') ?>" width="32" height="32" alt="USDT">
|
||
<div>
|
||
<div class="fw-bold text-white">USDT</div>
|
||
<div class="text-white-50 small">Tether USD</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="form-label text-white-50 small fw-bold mb-2"><?= __('network') ?></label>
|
||
<div class="d-flex gap-2" id="networkSelectors">
|
||
<button class="btn btn-outline-primary btn-sm px-4 rounded-pill active" onclick="selectNetwork('TRC20', '<?= $trc20_addr ?>')">TRC20</button>
|
||
<button class="btn btn-outline-secondary btn-sm px-4 rounded-pill" onclick="selectNetwork('ERC20', '<?= $erc20_addr ?>')">ERC20</button>
|
||
<button class="btn btn-outline-secondary btn-sm px-4 rounded-pill" onclick="selectNetwork('BEP20', '<?= $bep20_addr ?>')">BEP20</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center mb-4 p-3 bg-white rounded-4 mx-auto" style="width: 180px; height: 180px;">
|
||
<img id="qrCode" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=<?= $trc20_addr ?>" alt="QR Code" class="img-fluid">
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label class="form-label text-white-50 small fw-bold mb-2"><?= __('address') ?></label>
|
||
<div class="input-group">
|
||
<input type="text" class="form-control bg-dark border-secondary text-white py-3 small" value="<?= $trc20_addr ?>" readonly id="cryptoAddress">
|
||
<button class="btn btn-dark border-secondary text-primary" onclick="copyAddress()"><i class="bi bi-copy"></i></button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-3 bg-warning bg-opacity-10 border border-warning border-opacity-20 rounded-4 small text-warning mb-4">
|
||
<i class="bi bi-exclamation-triangle me-2"></i>
|
||
⚠️ <?= __('crypto_recharge_warning') ?? 'Please only send USDT to this address. Sending other assets may result in permanent loss.' ?>
|
||
</div>
|
||
|
||
<button type="button" class="btn btn-outline-primary w-100 py-3 rounded-pill fw-bold" onclick="confirmCryptoOrder()">
|
||
<?= __('i_have_paid') ?? 'I have paid' ?>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Rich Content Sections -->
|
||
<div class="row g-4 mb-5">
|
||
<div class="col-md-6">
|
||
<div class="card bg-surface border-secondary rounded-4 h-100">
|
||
<div class="card-body p-4">
|
||
<h5 class="text-white fw-bold mb-3"><i class="bi bi-journal-text text-primary me-2"></i> <?= __('recharge_steps') ?? 'Recharge Steps' ?></h5>
|
||
<div class="text-white-50 small lh-lg">
|
||
<div class="d-flex gap-3 mb-2">
|
||
<span class="badge bg-primary rounded-circle p-2" style="width:24px; height:24px; display:flex; align-items:center; justify-content:center;">1</span>
|
||
<span>选择充值方式（法币或加密货币）</span>
|
||
</div>
|
||
<div class="d-flex gap-3 mb-2">
|
||
<span class="badge bg-primary rounded-circle p-2" style="width:24px; height:24px; display:flex; align-items:center; justify-content:center;">2</span>
|
||
<span>填写金额或复制充值地址</span>
|
||
</div>
|
||
<div class="d-flex gap-3 mb-2">
|
||
<span class="badge bg-primary rounded-circle p-2" style="width:24px; height:24px; display:flex; align-items:center; justify-content:center;">3</span>
|
||
<span>完成支付后点击确认提交</span>
|
||
</div>
|
||
<div class="d-flex gap-3">
|
||
<span class="badge bg-primary rounded-circle p-2" style="width:24px; height:24px; display:flex; align-items:center; justify-content:center;">4</span>
|
||
<span>等待客服核实，资金通常在2-5分钟内到账</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="card bg-surface border-secondary rounded-4 h-100">
|
||
<div class="card-body p-4">
|
||
<h5 class="text-white fw-bold mb-3"><i class="bi bi-shield-lock text-success me-2"></i> <?= __('security_tips') ?? 'Security Tips' ?></h5>
|
||
<div class="text-white-50 small lh-lg">
|
||
<ul class="ps-3 mb-0">
|
||
<li>请勿向任何非官方提供的地址充值</li>
|
||
<li>充值前请仔细核对主网协议（如 TRC20/ERC20）</li>
|
||
<li>请保管好您的支付凭证，以便在需要时提供给客服</li>
|
||
<li>平台绝不会要求您在非官方页面输入支付密码</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center text-white-50 small mb-5">
|
||
<div class="d-flex justify-content-center gap-4">
|
||
<span><i class="bi bi-shield-check text-success me-1"></i> <?= __('secure') ?></span>
|
||
<span><i class="bi bi-lightning-fill text-warning me-1"></i> <?= __('fast') ?></span>
|
||
<span><i class="bi bi-headset text-primary me-1"></i> <?= __('support_247') ?></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<style>
|
||
.nav-pills .nav-link { color: #9ba3af; font-weight: 500; }
|
||
.nav-pills .nav-link.active { background-color: #0062ff; color: #fff; }
|
||
.btn-outline-primary:hover { background-color: #0062ff; color: #fff; }
|
||
</style>
|
||
|
||
<script>
|
||
let currentNetwork = 'TRC20';
|
||
let currentAddress = '<?= $trc20_addr ?>';
|
||
|
||
function updateRate() {
|
||
const select = document.getElementById('fiatCurrency');
|
||
const symbol = select.value;
|
||
const rate = select.options[select.selectedIndex].getAttribute('data-rate');
|
||
document.getElementById('selectedCurrencyLabel').innerText = symbol;
|
||
document.getElementById('currentRateText').innerText = `${rate} ${symbol}`;
|
||
calculateUSDT();
|
||
}
|
||
|
||
function calculateUSDT() {
|
||
const amount = parseFloat(document.getElementById('fiatAmount').value) || 0;
|
||
const select = document.getElementById('fiatCurrency');
|
||
const rate = parseFloat(select.options[select.selectedIndex].getAttribute('data-rate'));
|
||
const est = amount / rate;
|
||
document.getElementById('estUsdt').innerText = est.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' USDT';
|
||
}
|
||
|
||
function selectNetwork(net, addr) {
|
||
currentNetwork = net;
|
||
currentAddress = addr;
|
||
|
||
// Update UI
|
||
const btns = document.querySelectorAll('#networkSelectors button');
|
||
btns.forEach(btn => {
|
||
if (btn.innerText === net) {
|
||
btn.classList.add('active', 'btn-outline-primary');
|
||
btn.classList.remove('btn-outline-secondary');
|
||
} else {
|
||
btn.classList.remove('active', 'btn-outline-primary');
|
||
btn.classList.add('btn-outline-secondary');
|
||
}
|
||
});
|
||
|
||
document.getElementById('cryptoAddress').value = addr;
|
||
document.getElementById('qrCode').src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${addr}`;
|
||
}
|
||
|
||
function confirmFiatOrder() {
|
||
const amount = document.getElementById('fiatAmount').value;
|
||
const currency = document.getElementById('fiatCurrency').value;
|
||
const estUsdt = document.getElementById('estUsdt').innerText;
|
||
|
||
if (!amount || amount <= 0) {
|
||
alert('<?= __("enter_amount") ?>');
|
||
return;
|
||
}
|
||
|
||
const message = `【<?= __("recharge") ?>】\n<?= __("type") ?>：<?= __("fiat_recharge") ?>\n<?= __("amount") ?>：${amount} ${currency}\n<?= __("est_usdt") ?>：${estUsdt}`;
|
||
|
||
sendToCS(message);
|
||
}
|
||
|
||
function confirmCryptoOrder() {
|
||
const message = `【<?= __("recharge") ?>】\n<?= __("type") ?>：USDT\n<?= __("network") ?>：${currentNetwork}\n<?= __("address") ?>：${currentAddress}`;
|
||
sendToCS(message);
|
||
}
|
||
|
||
function sendToCS(message) {
|
||
// Open chat box
|
||
const csBox = document.getElementById('cs-box');
|
||
if (csBox.classList.contains('d-none')) {
|
||
const toggle = document.getElementById('cs-toggle');
|
||
if (toggle) toggle.click();
|
||
}
|
||
|
||
// Auto-fill and send message
|
||
const csInput = document.getElementById('cs-input');
|
||
if (csInput) {
|
||
csInput.value = message;
|
||
document.getElementById('cs-form').dispatchEvent(new Event('submit'));
|
||
alert('<?= __("request_sent") ?>');
|
||
} else {
|
||
alert('<?= __("cs_connect_fail") ?>');
|
||
}
|
||
}
|
||
|
||
function copyAddress() {
|
||
const addr = document.getElementById('cryptoAddress');
|
||
addr.select();
|
||
document.execCommand('copy');
|
||
alert('<?= __("copy_success") ?>');
|
||
}
|
||
</script>
|
||
|
||
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|