v1.5.0

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog #
 
+**2021-08-27**
+
+* v1.5.0 : 
+  * Added dark mode that follows the device switch
+  * Added automatic jumping to the login page when not logged in
+  * Some other optimizations
+  * Updated dependencies
+
 **2021-08-24**
 
 * v1.4.1 : 

Makefile

@@ -2,8 +2,8 @@
 # @Description: Golang implementation of pi-dashboard
 # @Author: github.com/plutobell
 # @Creation: 2020-08-10
-# @Last modification: 2021-08-24
-# @Version: 1.4.1
+# @Last modification: 2021-08-27
+# @Version: 1.5.0
 
 PROGRAM = pi-dashboard-go
 OUTPUT = build

README.md

@@ -9,6 +9,12 @@
 
 ![](./screenshots/screenshot_login.png)
 
+![](./screenshots/screenshot_index_dark.png)
+
+![](./screenshots/screenshot_login_dark.png)
+
+
+
 
 
 ## Install
@@ -38,7 +44,7 @@ chmod +x pi-dashboard-go
 **Pi Dashboard Go** can be configured via command line parameters：
 
 ```bash
-Pi Dashboard Go version: v1.4.1
+Pi Dashboard Go version: v1.5.0
 Project address: https://github.com/plutobell/pi-dashboard-go
 
 Usage: Pi Dashboard Go [-auth USR:PSW] [-disk Paths] [-help]

config/config.go

@@ -2,8 +2,8 @@
 // @Description: Golang implementation of pi-dashboard
 // @Author: github.com/plutobell
 // @Creation: 2020-08-01
-// @Last modification: 2021-08-24
-// @Version: 1.4.1
+// @Last modification: 2021-08-27
+// @Version: 1.5.0
 
 package config
 
@@ -15,7 +15,7 @@ const (
 	//AUTHOR 作者信息
 	AUTHOR string = "github:plutobell"
 	//VERSION 版本信息
-	VERSION string = "1.4.1"
+	VERSION string = "1.5.0"
 	//USERNAME 默认用户
 	USERNAME string = "pi"
 	//PASSWORD 默认密码

device/device.go

@@ -2,8 +2,8 @@
 // @Description: Golang implementation of pi-dashboard
 // @Author: github.com/plutobell
 // @Creation: 2020-08-01
-// @Last modification: 2021-08-24
-// @Version: 1.4.1
+// @Last modification: 2021-08-27
+// @Version: 1.5.0
 
 package device
 

go.mod

@@ -8,7 +8,7 @@ require (
 	github.com/labstack/echo/v4 v4.5.0
 	github.com/mattn/go-isatty v0.0.13 // indirect
 	golang.org/x/crypto v0.0.0-20210817164053-32db794688a5 // indirect
-	golang.org/x/net v0.0.0-20210813160813-60bc85c4be6d // indirect
+	golang.org/x/net v0.0.0-20210825183410-e898025ed96a // indirect
 	golang.org/x/sys v0.0.0-20210823070655-63515b42dcdf // indirect
 	golang.org/x/text v0.3.7 // indirect
 	golang.org/x/time v0.0.0-20210723032227-1f47c861a9ac // indirect

go.sum

@@ -363,8 +363,8 @@ golang.org/x/net v0.0.0-20190813141303-74dc4d7220e7/go.mod h1:z5CRVTTTmAJ677TzLL
 golang.org/x/net v0.0.0-20200625001655-4c5254603344/go.mod h1:/O7V0waA8r7cgGh81Ro3o1hOxt32SMVPicZroKQ2sZA=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20210405180319-a5a99cb37ef4/go.mod h1:p54w0d4576C0XHj96bSt6lcn1PtDYWL6XObtHCRCNQM=
-golang.org/x/net v0.0.0-20210813160813-60bc85c4be6d h1:LO7XpTYMwTqxjLcGWPijK3vRXg1aWdlNOVOHRq45d7c=
-golang.org/x/net v0.0.0-20210813160813-60bc85c4be6d/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
+golang.org/x/net v0.0.0-20210825183410-e898025ed96a h1:bRuuGXV8wwSdGTB+CtJf+FjgO1APK1CoO39T4BN/XBw=
+golang.org/x/net v0.0.0-20210825183410-e898025ed96a/go.mod h1:9nx3DQGgdP8bBQD5qxJ1jj9UTztislL4KSBs9R2vV5Y=
 golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
 golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
 golang.org/x/sync v0.0.0-20180314180146-1d60e4601c6f/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=

main.go

@@ -2,8 +2,8 @@
 // @Description: Golang implementation of pi-dashboard
 // @Author: github.com/plutobell
 // @Creation: 2020-08-01
-// @Last modification: 2021-08-24
-// @Version: 1.4.1
+// @Last modification: 2021-08-27
+// @Version: 1.5.0
 
 package main
 

server/assets/css/common.css

@@ -3,8 +3,8 @@
 @Description: Golang implementation of pi-dashboard
 @Author: github.com/plutobell
 @Creation: 2020-08-01
-@Last modification: 2021-08-24
-@Version: 1.4.1
+@Last modification: 2021-08-27
+@Version: 1.5.0
 */
 
 ::-webkit-scrollbar {
@@ -36,11 +36,19 @@
     --real-memory-color: #D9E4DD;
     --swap-color: #D9E4DD;
     --disk-color: #CDC9C3;
-    --net-in-color: #D9E4DD;
-    --net-out-color: #CDC9C3;
     --box-bg-color: #eaebe9; /* #E8EAE6 */
     --backdrop-color: #363636;
 
+    --guage-font-color: black;
+    --guage-stops-color-1: #D9E4DD;
+    --guage-stops-color-5: #CDC9C3;
+    --guage-stops-color-9: #919191;
+
+    --net-in-color: #D9E4DD;
+    --net-out-color: #CDC9C3;
+    --net-grid-line-color: #e6e6e6;
+    --net-line-color: #ccd6eb;
+
     --box-radius: 15px;
 }
 
@@ -140,4 +148,86 @@ and (max-device-width : 768px) {
 .btn-close:focus {
     outline: none !important;
     box-shadow: none !important;
+}
+.inverted {
+    filter: invert(100%);
+}
+
+
+@media (prefers-color-scheme: dark) {
+    ::-webkit-scrollbar-track {
+        background: #3f3f3f;
+        -webkit-box-shadow: inset 0 0 5px #3f3f3f;
+    }
+    ::-webkit-scrollbar-thumb {
+        background: #7c7c7c;
+        -webkit-box-shadow: inset 0 0 10px #7c7c7c;
+    }
+
+    body{
+        background-color: #2d2d2d;
+        color: #c9d1d9;
+    }
+    input {
+        background-color: #3b3b3b !important;
+        border-color: #3b3b3b !important;
+        color: #c9d1d9 !important;
+    }
+    input:focus {
+        border: 1px solid #6b6b6b !important;
+    }
+
+    :root {
+        --label-color: #959c9c;
+        --navbar-color: #474747;
+        --cache-color: #414141;
+        --cpu-memory-title-color: #5e5e5e;
+        --temperature-color: #4b4b4b;
+        --ip-color: #414141;
+        --time-color: #5e5e5e;
+        --uptime-color: #4b4b4b;
+        --cpu-color: #414141;
+        --memory-color: #414141;
+        --real-memory-color: #414141;
+        --swap-color: #414141;
+        --disk-color: #5e5e5e;
+        --box-bg-color: #373938;
+        --backdrop-color: #363636;
+
+        --guage-font-color: #b9bebe;
+        --guage-stops-color-1: #626464;
+        --guage-stops-color-5: #878b8b;
+        --guage-stops-color-9: #b6b6b6;
+
+        --net-in-color: #414141;
+        --net-out-color: #5e5e5e;
+        --net-grid-line-color: #3d3d3d;
+        --net-line-color: #575757;
+
+        --box-radius: 15px;
+    }
+
+    .modal-content {
+        background-color: #252525;
+        color: #c9d1d9;
+    }
+    .dark-bg {
+        background-color: #505050 !important;
+    }
+    .spinner > div {
+        background-color: #c9d1d9;
+    }
+    .navbar-toggler {
+        color: #505050 !important;
+    }
+
+    #login-tips {
+        color: #c9d1d9;
+    }
+    #pimodel {
+        color: #c9d1d9;
+    }
+    #command-btns li img:hover{
+        border: 1px solid #606060 !important;
+    }
 }

server/assets/css/index.css

@@ -3,8 +3,8 @@
 @Description: Golang implementation of pi-dashboard
 @Author: github.com/plutobell
 @Creation: 2020-08-01
-@Last modification: 2021-08-24
-@Version: 1.4.1
+@Last modification: 2021-08-27
+@Version: 1.5.0
 */
 
 #loading{

server/assets/css/login.css

@@ -3,8 +3,8 @@
 @Description: Golang implementation of pi-dashboard
 @Author: github.com/plutobell
 @Creation: 2020-08-01
-@Last modification: 2021-08-24
-@Version: 1.4.1
+@Last modification: 2021-08-27
+@Version: 1.5.0
 */
 
 .box-radius {
@@ -19,5 +19,5 @@
 input:focus {
     outline: none !important;
     box-shadow: none !important;
-    border: 1px solid var(--navbar-color) !important;
+    border: 1px solid var(--label-color) !important;
 }

server/assets/js/common.js

@@ -2,8 +2,8 @@
 // @Description: Golang implementation of pi-dashboard
 // @Author: github.com/plutobell
 // @Creation: 2020-08-01
-// @Last modification: 2021-08-24
-// @Version: 1.4.1
+// @Last modification: 2021-08-27
+// @Version: 1.5.0
 
 window.oncontextmenu=function(){return false;}
 window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
@@ -18,6 +18,60 @@ window.addEventListener('keydown', function (event) {
     }
 })
 
+$(document).ready(function() {
+    if(window.matchMedia('(prefers-color-scheme: dark)').matches){
+        $("#modal-close-btn").addClass("btn-close-white");
+        $("footer").eq(0).addClass("border-secondary");
+        if ($("#favicon").text() == "linux.ico") {
+            $("#device-photo").addClass("inverted");
+            $("#icon").attr("href", "favicons/linux_light.ico");
+            $("#shortcut-icon").attr("href", "favicons/linux_light.ico");
+        }
+    } else {
+        $("#modal-close-btn").removeClass("btn-close-white");
+        $("footer").eq(0).removeClass("border-secondary");
+        $("#device-photo").removeClass("inverted");
+        if ($("#favicon").text() == "linux.ico") {
+            $("#icon").attr("href", "favicons/linux.ico");
+            $("#shortcut-icon").attr("href", "favicons/linux.ico");
+        } else {
+            $("#icon").attr("href", "favicons/raspberrypi.ico");
+            $("#shortcut-icon").attr("href", "favicons/raspberrypi.ico");
+        }
+    }
+});
+
+let media = window.matchMedia('(prefers-color-scheme: dark)');
+let callback = (e) => {
+    let prefersDarkMode = e.matches;
+    if (prefersDarkMode) {
+        $("#modal-close-btn").addClass("btn-close-white");
+        $("footer").eq(0).addClass("border-secondary");
+        if ($("#favicon").text() == "linux.ico") {
+            $("#device-photo").addClass("inverted");
+            $("#icon").attr("href", "favicons/linux_light.ico");
+            $("#shortcut-icon").attr("href", "favicons/linux_light.ico");
+        }
+        $.getScript('js/index.js', function() {});
+    } else {
+        $("#modal-close-btn").removeClass("btn-close-white");
+        $("footer").eq(0).removeClass("border-secondary");
+        $("#device-photo").removeClass("inverted");
+        if ($("#favicon").text() == "linux.ico") {
+            $("#icon").attr("href", "favicons/linux.ico");
+            $("#shortcut-icon").attr("href", "favicons/linux.ico");
+        } else {
+            $("#icon").attr("href", "favicons/raspberrypi.ico");
+            $("#shortcut-icon").attr("href", "favicons/raspberrypi.ico");
+        }
+        $.getScript('js/index.js', function() {});
+    }
+};
+if (typeof media.addEventListener === 'function') {
+    media.addEventListener('change', callback);
+} else if (typeof media.addEventListener === 'function') {
+    media.addEventListener(callback);
+}
 
 function getCookie(name) {
     var cookieValue = null;