same as last version but work in mobile devices and docker enviroment

templates/index.html

@@ -181,50 +181,27 @@
             font-size: 0.85rem;
             letter-spacing: 0.5px;
         }
+				/* High Contrast Signal Colors - Works in Light & Dark Mode */
+		.signal-up { 
+		    color: #00ff88 !important; /* Vibrant Mint (Visible on any dark bg) */
+		    font-weight: bold !important;
+		}
+		.signal-down { 
+		    color: #ff4d4d !important; /* Vibrant Coral/Red */
+		    font-weight: bold !important;
+		}
+		.signal-neutral { 
+		    color: #e2e8f0 !important; 
+		}
 		
 		@media (prefers-color-scheme: dark) {
-            :root {
-                --header-bg: #1a202c; 
-                --sticky-bg: #2d3748; 
-                --sticky-bg-alt: #1a202c;
+		    body { background-color: #121212 !important; color: #e2e8f0; }
+		    .card { background-color: #1a202c !important; border: 1px solid #2d3748; }
+		    
+		    /* Ensure table text doesn't turn grey on mobile */
+		    .table { color: #e2e8f0 !important; }
 		}
 		        
-            body {
-                background-color: #121212 !important;
-                color: #e2e8f0;
-            }
-
-            .card, .card-header {
-                background-color: #2d3748 !important;
-                color: white;
-                border-color: #4a5568;
-            }
-
-            .table td { 
-                border-color: #4a5568; 
-                color: #e2e8f0; 
-            }
-
-            /* HIGH CONTRAST FOR DARK MODE */
-            .text-danger {
-                color: #ff6b6b !important; /* Vibrant Red-Coral */
-                font-weight: 700;
-            }
-            .text-success {
-                color: #51cf66 !important; /* Vibrant Mint-Green */
-                font-weight: 700;
-            }
-            .text-muted {
-                color: #a0aec0 !important; /* Lightened grey */
-            }
-        }
-
-        #loading { 
-            display: none; 
-            margin-left: 10px; 
-            font-size: 0.8rem; 
-            color: #888; 
-        }
 
     </style>
 </head>
@@ -353,25 +330,20 @@
             const result = await response.json(); 
 
             // 1. Update Sync Time
-            if (syncDisplay && result.last_sync) {
-                // Create a Date object from the GMT string
-                const gmtDate = new Date(result.last_sync + " UTC"); 
+	        if (result.last_sync) {
+	            // Ensure format is ISO compliant for mobile browsers
+	            const dateStr = result.last_sync.replace(' ', 'T'); 
+	            const dateObj = new Date(dateStr + (dateStr.includes('Z') ? '' : 'Z'));
 	            
-                // Convert to local browser format (e.g., 14:30:05 or 2:30 PM)
-                const localTime = gmtDate.toLocaleTimeString([], { 
-                    hour: '2-digit', 
-                    minute: '2-digit', 
-                    second: '2-digit',
-                    hour12: false 
+	            document.getElementById('lastSyncTime').innerText = dateObj.toLocaleTimeString([], { 
+	                hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false 
 	            });
-                syncDisplay.innerText = result.last_sync;
-                syncDisplay.classList.add('text-success');
-                setTimeout(() => syncDisplay.classList.remove('text-success'), 2000);
 	        }
-
+	        // --- FIX: Extract data from result ---
 	        const data = result.data; 
+	
 	        if (!data || data.length === 0) {
-                tbody.innerHTML = '<tr><td colspan="14" class="p-4 text-center">No data found. Please run Sync.</td></tr>';
+	            tbody.innerHTML = '<tr><td colspan="14" class="text-center signal-neutral">No data found.</td></tr>';
 	            return;
 	        }