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

Compare commits

base: p1otek:master
Branches Tags
p1otek:master
...
compare: p1otek:709a5653970967eacf695910dc51e9513c5123da
Branches Tags
p1otek:master

2 Commits
master ... 709a565397

Author SHA1 Message Date
DiTus
709a565397 chore: resolve merge conflicts in index.html and finalize drawing tools 2026-03-21 11:37:58 +01:00
DiTus
07a27a12a4 fix: outside-click settings, autoScale/logScale sync 2026-03-21 09:45:13 +01:00
1 changed files with 73 additions and 84 deletions
Expand all files Collapse all files

151
index.html
View File

@ -101,71 +101,68 @@
</div> </div>
</section> </section>
<!-- Chart Container --> <!-- Chart Container -->
<section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper"> <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> <div id="chart" class="w-full h-full"></div>
<!-- TradingView-style Left Toolbar --> <!-- Drawing Layer Overlay -->
<div class="absolute left-0 top-0 bottom-0 flex flex-col justify-center bg-[#0d1421]/90 border-r border-[#1b1f2b] backdrop-blur-sm z-20 px-2 py-4 gap-3" style="display: none;" id="chartToolbar"> <canvas id="drawingLayer" class="absolute inset-0 pointer-events-none z-20 w-full h-full"></canvas>
<!-- Trend Line Tool -->
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('trend_line')" title="Trend Line">
<span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">call_split</span>
</button>
<!-- Horizontal Line Tool --> <!-- Vertical Drawing Toolbar (Left) -->
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('horizontal_line')" title="Horizontal Line"> <div class="absolute left-2 top-1/2 -translate-y-1/2 flex flex-col gap-1 z-30 bg-[#1a2333]/80 backdrop-blur border border-[#2d3a4f] p-1 rounded-md shadow-xl" id="drawingToolbar">
<span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">swap_horizontal_circle</span> <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('cursor')" title="Cursor">
</button> <span class="material-symbols-outlined text-sm">near_me</span>
</button>
<!-- Vertical Line Tool --> <div class="w-full h-[1px] bg-[#2d3a4f] my-0.5"></div>
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('vertical_line')" title="Vertical Line"> <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')" title="Trend Line">
<span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">swap_vert</span> <span class="material-symbols-outlined text-sm">call_split</span>
</button> </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('ray')" title="Ray">
<!-- Text Label Tool --> <span class="material-symbols-outlined text-sm">trending_flat</span>
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('text')" title="Text Label"> </button>
<span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">text_fields</span> <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')" title="Horizontal Line">
</button> <span class="material-symbols-outlined text-sm">swap_horizontal_circle</span>
</button>
<!-- Arrow Up Tool --> <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')" title="Vertical Line">
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('arrow_up')" title="Arrow Up"> <span class="material-symbols-outlined text-sm">swap_vert</span>
<span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">arrow_upward</span> </button>
</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('fib_retracement')" title="Fibonacci Retracement">
<span class="material-symbols-outlined text-sm">reorder</span>
<!-- Arrow Down Tool --> </button>
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-white transition-colors shadow-lg group" onclick="window.activateDrawingTool('arrow_down')" title="Arrow Down"> <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')" title="Rectangle">
<span class="material-symbols-outlined text-sm group-hover:text-[#2962ff]">arrow_downward</span> <span class="material-symbols-outlined text-sm">crop_square</span>
</button> </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')" title="Text Label">
<!-- Divider --> <span class="material-symbols-outlined text-sm">text_fields</span>
<div class="w-8 h-px bg-[#2d3a4f] my-1"></div> </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')" title="Arrow Up">
<!-- Clear All --> <span class="material-symbols-outlined text-sm">arrow_upward</span>
<button class="w-8 h-8 bg-[#1e222d] border border-[#2d3a4f] text-gray-300 flex items-center justify-center rounded hover:bg-[#2d3a4f] hover:text-[#ef5350] transition-colors shadow-lg" onclick="window.activateDrawingTool('clear')" title="Clear All"> </button>
<span class="material-symbols-outlined text-sm">clear_all</span> <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')" title="Arrow Down">
</button> <span class="material-symbols-outlined text-sm">arrow_downward</span>
</button>
<!-- Divider --> <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')" title="Measure">
<div class="w-8 h-px bg-[#2d3a4f] my-1"></div> <span class="material-symbols-outlined text-sm">straighten</span>
</button>
<!-- Toggle Toolbar --> <div class="w-full h-[1px] bg-[#2d3a4f] my-0.5"></div>
<button class="w-8 h-8 bg-[#2d3a4f] border border-[#2d3a4f] text-[#2962ff] flex items-center justify-center rounded hover:bg-[#2962ff]/20 transition-colors shadow-lg" id="toggleChartToolbar" title="Toggle Toolbar"> <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')" title="Clear All">
<span class="material-symbols-outlined text-sm">more_vert</span> <span class="material-symbols-outlined text-sm">delete</span>
</button> </button>
</div> </div>
<!-- Settings & Price Scale Controls - Bottom Right --> <!-- Overlay Controls -->
<div class="absolute bottom-4 right-4 flex gap-2 z-10 opacity-0 hover:opacity-100 transition-opacity" id="priceScaleControls"> <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"> <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> <span class="material-symbols-outlined text-sm">settings</span>
</button> </button>
<!-- Settings Popup --> <!-- 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"> <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()"> <!-- Reset Scale -->
<span class="material-symbols-outlined text-sm">refresh</span> Reset price scale <div class="px-4 py-2 hover:bg-[#252f3f] cursor-pointer flex items-center gap-3" onclick="window.dashboard.chart.timeScale().fitContent()">
</div> <span class="material-symbols-outlined text-sm">refresh</span> Reset price scale
</div>
<hr class="border-[#2d3a4f] my-1"> <hr class="border-[#2d3a4f] my-1">
@ -270,18 +267,14 @@
<span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Strategy</span> <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Strategy</span>
</div> </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()"> <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="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> <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">Full</span>
</div> </div>
<div class="flex flex-col items-center justify-center w-full py-4 text-[#2962ff] bg-[#2962ff]/10 border-r-2 border-[#2962ff] cursor-pointer" onclick="document.getElementById('chartToolbar').style.display === 'none' || !document.getElementById('chartToolbar') ? document.getElementById('chartToolbar').style.display = 'flex' : document.getElementById('chartToolbar').style.display = 'none'"> <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">draw</span> <span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
<span class="text-[10px] font-medium mt-1">Draw</span> <span class="text-[10px] font-medium mt-1 opacity-70 group-hover:opacity-100">More</span>
</div> </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"> </nav>
<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> </div>
<!-- Bottom Navigation (Mobile Vertical) --> <!-- Bottom Navigation (Mobile Vertical) -->
@ -303,18 +296,14 @@
<span class="text-[10px] font-medium mt-1">Strategy</span> <span class="text-[10px] font-medium mt-1">Strategy</span>
</div> </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()"> <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="material-symbols-outlined group-hover:text-blue-400">fullscreen</span>
<span class="text-[10px] font-medium mt-1">Full</span> <span class="text-[10px] font-medium mt-1">Full</span>
</div> </div>
<div class="flex flex-col items-center justify-center min-w-[70px] flex-shrink-0 text-[#2962ff] bg-[#2962ff]/10 rounded-xl px-4 py-1.5 transition-transform duration-200 cursor-pointer border border-[#2962ff]/20" onclick="document.getElementById('chartToolbar').style.display === 'none' || !document.getElementById('chartToolbar') ? document.getElementById('chartToolbar').style.display = 'flex' : document.getElementById('chartToolbar').style.display = 'none'"> <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">draw</span> <span class="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
<span class="text-[10px] font-bold mt-1">Draw</span> <span class="text-[10px] font-medium mt-1">More</span>
</div> </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"> </nav>
<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) --> <!-- 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 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">