Improve UI with navigation menu and modern design

.gitignore

@@ -1 +1 @@
-public
+public/*

html.go

@@ -2,9 +2,40 @@ package main
 
 import (
 	"html/template"
+	"io"
 	"os"
 )
 
+func copyFile(src, dst string) error {
+	// Open the source file for reading
+	sourceFile, err := os.Open(src)
+	if err != nil {
+		return err
+	}
+	defer sourceFile.Close()
+
+	// Create the destination file
+	destinationFile, err := os.Create(dst)
+	if err != nil {
+		return err
+	}
+	defer destinationFile.Close()
+
+	// Use io.Copy to copy the contents from source to destination
+	_, err = io.Copy(destinationFile, sourceFile)
+	if err != nil {
+		return err
+	}
+
+	// Flush file to disk
+	err = destinationFile.Sync()
+	if err != nil {
+		return err
+	}
+
+	return nil
+}
+
 func genHtml() {
 	data := struct {
 		RefreshTimeMs uint32
@@ -33,6 +64,9 @@ func genHtml() {
 		panic(err)
 	}
 
+	// add css
+	copyFile("./styles.css", "./public/styles.css")
+
 	// Confirm successful file generation
 	println("Static HTML file generated successfully.")
 }

http.go

@@ -17,6 +17,8 @@ func serveHtml() {
 	fs := http.FileServer(http.Dir("public"))
 
 	http.Handle("/", fs)
+	http.Handle("/styles.css", http.FileServer(http.Dir("public")))
+
 	server_addr := os.Getenv("SERVER_ADDR")
 	if server_addr == "" {
 		println("Use SERVER_DEFAULT_ADDR")

styles.css

@@ -0,0 +1,244 @@
+/* Navigation Menu Styles */
+nav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+nav a {
+  float: left;
+  display: block;
+  color: #f2f2f2;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  font-size: 17px;
+}
+
+nav a:hover {
+  background-color: #ddd;
+  color: black;
+}
+
+nav a.active {
+  background-color: #4CAF50;
+  color: white;
+}
+
+/* Modern Design Elements */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  background-color: #f4f4f4;
+}
+
+.container {
+  width: 80%;
+  margin: auto;
+  overflow: hidden;
+}
+
+header {
+  background: #50b3a2;
+  color: #fff;
+  padding-top: 30px;
+  min-height: 70px;
+  border-bottom: #e8491d 3px solid;
+}
+
+header a {
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+header ul {
+  padding: 0;
+  list-style: none;
+}
+
+header li {
+  display: inline;
+  padding: 0 20px 0 20px;
+}
+
+header #branding {
+  float: left;
+}
+
+header #branding h1 {
+  margin: 0;
+}
+
+header nav {
+  float: right;
+  margin-top: 10px;
+}
+
+header .highlight, header .current a {
+  color: #e8491d;
+  font-weight: bold;
+}
+
+header a:hover {
+  color: #cccccc;
+}
+
+footer {
+  background: #333;
+  color: #fff;
+  text-align: center;
+  padding: 30px 0;
+  margin-top: 30px;
+}
+
+.chart-container {
+  background: #fff;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+iframe {
+  height: 300px;
+}
+
+nav ul {
+  display: flex;
+  align-items: center;
+}
+
+.chart-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.chart-container iframe {
+  flex: 1 1 45%;
+  margin: 10px;
+}
+
+/* Pd70e */
+iframe {
+  height: 200px;
+}
+
+/* Pe196 */
+nav ul {
+  display: flex;
+  align-items: center;
+}
+
+/* Peedb */
+.chart-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.chart-container iframe {
+  flex: 1 1 45%;
+  margin: 10px;
+}
+
+/* P3e7e */
+iframe {
+  height: 400px;
+}
+
+/* Pa737 */
+body {
+  font-family: 'Arial', sans-serif;
+  background-color: #f4f4f4;
+  margin: 0;
+  padding: 0;
+}
+
+.container {
+  width: 80%;
+  margin: auto;
+  overflow: hidden;
+}
+
+header {
+  background: #50b3a2;
+  color: #fff;
+  padding-top: 30px;
+  min-height: 70px;
+  border-bottom: #e8491d 3px solid;
+}
+
+header a {
+  color: #fff;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 16px;
+}
+
+header ul {
+  padding: 0;
+  list-style: none;
+}
+
+header li {
+  display: inline;
+  padding: 0 20px 0 20px;
+}
+
+header #branding {
+  float: left;
+}
+
+header #branding h1 {
+  margin: 0;
+}
+
+header nav {
+  float: right;
+  margin-top: 10px;
+}
+
+header .highlight, header .current a {
+  color: #e8491d;
+  font-weight: bold;
+}
+
+header a:hover {
+  color: #cccccc;
+}
+
+footer {
+  background: #333;
+  color: #fff;
+  text-align: center;
+  padding: 30px 0;
+  margin-top: 30px;
+}
+
+.chart-container {
+  background: #fff;
+  padding: 20px;
+  margin: 20px 0;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.chart-container iframe {
+  height: 300px;
+  width: 100%;
+  border: none;
+}
+
+nav ul {
+  display: flex;
+  align-items: center;
+}
+
+.chart-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.chart-container iframe {
+  flex: 1 1 45%;
+  margin: 10px;
+}