293 lines
11 KiB
HTML
293 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="dark" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
|
|
<title>Crypto Dashboard - BTC/USD</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<style data-purpose="base-styles">
|
|
body {
|
|
background-color: #0d1421; /* Match background color from SCREEN_6 indicator panel */
|
|
color: #ffffff;
|
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
.text-muted {
|
|
color: #8fa2b3; /* Consistent with SCREEN_6 theme */
|
|
}
|
|
.bg-dark-surface {
|
|
background-color: #0d1421;
|
|
}
|
|
.border-dark {
|
|
border-color: #1e293b; /* Deep slate divider color */
|
|
}
|
|
.bg-card-ai {
|
|
background-color: #161e2e; /* AI Analysis theme card background from IMAGE_8 */
|
|
border: 1px solid #2d3a4f;
|
|
}
|
|
</style>
|
|
<style data-purpose="chart-customization">
|
|
/* Custom grid lines for the chart */
|
|
.grid-line {
|
|
stroke: #1e293b;
|
|
stroke-width: 1;
|
|
}
|
|
/* Orange color for all candles as requested */
|
|
.candle-orange {
|
|
fill: #f0b90b;
|
|
stroke: #f0b90b;
|
|
}
|
|
.wick-orange {
|
|
stroke: #f0b90b;
|
|
stroke-width: 1.5;
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
</head>
|
|
<body class="flex flex-col h-screen overflow-hidden">
|
|
<!-- BEGIN: Top Navigation Bar (Using COMPONENTS_17 TopAppBar logic) -->
|
|
<header class="bg-[#0f131e] fixed top-0 w-full z-50 h-16 px-6 flex items-center justify-between border-b border-[#1b1f2b]">
|
|
<div class="flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
|
|
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
|
|
<span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
|
|
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
|
|
</div>
|
|
<div class="flex space-x-1 items-center">
|
|
<button class="px-2 py-1 text-xs text-[#c3c5d8] hover:bg-[#262a35] transition-colors rounded">1m</button>
|
|
<button class="px-2 py-1 text-xs text-[#c3c5d8] hover:bg-[#262a35] transition-colors rounded">5m</button>
|
|
<button class="px-2 py-1 text-xs text-[#c3c5d8] hover:bg-[#262a35] transition-colors rounded">15m</button>
|
|
<button class="px-2 py-1 text-xs text-[#c3c5d8] hover:bg-[#262a35] transition-colors rounded">1h</button>
|
|
<button class="px-2 py-1 text-xs text-[#c3c5d8] hover:bg-[#262a35] transition-colors rounded">4h</button>
|
|
<button class="px-2 py-1 text-xs bg-[#2962ff] text-white rounded font-bold">D</button>
|
|
</div>
|
|
</header>
|
|
<!-- BEGIN: Main Content -->
|
|
<main class="flex-1 overflow-y-auto pt-16 pb-20">
|
|
<!-- BEGIN: Price Statistics -->
|
|
<section class="grid grid-cols-4 gap-2 px-4 py-4 border-b border-[#1e293b] bg-[#0d1421]">
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Price</p>
|
|
<p class="text-lg font-bold">70339</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Change <span class="text-red-500">↘</span></p>
|
|
<p class="text-lg font-bold text-red-500">-4.84%</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">High ↗</p>
|
|
<p class="text-lg font-bold">74250</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Low ↘</p>
|
|
<p class="text-lg font-bold">70279</p>
|
|
</div>
|
|
</section>
|
|
<!-- END: Price Statistics -->
|
|
<!-- BEGIN: Candlestick Chart -->
|
|
<section class="relative w-full bg-[#0d1421] h-[75vh]" data-purpose="chart-container">
|
|
<canvas class="w-full h-full" id="tradingChart"></canvas>
|
|
<!-- Price Axis Labels -->
|
|
<div class="absolute right-0 top-0 bottom-0 w-16 flex flex-col justify-between text-[10px] text-[#8fa2b3] py-4 pointer-events-none">
|
|
<span>77500</span>
|
|
<span>75000</span>
|
|
<span>72500</span>
|
|
<div class="bg-red-500 text-white px-1 py-0.5 rounded-l text-[10px]">70339</div>
|
|
<span>67500</span>
|
|
<span>65000</span>
|
|
<span>62500</span>
|
|
</div>
|
|
<!-- Time Axis Labels -->
|
|
<div class="absolute bottom-2 left-4 right-16 flex justify-between text-[10px] text-[#8fa2b3] pointer-events-none">
|
|
<span>01/03 01:00</span>
|
|
<span>04/03 01:00</span>
|
|
<span>09/03 01:00</span>
|
|
<span>14/03 01:00</span>
|
|
<span>17/03 01:00</span>
|
|
</div>
|
|
</section>
|
|
<!-- END: Candlestick Chart -->
|
|
<!-- BEGIN: Technical Analysis Section -->
|
|
<section class="px-4 py-6 bg-[#0d1421]">
|
|
<h2 class="text-lg font-bold mb-4 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
|
|
Technical Analysis
|
|
</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Best Moving Averages Card -->
|
|
<div class="p-4 rounded-xl bg-card-ai" data-purpose="ta-card">
|
|
<p class="text-[10px] font-bold text-[#8fa2b3] uppercase mb-4 tracking-wider">Best Moving Averages</p>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[#dfe2f2] text-sm font-medium">MA 44</span>
|
|
<div class="text-right">
|
|
<p class="font-bold text-sm text-[#dfe2f2]">68817.32</p>
|
|
<p class="text-[10px] text-green-500">+2.3%</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[#dfe2f2] text-sm font-medium">MA 125</span>
|
|
<div class="text-right">
|
|
<p class="font-bold text-sm text-[#dfe2f2]">82087.39</p>
|
|
<p class="text-[10px] text-red-500">-14.3%</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Support / Resistance Card -->
|
|
<div class="p-4 rounded-xl bg-card-ai" data-purpose="ta-card">
|
|
<p class="text-[10px] font-bold text-[#8fa2b3] uppercase mb-4 tracking-wider">Support / Resistance</p>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[#dfe2f2] text-sm font-medium">Resistance</span>
|
|
<span class="font-bold text-sm text-right text-[#dfe2f2]">75972</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-[#dfe2f2] text-sm font-medium">Support</span>
|
|
<span class="font-bold text-sm text-right text-[#dfe2f2]">62983</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END: Technical Analysis Section -->
|
|
</main>
|
|
<!-- END: Main Content -->
|
|
<!-- BEGIN: Bottom Tab Navigation (Using COMPONENTS_17 BottomNavBar logic) -->
|
|
<nav class="fixed bottom-0 w-full bg-[#0f131e] border-t border-[#434656]/15 flex justify-around items-center h-16 z-50 px-2 shadow-[0px_-4px_12px_rgba(0,0,0,0.3)]">
|
|
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] transition-transform duration-200">
|
|
<span class="material-symbols-outlined">show_chart</span>
|
|
<span class="text-[11px] font-medium font-['Inter'] mt-1">Markets</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-[#2962ff] dark:text-[#b6c4ff] bg-[#2962ff]/10 rounded-xl px-3 py-1 transition-transform duration-200">
|
|
<span class="material-symbols-outlined">candlestick_chart</span>
|
|
<span class="text-[11px] font-medium font-['Inter'] mt-1">Chart</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] transition-transform duration-200">
|
|
<span class="material-symbols-outlined">query_stats</span>
|
|
<span class="text-[11px] font-medium font-['Inter'] mt-1">Indicators</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] transition-transform duration-200">
|
|
<span class="material-symbols-outlined">analytics</span>
|
|
<span class="text-[11px] font-medium font-['Inter'] mt-1">Analysis</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] transition-transform duration-200">
|
|
<span class="material-symbols-outlined">more_horiz</span>
|
|
<span class="text-[11px] font-medium font-['Inter'] mt-1">More</span>
|
|
</div>
|
|
</nav>
|
|
<!-- BEGIN: Chart Logic -->
|
|
<script data-purpose="chart-rendering"> const canvas = document.getElementById('tradingChart');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
function drawChart() {
|
|
const container = canvas.parentNode;
|
|
const rect = container.getBoundingClientRect();
|
|
canvas.width = rect.width * window.devicePixelRatio;
|
|
canvas.height = rect.height * window.devicePixelRatio;
|
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
|
|
|
const width = rect.width;
|
|
const height = rect.height;
|
|
const orange = '#f0b90b';
|
|
const gridColor = '#1e293b';
|
|
|
|
ctx.clearRect(0, 0, width, height);
|
|
|
|
// Draw Grid
|
|
ctx.strokeStyle = gridColor;
|
|
ctx.lineWidth = 0.5;
|
|
for(let i = 1; i < 8; i++) {
|
|
const y = (height / 8) * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, y);
|
|
ctx.lineTo(width, y);
|
|
ctx.stroke();
|
|
}
|
|
for(let i = 1; i < 6; i++) {
|
|
const x = (width / 6) * i;
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, 0);
|
|
ctx.lineTo(x, height);
|
|
ctx.stroke();
|
|
}
|
|
|
|
// Simulated data points [open, high, low, close]
|
|
const data = [
|
|
[65000, 66000, 64500, 65500],
|
|
[65500, 67000, 65000, 66500],
|
|
[66500, 66800, 64000, 64500],
|
|
[64500, 65000, 63000, 63500],
|
|
[63500, 66000, 63000, 65800],
|
|
[65800, 67500, 65500, 67000],
|
|
[67000, 69000, 66500, 68500],
|
|
[68500, 72000, 68000, 71500],
|
|
[71500, 73000, 70000, 72500],
|
|
[72500, 72500, 70000, 71000],
|
|
[71000, 73500, 70500, 73000],
|
|
[73000, 74000, 72000, 73500],
|
|
[73500, 76500, 73000, 76000],
|
|
[76000, 76500, 69000, 70000],
|
|
[70000, 71000, 68000, 68500],
|
|
[68500, 70000, 67500, 69500],
|
|
[69500, 71000, 66000, 67000],
|
|
[67000, 68000, 65000, 66000],
|
|
[66000, 68500, 65500, 68000],
|
|
[68000, 71500, 67500, 71000],
|
|
[71000, 72000, 69000, 69500],
|
|
[69500, 70500, 68500, 69000],
|
|
[69000, 70000, 68000, 69800],
|
|
[69800, 71500, 69500, 71200],
|
|
[71200, 73000, 71000, 72500],
|
|
[72500, 73500, 72000, 73200],
|
|
[73200, 74500, 72500, 73800],
|
|
[73800, 73800, 70000, 70339]
|
|
];
|
|
|
|
const minPrice = 61000;
|
|
const maxPrice = 78000;
|
|
const priceToY = (price) => height - ((price - minPrice) / (maxPrice - minPrice)) * height;
|
|
|
|
const candleWidth = 8;
|
|
const gap = 4;
|
|
const startX = 20;
|
|
|
|
data.forEach((d, i) => {
|
|
const x = startX + i * (candleWidth + gap);
|
|
const openY = priceToY(d[0]);
|
|
const highY = priceToY(d[1]);
|
|
const lowY = priceToY(d[2]);
|
|
const closeY = priceToY(d[3]);
|
|
|
|
ctx.strokeStyle = orange;
|
|
ctx.fillStyle = orange;
|
|
ctx.lineWidth = 1;
|
|
|
|
// Wick
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + candleWidth / 2, highY);
|
|
ctx.lineTo(x + candleWidth / 2, lowY);
|
|
ctx.stroke();
|
|
|
|
// Body
|
|
const bodyHeight = Math.abs(openY - closeY);
|
|
const bodyY = Math.min(openY, closeY);
|
|
ctx.fillRect(x, bodyY, candleWidth, Math.max(bodyHeight, 1));
|
|
});
|
|
|
|
// Horizontal current price line
|
|
const currentPriceY = priceToY(70339);
|
|
ctx.setLineDash([4, 4]);
|
|
ctx.strokeStyle = 'rgba(239, 68, 68, 0.7)';
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, currentPriceY);
|
|
ctx.lineTo(width, currentPriceY);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
|
|
window.addEventListener('load', drawChart);
|
|
window.addEventListener('resize', drawChart);</script>
|
|
</body></html> |