feat: updated UI to Refined Trading Dashboard style
This commit is contained in:
DiTus
301
new_design/optimized_trading_dashboard_view/code.html
Normal file
301
new_design/optimized_trading_dashboard_view/code.html
Normal file
@ -0,0 +1,301 @@
|
||||
<!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-[65vh]" 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';
|
||||
|
||||
// Axis width offset (matches the w-16 div on the right)
|
||||
const axisWidth = 64;
|
||||
const drawingWidth = width - axisWidth;
|
||||
|
||||
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(drawingWidth, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
for(let i = 1; i < 6; i++) {
|
||||
const x = (drawingWidth / 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;
|
||||
// Adjust startX to move candles further left and avoid overlap
|
||||
const startX = 10;
|
||||
|
||||
data.forEach((d, i) => {
|
||||
const x = startX + i * (candleWidth + gap);
|
||||
// Check to ensure we don't draw over the right axis labels
|
||||
if (x + candleWidth > drawingWidth) return;
|
||||
|
||||
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(drawingWidth, currentPriceY);
|
||||
ctx.stroke();
|
||||
ctx.setLineDash([]);
|
||||
}
|
||||
|
||||
window.addEventListener('load', drawChart);
|
||||
window.addEventListener('resize', drawChart);</script>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user