add music website

src/main.rs

@@ -38,15 +38,16 @@ fn login(login_data: Form<LoginData>) -> Template {
 #[get("/")]
 fn index(ip: IpAddr) -> Template {
     if let Some(ipv4) = ip_to_ipv4(ip) {
-        if ipv4.is_private() {
-            Template::render("private_index", context! {})
+        if ipv4.is_private() || ipv4.is_loopback() {
+            Template::render("index", context! {
+                local: true,
+            })
         } else {
             Template::render("index", context! {})
         }
     } else {
         Template::render("index", context! {})
     }
-    
 }
 
 #[launch]
@@ -56,8 +57,7 @@ fn rocket() -> _ {
         .enable(NoSniff::Enable);
     rocket::build()
         .mount("/", routes![index, login])
-        .mount("/static", FileServer::from("static"))  // Serves files in the `static` directory
+        .mount("/static", FileServer::from("static"))
         .attach(shield)
         .attach(Template::fairing())
 }
-

static-old/html/private_index.html.tera

@@ -33,6 +33,7 @@
 			</svg>
 		<div id="navbar-right">
 			<a id="submenu0" class="submenu" href="https://git.engler-labs.root64.de">Gitea</a>
+			<a id="submenu0" class="submenu" href="https://music.engler-labs.root64.de">Music</a>
 			<a id="submenu1" class="submenu" href="https://health.engler-labs.root64.de">Health</a>
 			<a id="submenu2" class="submenu" href="https://adguard.engler-labs.root64.de">AdGuard</a>
 		</div>

static-old2/css/styles.css

@@ -0,0 +1,92 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.navbar {
+  background-color: #333;
+  padding: 0.5rem 1rem;
+  position: relative;
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+}
+
+.logo {
+  font-size: 1.5rem;
+  text-decoration: none;
+  color: white;
+}
+
+.nav-links {
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.nav-links.active {
+  height: auto; /* Expand naturally */
+  visibility: visible;
+  opacity: 1;
+}
+
+.nav-links a {
+  text-decoration: none;
+  color: white;
+  transition: color 0.3s ease;
+  padding: 10px 12px;
+}
+
+.nav-links a:hover {
+  background-color: #888;
+}
+
+.menu-toggle {
+  display: none;
+  font-size: 1.5rem;
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* Responsive Styles */
+/* Mobile View Styles */
+@media (max-width: 768px) {
+  .menu-toggle {
+    display: block;
+  }
+
+  .nav-links {
+    flex-direction: column;
+    background-color: #444;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    opacify: 0;
+    overflow: hidden;
+    height: 0;
+    visibility: hidden;
+	display: flex;
+  }
+
+  /* .nav-links.active { */
+  /*   height: 2rem; /* Expanded state */ */
+  /*   visibility: visible; */
+  /*   opacity: 1; */
+  /* } */
+  /**/
+  /* .nav-links a { */
+  /*   padding: 0.5rem 1rem; */
+  /*   text-align: center; */
+  /*   height: 1rem; */
+  /* } */
+}

static-old2/css/styles2.css

@@ -0,0 +1,84 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Arial, sans-serif;
+}
+
+.navbar {
+  background-color: #333;
+  color: white;
+  padding: 0.5rem 1rem;
+  position: relative; /* Ensure the navbar remains anchored */
+}
+
+.navbar-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative; /* Key to make dropdown align properly */
+}
+
+.logo {
+  font-size: 1.5rem;
+  text-decoration: none;
+  color: white;
+}
+
+.nav-links {
+  list-style: none;
+  display: flex;
+  gap: 1rem;
+  position: absolute; /* Align it below the navbar */
+  top: 100%; /* Start right below the navbar */
+  left: 0;
+  width: 100%; /* Full width of the navbar */
+  background-color: #444;
+  flex-direction: column;
+  overflow: hidden;
+  height: 0;
+  visibility: hidden;
+  opacity: 0;
+  z-index: 10; /* Ensure it's on top */
+}
+
+.nav-links.active {
+  height: auto; /* Expand naturally */
+  visibility: visible;
+  opacity: 1;
+}
+
+.nav-links a {
+  padding: 0.5rem 1rem;
+  text-align: center;
+  text-decoration: none;
+  color: white;
+  transition: background-color 0.3s ease;
+}
+
+.nav-links a:hover {
+  background-color: #555;
+}
+
+.menu-toggle {
+  display: none;
+  font-size: 1.5rem;
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .menu-toggle {
+    display: block;
+  }
+
+  .nav-links {
+    display: flex;
+  }
+}

static-old2/html/index.html.tera

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Responsive Navbar</title>
+  <link rel="stylesheet" href="/static/css/styles.css">
+</head>
+<body>
+  <nav class="navbar">
+    <div class="navbar-container">
+      <a href="#" class="logo">MyWebsite</a>
+      <button class="menu-toggle" id="menu-toggle" aria-label="Toggle menu">
+        ☰
+      </button>
+      <ul class="nav-links" id="nav-links">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+		{% if local %}
+			<li><a href="#">Services</a></li>
+		{% endif %}
+        <li><a href="#">Contact</a></li>
+      </ul>
+    </div>
+  </nav>
+
+  <script src="/static/js/script.js"></script>
+</body>
+</html>
+

static-old2/js/script.js

@@ -0,0 +1,14 @@
+document.getElementById("menu-toggle").addEventListener("click", function () {
+  const navLinks = document.getElementById("nav-links");
+  navLinks.classList.toggle("active");
+});
+
+// const navLinks = document.getElementById("nav-links");
+// window.addEventListener("resize", () => {
+//   if (window.innerWidth > 768) {
+//     navLinks.classList.remove("active"); // Ensure mobile styles are removed
+//     navLinks.style.height = ""; // Reset height
+//     navLinks.style.visibility = ""; // Reset visibility
+//     navLinks.style.opacity = ""; // Reset opacity
+//   }
+// });

static/css/styles.css

@@ -0,0 +1,50 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+#navbar-container {
+  height: 2.5rem;
+  display: flex;
+  justify-content: space-between;
+  background-color: #181825;
+  color: white;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+#navbar .left {
+  position: relative;
+}
+
+#navbar .right {
+  display: flex;
+}
+
+#navbar .link {
+  padding: 0.3rem 0.4rem;
+}
+
+#navbar .item {
+  display: flex;
+}
+#navbar .button {
+  display: none;
+}
+@media (max-width: 770px) {
+  #navbar .item {
+    display: none;
+  }
+  #navbar .button .item {
+    display: flex;
+  }
+
+  #navbar .item {
+    display: none;
+  }
+  #navbar .item .open {
+    width: 100%;
+    padding: 0;
+    display: flex;
+  }
+}