From 76d85a97b50fbd01cfe82ac62004a6af78e3ad5d Mon Sep 17 00:00:00 2001
From: tab888 <tab10.acer@gmail.com>
Date: Sun, 8 Feb 2026 01:57:21 +0800
Subject: [PATCH] same as last version but work in mobile devices and docker
 enviroment

---
 templates/index.html | 102 ++++++++++++++++---------------------------
 1 file changed, 37 insertions(+), 65 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 2bf2c28..d0df754 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -181,50 +181,27 @@
             font-size: 0.85rem;
             letter-spacing: 0.5px;
         }
-
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --header-bg: #1a202c; 
-                --sticky-bg: #2d3748; 
-                --sticky-bg-alt: #1a202c;
-            }
-            
-            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; 
-        }
+				/* 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) {
+		    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; }
+		}
+		        
 
     </style>
 </head>
@@ -353,27 +330,22 @@
             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"); 
-                
-                // 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 
-                });
-                syncDisplay.innerText = result.last_sync;
-                syncDisplay.classList.add('text-success');
-                setTimeout(() => syncDisplay.classList.remove('text-success'), 2000);
-            }
-
-            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>';
-                return;
-            }
+	        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'));
+	            
+	            document.getElementById('lastSyncTime').innerText = dateObj.toLocaleTimeString([], { 
+	                hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false 
+	            });
+	        }
+	        // --- FIX: Extract data from result ---
+	        const data = result.data; 
+	
+	        if (!data || data.length === 0) {
+	            tbody.innerHTML = '<tr><td colspan="14" class="text-center signal-neutral">No data found.</td></tr>';
+	            return;
+	        }
 
             let htmlContent = '';
             const todayStr = new Date().toISOString().split('T')[0];