feat: updated UI to Refined Trading Dashboard style
This commit is contained in:
DiTus
349
new_design/ai_themed_trading_dashboard/code.html
Normal file
349
new_design/ai_themed_trading_dashboard/code.html
Normal file
@ -0,0 +1,349 @@
|
||||
<!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;
|
||||
color: #ffffff;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.text-muted {
|
||||
color: #8fa2b3;
|
||||
}
|
||||
.bg-dark-surface {
|
||||
background-color: #0d1421;
|
||||
}
|
||||
.border-dark {
|
||||
border-color: #1e293b;
|
||||
}
|
||||
.indicator-modal {
|
||||
background-color: #1a2333;
|
||||
border: 1px solid #2d3a4f;
|
||||
border-top-left-radius: 12px;
|
||||
border-top-right-radius: 12px;
|
||||
box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.text-bullish {
|
||||
color: #26d367;
|
||||
}
|
||||
.text-bearish {
|
||||
color: #ff4d4d;
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: #2d3a4f;
|
||||
}
|
||||
</style>
|
||||
<style data-purpose="chart-customization">
|
||||
.grid-line {
|
||||
stroke: #1e293b;
|
||||
stroke-width: 0.5;
|
||||
}
|
||||
.candle-bull {
|
||||
fill: #26d367;
|
||||
stroke: #26d367;
|
||||
}
|
||||
.candle-bear {
|
||||
fill: #ff4d4d;
|
||||
stroke: #ff4d4d;
|
||||
}
|
||||
</style>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
</head>
|
||||
<body class="flex flex-col h-screen overflow-hidden">
|
||||
<!-- BEGIN: Top Navigation Bar -->
|
||||
<header class="p-4 flex items-center justify-between bg-dark-surface border-b border-dark flex-shrink-0">
|
||||
<div class="flex items-center space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
|
||||
<svg class="w-4 h-4 text-muted" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
<span class="font-bold text-sm">BTC/USD</span>
|
||||
<svg class="w-3 h-3 text-muted" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
</div>
|
||||
<div class="flex space-x-1">
|
||||
<button class="px-2 py-1 text-xs text-muted hover:bg-[#2d3a4f] rounded">1m</button>
|
||||
<button class="px-2 py-1 text-xs text-muted hover:bg-[#2d3a4f] rounded">5m</button>
|
||||
<button class="px-2 py-1 text-xs text-muted hover:bg-[#2d3a4f] rounded">15m</button>
|
||||
<button class="px-2 py-1 text-xs text-muted hover:bg-[#2d3a4f] rounded">1h</button>
|
||||
<button class="px-2 py-1 text-xs text-muted hover:bg-[#2d3a4f] rounded">4h</button>
|
||||
<button class="px-2 py-1 text-xs bg-[#2d3a4f] text-white rounded font-bold">D</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- END: Top Navigation Bar -->
|
||||
<!-- BEGIN: Main Content -->
|
||||
<main class="flex-1 flex flex-col overflow-hidden relative">
|
||||
<!-- BEGIN: Price Statistics -->
|
||||
<section class="grid grid-cols-4 gap-2 px-4 py-4 border-b border-dark flex-shrink-0 bg-dark-surface" id="priceHeader">
|
||||
<div>
|
||||
<p class="text-[10px] text-muted uppercase">Price</p>
|
||||
<p class="text-lg font-bold">70339.00</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] text-muted uppercase">Change <span class="text-bearish">↘</span></p>
|
||||
<p class="text-lg font-bold text-bearish">-4.84%</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] text-muted uppercase">High ↗</p>
|
||||
<p class="text-lg font-bold">74250.00</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-[10px] text-muted uppercase">Low ↘</p>
|
||||
<p class="text-lg font-bold">70279.00</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END: Price Statistics -->
|
||||
<div class="flex-1 relative overflow-hidden">
|
||||
<!-- BEGIN: Candlestick Chart -->
|
||||
<section class="absolute inset-0 bg-[#0d1421]" 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-muted py-4 pointer-events-none">
|
||||
<span>77500.00</span>
|
||||
<span>75000.00</span>
|
||||
<span>72500.00</span>
|
||||
<div class="bg-bearish text-white px-1 py-0.5 rounded-l text-[10px] relative z-10" id="priceLabel">70339.00</div>
|
||||
<span>67500.00</span>
|
||||
<span>65000.00</span>
|
||||
<span>62500.00</span>
|
||||
</div>
|
||||
<!-- Time Axis Labels -->
|
||||
<div class="absolute bottom-2 left-4 right-16 flex justify-between text-[10px] text-muted 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: Indicators Modal -->
|
||||
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[95%] h-[calc(100%-16px)] indicator-modal z-40 overflow-hidden flex flex-col mt-2" id="indicatorsModal">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-4 border-b border-[#2d3a4f]">
|
||||
<span class="material-symbols-outlined text-muted cursor-pointer">close</span>
|
||||
<h3 class="text-md font-bold">Indicators</h3>
|
||||
<button class="bg-[#2d3a4f] px-3 py-1 rounded text-xs font-bold border border-[#3d4b63]">Strategy</button>
|
||||
</div>
|
||||
<!-- Search Bar -->
|
||||
<div class="px-4 py-3">
|
||||
<div class="relative flex items-center">
|
||||
<span class="material-symbols-outlined absolute left-3 text-muted text-lg">search</span>
|
||||
<input class="w-full bg-[#0d1421] border border-[#2d3a4f] rounded-md py-2 pl-10 pr-4 text-sm focus:ring-1 focus:ring-blue-500" placeholder="Search indicators..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filters -->
|
||||
<div class="flex space-x-2 px-4 pb-4 overflow-x-auto no-scrollbar">
|
||||
<button class="bg-white text-black px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap">All</button>
|
||||
<button class="bg-[#2d3a4f] text-white px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap">Trend</button>
|
||||
<button class="bg-[#2d3a4f] text-white px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap">Momentum</button>
|
||||
<button class="bg-[#2d3a4f] text-white px-3 py-1 rounded-full text-xs font-bold whitespace-nowrap">Volatility</button>
|
||||
</div>
|
||||
<!-- List -->
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="px-4 py-2 text-[10px] font-bold text-muted uppercase tracking-wider">Available Indicators</div>
|
||||
<div class="px-4 py-3 border-b border-[#2d3a4f] hover:bg-[#252f3f] flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium">Moving Average</p>
|
||||
<p class="text-[10px] text-muted">(SMA/EMA/RMA/WMA/VWMA)</p>
|
||||
</div>
|
||||
<div class="flex space-x-3 text-muted">
|
||||
<span class="material-symbols-outlined text-xl">add</span>
|
||||
<span class="material-symbols-outlined text-xl">star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 border-b border-[#2d3a4f] hover:bg-[#252f3f] flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium">Moving Average Convergence Divergence</p>
|
||||
<p class="text-[10px] text-muted">MACD - trend & momentum</p>
|
||||
</div>
|
||||
<div class="flex space-x-3 text-muted">
|
||||
<span class="material-symbols-outlined text-xl">add</span>
|
||||
<span class="material-symbols-outlined text-xl">star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 border-b border-[#2d3a4f] hover:bg-[#252f3f] flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium">RSI</p>
|
||||
<p class="text-[10px] text-muted">Relative Strength Index</p>
|
||||
</div>
|
||||
<div class="flex space-x-3 text-muted">
|
||||
<span class="material-symbols-outlined text-xl">add</span>
|
||||
<span class="material-symbols-outlined text-xl">star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 border-b border-[#2d3a4f] hover:bg-[#252f3f] flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium">Bollinger Bands</p>
|
||||
<p class="text-[10px] text-muted">Volatility bands around a moving average</p>
|
||||
</div>
|
||||
<div class="flex space-x-3 text-muted">
|
||||
<span class="material-symbols-outlined text-xl">add</span>
|
||||
<span class="material-symbols-outlined text-xl">star</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 border-b border-[#2d3a4f] hover:bg-[#252f3f] flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm font-medium">Stochastic Oscillator</p>
|
||||
<p class="text-[10px] text-muted">Compares close to high-low range</p>
|
||||
</div>
|
||||
<div class="flex space-x-3 text-muted">
|
||||
<span class="material-symbols-outlined text-xl">add</span>
|
||||
<span class="material-symbols-outlined text-xl">star</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- END: Indicators Modal -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- END: Main Content -->
|
||||
<!-- BEGIN: Bottom Tab Navigation -->
|
||||
<nav class="fixed bottom-0 w-full bg-[#0d1421] border-t border-[#1e293b] flex justify-around items-center py-2 px-1 z-50">
|
||||
<div class="flex flex-col items-center text-muted">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
<span class="text-[10px] mt-1">Markets</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-muted">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"></path></svg>
|
||||
<span class="text-[10px] mt-1">Chart</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-white">
|
||||
<span class="material-symbols-outlined w-6 h-6 flex items-center justify-center">query_stats</span>
|
||||
<span class="text-[10px] mt-1 font-bold">Indicators</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-muted">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
<span class="text-[10px] mt-1">Analysis</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center text-muted">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg>
|
||||
<span class="text-[10px] mt-1">More</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- END: Bottom Tab Navigation -->
|
||||
<!-- 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 gridColor = '#1e293b';
|
||||
const bullColor = '#26d367';
|
||||
const bearColor = '#ff4d4d';
|
||||
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
const candleWidth = 8;
|
||||
const gap = 4;
|
||||
const startX = 20;
|
||||
|
||||
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;
|
||||
|
||||
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]);
|
||||
|
||||
const isBull = d[3] >= d[0];
|
||||
const color = isBull ? bullColor : bearColor;
|
||||
|
||||
ctx.strokeStyle = color;
|
||||
ctx.fillStyle = color;
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + candleWidth / 2, highY);
|
||||
ctx.lineTo(x + candleWidth / 2, lowY);
|
||||
ctx.stroke();
|
||||
|
||||
const bodyHeight = Math.abs(openY - closeY);
|
||||
const bodyY = Math.min(openY, closeY);
|
||||
ctx.fillRect(x, bodyY, candleWidth, Math.max(bodyHeight, 1));
|
||||
});
|
||||
|
||||
const currentPriceY = priceToY(70339);
|
||||
ctx.setLineDash([4, 4]);
|
||||
ctx.strokeStyle = 'rgba(255, 77, 77, 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>
|
||||
<!-- END: Chart Logic -->
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user