329 lines
21 KiB
HTML
329 lines
21 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"/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="theme-color" content="#0d1421">
|
|
<title>Crypto Dashboard - BTC/USD</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script src="https://unpkg.com/lightweight-charts@5.1.0/dist/lightweight-charts.standalone.production.js"></script>
|
|
<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"/>
|
|
<link rel="stylesheet" href="./css/indicators-new.css">
|
|
<link rel="stylesheet" href="./css/refined.css">
|
|
<style>
|
|
/* Sidebar Transition Logic matching existing JS .collapsed class */
|
|
#rightSidebar {
|
|
transform: translateX(0);
|
|
transition: transform 0.3s ease-in-out;
|
|
}
|
|
#rightSidebar.collapsed {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* Tab Styles in Sidebar */
|
|
.sidebar-tab {
|
|
@apply px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors border-b-2 border-transparent;
|
|
}
|
|
.sidebar-tab.active {
|
|
@apply text-blue-500 border-blue-500;
|
|
}
|
|
|
|
/* Hide scrollbar for clean UI */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col h-screen overflow-hidden bg-[#0d1421] text-white font-['Inter']">
|
|
|
|
<!-- Top Navigation Bar -->
|
|
<header class="bg-[#0f131e] fixed top-0 w-full z-[60] 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="hidden md:flex items-center gap-2 mr-4">
|
|
<div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div>
|
|
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</span>
|
|
</div>
|
|
|
|
<div class="flex space-x-1 items-center overflow-x-auto no-scrollbar" id="timeframeContainer">
|
|
<!-- Timeframes injected by JS -->
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex flex-1 pt-16 overflow-hidden">
|
|
<!-- Main Content -->
|
|
<main class="flex-1 overflow-y-auto pb-20 md:pb-0 no-scrollbar">
|
|
<!-- Price Statistics -->
|
|
<section id="priceHeader" class="grid grid-cols-2 md: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" id="currentPrice">--</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Change</p>
|
|
<p class="text-lg font-bold" id="priceChange">--</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">High ↗</p>
|
|
<p class="text-lg font-bold" id="dailyHigh">--</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Low ↘</p>
|
|
<p class="text-lg font-bold" id="dailyLow">--</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Chart Container -->
|
|
<section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
|
|
<div id="chart" class="w-full h-full"></div>
|
|
|
|
<!-- Overlay Controls -->
|
|
<div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls">
|
|
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnSettings" title="Settings">
|
|
<span class="material-symbols-outlined text-sm">settings</span>
|
|
</button>
|
|
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnAutoScale" title="Auto Scale">A</button>
|
|
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors shadow-lg" id="btnLogScale" title="Log Scale">L</button>
|
|
|
|
<!-- Settings Popup -->
|
|
<div class="hidden absolute bottom-10 right-0 bg-[#1e222d] border border-[#2d3a4f] rounded-lg p-3 z-50 w-56 shadow-xl" id="settingsPopup">
|
|
<div class="mb-3">
|
|
<label class="block text-[10px] text-[#8fa2b3] mb-1 uppercase tracking-wider">Candle Colors</label>
|
|
<div class="flex gap-2">
|
|
<div class="flex-1">
|
|
<label class="text-[9px] text-[#8fa2b3] block mb-0.5">Up</label>
|
|
<div class="h-6 w-full rounded border border-[#2d3a4f] relative overflow-hidden">
|
|
<input type="color" id="candleUpColor" value="#ff9800" class="absolute -top-2 -left-2 w-[200%] h-[200%] cursor-pointer p-0 m-0 border-0">
|
|
</div>
|
|
</div>
|
|
<div class="flex-1">
|
|
<label class="text-[9px] text-[#8fa2b3] block mb-0.5">Down</label>
|
|
<div class="h-6 w-full rounded border border-[#2d3a4f] relative overflow-hidden">
|
|
<input type="color" id="candleDownColor" value="#ff9800" class="absolute -top-2 -left-2 w-[200%] h-[200%] cursor-pointer p-0 m-0 border-0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-[1fr_auto] items-center gap-2 mb-3">
|
|
<label class="text-[10px] text-[#8fa2b3] uppercase tracking-wider">Decimals</label>
|
|
<input type="number" id="priceFormatInput" min="0" max="8" value="2" class="w-16 bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-xs rounded p-1.5 text-center focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-[auto_1fr] items-center gap-2 mb-0">
|
|
<label class="text-[10px] text-[#8fa2b3] uppercase tracking-wider whitespace-nowrap">Timezone</label>
|
|
<select class="w-full bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-[10px] rounded p-1.5 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" id="timezoneSelect">
|
|
<option value="UTC">UTC</option>
|
|
<option value="Europe/Warsaw" selected>Warsaw</option>
|
|
<option value="America/New_York">New York</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Controls -->
|
|
<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="navControls">
|
|
<button class="w-8 h-8 bg-[#1e222d]/80 backdrop-blur border border-[#2d3a4f] text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors" id="navLeft">
|
|
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
|
</button>
|
|
<button class="w-8 h-8 bg-[#1e222d]/80 backdrop-blur border border-[#2d3a4f] text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors" id="navRight">
|
|
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
|
</button>
|
|
<button class="w-8 h-8 bg-[#1e222d]/80 backdrop-blur border border-[#2d3a4f] text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition-colors" id="navRecent">
|
|
<span class="material-symbols-outlined text-sm">keyboard_double_arrow_right</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Technical Analysis Section -->
|
|
<section class="px-4 py-6 bg-[#0d1421] min-h-[300px]" id="taPanel">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-bold flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
|
|
Technical Analysis
|
|
<span id="taInterval" class="text-[10px] bg-blue-600/20 text-blue-400 px-2 py-0.5 rounded ml-2 border border-blue-600/30">1D</span>
|
|
</h2>
|
|
<div class="flex items-center gap-2">
|
|
<span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span>
|
|
<button class="bg-gradient-to-r from-blue-600 to-indigo-600 text-white px-3 py-1.5 rounded text-xs font-bold hover:shadow-lg transition-all flex items-center gap-1" id="aiBtn" onclick="window.openAIAnalysis()">
|
|
<span class="material-symbols-outlined text-sm">smart_toy</span> AI Insight
|
|
</button>
|
|
<button class="bg-[#1e222d] border border-[#2d3a4f] text-gray-400 px-3 py-1.5 rounded text-xs hover:text-white hover:border-gray-500 transition-colors" onclick="window.refreshTA()">
|
|
<span class="material-symbols-outlined text-sm align-bottom">refresh</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="taContent" class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div class="text-gray-500 text-sm p-4 text-center w-full col-span-full">Loading analysis data...</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Right-Side Sidebar Navigation (Desktop/Horizontal) -->
|
|
<nav class="hidden md:flex w-[72px] bg-[#0f131e] border-l border-[#1b1f2b] flex-col items-center py-4 z-50 shadow-[-4px_0px_12px_rgba(0,0,0,0.2)] overflow-y-auto no-scrollbar">
|
|
<div class="flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">show_chart</span>
|
|
<span class="text-[10px] font-medium font-['Inter'] mt-1 opacity-70 group-hover:opacity-100">Markets</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center w-full py-4 text-[#b6c4ff] bg-[#2962ff]/10 border-r-2 border-[#2962ff] cursor-pointer" onclick="window.hideAllPanels()">
|
|
<span class="material-symbols-outlined">candlestick_chart</span>
|
|
<span class="text-[10px] font-medium mt-1">Chart</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group" onclick="toggleSidebarDisplay('indicators')">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">query_stats</span>
|
|
<span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Indicators</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group" onclick="toggleSidebarDisplay('strategy')">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">analytics</span>
|
|
<span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Strategy</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group" onclick="window.toggleFullscreen()">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
|
|
<span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Full</span>
|
|
</div>
|
|
<div class="mt-auto flex flex-col items-center justify-center w-full py-4 text-[#c3c5d8] hover:text-[#dfe2f2] cursor-pointer transition-colors group">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
|
|
<span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">More</span>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Bottom Navigation (Mobile Vertical) -->
|
|
<nav class="fixed bottom-0 w-full bg-[#0f131e] border-t border-[#1e293b] flex md:hidden justify-start items-center h-16 z-50 px-2 shadow-[0px_-4px_12px_rgba(0,0,0,0.5)] overflow-x-auto no-scrollbar">
|
|
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">show_chart</span>
|
|
<span class="text-[10px] font-medium mt-1">Markets</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#b6c4ff] bg-[#2962ff]/10 rounded-xl px-4 py-1.5 transition-transform duration-200 cursor-pointer border border-[#2962ff]/20" onclick="window.hideAllPanels()">
|
|
<span class="material-symbols-outlined">candlestick_chart</span>
|
|
<span class="text-[10px] font-bold mt-1">Chart</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group" onclick="toggleSidebarDisplay('indicators')">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">query_stats</span>
|
|
<span class="text-[10px] font-medium mt-1">Indicators</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group" onclick="toggleSidebarDisplay('strategy')">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">analytics</span>
|
|
<span class="text-[10px] font-medium mt-1">Strategy</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group" onclick="window.toggleFullscreen()">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
|
|
<span class="text-[10px] font-medium mt-1">Full</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group">
|
|
<span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
|
|
<span class="text-[10px] font-medium mt-1">More</span>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Sidebar Overlay (Acts as Modal) -->
|
|
<div id="rightSidebar" class="collapsed fixed top-[64px] right-0 md:right-[72px] bottom-[64px] md:bottom-0 w-full max-w-[370px] bg-[#1a2333] border-l border-[#2d3a4f] shadow-2xl z-40 flex flex-col">
|
|
<div class="flex justify-between items-center p-3 border-b border-[#2d3a4f] bg-[#1a2333]">
|
|
<!-- Hidden tab buttons triggers -->
|
|
<div class="flex space-x-2">
|
|
<button class="sidebar-tab active text-xs uppercase tracking-wider font-bold" data-tab="indicators">Indicators</button>
|
|
<button class="sidebar-tab text-xs uppercase tracking-wider font-bold" data-tab="strategy">Strategy</button>
|
|
</div>
|
|
<button class="text-gray-400 hover:text-white p-1 hover:bg-[#2d3a4f] rounded" onclick="window.hideAllPanels()">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- We need to preserve the ID 'sidebarToggleBtn' if JS binds to it -->
|
|
<button id="sidebarToggleBtn" class="hidden"></button>
|
|
|
|
<div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421]">
|
|
<div class="sidebar-tab-panel active h-full" id="tab-indicators">
|
|
<div id="indicatorPanel" class="p-2">
|
|
<!-- Indicators content injected here -->
|
|
</div>
|
|
</div>
|
|
<div class="sidebar-tab-panel h-full" id="tab-strategy">
|
|
<div id="strategyPanel" class="p-2">
|
|
<!-- Strategy content injected here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initialization Scripts -->
|
|
<script>
|
|
// Indicator Definitions
|
|
window.AVAILABLE_INDICATORS = [
|
|
{ type: 'hts', name: 'HTS Trend System', description: 'Fast/Slow MAs of High/Low prices' },
|
|
{ type: 'sma', name: 'SMA', description: 'Simple Moving Average' },
|
|
{ type: 'ema', name: 'EMA', description: 'Exponential Moving Average' },
|
|
{ type: 'rsi', name: 'RSI', description: 'Relative Strength Index' },
|
|
{ type: 'bb', name: 'Bollinger Bands', description: 'Volatility bands' },
|
|
{ type: 'macd', name: 'MACD', description: 'Moving Average Convergence Divergence' },
|
|
{ type: 'stoch', name: 'Stochastic', description: 'Stochastic Oscillator' },
|
|
{ type: 'atr', name: 'ATR', description: 'Average True Range' },
|
|
{ type: 'hurst', name: 'Hurst Bands', description: 'Cyclic price channels' }
|
|
];
|
|
|
|
// Sidebar Toggle Logic Bridge
|
|
window.toggleSidebarDisplay = function(tabName) {
|
|
const sidebar = document.getElementById('rightSidebar');
|
|
if (!sidebar) return;
|
|
|
|
const isOpen = !sidebar.classList.contains('collapsed');
|
|
const activeTab = document.querySelector('.sidebar-tab.active');
|
|
const currentTabName = activeTab ? activeTab.dataset.tab : null;
|
|
|
|
// If sidebar is open AND the clicked tab is already active, CLOSE IT.
|
|
if (isOpen && currentTabName === tabName) {
|
|
sidebar.classList.add('collapsed');
|
|
return; // Done
|
|
}
|
|
|
|
// Otherwise, OPEN it (remove collapsed) and switch tab
|
|
sidebar.classList.remove('collapsed');
|
|
|
|
if (tabName) {
|
|
// Find and click the hidden tab button to trigger existing logic
|
|
const tabBtn = document.querySelector(`.sidebar-tab[data-tab="${tabName}"]`);
|
|
if (tabBtn) {
|
|
tabBtn.click();
|
|
}
|
|
}
|
|
};
|
|
|
|
window.hideAllPanels = function() {
|
|
const sidebar = document.getElementById('rightSidebar');
|
|
if (sidebar) {
|
|
sidebar.classList.add('collapsed');
|
|
}
|
|
};
|
|
|
|
window.toggleFullscreen = function() {
|
|
if (!document.fullscreenElement) {
|
|
document.documentElement.requestFullscreen().catch(err => {
|
|
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
|
|
});
|
|
} else {
|
|
if (document.exitFullscreen) {
|
|
document.exitFullscreen();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<script src="./config.js"></script>
|
|
<script type="module" src="./js/app.js"></script>
|
|
</body>
|
|
</html>
|