244 lines
12 KiB
JavaScript
244 lines
12 KiB
JavaScript
// Global variables
|
|
let currentMarketData = {};
|
|
|
|
function getLang() {
|
|
return document.documentElement.lang || 'en';
|
|
}
|
|
|
|
// Market Data Fetching
|
|
async function fetchMarketData() {
|
|
try {
|
|
const resp = await fetch('api/market_api.php');
|
|
if (!resp.ok) throw new Error('Network response was not ok');
|
|
const result = await resp.json();
|
|
if (result.success) {
|
|
currentMarketData = result.data;
|
|
updateUI();
|
|
}
|
|
} catch (e) {
|
|
console.error('Market API error', e);
|
|
}
|
|
}
|
|
|
|
function updateUI() {
|
|
// Update Home Page Market List (Market Trends Table)
|
|
const homeList = document.getElementById('market-trends');
|
|
if (homeList) {
|
|
let html = '';
|
|
const symbols = ['BTC', 'ETH', 'BNB', 'SOL', 'XRP', 'DOGE', 'ADA', 'TRX'];
|
|
symbols.forEach(symbol => {
|
|
const coin = currentMarketData[symbol];
|
|
if (coin) {
|
|
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
|
const changeSign = coin.change >= 0 ? '+' : '';
|
|
const iconClass = coin.change >= 0 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down';
|
|
html += `
|
|
<tr onclick="window.location.href='trade.php?symbol=${symbol}'" style="cursor: pointer;" class="transition">
|
|
<td class="ps-4 py-4 border-0">
|
|
<div class="d-flex align-items-center">
|
|
<div class="bg-secondary bg-opacity-20 rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
|
|
<img src="${coin.icon}" width="24" height="24">
|
|
</div>
|
|
<div>
|
|
<div class="fw-bold text-white">${symbol}</div>
|
|
<div class="text-muted small">${coin.name}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 border-0 text-white fw-bold">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</td>
|
|
<td class="py-4 border-0 ${changeClass} fw-bold">
|
|
<i class="fas ${iconClass} me-1"></i>
|
|
${changeSign}${coin.change.toFixed(2)}%
|
|
</td>
|
|
<td class="pe-4 py-4 border-0 text-end">
|
|
<a href="trade.php?symbol=${symbol}" class="btn btn-sm btn-outline-primary rounded-pill px-4 border-opacity-25" style="font-size: 0.75rem;">${getLang() === 'zh' ? '去交易' : 'Trade'}</a>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
});
|
|
if (html) homeList.innerHTML = html;
|
|
}
|
|
|
|
// Update Hero Ticker (Horizontal Bar) - Improved with premium gradient & glow
|
|
const heroTicker = document.getElementById('hero-market-ticker');
|
|
if (heroTicker) {
|
|
let html = '';
|
|
const symbols = ['BTC', 'ETH', 'SOL', 'BNB', 'XRP'];
|
|
symbols.forEach(symbol => {
|
|
const coin = currentMarketData[symbol];
|
|
if (coin) {
|
|
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
|
// Using a premium gradient instead of a "white box"
|
|
const gradient = coin.change >= 0
|
|
? 'linear-gradient(135deg, rgba(14, 203, 129, 0.15) 0%, rgba(0, 70, 255, 0.05) 100%)'
|
|
: 'linear-gradient(135deg, rgba(246, 70, 93, 0.15) 0%, rgba(0, 70, 255, 0.05) 100%)';
|
|
const borderColor = coin.change >= 0 ? 'rgba(14, 203, 129, 0.2)' : 'rgba(246, 70, 93, 0.2)';
|
|
|
|
html += `
|
|
<div class="ticker-item d-flex align-items-center gap-3 py-2 px-3 rounded-4 transition hover-glow-blue" onclick="window.location.href='trade.php?symbol=${symbol}'" style="cursor: pointer; background: ${gradient}; border: 1px solid ${borderColor};">
|
|
<div class="d-flex flex-column">
|
|
<span class="fw-bold text-white small">${symbol}/USDT</span>
|
|
<span class="${changeClass} x-small fw-bold">${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%</span>
|
|
</div>
|
|
<div class="text-end ms-2">
|
|
<div class="text-white small fw-bold">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
if (html) heroTicker.innerHTML = html;
|
|
}
|
|
|
|
// Update Ticker
|
|
const ticker = document.getElementById('ticker-wrap');
|
|
if (ticker) {
|
|
let html = '';
|
|
Object.keys(currentMarketData).forEach(symbol => {
|
|
const coin = currentMarketData[symbol];
|
|
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
|
html += `
|
|
<div class="d-flex align-items-center gap-2">
|
|
<span class="text-muted small fw-bold">${symbol}/USDT</span>
|
|
<span class="text-white fw-bold">${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</span>
|
|
<span class="${changeClass} small">${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%</span>
|
|
</div>
|
|
`;
|
|
});
|
|
ticker.innerHTML = html + html;
|
|
}
|
|
|
|
// Update Trade Page if on it
|
|
if (document.getElementById('crypto-list-container')) {
|
|
updateTradePage();
|
|
}
|
|
}
|
|
|
|
function updateTradePage() {
|
|
const listContainer = document.getElementById('crypto-list-container');
|
|
const search = document.getElementById('market-search')?.value.toLowerCase() || '';
|
|
const currentSymbol = document.getElementById('current-symbol')?.value;
|
|
|
|
let html = '';
|
|
Object.keys(currentMarketData).forEach(symbol => {
|
|
if (symbol.toLowerCase().includes(search) || currentMarketData[symbol].name.toLowerCase().includes(search)) {
|
|
const coin = currentMarketData[symbol];
|
|
const active = symbol === currentSymbol ? 'active' : '';
|
|
const changeClass = coin.change >= 0 ? 'text-success' : 'text-danger';
|
|
|
|
html += `
|
|
<div class="crypto-item ${active}" onclick="window.location.href='trade.php?symbol=${symbol}'">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<img src="${coin.icon}" class="crypto-icon">
|
|
<div>
|
|
<div class="text-white crypto-name-text">${symbol}</div>
|
|
<div class="crypto-sub-text">${coin.name}</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-end">
|
|
<div class="text-white crypto-price-text">$${coin.price.toLocaleString(undefined, {minimumFractionDigits: 2})}</div>
|
|
<div class="${changeClass} crypto-change-text">${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
listContainer.innerHTML = html;
|
|
|
|
// Update header info
|
|
if (currentSymbol && currentMarketData[currentSymbol]) {
|
|
const coin = currentMarketData[currentSymbol];
|
|
const lastPriceEl = document.getElementById('last-price');
|
|
if (lastPriceEl) {
|
|
const oldPrice = parseFloat(lastPriceEl.innerText.replace(/[$,]/g, '')) || 0;
|
|
lastPriceEl.innerText = '$' + coin.price.toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
lastPriceEl.className = coin.price >= oldPrice ? 'fw-bold text-success fs-5' : 'fw-bold text-danger fs-5';
|
|
|
|
const bookPriceEl = document.getElementById('book-price');
|
|
if (bookPriceEl) bookPriceEl.innerText = coin.price.toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
|
|
// If Market tab is active and price field is empty, update it
|
|
const marketTab = document.getElementById('tab-market');
|
|
if (marketTab && marketTab.classList.contains('active')) {
|
|
const priceInput = document.getElementById('order-price');
|
|
if (priceInput && !priceInput.value) {
|
|
priceInput.value = coin.price;
|
|
}
|
|
}
|
|
}
|
|
|
|
const changeEl = document.getElementById('24h-change');
|
|
if (changeEl) {
|
|
changeEl.innerText = (coin.change >= 0 ? '+' : '') + coin.change.toFixed(2) + '%';
|
|
changeEl.className = 'fw-bold ' + (coin.change >= 0 ? 'text-success' : 'text-danger');
|
|
}
|
|
|
|
if (document.getElementById('24h-high')) document.getElementById('24h-high').innerText = '$' + (coin.price * 1.05).toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
if (document.getElementById('24h-low')) document.getElementById('24h-low').innerText = '$' + (coin.price * 0.95).toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
if (document.getElementById('price-fiat')) {
|
|
const isZh = document.documentElement.lang === 'zh';
|
|
const rate = isZh ? 7.2 : 1.0;
|
|
const symbol = isZh ? '¥' : '$';
|
|
document.getElementById('price-fiat').innerText = '≈ ' + symbol + (coin.price * rate).toLocaleString(undefined, {minimumFractionDigits: 2});
|
|
}
|
|
}
|
|
|
|
simulateOrderBook();
|
|
}
|
|
|
|
function simulateOrderBook() {
|
|
const symbol = document.getElementById('current-symbol')?.value;
|
|
if (!symbol || !currentMarketData[symbol]) return;
|
|
|
|
const basePrice = currentMarketData[symbol].price;
|
|
const askContainer = document.getElementById('order-book-asks');
|
|
const bidContainer = document.getElementById('order-book-bids');
|
|
|
|
if (!askContainer || !bidContainer) return;
|
|
|
|
let askHtml = '';
|
|
let bidHtml = '';
|
|
|
|
for (let i = 5; i > 0; i--) {
|
|
const price = basePrice * (1 + (i * 0.0002));
|
|
const amount = Math.random() * 2 + 0.1;
|
|
const depth = Math.random() * 80 + 10;
|
|
askHtml += `
|
|
<div class="order-book-row ask" onclick="document.getElementById('order-price').value = ${price.toFixed(2)}">
|
|
<div class="depth-bg ask" style="width: ${depth}%"></div>
|
|
<span class="price">${price.toFixed(2)}</span>
|
|
<span class="amount">${amount.toFixed(4)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
for (let i = 1; i <= 5; i++) {
|
|
const price = basePrice * (1 - (i * 0.0002));
|
|
const amount = Math.random() * 2 + 0.1;
|
|
const depth = Math.random() * 80 + 10;
|
|
bidHtml += `
|
|
<div class="order-book-row bid" onclick="document.getElementById('order-price').value = ${price.toFixed(2)}">
|
|
<div class="depth-bg bid" style="width: ${depth}%"></div>
|
|
<span class="price">${price.toFixed(2)}</span>
|
|
<span class="amount">${amount.toFixed(4)}</span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
askContainer.innerHTML = askHtml;
|
|
bidContainer.innerHTML = bidHtml;
|
|
}
|
|
|
|
// Initialization
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
fetchMarketData();
|
|
setInterval(fetchMarketData, 3000);
|
|
|
|
const searchInput = document.getElementById('market-search');
|
|
if (searchInput) {
|
|
searchInput.addEventListener('input', updateUI);
|
|
}
|
|
}); |