[Services] search listed again

build_pages.py

@@ -31,7 +31,7 @@ PAGES = [
 
 
 def buildPage(
-    filename: str, pageTitle: str, pageHtml: str, pageStyle: str, template: str, lang: str
+    filename: str, pageTitle: str, pageHtml: str, pageStyle: str, template: str
 ) -> str:
     template = template.replace("<!--TITLE-->", pageTitle)
     style = (
@@ -42,13 +42,6 @@ def buildPage(
     template = template.replace("<!--ADDITIONAL_STYLE-->", style)
     template = template.replace("PAGE_NAME", filename)
     template = template.replace("<!--MAIN-->", pageHtml)
-    
-    # Fix language switcher links
-    if lang == "en":
-        template = template.replace('href="/PAGE_NAME"', f'href="/en/{filename}"')
-    else:
-        template = template.replace('href="/en/PAGE_NAME"', f'href="/sr/{filename}"')
-    
     return template
 
 
@@ -64,7 +57,7 @@ def main():
                 pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Studenti su nasli bug' /></div>"
                 pageHtml += f.read()
                 html = buildPage(
-                    page["name"], page["titleSR"], pageHtml, page["style"], templateSR, "sr"
+                    page["name"], page["titleSR"], pageHtml, page["style"], templateSR
                 )
                 f = open(f'site/{page["name"]}.html', "w")
                 f.write(html)
@@ -73,7 +66,7 @@ def main():
                 pageHtml = "<div class='cover-wrap'><img src='/img/students_bug.jpg' alt='Students found the bug' /></div>"
                 pageHtml += f.read()
                 html = buildPage(
-                    page["name"], page["titleEN"], pageHtml, page["style"], templateEN, "en"
+                    page["name"], page["titleEN"], pageHtml, page["style"], templateEN
                 )
                 f = open(f'site/en/{page["name"]}.html', "w")
                 f.write(html)

dogadjaji.csv

@@ -383,3 +383,7 @@ datum, vreme, lokacija, tema, tip, link, temaEN
 17-08-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Mail server - 1. deo,workshop,, Mail server - part 1
 24-08-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Film: Primer (2004),movie,,Movie: Primer (2004)
 31-08-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Lightning talks,lightning,,Lightning talks
+07-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Sysadmin radionica,workshop,,Sysadmin workshop
+14-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Druzenje,party,,Party
+21-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876,Mail server - 2. deo,workshop,, Mail server - part 2
+28-09-2026, 19:00, Xecut - Jovana Ćirilova 15 - Local 3 https://www.openstreetmap.org/node/11749277876, Hakaton, hack, https://wiki.dmz.rs/decentrala/dogadjaji/hakaton, Hackathon

pages/en/services.html

@@ -59,14 +59,14 @@
       <a href="https://cryptpad.org/">CryptPad</a> alternative to google office
     </td>
   </tr>-->
-  <!--<tr>
+  <tr>
   <tr>
     <td><a href="https://search.dmz.rs/">Search</a></td>
     <td>
       <a href="https://github.com/searxng/searxg/">SearXNG</a> instance used for
       Web searching.
     </td>
-  </tr> -->
+  </tr>
   <tr>
     <td><a href="https://pastebin.dmz.rs/">Pastebin</a></td>
     <td>

pages/sr/services.html

@@ -62,13 +62,13 @@
       <a href="https://cryptpad.org/">CryptPad</a> zamena za google office
     </td>
   <tr>-->
-  <!--<tr>
+  <tr>
     <td><a href="https://search.dmz.rs/">Search</a></td>
     <td>
       <a href="https://github.com/searxng/searxng/">SearXNG</a> instanca koju
       koristimo za pretraživanje Interneta. Zamena za Google.
     </td>
-  </tr>-->
+  </tr>
   <tr>
     <td><a href="https://pastebin.dmz.rs/">Pastebin</a></td>
     <td>

site/404.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="/styles/style.css">
   <link rel="stylesheet" href="/styles/404.css">
   <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
+  <script src="/scripts/main.js"></script>
   <title>404</title>
 </head>
 <body>

site/deconference.html

@@ -32,18 +32,17 @@
     <link rel="stylesheet" href="/styles/style.css" />
     <link rel="stylesheet" href="/styles/deconference.css">
     <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
+    <script src="/scripts/main.js"></script>
     <title>Dekonferencija Decentrala</title>
     <link rel="alternate" hreflang="en" href="/en/deconference" />
   </head>
   <body>
-    <input type="checkbox" id="menu-toggle" />
-    <input type="checkbox" id="theme-toggle" />
     <header>
       <a id="logo" href="/">
         <img src="/img/logo-light.svg" alt="Logo" />
         Decentrala
       </a>
-      <label for="theme-toggle" id="theme-switcher"></label>
+      <button id="theme-switcher"></button>
       <a class="lang" hreflang="en" href="/en/deconference">EN</a>
     </header>
     <main>
@@ -87,9 +86,9 @@
       </div>
     </main>
     <footer>
-      <label for="menu-toggle" class="hamburger">
+      <button class="hamburger closed">
         <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </label>
+      </button>
       <nav class="menu">
         <a href="/events">Događaji</a>
         <a href="/services">Servisi</a>

site/scripts/main.js

@@ -0,0 +1,92 @@
+(function () {
+  const theme = window.localStorage.getItem("theme");
+  const prefersDark = window?.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  const isDark = theme === "dark" || (!theme && prefersDark);
+
+  if (isDark) document.documentElement.classList.add("dark");
+
+  // Swap images as soon as DOM is ready (script runs in <head>, imgs not parsed yet)
+  if (isDark) {
+    window.addEventListener("DOMContentLoaded", () => {
+      document.querySelectorAll("img[src*='-light']").forEach((img) => {
+        img.src = img.src.replace("-light", "-dark");
+      });
+    }, { once: true });
+  }
+
+  window.changeTheme = (toDark) => {
+    if (toDark) {
+      window.localStorage.setItem("theme", "dark");
+      document.documentElement.classList.add("dark");
+      document.querySelectorAll("img[src*='-light']").forEach((img) => {
+        img.src = img.src.replace("-light", "-dark");
+      });
+    } else {
+      window.localStorage.setItem("theme", "light");
+      document.documentElement.classList.remove("dark");
+      document.querySelectorAll("img[src*='-dark']").forEach((img) => {
+        img.src = img.src.replace("-dark", "-light");
+      });
+    }
+  }
+})();
+
+window.addEventListener("DOMContentLoaded", () => {
+  const getById = (id) => document.getElementById(id);
+  const getByClass = (className) => document.getElementsByClassName(className)[0];
+
+  const themeBtn = getById("theme-switcher");
+  const hamburger = getByClass("hamburger");
+  const hamburgerIcon = hamburger?.children[0];
+  const menu = document.getElementsByTagName("nav")[0];
+  const main = document.getElementsByTagName("main")[0];
+  const isMenuOpen = () => hamburger?.classList.contains("open");
+
+  /* Functions */
+
+  const closeMenu = () => {
+    hamburger.classList = "hamburger closed"
+    hamburgerIcon.src = hamburgerIcon.src.replace("opened", "closed");
+    menu.classList = "menu closed";
+  }
+
+  const openMenu = () => {
+    hamburger.classList = "hamburger open"
+    hamburgerIcon.src = hamburgerIcon.src.replace("closed", "opened");
+    menu.classList = "menu open";
+  }
+
+  /* Listeners */
+
+  window.addEventListener("resize", () => isMenuOpen() && closeMenu());
+  if (main) main.addEventListener("click", () => isMenuOpen() && closeMenu());
+
+  /* Language persistence */
+  const currentLang = document.documentElement.lang || "sr";
+  const anchors = document.getElementsByTagName("a");
+  Array.from(anchors).forEach((a) => {
+    // Skip language switcher links
+    if (a.classList.contains("lang")) return;
+    const href = a.getAttribute("href");
+    if (!href) return;
+    if (href.startsWith("/")) {
+      // Replace existing language prefix or add one
+      if (href.startsWith("/sr") || href.startsWith("/en")) {
+        if (!href.startsWith(`/${currentLang}`)) {
+          a.setAttribute("href", `/${currentLang}${href.slice(3)}`);
+        }
+      } else if (currentLang !== "sr") {
+        // Only prepend language prefix for non-default languages
+        a.setAttribute("href", `/${currentLang}${href}`);
+      }
+    }
+  });
+  hamburger?.addEventListener("click", () => isMenuOpen() ? closeMenu() : openMenu());
+
+  if (themeBtn) {
+    themeBtn.addEventListener("click", () => {
+      const isDark = document.documentElement.classList.contains("dark");
+      changeTheme(!isDark);
+    });
+  }
+});

site/styles/style.css

@@ -11,39 +11,12 @@
   --bg: var(--light-bg);
 }
 
-/* Theme toggle via checkbox hack */
-#theme-toggle {
-  display: none;
-}
-
-/* Use :has() selector to detect checkbox state */
-body:has(#theme-toggle:checked) {
+html.dark {
   --border: var(--dark-border);
   --text: var(--dark-text);
   --bg: var(--dark-bg);
 }
 
-body:has(#theme-toggle:checked) header #theme-switcher {
-  background: linear-gradient(
-    90deg,
-    var(--dark-border) 0%,
-    var(--dark-border) 50%,
-    var(--dark-bg) 51%,
-    var(--dark-bg) 100%
-  );
-}
-
-body:has(#theme-toggle:checked) header #theme-switcher:hover {
-  border-color: var(--hightlight);
-  background: linear-gradient(
-    90deg,
-    var(--hightlight) 0%,
-    var(--hightlight) 50%,
-    var(--dark-bg) 51%,
-    var(--dark-bg) 100%
-  );
-}
-
 @font-face {
   font-family: "Iosevka";
   src: url("/font/iosevka-regular.woff") format("woff");
@@ -150,7 +123,6 @@ a:visited {
     var(--bg) 51%,
     var(--bg) 100%
   );
-  cursor: pointer;
 }
 
 #theme-switcher:hover {
@@ -164,27 +136,6 @@ a:visited {
   );
 }
 
-#theme-toggle:checked ~ body header #theme-switcher {
-  background: linear-gradient(
-    90deg,
-    var(--dark-border) 0%,
-    var(--dark-border) 50%,
-    var(--dark-bg) 51%,
-    var(--dark-bg) 100%
-  );
-}
-
-#theme-toggle:checked ~ body header #theme-switcher:hover {
-  border-color: var(--hightlight);
-  background: linear-gradient(
-    90deg,
-    var(--hightlight) 0%,
-    var(--hightlight) 50%,
-    var(--dark-bg) 51%,
-    var(--dark-bg) 100%
-  );
-}
-
 .lang {
   font-size: 2rem;
 }
@@ -261,46 +212,6 @@ button {
 
   .hamburger {
     display: block !important;
-    cursor: pointer;
-  }
-
-  #menu-toggle {
-    display: none;
-  }
-
-  #menu-toggle:checked ~ footer .menu {
-    display: flex;
-    flex-direction: column;
-  }
-
-  #menu-toggle:checked ~ footer .hamburger {
-    position: relative;
-  }
-
-  #menu-toggle:checked ~ footer .hamburger::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-image: url("/img/strelica-opened-light.svg");
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
-  /* Show hamburger icon on mobile */
-  .hamburger {
-    cursor: pointer;
-  }
-
-  .hamburger img {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  #menu-toggle:checked ~ footer .hamburger img {
-    opacity: 0;
   }
 }
 

template/page-en.html

@@ -3,7 +3,6 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <input type="checkbox" id="theme-toggle" />
 
     <!-- <pre>
 
@@ -33,17 +32,16 @@
     <link rel="stylesheet" href="/styles/style.css" />
     <!--ADDITIONAL_STYLE-->
     <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
+    <script src="/scripts/main.js"></script>
     <title><!--TITLE--> Decentrala</title>
     <link rel="alternate" hreflang="sr" href="/PAGE_NAME" />
   </head>
   <body>
-    <input type="checkbox" id="theme-toggle" />
-    <input type="checkbox" id="menu-toggle" />
     <header>
       <a id="logo" href="/en/index">
         <img src="/img/logo-light.svg" alt="Logo" /> Decentrala
       </a>
-      <label for="theme-toggle" id="theme-switcher"></label>
+      <button id="theme-switcher"></button>
       <a class="lang" hreflang="sr" href="/PAGE_NAME">SR</a>
     </header>
     <main>
@@ -52,9 +50,9 @@
       </div>
     </main>
     <footer>
-      <label for="menu-toggle" class="hamburger">
+      <button class="hamburger closed">
         <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </label>
+      </button>
       <nav class="menu">
         <a href="/en/events">Events</a>
         <a href="/en/services">Services</a>

template/page-sr.html

@@ -32,18 +32,17 @@
     <link rel="stylesheet" href="/styles/style.css" />
     <!--ADDITIONAL_STYLE-->
     <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
+    <script src="/scripts/main.js"></script>
     <title><!--TITLE--> Decentrala</title>
     <link rel="alternate" hreflang="en" href="/en/PAGE_NAME" />
   </head>
   <body>
-    <input type="checkbox" id="menu-toggle" />
-    <input type="checkbox" id="theme-toggle" />
     <header>
       <a id="logo" href="/">
         <img src="/img/logo-light.svg" alt="Logo" />
         Decentrala
       </a>
-      <label for="theme-toggle" id="theme-switcher"></label>
+      <button id="theme-switcher"></button>
       <a class="lang" hreflang="en" href="/en/PAGE_NAME">EN</a>
     </header>
     <main>
@@ -52,9 +51,9 @@
       </div>
     </main>
     <footer>
-      <label for="menu-toggle" class="hamburger">
+      <button class="hamburger closed">
         <img src="/img/strelica-closed-light.svg" alt="Menu" />
-      </label>
+      </button>
       <nav class="menu">
         <a href="/events">Događaji</a>
         <a href="/services">Servisi</a>