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

feat: responsive navigation, scrollable menus, and fullscreen toggle

Browse Source
This commit is contained in:
DiTus
2026-03-20 13:12:09 +01:00
parent de00d603fc
commit 0e8bf8e3bd
1 changed files with 150 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
index.html
View File

@ -3,6 +3,10 @@
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/> <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> <title>Crypto Dashboard - BTC/USD</title>
<link rel="icon" type="image/svg+xml" href="favicon.svg"> <link rel="icon" type="image/svg+xml" href="favicon.svg">
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
@ -42,7 +46,7 @@
<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-50 h-16 px-6 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 space-x-3 bg-[#1a2333] px-3 py-1.5 rounded-md cursor-pointer border border-[#2d3a4f]"> <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="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>
@ -59,125 +63,159 @@
</div> </div>
</header> </header>
<!-- Main Content --> <div class="flex flex-1 pt-16 overflow-hidden">
<main class="flex-1 overflow-y-auto pt-16 pb-20 no-scrollbar"> <!-- Main Content -->
<!-- Price Statistics --> <main class="flex-1 overflow-y-auto pb-20 md:pb-0 no-scrollbar">
<section id="priceHeader" class="grid grid-cols-2 md:grid-cols-4 gap-2 px-4 py-4 border-b border-[#1e293b] bg-[#0d1421]"> <!-- Price Statistics -->
<div> <section id="priceHeader" class="grid grid-cols-2 md:grid-cols-4 gap-2 px-4 py-4 border-b border-[#1e293b] bg-[#0d1421]">
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Price</p> <div>
<p class="text-lg font-bold" id="currentPrice">--</p> <p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Price</p>
</div> <p class="text-lg font-bold" id="currentPrice">--</p>
<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-48 shadow-xl" id="settingsPopup">
<div class="mb-3">
<label class="block text-[10px] text-[#8fa2b3] mb-1 uppercase tracking-wider">Timezone</label>
<select class="w-full bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-xs 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 class="mb-0">
<label class="block text-[10px] text-[#8fa2b3] mb-1 uppercase tracking-wider">Price Format</label>
<select class="w-full bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-xs rounded p-1.5 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" id="priceFormatSelect">
<option value="0">Integer</option>
<option value="2">2 Decimals</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> <div>
<p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">Change</p>
<div id="taContent" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> <p class="text-lg font-bold" id="priceChange">--</p>
<div class="text-gray-500 text-sm p-4 text-center w-full col-span-full">Loading analysis data...</div> </div>
</div> <div>
</section> <p class="text-[10px] text-[#8fa2b3] uppercase font-semibold">High ↗</p>
</main> <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>
<!-- Bottom Navigation --> <!-- Chart Container -->
<nav class="fixed bottom-0 w-full bg-[#0f131e] border-t border-[#1e293b] flex justify-around items-center h-16 z-50 px-2 shadow-[0px_-4px_12px_rgba(0,0,0,0.5)]"> <section class="relative w-full bg-[#0d1421] h-[60vh] md:h-[70vh]" data-purpose="chart-container" id="chartWrapper">
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group"> <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-48 shadow-xl" id="settingsPopup">
<div class="mb-3">
<label class="block text-[10px] text-[#8fa2b3] mb-1 uppercase tracking-wider">Timezone</label>
<select class="w-full bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-xs 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 class="mb-0">
<label class="block text-[10px] text-[#8fa2b3] mb-1 uppercase tracking-wider">Price Format</label>
<select class="w-full bg-[#0d1421] border border-[#2d3a4f] text-gray-300 text-xs rounded p-1.5 focus:ring-1 focus:ring-blue-500 focus:border-blue-500" id="priceFormatSelect">
<option value="0">Integer</option>
<option value="2">2 Decimals</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="material-symbols-outlined group-hover:text-blue-400">show_chart</span>
<span class="text-[10px] font-medium mt-1">Markets</span> <span class="text-[10px] font-medium mt-1">Markets</span>
</div> </div>
<div class="flex flex-col items-center justify-center 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()"> <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="material-symbols-outlined">candlestick_chart</span>
<span class="text-[10px] font-bold mt-1">Chart</span> <span class="text-[10px] font-bold mt-1">Chart</span>
</div> </div>
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group" onclick="toggleSidebarDisplay('indicators')"> <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="material-symbols-outlined group-hover:text-blue-400">query_stats</span>
<span class="text-[10px] font-medium mt-1">Indicators</span> <span class="text-[10px] font-medium mt-1">Indicators</span>
</div> </div>
<div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group" onclick="toggleSidebarDisplay('strategy')"> <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="material-symbols-outlined group-hover:text-blue-400">analytics</span>
<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 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group"> <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="material-symbols-outlined group-hover:text-blue-400">more_horiz</span>
<span class="text-[10px] font-medium mt-1">More</span> <span class="text-[10px] font-medium mt-1">More</span>
</div> </div>
</nav> </nav>
<!-- Sidebar Overlay (Acts as Modal) --> <!-- Sidebar Overlay (Acts as Modal) -->
<div id="rightSidebar" class="collapsed fixed top-[64px] right-0 bottom-[64px] w-full max-w-[350px] 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-[350px] 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]"> <div class="flex justify-between items-center p-3 border-b border-[#2d3a4f] bg-[#1a2333]">
<!-- Hidden tab buttons triggers --> <!-- Hidden tab buttons triggers -->
<div class="flex space-x-2"> <div class="flex space-x-2">
@ -254,6 +292,18 @@
sidebar.classList.add('collapsed'); 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>
<script src="./config.js"></script> <script src="./config.js"></script>