87 lines
4.7 KiB
PHP
87 lines
4.7 KiB
PHP
<?php include 'header.php'; ?>
|
|
|
|
<main style="padding: 60px 20px; background: #0b0e11; min-height: calc(100vh - 60px);">
|
|
<div style="max-width: 500px; margin: 0 auto; background: #1e2329; padding: 40px; border-radius: 20px; border: 1px solid #2b3139;">
|
|
<h2 style="margin-bottom: 30px; text-align: center; color: white;"><?php echo __('nav_convert'); ?></h2>
|
|
|
|
<div style="margin-bottom: 25px;">
|
|
<label style="color: #848e9c; font-size: 0.9rem; margin-bottom: 10px; display: block;">From</label>
|
|
<div style="display: flex; align-items: center; background: #0b0e11; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<input type="number" id="from-amount" value="100" style="flex: 1; background: transparent; border: none; color: white; font-size: 1.5rem; font-weight: bold; outline: none;">
|
|
<div style="display: flex; align-items: center; gap: 8px; background: #1e2329; padding: 5px 12px; border-radius: 20px; cursor: pointer;">
|
|
<img src="https://raw.githubusercontent.com/spothq/cryptocurrency-icons/master/128/color/usdt.png" width="24">
|
|
<span style="font-weight: bold; color: white;">USDT</span>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 8px; color: #848e9c; font-size: 0.8rem; display: flex; justify-content: space-between;">
|
|
<span>Available: 0.00 USDT</span>
|
|
<span style="color: var(--primary-color); cursor: pointer;">Max</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin: -10px 0 15px;">
|
|
<div style="width: 40px; height: 40px; background: #1e2329; border: 1px solid #2b3139; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-color); cursor: pointer;">
|
|
<i class="fas fa-exchange-alt fa-rotate-90"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 30px;">
|
|
<label style="color: #848e9c; font-size: 0.9rem; margin-bottom: 10px; display: block;">To</label>
|
|
<div style="display: flex; align-items: center; background: #0b0e11; padding: 15px; border-radius: 12px; border: 1px solid #2b3139;">
|
|
<input type="number" id="to-amount" readonly style="flex: 1; background: transparent; border: none; color: white; font-size: 1.5rem; font-weight: bold; outline: none;">
|
|
<select id="target-crypto" onchange="updateConvert()" style="background: #1e2329; border: none; color: white; padding: 5px 10px; border-radius: 20px; font-weight: bold; cursor: pointer; outline: none;">
|
|
<option value="BTC">BTC</option>
|
|
<option value="ETH">ETH</option>
|
|
<option value="SOL">SOL</option>
|
|
<option value="BNB">BNB</option>
|
|
</select>
|
|
</div>
|
|
<div id="rate-display" style="margin-top: 8px; color: #848e9c; font-size: 0.8rem; text-align: center;">
|
|
1 USDT ≈ --.--- BTC
|
|
</div>
|
|
</div>
|
|
|
|
<button class="btn-primary" style="width: 100%; padding: 16px; font-size: 1.1rem; font-weight: bold; border-radius: 12px; margin-bottom: 20px;">Preview Conversion</button>
|
|
|
|
<div style="background: rgba(240, 185, 11, 0.05); border: 1px solid rgba(240, 185, 11, 0.1); padding: 15px; border-radius: 10px;">
|
|
<div style="display: flex; align-items: center; gap: 10px; color: #F0B90B; font-size: 0.85rem;">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span>Zero fees, instant settlement.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
const prices = {};
|
|
const symbols = ['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'BNBUSDT'];
|
|
|
|
const ws = new WebSocket('wss://stream.binance.com:9443/ws/' + symbols.map(s => s.toLowerCase() + '@ticker').join('/'));
|
|
|
|
ws.onmessage = (event) => {
|
|
const data = JSON.parse(event.data);
|
|
prices[data.s.replace('USDT', '')] = parseFloat(data.c);
|
|
updateConvert();
|
|
};
|
|
|
|
const fromInput = document.getElementById('from-amount');
|
|
const toInput = document.getElementById('to-amount');
|
|
const targetSelect = document.getElementById('target-crypto');
|
|
const rateDisplay = document.getElementById('rate-display');
|
|
|
|
function updateConvert() {
|
|
const fromVal = parseFloat(fromInput.value) || 0;
|
|
const target = targetSelect.value;
|
|
const price = prices[target];
|
|
|
|
if (price) {
|
|
const result = fromVal / price;
|
|
toInput.value = result.toFixed(8);
|
|
rateDisplay.innerText = `1 USDT ≈ ${(1/price).toFixed(8)} ${target}`;
|
|
}
|
|
}
|
|
|
|
fromInput.oninput = updateConvert;
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|