make website responsive

webapp/static/css/style.css

@@ -204,6 +204,7 @@ h4,
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
+    padding: 0 1rem;
 }
 
 .nav-brand {
@@ -213,6 +214,7 @@ h4,
     gap: 0.65rem;
     font-weight: 700;
     font-size: 1.2rem;
+    flex-shrink: 0;
 }
 
 .brand-icon,
@@ -232,6 +234,36 @@ h4,
     flex-wrap: wrap;
 }
 
+.hamburger-menu {
+    display: none;
+    flex-direction: column;
+    gap: 5px;
+    cursor: pointer;
+    background: transparent;
+    border: none;
+    padding: 8px;
+}
+
+.hamburger-menu span {
+    width: 25px;
+    height: 3px;
+    background: var(--white);
+    border-radius: 2px;
+    transition: all 0.3s ease;
+}
+
+.hamburger-menu.active span:nth-child(1) {
+    transform: rotate(45deg) translate(10px, 10px);
+}
+
+.hamburger-menu.active span:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger-menu.active span:nth-child(3) {
+    transform: rotate(-45deg) translate(7px, -7px);
+}
+
 .nav-link {
     color: rgba(255, 255, 255, 0.92);
     text-decoration: none;
@@ -1427,14 +1459,108 @@ h4,
     color: var(--danger);
 }
 
+/* Tablet optimizations */
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    }
+
+    .info-section {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .workflow-steps {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .footer-content {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .auth-box {
+        width: min(90vw, 400px);
+    }
+
+    .btn {
+        min-height: 40px;
+        padding: 0.6rem 0.9rem;
+    }
+}
+
 /* Responsive Design */
 @media (max-width: 960px) {
+    .hamburger-menu {
+        display: flex;
+    }
+
     .nav-menu {
-        gap: 0.4rem;
+        position: fixed;
+        top: 74px;
+        left: -100%;
+        width: 100%;
+        height: calc(100vh - 74px);
+        background: linear-gradient(130deg, rgba(8, 42, 99, 0.98), rgba(15, 85, 199, 0.95));
+        backdrop-filter: blur(8px);
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 0;
+        padding: 1rem 0;
+        transition: left 0.3s ease;
+        z-index: 99;
     }
 
-    .user-greeting {
+    .nav-menu.active {
+        left: 0;
+    }
+
+    .nav-link, .dropdown-btn {
+        width: 100%;
+        padding: 0.75rem 1rem;
+        border-radius: 0;
+        justify-content: flex-start;
+    }
+
+    .dropdown-content {
+        position: static;
+        background: rgba(255, 255, 255, 0.1);
+        border: none;
+        box-shadow: none;
+        padding: 0;
         display: none;
+        width: 100%;
+    }
+
+    .dropdown:hover .dropdown-content {
+        display: none;
+    }
+
+    .dropdown.active .dropdown-content {
+        display: block;
+    }
+
+    .dropdown-content a {
+        padding: 0.6rem 1rem;
+        padding-left: 2rem;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .dropdown-content a:hover {
+        background: rgba(255, 255, 255, 0.15);
+    }
+
+    .user-greeting {
+        width: 100%;
+        padding: 0.75rem 1rem;
+        display: block;
+        color: rgba(255, 255, 255, 0.9);
+    }
+
+    .nav-menu {
+        gap: 0.4rem;
     }
 
     .nav-container {
@@ -1447,7 +1573,8 @@ h4,
     }
 
     .dashboard-grid,
-    .live-camera-layout {
+    .live-camera-layout,
+    .info-section {
         grid-template-columns: 1fr;
     }
 
@@ -1477,16 +1604,6 @@ h4,
 }
 
 @media (max-width: 640px) {
-    .nav-menu {
-        gap: 0.3rem;
-    }
-
-    .nav-link,
-    .dropdown-btn {
-        padding: 0.45rem 0.6rem;
-        font-size: 0.9rem;
-    }
-
     .container,
     .nav-container,
     .dashboard-container,
@@ -1523,6 +1640,7 @@ h4,
     .btn {
         padding: 0.64rem 1rem;
         font-size: 0.95rem;
+        min-height: 44px;
     }
 
     .btn-large {
@@ -1535,7 +1653,8 @@ h4,
 
     .stats-grid,
     .features-grid,
-    .tech-grid {
+    .tech-grid,
+    .info-section {
         grid-template-columns: 1fr;
     }
 
@@ -1550,6 +1669,7 @@ h4,
 
     .dashboard-grid {
         gap: 0.8rem;
+        grid-template-columns: 1fr;
     }
 
     .dashboard-card {
@@ -1573,12 +1693,29 @@ h4,
     }
 
     #toast-container {
-        left: 20px;
-        right: 20px;
+        left: 1rem;
+        right: 1rem;
+        top: 80px;
     }
 
     .toast {
         min-width: unset;
+        width: 100%;
+    }
+
+    .auth-box {
+        padding: 1.5rem;
+        margin: 1rem;
+    }
+
+    .file-info {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .upload-section,
+    .results-section {
+        padding: 1rem;
     }
 }
 
@@ -1628,6 +1765,92 @@ h4,
     .results-summary {
         grid-template-columns: 1fr;
     }
+
+    /* Improve form inputs on mobile */
+    .form-group input,
+    .form-group select,
+    .form-group textarea {
+        font-size: 16px; /* Prevents auto-zoom on iOS */
+        min-height: 44px; /* Better touch target */
+    }
+
+    .btn {
+        min-height: 44px;
+    }
+
+    /* Better spacing for small screens */
+    .auth-box {
+        padding: 1.2rem;
+    }
+
+    .dashboard-card {
+        padding: 0.8rem;
+    }
+
+    .info-card {
+        padding: 1rem;
+    }
+
+    /* Video container improvements */
+    #video-container {
+        min-height: 250px;
+    }
+
+    .live-camera-layout {
+        gap: 0.8rem;
+    }
+
+    /* Modal improvements */
+    .modal-content {
+        border-radius: 16px;
+        width: 90vw;
+    }
+
+    .modal-body {
+        padding: 1rem;
+    }
+
+    .modal-footer {
+        padding: 1rem;
+        flex-direction: column;
+        gap: 0.6rem;
+    }
+
+    .modal-footer .btn {
+        width: 100%;
+    }
+
+    /* Dropdown menu improvements */
+    .dropdown-content {
+        position: fixed !important;
+        left: 0 !important;
+        right: 0 !important;
+        top: auto !important;
+        bottom: 0 !important;
+        border-radius: 16px 16px 0 0 !important;
+        max-height: 60vh;
+        overflow-y: auto;
+        padding: 1rem 0 !important;
+    }
+
+    .dropdown-content a {
+        padding: 1rem !important;
+    }
+
+    /* Grid improvements */
+    .framewise-list,
+    .stats-grid {
+        grid-template-columns: 1fr;
+    }
+
+    /* Toast positioning */
+    #toast-container {
+        top: 74px;
+    }
+
+    .toast {
+        margin: 0.5rem;
+    }
 }
 
 /* Landscape orientation adjustments */

webapp/templates/dashboard.html

@@ -27,10 +27,15 @@
                 <span class="brand-icon">👁️</span>
                 <span>NETRA</span>
             </div>
-            <div class="nav-menu">
+            <button class="hamburger-menu" id="hamburger-toggle">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <div class="nav-menu" id="nav-menu">
                 <a href="{{ url_for('dashboard') }}" class="nav-link" style="opacity: 0.7;">Dashboard</a>
-                <div class="dropdown">
-                    <button class="nav-link dropdown-btn">📊 Analysis ▼</button>
+                <div class="dropdown" id="analysis-dropdown">
+                    <button class="nav-link dropdown-btn" onclick="toggleDropdown(event)">📊 Analysis ▼</button>
                     <div class="dropdown-content">
                         <a href="{{ url_for('live_camera') }}" onclick="showLoadingToast()">📹 Live Camera</a>
                         <a href="{{ url_for('video_analysis') }}" onclick="showLoadingToast()">📋 Video Analysis</a>
@@ -166,6 +171,41 @@
     <script src="{{ url_for('static', filename='js/ui-utils.js') }}"></script>
     
     <script>
+        // Mobile menu toggle
+        const hamburger = document.getElementById('hamburger-toggle');
+        const navMenu = document.getElementById('nav-menu');
+        
+        if (hamburger) {
+            hamburger.addEventListener('click', function(e) {
+                e.stopPropagation();
+                hamburger.classList.toggle('active');
+                navMenu.classList.toggle('active');
+            });
+        }
+
+        // Close menu when clicking on a link
+        document.querySelectorAll('.nav-link, .nav-menu a').forEach(link => {
+            link.addEventListener('click', function() {
+                hamburger.classList.remove('active');
+                navMenu.classList.remove('active');
+            });
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.nav-container')) {
+                hamburger?.classList.remove('active');
+                navMenu?.classList.remove('active');
+            }
+        });
+
+        // Dropdown toggle for mobile
+        function toggleDropdown(e) {
+            e.preventDefault();
+            const dropdown = e.target.closest('.dropdown');
+            dropdown.classList.toggle('active');
+        }
+
         // Show loading toast on navigation
         function showLoadingToast() {
             toast.info('🔄 Loading...', 1500);

webapp/templates/live_camera.html

@@ -249,10 +249,15 @@
                 <span class="brand-icon">👁️</span>
                 <span>NETRA</span>
             </div>
-            <div class="nav-menu">
+            <button class="hamburger-menu" id="hamburger-toggle">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <div class="nav-menu" id="nav-menu">
                 <a href="{{ url_for('dashboard') }}" class="nav-link">Dashboard</a>
-                <div class="dropdown">
-                    <button class="nav-link dropdown-btn">📊 Analysis ▼</button>
+                <div class="dropdown" id="analysis-dropdown">
+                    <button class="nav-link dropdown-btn" onclick="toggleDropdown(event)">📊 Analysis ▼</button>
                     <div class="dropdown-content">
                         <a href="{{ url_for('live_camera') }}" style="opacity: 0.6;">📹 Live Camera</a>
                         <a href="{{ url_for('video_analysis') }}">📋 Video Analysis</a>
@@ -477,5 +482,42 @@
     <!-- Load UI Utilities and Live Camera Script -->
     <script src="{{ url_for('static', filename='js/ui-utils.js') }}"></script>
     <script src="{{ url_for('static', filename='js/live_camera.js') }}"></script>
+    
+    <script>
+        // Mobile menu toggle
+        const hamburger = document.getElementById('hamburger-toggle');
+        const navMenu = document.getElementById('nav-menu');
+        
+        if (hamburger) {
+            hamburger.addEventListener('click', function(e) {
+                e.stopPropagation();
+                hamburger.classList.toggle('active');
+                navMenu.classList.toggle('active');
+            });
+        }
+
+        // Close menu when clicking on a link
+        document.querySelectorAll('.nav-link, .nav-menu a').forEach(link => {
+            link.addEventListener('click', function() {
+                hamburger?.classList.remove('active');
+                navMenu?.classList.remove('active');
+            });
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.nav-container')) {
+                hamburger?.classList.remove('active');
+                navMenu?.classList.remove('active');
+            }
+        });
+
+        // Dropdown toggle for mobile
+        function toggleDropdown(e) {
+            e.preventDefault();
+            const dropdown = e.target.closest('.dropdown');
+            dropdown.classList.toggle('active');
+        }
+    </script>
 </body>
 </html>

webapp/templates/video_analysis.html

@@ -318,10 +318,15 @@
                 <span class="brand-icon">👁️</span>
                 <span>NETRA</span>
             </div>
-            <div class="nav-menu">
+            <button class="hamburger-menu" id="hamburger-toggle">
+                <span></span>
+                <span></span>
+                <span></span>
+            </button>
+            <div class="nav-menu" id="nav-menu">
                 <a href="{{ url_for('dashboard') }}" class="nav-link">Dashboard</a>
-                <div class="dropdown">
-                    <button class="nav-link dropdown-btn">📊 Analysis ▼</button>
+                <div class="dropdown" id="analysis-dropdown">
+                    <button class="nav-link dropdown-btn" onclick="toggleDropdown(event)">📊 Analysis ▼</button>
                     <div class="dropdown-content">
                         <a href="{{ url_for('live_camera') }}">📹 Live Camera</a>
                         <a href="{{ url_for('video_analysis') }}" style="opacity:0.6;">📋 Video Analysis</a>
@@ -496,5 +501,42 @@
 
     <script src="{{ url_for('static', filename='js/ui-utils.js') }}"></script>
     <script src="{{ url_for('static', filename='js/video_analysis.js') }}"></script>
+    
+    <script>
+        // Mobile menu toggle
+        const hamburger = document.getElementById('hamburger-toggle');
+        const navMenu = document.getElementById('nav-menu');
+        
+        if (hamburger) {
+            hamburger.addEventListener('click', function(e) {
+                e.stopPropagation();
+                hamburger.classList.toggle('active');
+                navMenu.classList.toggle('active');
+            });
+        }
+
+        // Close menu when clicking on a link
+        document.querySelectorAll('.nav-link, .nav-menu a').forEach(link => {
+            link.addEventListener('click', function() {
+                hamburger?.classList.remove('active');
+                navMenu?.classList.remove('active');
+            });
+        });
+
+        // Close menu when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.nav-container')) {
+                hamburger?.classList.remove('active');
+                navMenu?.classList.remove('active');
+            }
+        });
+
+        // Dropdown toggle for mobile
+        function toggleDropdown(e) {
+            e.preventDefault();
+            const dropdown = e.target.closest('.dropdown');
+            dropdown.classList.toggle('active');
+        }
+    </script>
 </body>
 </html>