p1otek/winterfail
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: updated UI to Refined Trading Dashboard style

Browse Source
This commit is contained in:
DiTus
2026-03-19 22:20:59 +01:00
parent 870f7574cc
commit eedd532ba7
15 changed files with 1637 additions and 1679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
new_design/optimized_trading_dashboard_view/code.html Normal file
View 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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;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>

BIN
new_design/optimized_trading_dashboard_view/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB