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
6 changed files with 646 additions and 2449 deletions
Expand all files Collapse all files

48
css/refined.css
View File

@ -217,51 +217,3 @@ body {
} }
} }
/* Trendline Settings Panel */
#trendlineSettingsPanel input[type=range] {
-webkit-appearance: none;
background: transparent;
}
#trendlineSettingsPanel input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 12px;
width: 12px;
border-radius: 50%;
background: #ffffff;
cursor: pointer;
border: 2px solid #1a2333;
margin-top: -4px;
}
#trendlineSettingsPanel input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
background: #2d3a4f;
border-radius: 2px;
}
.color-swatch {
width: 20px;
height: 20px;
border-radius: 3px;
cursor: pointer;
border: 1px solid transparent;
transition: transform 0.1s, border-color 0.1s;
}
.color-swatch:hover {
transform: scale(1.1);
border-color: #ffffff;
}
.color-swatch.active {
border-color: #ffffff;
box-shadow: 0 0 0 1px #ffffff;
}
.tl-thickness-btn[data-active="true"],
.tl-style-btn[data-active="true"] {
background-color: #2d3a4f;
}

BIN
ignore/line_settings.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
ignore/text.PNG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 5.7 KiB

373
index.html
View File

@ -24,7 +24,7 @@
#rightSidebar.collapsed { #rightSidebar.collapsed {
transform: translateX(100%); transform: translateX(100%);
} }
/* Tab Styles in Sidebar */ /* Tab Styles in Sidebar */
.sidebar-tab { .sidebar-tab {
@apply px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors border-b-2 border-transparent; @apply px-4 py-2 text-sm font-medium text-gray-400 hover:text-white transition-colors border-b-2 border-transparent;
@ -32,75 +32,55 @@
.sidebar-tab.active { .sidebar-tab.active {
@apply text-blue-500 border-blue-500; @apply text-blue-500 border-blue-500;
} }
/* Hide scrollbar for clean UI */ /* Hide scrollbar for clean UI */
.no-scrollbar::-webkit-scrollbar { .no-scrollbar::-webkit-scrollbar {
display: none; display: none;
} }
.no-scrollbar { .no-scrollbar {
-ms-overflow-style: none; -ms-overflow-style: none;
scrollbar-width: none; scrollbar-width: none;
} }
/* Chart type button active state */
.chart-type-btn.active {
background-color: #2d3a4f;
color: #3b82f6;
}
/* Chart type button hover effect */
.chart-type-btn:hover {
background-color: #2d3a4f;
}
</style> </style>
</head> </head>
<body class="flex flex-col h-screen overflow-hidden bg-[#0d1421] text-white font-['Inter']"> <body class="flex flex-col h-screen overflow-hidden bg-[#0d1421] text-white font-['Inter']">
<!-- Top Navigation Bar --> <!-- Top Navigation Bar -->
<header class="bg-[#0f131e] fixed top-0 w-full z-[60] h-16 px-4 flex items-center justify-between border-b border-[#1b1f2b]"> <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 shrink-0"> <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 --> <!-- Search/Symbol Button -->
<div class="flex items-center space-x-2 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]"> <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="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
<span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span> <span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
<span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span> <span class="material-symbols-outlined text-sm text-[#8fa2b3]">chevron_right</span>
</div> </div>
<!-- Desktop Status (Moved inside the left-aligned group) --> <!-- Mobile Search -->
<div class="hidden lg:flex items-center gap-2 ml-6 shrink-0 border-l border-[#2d3a4f] pl-6"> <div class="md:hidden flex items-center bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]">
<div class="w-2 h-2 rounded-full bg-green-500" id="statusDot"></div> <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
<span class="text-xs text-[#8fa2b3]" id="statusText">Live</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> </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>
<!-- Scrollable Controls Container (Right-aligned on desktop via parent justify-between) --> <div class="flex space-x-1 items-center overflow-x-auto no-scrollbar" id="timeframeContainer">
<div class="flex-1 md:flex-none flex items-center gap-2 ml-4 overflow-x-auto no-scrollbar touch-pan-x justify-end" style="-webkit-overflow-scrolling: touch;"> <!-- Timeframes injected by JS -->
<!-- Chart Type Buttons -->
<div class="flex space-x-1 shrink-0">
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="candlestick" title="Candlestick">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v3M7 16v3M17 3v2M17 11v4"/><rect x="5" y="8" width="4" height="8" rx="0.5"/><rect x="15" y="5" width="4" height="6" rx="0.5"/></svg>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="line" title="Line">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/></svg>
</button>
<button class="chart-type-btn w-10 h-10 flex items-center justify-center text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded transition-colors" data-chart-type="bar" title="Bar">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M7 5v14M7 10H5M7 15h2M17 5v14M17 7h-2M17 12h2"/></svg>
</button>
</div>
<!-- Separator -->
<div class="w-px h-8 bg-[#2d3a4f] mx-1 shrink-0"></div>
<!-- Timeframes Container -->
<div class="flex space-x-1 items-center shrink-0" id="timeframeContainer">
<!-- Timeframes injected by JS -->
</div>
</div> </div>
</header> </header>
<div class="flex flex-1 pt-16 overflow-hidden"> <div class="flex flex-1 pt-16 overflow-hidden">
<!-- Main Content --> <!-- Main Content -->
<main class="flex-1 flex flex-col overflow-y-auto pb-20 md:pb-0 no-scrollbar"> <main class="flex-1 overflow-y-auto pb-20 md:pb-0 no-scrollbar">
<!-- Price Statistics --> <!-- 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]"> <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> <div>
@ -121,161 +101,61 @@
</div> </div>
</section> </section>
<!-- Chart Container --> <!-- Chart Container -->
<section class="relative w-full bg-[#0d1421] flex-1 min-h-[50vh]" 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>
<!-- Drawing Layer Overlay -->
<canvas id="drawingLayer" class="absolute inset-0 pointer-events-none z-20 w-full h-full"></canvas>
<!-- Horizontal Drawing Toolbar (Top) --> <!-- Vertical Drawing Toolbar (Left) -->
<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"> <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">
<button class="w-8 h-8 text-gray-400 hover:text-white hover:bg-[#2d3a4f] rounded flex items-center justify-center transition-colors" data-tool="trend_line" onclick="window.activateDrawingTool('trend_line', event)" title="Trend 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('cursor')" title="Cursor">
<span class="material-symbols-outlined text-sm">near_me</span>
</button>
<div class="w-full h-[1px] bg-[#2d3a4f] my-0.5"></div>
<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">call_split</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" data-tool="horizontal_line" onclick="window.activateDrawingTool('horizontal_line', event)" title="Horizontal 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('ray')" title="Ray">
<span class="material-symbols-outlined text-sm">trending_flat</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')" title="Horizontal Line">
<span class="material-symbols-outlined text-sm">swap_horizontal_circle</span> <span class="material-symbols-outlined text-sm">swap_horizontal_circle</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" data-tool="vertical_line" onclick="window.activateDrawingTool('vertical_line', event)" 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('vertical_line')" title="Vertical Line">
<span class="material-symbols-outlined text-sm">swap_vert</span> <span class="material-symbols-outlined text-sm">swap_vert</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" data-tool="rectangle" onclick="window.activateDrawingTool('rectangle', event)" title="Rectangle"> <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>
</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')" title="Rectangle">
<span class="material-symbols-outlined text-sm">crop_square</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" data-tool="text" onclick="window.activateDrawingTool('text', event)" title="Text Label"> <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">
<span class="material-symbols-outlined text-sm">text_fields</span> <span class="material-symbols-outlined text-sm">text_fields</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" data-tool="arrow_pointer" onclick="window.activateDrawingTool('arrow_pointer', event)" title="Arrow Pointer"> <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">
<span class="material-symbols-outlined text-sm">call_made</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" data-tool="arrow_up" onclick="window.activateDrawingTool('arrow_up', event)" title="Arrow Up">
<span class="material-symbols-outlined text-sm">arrow_upward</span> <span class="material-symbols-outlined text-sm">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" data-tool="arrow_down" onclick="window.activateDrawingTool('arrow_down', event)" 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('arrow_down')" title="Arrow Down">
<span class="material-symbols-outlined text-sm">arrow_downward</span> <span class="material-symbols-outlined text-sm">arrow_downward</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" data-tool="arrow_left" onclick="window.activateDrawingTool('arrow_left', event)" title="Arrow Left"> <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">
<span class="material-symbols-outlined text-sm">arrow_back</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" data-tool="arrow_right" onclick="window.activateDrawingTool('arrow_right', event)" title="Arrow Right">
<span class="material-symbols-outlined text-sm">arrow_forward</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" data-tool="measure" onclick="window.activateDrawingTool('measure', event)" title="Measure">
<span class="material-symbols-outlined text-sm">straighten</span> <span class="material-symbols-outlined text-sm">straighten</span>
</button> </button>
<div class="w-[1px] h-full bg-[#2d3a4f] mx-0.5"></div> <div class="w-full h-[1px] bg-[#2d3a4f] my-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"> <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">delete</span> <span class="material-symbols-outlined text-sm">delete</span>
</button> </button>
</div> </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 --> <!-- 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">
@ -320,7 +200,7 @@
<input type="color" id="candleDownColor" 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>
</div> </div>
<!-- Decimals --> <!-- Decimals -->
<div class="px-4 py-2 flex items-center justify-between"> <div class="px-4 py-2 flex items-center justify-between">
<label class="text-sm text-gray-300">Decimals</label> <label class="text-sm text-gray-300">Decimals</label>
@ -328,7 +208,7 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Navigation Controls --> <!-- 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"> <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"> <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">
@ -343,24 +223,25 @@
</div> </div>
</section> </section>
<!-- Draggable Divider -->
<div id="mainChartResizer" class="h-4 bg-[#1e293b] hover:bg-blue-500 cursor-row-resize shrink-0 transition-colors z-20 flex items-center justify-center group relative">
<div class="w-10 h-0.5 bg-gray-500 rounded opacity-50 transition-all"></div>
</div>
<!-- Technical Analysis Section --> <!-- Technical Analysis Section -->
<section class="px-4 py-4 bg-[#0d1421] shrink-0" id="taPanel"> <section class="px-4 py-6 bg-[#0d1421] min-h-[300px]" id="taPanel">
<div class="flex items-center justify-between mb-4"> <div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold flex items-center gap-2"> <h2 class="text-lg font-bold flex items-center gap-2">
<span class="material-symbols-outlined text-[#b6c4ff]">analytics</span> <span class="material-symbols-outlined text-[#b6c4ff]">analytics</span>
Technical Analysis 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> <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> </h2>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span> <span id="taLastUpdate" class="text-xs text-gray-600 mr-2 hidden sm:inline-block">--</span>
</div> <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>
<div id="taContent" class="grid grid-cols-2 md:grid-cols-4 gap-4"> <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 class="text-gray-500 text-sm p-4 text-center w-full col-span-full">Loading analysis data...</div>
</div> </div>
@ -436,13 +317,13 @@
<span class="material-symbols-outlined">close</span> <span class="material-symbols-outlined">close</span>
</button> </button>
</div> </div>
<!-- Desktop Sidebar Toggle --> <!-- 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"> <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> <span class="material-symbols-outlined text-sm">menu</span>
</button> </button>
<div class="flex-1 overflow-y-auto p-0 sidebar-content bg-[#0d1421] no-scrollbar"> <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 class="sidebar-tab-panel active h-full" id="tab-indicators">
<div id="indicatorPanel" class="p-2"> <div id="indicatorPanel" class="p-2">
<!-- Indicators content injected here --> <!-- Indicators content injected here -->
@ -475,7 +356,7 @@
window.toggleSidebarDisplay = function(tabName) { window.toggleSidebarDisplay = function(tabName) {
const sidebar = document.getElementById('rightSidebar'); const sidebar = document.getElementById('rightSidebar');
if (!sidebar) return; if (!sidebar) return;
const isOpen = !sidebar.classList.contains('collapsed'); const isOpen = !sidebar.classList.contains('collapsed');
const activeTab = document.querySelector('.sidebar-tab.active'); const activeTab = document.querySelector('.sidebar-tab.active');
const currentTabName = activeTab ? activeTab.dataset.tab : null; const currentTabName = activeTab ? activeTab.dataset.tab : null;
@ -488,7 +369,7 @@
// Otherwise, OPEN it (remove collapsed) and switch tab // Otherwise, OPEN it (remove collapsed) and switch tab
sidebar.classList.remove('collapsed'); sidebar.classList.remove('collapsed');
if (tabName) { if (tabName) {
// Find and click the hidden tab button to trigger existing logic // Find and click the hidden tab button to trigger existing logic
const tabBtn = document.querySelector(`.sidebar-tab[data-tab="${tabName}"]`); const tabBtn = document.querySelector(`.sidebar-tab[data-tab="${tabName}"]`);
@ -516,106 +397,8 @@
} }
} }
}; };
window.hideSidebar = function() {
const sidebar = document.getElementById('rightSidebar');
if (sidebar && !sidebar.classList.contains('collapsed')) {
sidebar.classList.add('collapsed');
}
};
window.hideSidebarAndClearDrawings = function() {
window.hideSidebar();
if (window.dashboard?.drawingManager) {
window.dashboard.drawingManager.clearAll();
}
};
// Chart Resizer Logic
document.addEventListener('DOMContentLoaded', () => {
const resizer = document.getElementById('mainChartResizer');
const chartWrapper = document.getElementById('chartWrapper');
let isResizing = false;
let lastDownY = 0;
let savedHeight = localStorage.getItem('chart_height');
if (resizer && chartWrapper) {
if (savedHeight) {
chartWrapper.style.flex = 'none';
chartWrapper.style.height = savedHeight + 'px';
}
const startResize = (y) => {
isResizing = true;
lastDownY = y;
document.body.style.cursor = 'row-resize';
chartWrapper.style.pointerEvents = 'none';
};
const doResize = (y) => {
if (!isResizing) return;
const deltaY = y - lastDownY;
lastDownY = y;
const newHeight = chartWrapper.offsetHeight + deltaY;
if (newHeight > 200 && newHeight < window.innerHeight - 150) {
chartWrapper.style.flex = 'none';
chartWrapper.style.height = newHeight + 'px';
if (window.dashboard && window.dashboard.chart) {
const container = document.getElementById('chart');
window.dashboard.chart.applyOptions({
width: container.clientWidth,
height: container.clientHeight
});
}
}
};
const endResize = () => {
if (isResizing) {
isResizing = false;
document.body.style.cursor = '';
chartWrapper.style.pointerEvents = 'auto';
const currentHeight = chartWrapper.style.height;
localStorage.setItem('chart_height', currentHeight ? parseFloat(currentHeight) : 75);
}
};
resizer.addEventListener('mousedown', (e) => startResize(e.clientY));
resizer.addEventListener('touchstart', (e) => startResize(e.touches[0].clientY), {passive: false});
document.addEventListener('mousemove', (e) => doResize(e.clientY));
document.addEventListener('touchmove', (e) => doResize(e.touches[0].clientY), {passive: false});
document.addEventListener('mouseup', endResize);
document.addEventListener('touchend', endResize);
document.addEventListener('touchcancel', endResize);
}
});
// Hide sidebar when clicking on chart container (but not on drawing toolbar or sidebar itself)
const chartWrapper = document.getElementById('chartWrapper');
if (chartWrapper) {
chartWrapper.addEventListener('click', function(e) {
const sidebar = document.getElementById('rightSidebar');
const drawingToolbar = document.getElementById('drawingToolbar');
if (!sidebar || sidebar.classList.contains('collapsed')) return;
const isDrawingToolbar = e.target.closest('#drawingToolbar');
const isSidebar = e.target.closest('#rightSidebar');
if (!isDrawingToolbar && !isSidebar) {
hideSidebar();
}
});
}
</script> </script>
<script src="./config.js"></script> <script src="./config.js"></script>
<script type="module" src="./js/app.js"></script> <script type="module" src="./js/app.js"></script>
</body> </body>

1057
js/ui/chart.js
View File

File diff suppressed because it is too large Load Diff

1617
js/ui/drawing-tools.js
View File

File diff suppressed because it is too large Load Diff