Pārlūkot izejas kodu

feat: auto dark theme

TomyJan 1 gadu atpakaļ
vecāks
revīzija
a17f48d32c
3 mainītis faili ar 68 papildinājumiem un 2 dzēšanām
  1. 16 0
      chart.html
  2. 39 2
      index.html
  3. 13 0
      results.html

+ 16 - 0
chart.html

@@ -20,6 +20,22 @@
 		width:100%;
 		height:100%;
 	}
+        body {
+            background: #ffffff;
+            color: #000000;
+            transition: background 0.3s, color 0.3s;
+        }
+
+        /* 深色模式适配 */
+        @media (prefers-color-scheme: dark) {
+            body {
+                background: #121212;
+                color: #e0e0e0;
+            }
+            canvas {
+                background: #1e1e1e;
+            }
+        }
         </style>
 </head>
 

+ 39 - 2
index.html

@@ -15,7 +15,7 @@ var url_report='./backend/report.php';
 var milestone=0;
 var key_prefix=Date.parse(new Date());
 s.onupdate=function(data){ //callback to update data in UI
-    I("ip").textContent=data.clientIp;
+    I("ip").textContent=data.clientIp || "获取失败";
     I("dlText").textContent=(data.testState==1&&data.dlStatus==0)?"...":data.dlStatus;
     I("ulText").textContent=(data.testState==3&&data.ulStatus==0)?"...":data.ulStatus;
     I("pingText").textContent=data.pingStatus;
@@ -66,7 +66,7 @@ function initUI(){
 	I("ulText").textContent="";
 	I("pingText").textContent="";
 	I("jitText").textContent="";
-	I("ip").textContent="";
+	I("ip").textContent="测速后获取";
 }
 
 function I(id){return document.getElementById(id);}
@@ -192,6 +192,43 @@ function I(id){return document.getElementById(id);}
 		background-color:#90BBFF;
 	}
 
+	@media (prefers-color-scheme: dark) {
+        html, body {
+            background: #181818;
+            color: #E0E0E0;
+        }
+        h1 {
+            color: #FFFFFF;
+        }
+        #startStopBtn {
+            color: #AAAAFF;
+            border-color: #AAAAFF;
+        }
+        #startStopBtn:hover {
+            box-shadow: 0 0 2em rgba(255, 255, 255, 0.1), inset 0 0 1em rgba(255, 255, 255, 0.1);
+        }
+        #startStopBtn.running {
+            background-color: #FF5050;
+            border-color: #FF8080;
+            color: #FFFFFF;
+        }
+        #progressBar {
+            background-color: #404040;
+        }
+        #progress {
+            background-color: #6060FF;
+        }
+        #dlText {
+            color: #AAAAFF;
+        }
+        #ulText {
+            color: #50C050;
+        }
+        #pingText, #jitText {
+            color: #FF8080;
+        }
+    }
+
 </style>
 </head>
 <body>

+ 13 - 0
results.html

@@ -13,6 +13,19 @@
     .footer a:hover{color: green;}
     .header {line-height: 30px; text-align: center;height:50px;padding-top:50px;margin-bottom: 10px;}
     .header span>a {color:white;}
+    body {background: #FFFFFF; color: #000000; transition: background 0.3s, color 0.3s;}
+    h1 {color: #000000;}
+
+    @media (prefers-color-scheme: dark) {
+      body {background: #181818; color: #E0E0E0;}
+      .footer a {color: #909090;}
+      .footer a:hover {color: #00FF00;}
+      .header span>a {color: #BBBBBB;}
+      h1 {color: #FFFFFF;}
+      .layui-table-header th, .layui-table-cell, .layui-table-view {background: #222222; color: #E0E0E0;}
+      .layui-table-sort i {color: #E0E0E0;}
+    }
+
   </style>
 </head>
 <body>