Update app.py

app.py

@@ -31,19 +31,19 @@ HTML_TEMPLATE = """
     <title>ПУ Android</title>
     <style>
         body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f2f5; color: #333; display: flex; flex-direction: column; min-height: 100vh; font-size: 16px; -webkit-text-size-adjust: 100%; }
-        header { background-color: #333; color: white; padding: 10px 15px; display: flex; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
+        header { background-color: #333; color: white; padding: 10px 15px; display: flex; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; width: 100%; z-index: 1001;}
         .menu-toggle { font-size: 1.5em; background: none; border: none; color: white; cursor: pointer; margin-right: 15px; padding: 5px; }
         header h1 { font-size: 1.2em; margin: 0; flex-grow: 1; text-align: center; }
-        .main-container { display: flex; flex-grow: 1; overflow: hidden; }
-        .sidebar { width: 250px; background-color: #3f3f3f; color: white; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s ease-in-out; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; overflow-y: auto; }
+        .main-container { display: flex; flex-grow: 1; overflow: hidden; margin-top: 50px; /* Adjusted for fixed header */ }
+        .sidebar { width: 250px; background-color: #3f3f3f; color: white; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s ease-in-out; position: fixed; top: 0; left: 0; height: 100vh; z-index: 1000; overflow-y: auto; padding-top: 60px; /* Ensure content starts below header */ }
         .sidebar.open { transform: translateX(0); box-shadow: 3px 0 6px rgba(0,0,0,0.2); }
-        .sidebar h2 { margin-top: 40px; font-size: 1.1em; border-bottom: 1px solid #555; padding-bottom: 10px; }
+        .sidebar h2 { margin-top: 0px; font-size: 1.1em; border-bottom: 1px solid #555; padding-bottom: 10px; }
         .sidebar ul { list-style: none; padding: 0; margin: 0; }
         .sidebar ul li a { color: #ddd; text-decoration: none; display: block; padding: 12px 10px; border-radius: 4px; margin-bottom: 5px; font-size:0.95em; }
         .sidebar ul li a:hover, .sidebar ul li a.active { background-color: #555; color: white; }
         .content-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; }
         .content-overlay.active { display: block; }
-        .content { flex-grow: 1; padding: 15px; box-sizing: border-box; overflow-y: auto; margin-top: 50px; /* Height of header */ }
+        .content { flex-grow: 1; padding: 15px; box-sizing: border-box; overflow-y: auto; /* margin-top: 50px; Removed, handled by main-container */ }
         .container { background-color: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom:15px; }
         .control-section { margin-bottom: 15px; padding: 10px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #f9f9f9; }
         label { display: block; margin-bottom: 6px; font-weight: bold; color: #555; font-size: 0.9em; }
@@ -77,12 +77,11 @@ HTML_TEMPLATE = """
         .notification-item span, .contact-item span { font-size: 0.9em; color: #777; display: block; }
         .contact-item .contact-number { font-weight: normal; }
         
-        @media (min-width: 768px) { /* Desktop styles */
-            body { flex-direction: row; }
-            header { display: none; } /* Hide mobile header on desktop */
-            .sidebar { transform: translateX(0); position: static; height: 100vh; box-shadow: none; }
-            .content { margin-top: 0; }
-            .content-overlay { display: none !important; } /* Never show overlay on desktop */
+        @media (min-width: 768px) { 
+            header { display: none; } 
+            .sidebar { transform: translateX(0); position: static; height: 100vh; box-shadow: none; padding-top: 15px; /* Reset padding for desktop */ }
+            .main-container { margin-top: 0; }
+            .content-overlay { display: none !important; } 
         }
     </style>
     <script>
@@ -101,7 +100,7 @@ HTML_TEMPLATE = """
             if (activeLink) activeLink.classList.add('active');
             currentView = sectionId;
 
-            if (document.querySelector('.sidebar').classList.contains('open')) { // Close menu on mobile after selection
+            if (window.innerWidth < 768 && document.querySelector('.sidebar').classList.contains('open')) { 
                 toggleMenu();
             }
 
@@ -365,7 +364,6 @@ HTML_TEMPLATE = """
             showSection('dashboard');
             setInterval(refreshOutput, 4000);
             refreshOutput(); 
-            // Add event listener for the menu toggle on mobile
             document.querySelector('.menu-toggle').addEventListener('click', toggleMenu);
             document.querySelector('.content-overlay').addEventListener('click', toggleMenu);
         };
@@ -482,7 +480,6 @@ HTML_TEMPLATE = """
         </div>
         <div class="content-overlay"></div>
         <div class="content">
-            <!-- Client Status (visible on all pages potentially) -->
             <div id="clientStatus" class="status offline">Статус клиента неизвестен</div>
 
             <div id="dashboard" class="container">
@@ -634,8 +631,8 @@ HTML_TEMPLATE = """
                     </ul>
                 </div>
             </div>
-        </div> <!-- .content -->
-    </div> <!-- .main-container -->
+        </div> 
+    </div> 
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const outputArea = document.getElementById('outputArea');