From 0e8bf8e3bd71092e7b6136b1aa298b49caaea78c Mon Sep 17 00:00:00 2001
From: DiTus <ditus@o2.pl>
Date: Fri, 20 Mar 2026 13:12:09 +0100
Subject: [PATCH] feat: responsive navigation, scrollable menus, and fullscreen
 toggle

---
 index.html | 250 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 150 insertions(+), 100 deletions(-)
diff --git a/index.html b/index.html
index a8bd749..0e155a7 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,10 @@
 <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>
@@ -42,7 +46,7 @@
 <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-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]">
             <span class="material-symbols-outlined text-sm text-[#8fa2b3]">search</span>
             <span class="font-bold text-sm text-[#dfe2f2]">BTC/USD</span>
@@ -59,125 +63,159 @@
         </div>
     </header>
 
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto pt-16 pb-20 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>
-             
-             <!-- 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 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>
-            
-            <div id="taContent" class="grid grid-cols-1 md:grid-cols-2 lg: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>
+                <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>
 
-    <!-- Bottom Navigation -->
-    <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)]">
-        <div class="flex flex-col items-center justify-center text-[#c3c5d8] hover:text-[#dfe2f2] hover:scale-105 transition-all duration-200 cursor-pointer group">
+            <!-- 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 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 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="text-[10px] font-bold mt-1">Chart</span>
         </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="text-[10px] font-medium mt-1">Indicators</span>
         </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="text-[10px] font-medium mt-1">Strategy</span>
         </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="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 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]">
              <!-- Hidden tab buttons triggers -->
              <div class="flex space-x-2">
@@ -254,6 +292,18 @@
                 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>
