Hugging Face's logo

Spaces:
Mujahid1111
/
codewizard-backend-brewery
Running

App Files Community
codewizard-backend-brewery / heatmap.html
Mujahid1111's picture
Mujahid1111
1. Global Principles & Core Technologies
ceb3cf5 verified
Raw History Blame Contribute Delete
8.64 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Liquidation Heatmap | CodeWizard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.heatmap-gradient {
background: linear-gradient(90deg, #fef08a 0%, #f59e0b 50%, #ef4444 100%);
}
.tooltip {
position: absolute;
pointer-events: none;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
transition: opacity 0.2s;
}
</style>
</head>
<body class="bg-gray-100">
<header class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16 items-center">
<a href="index.html" class="flex items-center">
<i data-feather="code" class="text-purple-600 mr-2"></i>
<span class="text-xl font-bold text-gray-900">CodeWizard</span>
</a>
<nav class="hidden md:flex space-x-8">
<a href="dashboard.html" class="text-gray-600 hover:text-purple-600">Dashboard</a>
<a href="crypto.html" class="text-gray-600 hover:text-purple-600">Crypto</a>
<a href="heatmap.html" class="text-purple-600 font-medium">Liquidation Heatmap</a>
<a href="#" class="text-gray-600 hover:text-purple-600" id="login-btn">Login</a>
</nav>
<button class="md:hidden text-gray-600">
<i data-feather="menu"></i>
</button>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">Liquidation Heatmap</h1>
<div class="flex space-x-2">
<button class="asset-btn active px-4 py-2 bg-purple-600 text-white rounded-lg" data-asset="BTCUSDT">BTC/USDT</button>
<button class="asset-btn px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg" data-asset="ETHUSDT">ETH/USDT</button>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center">
<div class="mr-2 text-sm">Legend:</div>
<div class="heatmap-gradient w-32 h-4 rounded"></div>
<div class="ml-2 text-sm">Low to High Liquidity</div>
</div>
<div class="text-sm text-gray-500">Updated: <span id="update-time">Just now</span></div>
</div>
<div class="relative h-96">
<canvas id="heatmap-chart"></canvas>
<div class="tooltip" id="heatmap-tooltip"></div>
</div>
</div>
</main>
<script>
feather.replace();
// Sample data - would be replaced with real API data
const heatmapData = {
BTCUSDT: {
levels: [
{ price: 42000, liquidity: 10000000, type: 'long' },
{ price: 41500, liquidity: 8000000, type: 'long' },
{ price: 41000, liquidity: 12000000, type: 'long' },
{ price: 42500, liquidity: 9000000, type: 'short' },
{ price: 43000, liquidity: 15000000, type: 'short' },
],
currentPrice: 42356.78
},
ETHUSDT: {
levels: [
{ price: 2500, liquidity: 5000000, type: 'long' },
{ price: 2450, liquidity: 4000000, type: 'long' },
{ price: 2550, liquidity: 6000000, type: 'short' },
{ price: 2600, liquidity: 7000000, type: 'short' },
],
currentPrice: 2532.45
}
};
let currentAsset = 'BTCUSDT';
let chart;
function initChart() {
const ctx = document.getElementById('heatmap-chart').getContext('2d');
const data = heatmapData[currentAsset];
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data.levels.map(level => `$${level.price.toLocaleString()}`),
datasets: [{
data: data.levels.map(level => level.liquidity / 1000000), // Convert to millions
backgroundColor: data.levels.map(level =>
level.type === 'long' ? 'rgba(16, 185, 129, 0.7)' : 'rgba(239, 68, 68, 0.7)'
),
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: 'Price Levels'
}
},
y: {
title: {
display: true,
text: 'Liquidation Volume (millions)'
}
}
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: false
}
},
onClick: (e) => {
// Handle click events if needed
}
}
});
// Add event listeners for hover tooltips
const canvas = document.getElementById('heatmap-chart');
const tooltip = document.getElementById('heatmap-tooltip');
canvas.addEventListener('mousemove', (e) => {
const points = chart.getElementsAtEventForMode(e, 'nearest', { intersect: true }, false);
if (points.length) {
const point = points[0];
const level = data.levels[point.index];
tooltip.innerHTML = `
<div>Price: $${level.price.toLocaleString()}</div>
<div>Liquidity: $${(level.liquidity / 1000000).toFixed(2)}M</div>
<div>Type: ${level.type === 'long' ? 'Long' : 'Short'} liquidations</div>
`;
tooltip.style.left = `${e.offsetX + 10}px`;
tooltip.style.top = `${e.offsetY + 10}px`;
tooltip.style.opacity = '1';
} else {
tooltip.style.opacity = '0';
}
});
canvas.addEventListener('mouseout', () => {
tooltip.style.opacity = '0';
});
}
// Initialize chart on page load
initChart();
// Handle asset switching
document.querySelectorAll('.asset-btn').forEach(btn => {
btn.addEventListener('click', function() {
if (this.classList.contains('active')) return;
document.querySelectorAll('.asset-btn').forEach(b => b.classList.remove('active', 'bg-purple-600', 'text-white'));
this.classList.add('active', 'bg-purple-600', 'text-white');
currentAsset = this.dataset.asset;
// Show loading state
document.getElementById('update-time').textContent = 'Loading...';
// Simulate API call
setTimeout(() => {
chart.destroy();
initChart();
document.getElementById('update-time').textContent = 'Just now';
}, 500);
});
});
// Simulate data updates
setInterval(() => {
document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
}, 300000); // 5 minutes
</script>
</body>
</html>