497 lines
34 KiB
HTML
497 lines
34 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 gap-3">
|
|
<!-- Mobile Menu Button -->
|
|
<button id="mobileMenuBtn" class="md:hidden w-10 h-10 flex items-center justify-center text-[#8fa2b3] hover:text-white hover:bg-[#2d3a4f] rounded-md transition-colors z-50">
|
|
<span class="material-symbols-outlined text-lg">menu</span>
|
|
</button>
|
|
|
|
<!-- Search/Symbol Button -->
|
|
<div class="hidden md: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>
|
|
|
|
<!-- Mobile Search -->
|
|
<div class="md:hidden flex items-center 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] ml-2">BTC/USD</span>
|
|
<span class="material-symbols-outlined text-sm text-[#8fa2b3] ml-2">chevron_right</span>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Horizontal Drawing Toolbar (Top) -->
|
|
<div class="absolute top-2 left-1/2 -translate-x-1/2 flex flex-row gap-1 z-30 bg-[#1a2333]/80 backdrop-blur border border-[#2d3a4f] p-1 rounded-md shadow-xl" id="drawingToolbar">
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('trend_line', event)" title="Trend Line">
|
|
<span class="material-symbols-outlined text-sm">call_split</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('horizontal_line', event)" title="Horizontal Line">
|
|
<span class="material-symbols-outlined text-sm">swap_horizontal_circle</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('vertical_line', event)" title="Vertical Line">
|
|
<span class="material-symbols-outlined text-sm">swap_vert</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('rectangle', event)" title="Rectangle">
|
|
<span class="material-symbols-outlined text-sm">crop_square</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('text', event)" title="Text Label">
|
|
<span class="material-symbols-outlined text-sm">text_fields</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_up', event)" title="Arrow Up">
|
|
<span class="material-symbols-outlined text-sm">arrow_upward</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('arrow_down', event)" title="Arrow Down">
|
|
<span class="material-symbols-outlined text-sm">arrow_downward</span>
|
|
</button>
|
|
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('measure', event)" title="Measure">
|
|
<span class="material-symbols-outlined text-sm">straighten</span>
|
|
</button>
|
|
<div class="w-[1px] h-full bg-[#2d3a4f] mx-0.5"></div>
|
|
<button class="w-8 h-8 text-red-400 hover:text-red-300 hover:bg-red-900/20 rounded flex items-center justify-center transition-colors" onclick="window.activateDrawingTool('clear', event)" title="Clear All">
|
|
<span class="material-symbols-outlined text-sm">delete</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Trendline Settings Panel -->
|
|
<div id="trendlineSettingsPanel" class="hidden absolute top-14 left-1/2 -translate-x-1/2 bg-[#1a2333] border border-[#2d3a4f] rounded-lg shadow-2xl z-50 w-[280px] p-0 text-sm font-['Inter']">
|
|
<!-- Drag Handle -->
|
|
<div id="tlPanelHeader" class="h-8 flex items-center justify-between px-3 border-b border-[#2d3a4f] cursor-move bg-[#1f2937] rounded-t-lg">
|
|
<span class="text-[10px] uppercase tracking-wider font-bold text-gray-400">Settings</span>
|
|
<button class="text-gray-500 hover:text-white" onclick="window.toggleTLSettings(false)">
|
|
<span class="material-symbols-outlined text-sm">close</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-4">
|
|
<!-- Tabs -->
|
|
<div class="flex border-b border-[#2d3a4f] mb-4">
|
|
<button class="flex-1 py-2 text-center text-blue-500 border-b-2 border-blue-500 font-medium" id="tlTabStyle" onclick="window.switchTLTab('style')">Style</button>
|
|
<button class="flex-1 py-2 text-center text-gray-400 hover:text-white" id="tlTabText" onclick="window.switchTLTab('text')">Text</button>
|
|
</div>
|
|
|
|
<!-- Style Tab Content -->
|
|
<div id="tlContentStyle">
|
|
<!-- Color Grid (Line) -->
|
|
<div class="grid grid-cols-8 gap-1 mb-4" id="tlColorGrid">
|
|
<!-- Colors injected by JS -->
|
|
</div>
|
|
|
|
<!-- Opacity -->
|
|
<div class="mb-4">
|
|
<div class="flex justify-between text-xs text-gray-400 mb-1">
|
|
<span>Opacity</span>
|
|
<span id="tlOpacityValue">100%</span>
|
|
</div>
|
|
<input type="range" min="0" max="100" value="100" class="w-full h-1 bg-[#2d3a4f] rounded-lg appearance-none cursor-pointer" id="tlOpacityInput">
|
|
</div>
|
|
|
|
<!-- Thickness -->
|
|
<div class="mb-4">
|
|
<label class="text-xs text-gray-400 mb-1 block">Thickness</label>
|
|
<div class="flex bg-[#0d1421] rounded border border-[#2d3a4f] p-1">
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(1)" data-thickness="1"><div class="w-4 h-[1px] bg-white"></div></button>
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(2)" data-thickness="2"><div class="w-4 h-[2px] bg-white"></div></button>
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(3)" data-thickness="3"><div class="w-4 h-[3px] bg-white"></div></button>
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-thickness-btn" onclick="window.setTLThickness(4)" data-thickness="4"><div class="w-4 h-[4px] bg-white"></div></button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Line Style -->
|
|
<div class="mb-4">
|
|
<label class="text-xs text-gray-400 mb-1 block">Line style</label>
|
|
<div class="flex bg-[#0d1421] rounded border border-[#2d3a4f] p-1">
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-style-btn" onclick="window.setTLStyle(0)" data-style="0"><div class="w-6 border-b border-white"></div></button>
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-style-btn" onclick="window.setTLStyle(1)" data-style="1"><div class="w-6 border-b border-dashed border-white"></div></button>
|
|
<button class="flex-1 h-6 flex items-center justify-center hover:bg-[#2d3a4f] rounded data-[active=true]:bg-[#2d3a4f] tl-style-btn" onclick="window.setTLStyle(2)" data-style="2"><div class="w-6 border-b border-dotted border-white"></div></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Text Tab Content -->
|
|
<div id="tlContentText" class="hidden">
|
|
<div class="flex gap-2 mb-4 relative">
|
|
<!-- Text Color Button -->
|
|
<div class="w-8 h-8 rounded border border-[#2d3a4f] cursor-pointer" id="tlTextColorBtn" style="background-color: #2962ff"></div>
|
|
|
|
<!-- Text Color Picker Popup -->
|
|
<div id="tlTextColorPicker" class="hidden absolute top-10 left-0 bg-[#1a2333] border border-[#2d3a4f] rounded shadow-2xl p-2 z-[60] w-[210px]">
|
|
<div class="grid grid-cols-8 gap-1" id="tlTextColorGrid">
|
|
<!-- Colors injected by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Font Size -->
|
|
<select id="tlFontSize" class="bg-[#0d1421] border border-[#2d3a4f] rounded text-xs px-2 h-8 text-white focus:outline-none">
|
|
<option value="10">10</option>
|
|
<option value="12">12</option>
|
|
<option value="14" selected>14</option>
|
|
<option value="16">16</option>
|
|
<option value="20">20</option>
|
|
<option value="24">24</option>
|
|
</select>
|
|
|
|
<!-- Style Toggles -->
|
|
<button class="w-8 h-8 border border-[#2d3a4f] rounded flex items-center justify-center hover:bg-[#2d3a4f] data-[active=true]:bg-blue-600" id="tlBoldBtn" onclick="window.toggleTLBold()">B</button>
|
|
<button class="w-8 h-8 border border-[#2d3a4f] rounded flex items-center justify-center hover:bg-[#2d3a4f] italic data-[active=true]:bg-blue-600" id="tlItalicBtn" onclick="window.toggleTLItalic()">I</button>
|
|
</div>
|
|
|
|
<textarea id="tlTextInput" class="w-full h-24 bg-[#0d1421] border border-[#2d3a4f] rounded p-2 text-xs text-white focus:border-blue-500 focus:outline-none mb-4" placeholder="Add text"></textarea>
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
<label class="text-xs text-gray-400">Alignment</label>
|
|
<div class="flex gap-2">
|
|
<select id="tlAlignVert" class="bg-[#0d1421] border border-[#2d3a4f] rounded text-xs px-2 h-6 text-white focus:outline-none">
|
|
<option value="top">Top</option>
|
|
<option value="middle">Middle</option>
|
|
<option value="bottom">Bottom</option>
|
|
</select>
|
|
<select id="tlAlignHorz" class="bg-[#0d1421] border border-[#2d3a4f] rounded text-xs px-2 h-6 text-white focus:outline-none">
|
|
<option value="left">Left</option>
|
|
<option value="center">Center</option>
|
|
<option value="right">Right</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Settings Popup -->
|
|
<div class="hidden absolute bottom-10 right-0 bg-[#1a2333] border border-[#2d3a4f] rounded-lg py-2 z-50 w-64 shadow-xl text-sm" id="settingsPopup">
|
|
|
|
<!-- Reset Scale -->
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.dashboard.chart.timeScale().fitContent()">
|
|
<span class="material-symbols-outlined text-sm">refresh</span> Reset price scale
|
|
</div>
|
|
|
|
<hr class="border-[#2d3a4f] my-1">
|
|
|
|
<!-- Scale Toggles -->
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.toggleScaleOption('autoScale')">
|
|
<span id="autoScaleCheck">✓</span> Auto (fits data to screen)
|
|
</div>
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.toggleScaleOption('invertScale')">
|
|
<span id="invertScaleCheck"></span> Invert scale
|
|
</div>
|
|
|
|
<hr class="border-[#2d3a4f] my-1">
|
|
|
|
<!-- Scale Modes -->
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(0)">
|
|
<span id="modeNormalCheck">✓</span> Regular
|
|
</div>
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(2)">
|
|
<span id="modePercentCheck"></span> Percent
|
|
</div>
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(3)">
|
|
<span id="modeIndexedCheck"></span> Indexed to 100
|
|
</div>
|
|
<div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer" onclick="window.setScaleMode(1)">
|
|
<span id="modeLogCheck"></span> Logarithmic
|
|
</div>
|
|
|
|
<hr class="border-[#2d3a4f] my-1">
|
|
|
|
<!-- Candle Colors -->
|
|
<div class="px-4 py-2">
|
|
<label class="text-[10px] text-[#8fa2b3] uppercase tracking-wider mb-1 block">Candle Colors</label>
|
|
<div class="flex gap-2">
|
|
<input type="color" id="candleUpColor" value="#ff9800" class="flex-1 h-6 cursor-pointer">
|
|
<input type="color" id="candleDownColor" value="#ff9800" class="flex-1 h-6 cursor-pointer">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Decimals -->
|
|
<div class="px-4 py-2 flex items-center justify-between">
|
|
<label class="text-sm text-gray-300">Decimals</label>
|
|
<input type="number" id="priceFormatInput" min="0" max="8" value="2" class="w-16 bg-[#0d1421] border border-[#2d3a4f] text-center rounded text-xs">
|
|
</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>
|
|
|
|
<!-- Desktop Sidebar Toggle -->
|
|
<button id="sidebarToggleBtn" class="md:flex hidden w-8 h-8 bg-[#1a2333] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] transition-colors" title="Toggle Sidebar">
|
|
<span class="material-symbols-outlined text-sm">menu</span>
|
|
</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>
|