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

72
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,8 +63,9 @@
</div> </div>
</header> </header>
<div class="flex flex-1 pt-16 overflow-hidden">
<!-- Main Content --> <!-- Main Content -->
<main class="flex-1 overflow-y-auto pt-16 pb-20 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>
@ -146,38 +151,71 @@
</div> </div>
</div> </div>
<div id="taContent" class="grid grid-cols-1 md:grid-cols-2 lg: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>
</section> </section>
</main> </main>
<!-- Bottom Navigation --> <!-- Right-Side Sidebar Navigation (Desktop/Horizontal) -->
<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)]"> <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 text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group"> <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>