← Назад<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Futures Screener - Debug Test</title>
<style>
body { font-family: sans-serif; padding: 20px; background: #f5f5f5; }
.debug-info { background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.cards { display: flex; flex-wrap: wrap; gap: 15px; }
.card { background: white; border-radius: 8px; padding: 15px; width: 300px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card-header { font-weight: bold; border-bottom: 1px solid #eee; padding-bottom: 8px; margin-bottom: 8px; }
.card-row { display: flex; justify-content: space-between; margin: 5px 0; }
.bid { color: #e74c3c; }
.ask { color: #27ae60; }
.error { background: #ffe6e6; color: #c0392b; padding: 15px; border-radius: 8px; }
.success { background: #e6ffe6; color: #27ae60; padding: 15px; border-radius: 8px; }
</style>
</head>
<body>
<h1>Futures Screener - Debug Test</h1>
<div class="debug-info">
<p>Testing API: <code id="api-url">Loading...</code></p>
<p>Status: <span id="status">⏳ Loading...</span></p>
<p id="data-info"></p>
<button onclick="loadData()">Reload Data</button>
</div>
<div id="error" class="error" style="display:none"></div>
<div id="success" class="success" style="display:none"></div>
<div id="cards" class="cards"></div>
<script>
async function loadData() {
const status = document.getElementById('status');
const errorDiv = document.getElementById('error');
const successDiv = document.getElementById('success');
const dataInfo = document.getElementById('data-info');
const cards = document.getElementById('cards');
errorDiv.style.display = 'none';
successDiv.style.display = 'none';
status.textContent = '⏳ Loading...';
cards.innerHTML = '';
const url = 'https://futures-screener.szhub.space/densities/simple?symbols=BTCUSDT,ETHUSDT,XRPUSDT&minNotional=0&windowPct=5&depthLimit=10';
document.getElementById('api-url').textContent = url;
try {
const response = await fetch(url);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const result = await response.json();
const data = result.data || [];
console.log('Raw data received:', data.length, 'entries');
console.log('Sample entry:', data[0]);
// Group by symbol
const grouped = new Map();
data.forEach(entry => {
if (!grouped.has(entry.symbol)) {
grouped.set(entry.symbol, { bid: null, ask: null });
}
if (entry.side === 'bid') {
grouped.get(entry.symbol).bid = entry;
} else if (entry.side === 'ask') {
grouped.get(entry.symbol).ask = entry;
}
});
console.log('Grouped size:', grouped.size);
console.log('Grouped entries:', [...grouped.entries()]);
// Update info
dataInfo.innerHTML = `
Total entries: <strong>${data.length}</strong><br>
Unique symbols: <strong>${grouped.size}</strong><br>
Symbols: <strong>${[...grouped.keys()].join(', ')}</strong>
`;
if (grouped.size === 0) {
throw new Error('Grouped size is 0! Check data structure.');
}
// Render cards
cards.innerHTML = '';
for (const [symbol, sides] of grouped.entries()) {
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<div class="card-header">${symbol}</div>
<div class="card-row bid">
<span>🔴 BID:</span>
<span>${sides.bid ? sides.bid.price.toFixed(4) : '—'}</span>
</div>
<div class="card-row ask">
<span>🟢 ASK:</span>
<span>${sides.ask ? sides.ask.price.toFixed(4) : '—'}</span>
</div>
<div class="card-row">
<span>Score:</span>
<span>${Math.max(sides.bid?.score || 0, sides.ask?.score || 0).toFixed(4)}</span>
</div>
`;
cards.appendChild(card);
}
status.textContent = '✅ Loaded successfully';
successDiv.textContent = `Successfully loaded ${data.length} levels, ${grouped.size} symbols`;
successDiv.style.display = 'block';
} catch (error) {
console.error('Load error:', error);
status.textContent = '❌ Error';
errorDiv.textContent = `Error: ${error.message}`;
errorDiv.style.display = 'block';
dataInfo.innerHTML = `Error loading data: ${error.message}`;
}
}
// Load on page load
document.addEventListener('DOMContentLoaded', loadData);
</script>
</body>
</html>