Refactoring

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/pro-regular-svg-icons": "^6.4.2",
     "@solidjs/meta": "^0.28.6",
     "@solidjs/router": "^0.8.3",

pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@fortawesome/fontawesome-svg-core':
     specifier: ^6.4.2
     version: 6.4.2
+  '@fortawesome/free-brands-svg-icons':
+    specifier: ^6.4.2
+    version: 6.4.2
   '@fortawesome/pro-regular-svg-icons':
     specifier: ^6.4.2
     version: 6.4.2
@@ -1781,6 +1784,14 @@ packages:
       '@fortawesome/fontawesome-common-types': 6.4.2
     dev: false
 
+  /@fortawesome/free-brands-svg-icons@6.4.2:
+    resolution: {integrity: sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==, tarball: https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/6.4.2/free-brands-svg-icons-6.4.2.tgz}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 6.4.2
+    dev: false
+
   /@fortawesome/pro-regular-svg-icons@6.4.2:
     resolution: {integrity: sha512-e6LJbjPuthsDfskXvsy3kSpz/NFD2FQ0utZHelMwOyjkalPSbM3kyedZ4Vgq3XVTKo6NQd9FtIoHxxmEQHQKRA==, tarball: https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.4.2/pro-regular-svg-icons-6.4.2.tgz}
     engines: {node: '>=6'}

public/styles/overview.css

@@ -35,7 +35,6 @@
   background-color: #121629;
   position: fixed;
   top: 0;
-  width: 155px;
   height: 100%;
   margin-left: -8px;
 }

src/components/Reference.tsx

@@ -36,21 +36,24 @@ function R(props: {
     }
   });
   return (
-    <A
-      href={props.href}
-      target={type() === "external" ? "_blank" : ""}
-      rel={type() === "external" ? "noreferrer noopener" : ""}
-      id={props.id}
-      class={props.class}
-    >
-      <Show when={type() === "id"}>
-        <FontAwesomeIcon class="left" icon={types["id"]} />
-      </Show>
-      {props.children}
-      <Show when={type() !== "id"}>
-        <FontAwesomeIcon class="right" icon={types[type()]} title={type()} />
-      </Show>
-    </A>
+    <>
+      {" "}
+      <A
+        href={props.href}
+        target={type() === "external" ? "_blank" : ""}
+        rel={type() === "external" ? "noreferrer noopener" : ""}
+        id={props.id}
+        class={props.class}
+      >
+        <Show when={type() === "id"}>
+          <FontAwesomeIcon class="left" icon={types["id"]} />
+        </Show>
+        {props.children}
+        <Show when={type() !== "id"}>
+          <FontAwesomeIcon class="right" icon={types[type()]} title={type()} />
+        </Show>
+      </A>{" "}
+    </>
   );
 }
 

src/components/de/Navbar.tsx

@@ -0,0 +1,102 @@
+import {
+  faBookOpen,
+  faCircleHalfStroke,
+  faGlobe,
+  faXmark,
+} from "@fortawesome/pro-regular-svg-icons";
+import { createSignal } from "solid-js";
+import { A, useNavigate } from "solid-start";
+import { FontAwesomeIcon } from "../FontAwesomeIcon";
+
+export const [lightMode, setLightMode] = createSignal(false);
+const [menu, setMenu] = createSignal(false);
+
+function Navbar() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
+        <A href="/de/">
+          <FontAwesomeIcon icon={faBookOpen} /> Einführung
+        </A>
+
+        <A href="/de/overview">
+          <FontAwesomeIcon icon={faBookOpen} /> Start
+        </A>
+        <ol>
+          <li>
+            <A href="/de/overview#start">Was sind EUCs?</A>
+          </li>
+          <li>
+            <A href="/de/overview#why">Warum EUCs?</A>
+          </li>
+          <li>
+            <A href="/de/overview#funktion">Funktionsweise</A>
+          </li>
+          <li>
+            <A href="/de/overview#begriffe">Begriffe</A>
+          </li>
+          <li>
+            <A href="/de/overview#sicherheit">Sicherheit</A>
+          </li>
+          <li>
+            <A href="/de/overview#ausrüstung">Ausrüstung</A>
+          </li>
+          <li>
+            <A href="/de/overview#cutout">Cut-out's</A>
+          </li>
+          <li>
+            <A href="/de/overview#akkuss">Akkusicherheit</A>
+          </li>
+          <li>
+            <A href="/de/overview#fahrweise">Fahrweise</A>
+          </li>
+          <li>
+            <A href="/de/overview#wobbles">Wobbles</A>
+          </li>
+          <li>
+            <A href="/de/overview#leistung">Leistung</A>
+          </li>
+          <li>
+            <A href="/de/overview#federung">Federung</A>
+          </li>
+          <li>
+            <A href="/de/overview#reifen">Reifen</A>
+          </li>
+          <li>
+            <A href="/de/overview#historie">Historie</A>
+          </li>
+          <li>
+            <A href="/de/overview#geräte">Geräte Liste</A>
+          </li>
+        </ol>
+
+        <A href="/de/manufacturers">
+          <FontAwesomeIcon icon={faBookOpen} /> Hersteller
+        </A>
+
+        <button onClick={() => setLightMode((e) => !e)}>
+          {lightMode() ? "Dark Mode " : "Light Mode "}
+          <FontAwesomeIcon icon={faCircleHalfStroke} />
+        </button>
+        <button onClick={() => navigate("/en/overview")}>
+          Englisch <FontAwesomeIcon icon={faGlobe} />
+        </button>
+        <button onClick={() => setMenu(false)}>
+          Close <FontAwesomeIcon icon={faXmark} />
+        </button>
+      </div>
+
+      <div
+        id="sidenavbar"
+        style={{ visibility: menu() ? "hidden" : "visible" }}
+      >
+        <button onClick={() => navigate(-1)}>Zurück</button>
+        <A href="#start">Start</A>
+        <button onClick={() => setMenu(true)}>Menu</button>
+      </div>
+    </>
+  );
+}
+
+export default Navbar;

src/components/en/Navbar.tsx

@@ -0,0 +1,102 @@
+import {
+  faBookOpen,
+  faCircleHalfStroke,
+  faGlobe,
+  faXmark,
+} from "@fortawesome/pro-regular-svg-icons";
+import { createSignal } from "solid-js";
+import { A, useNavigate } from "solid-start";
+import { FontAwesomeIcon } from "../FontAwesomeIcon";
+
+export const [lightMode, setLightMode] = createSignal(false);
+const [menu, setMenu] = createSignal(false);
+
+function Navbar() {
+  const navigate = useNavigate();
+  return (
+    <>
+      <div id="navbar" style={{ visibility: menu() ? "visible" : "hidden" }}>
+        <A href="/en/">
+          <FontAwesomeIcon icon={faBookOpen} /> Introduction
+        </A>
+
+        <A href="/en/overview">
+          <FontAwesomeIcon icon={faBookOpen} /> Start
+        </A>
+        <ol>
+          <li>
+            <A href="/en/overview#start">What are EUCs?</A>
+          </li>
+          <li>
+            <A href="/en/overview#why">Why EUCs?</A>
+          </li>
+          <li>
+            <A href="/en/overview#funktion">Functionality</A>
+          </li>
+          <li>
+            <A href="/en/overview#begriffe">Glossarry</A>
+          </li>
+          <li>
+            <A href="/en/overview#sicherheit">Safety</A>
+          </li>
+          <li>
+            <A href="/en/overview#ausrüstung">Gear</A>
+          </li>
+          <li>
+            <A href="/en/overview#cutout">Cut-out's</A>
+          </li>
+          <li>
+            <A href="/en/overview#akkuss">Battery safety</A>
+          </li>
+          <li>
+            <A href="/en/overview#fahrweise">Ride style</A>
+          </li>
+          <li>
+            <A href="/en/overview#wobbles">Wobbles</A>
+          </li>
+          <li>
+            <A href="/en/overview#leistung">Performance</A>
+          </li>
+          <li>
+            <A href="/en/overview#federung">Suspension</A>
+          </li>
+          <li>
+            <A href="/en/overview#reifen">Tires</A>
+          </li>
+          <li>
+            <A href="/en/overview#historie">History</A>
+          </li>
+          <li>
+            <A href="/en/overview#geräte">Device list</A>
+          </li>
+        </ol>
+
+        <A href="/en/manufacturers">
+          <FontAwesomeIcon icon={faBookOpen} /> Manufacturers
+        </A>
+
+        <button onClick={() => setLightMode((e) => !e)}>
+          {lightMode() ? "Dark Mode " : "Light Mode "}
+          <FontAwesomeIcon icon={faCircleHalfStroke} />
+        </button>
+        <button onClick={() => navigate("/de/overview")}>
+          Deutsch <FontAwesomeIcon icon={faGlobe} />
+        </button>
+        <button onClick={() => setMenu(false)}>
+          Close <FontAwesomeIcon icon={faXmark} />
+        </button>
+      </div>
+
+      <div
+        id="sidenavbar"
+        style={{ visibility: menu() ? "hidden" : "visible" }}
+      >
+        <button onClick={() => navigate(-1)}>Back</button>
+        <A href="#start">Start</A>
+        <button onClick={() => setMenu(true)}>Menu</button>
+      </div>
+    </>
+  );
+}
+
+export default Navbar;

src/root.tsx

@@ -2,7 +2,6 @@
 import "@fortawesome/fontawesome-svg-core/styles.css";
 import { Suspense } from "solid-js";
 import {
-  Body,
   FileRoutes,
   Head,
   Html,
@@ -11,11 +10,13 @@ import {
   Routes,
   Scripts,
   Title,
+  useLocation,
 } from "solid-start";
 
 export default function Root() {
+  const location = useLocation();
   return (
-    <Html lang="en">
+    <Html lang={location.pathname.startsWith("/de") ? "de" : "en"}>
       <Head>
         <Link
           rel="apple-touch-icon"
@@ -103,14 +104,12 @@ export default function Root() {
         />
         <Title>SolidStart - Bare</Title>
       </Head>
-      <Body>
-        <Suspense>
-          <Routes>
-            <FileRoutes />
-          </Routes>
-        </Suspense>
-        <Scripts />
-      </Body>
+      <Suspense>
+        <Routes>
+          <FileRoutes />
+        </Routes>
+      </Suspense>
+      <Scripts />
     </Html>
   );
 }

src/routes/de/KSS22.tsx

@@ -1,9 +1,10 @@
-import { Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title, useNavigate } from "solid-start";
+import { lightMode } from "~/components/en/Navbar";
 
 function KSS22() {
   const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>KS S22</Title>
       <Link rel="stylesheet" href="/styles/devices.css" />
 
@@ -14,7 +15,7 @@ function KSS22() {
 
       <div class="row">
         <div class="col-4">
-          <img src="KS S22/S22shutterkode2.jpg" />
+          <img src="/images/KSS22/S22shutterkode2.jpg" />
         </div>
 
         <div class="col-8">
@@ -63,13 +64,13 @@ function KSS22() {
 
       <div class="row">
         <div class="col-4">
-          <img src="KS S22/S22shutterkode5.jpg" />
+          <img src="/images/KSS22/S22shutterkode5.jpg" />
         </div>
         <div class="col-4">
-          <img src="KS S22/BusJump.jpg" />
+          <img src="/images/KSS22/BusJump.jpg" />
         </div>
         <div class="col-4">
-          <img src="KS S22/S22shutterkode4.jpg" />
+          <img src="/images/KSS22/S22shutterkode4.jpg" />
         </div>
       </div>
 
@@ -219,7 +220,7 @@ function KSS22() {
           </tr>
         </tbody>
       </table>
-    </>
+    </Body>
   );
 }
 

src/routes/de/index.tsx

@@ -1,15 +1,13 @@
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faGlobe,
-} from "@fortawesome/pro-regular-svg-icons";
-import { A, Link, Title } from "solid-start";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons";
+import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons";
+import { A, Body, Link, Title } from "solid-start";
 import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
+import { lightMode } from "~/components/de/Navbar";
 
-function StartDE() {
+function Introduction() {
   return (
-    <>
-      <Title>Start</Title>
+    <Body classList={{ "light-mode": lightMode() }}>
+      <Title>Einführung</Title>
       <Link rel="stylesheet" href="/styles/start.css" />
 
       <div class="container">
@@ -64,8 +62,7 @@ function StartDE() {
       <A href="/de/overview">
         <div id="MoreButton">
           <p>
-            Ich will alles darüber lesen!
-            <FontAwesomeIcon icon={faBookOpen} />
+            Ich will alles darüber lesen! <FontAwesomeIcon icon={faBookOpen} />
           </p>
         </div>
       </A>
@@ -73,8 +70,7 @@ function StartDE() {
       <A href="https:/youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV">
         <div id="MoreButton">
           <p>
-            Mir reichen Videos
-            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+            Mir reichen Videos <FontAwesomeIcon icon={faYoutube} />
           </p>
         </div>
       </A>
@@ -82,13 +78,12 @@ function StartDE() {
       <A href="/en/">
         <div id="MoreButton">
           <p>
-            Language
-            <FontAwesomeIcon icon={faGlobe} />
+            Switch to English <FontAwesomeIcon icon={faGlobe} />
           </p>
         </div>
       </A>
-    </>
+    </Body>
   );
 }
 
-export default StartDE;
+export default Introduction;

src/routes/de/manufacturers.tsx

@@ -1,76 +1,13 @@
-import { A } from "@solidjs/router";
-import { Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title } from "solid-start";
 import R from "~/components/Reference";
+import Navbar, { lightMode } from "~/components/de/Navbar";
 
 function Manufacturers() {
-  const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>Hersteller</Title>
       <Link rel="stylesheet" href="/styles/overview.css" />
-      <div id="navbar">
-        <A href="/de/">Start</A>
-        <A href="/de/overview#start">Was sind EUCs?</A>
-        <A href="/de/overview#why">Warum EUCs?</A>
-        <A href="/de/overview#funktion">Funktionsweise</A>
-        <A href="/de/overview#begriffe">Begriffe</A>
-        <A href="/de/overview#sicherheit">Sicherheit</A>
-        <A href="/de/overview#ausrüstung">Ausrüstung</A>
-        <A href="/de/overview#cutout">Cut-out's</A>
-        <A href="/de/overview#akkuss">Akkusicherheit</A>
-        <A href="/de/overview#fahrweise">Fahrweise</A>
-        <A href="/de/overview#wobbles">Wobbles</A>
-        <A href="/de/overview#leistung">Leistung</A>
-        <A href="/de/overview#federung">Federung</A>
-        <A href="/de/overview#reifen">Reifen</A>
-        <A href="/de/overview#historie">Historie</A>
-        <A href="/de/manufacturers">Hersteller</A>
-        <A href="/de/overview#geräte">Geräte Liste</A>
-        {/* <button onclick="myFunction()">Light Mode</button> */}
-        {/* <button onclick="window.location.href='en/overview';">Language</button> */}
-        <div>{/* <button onclick="closeit()"><-Schließen</button> */}</div>
-      </div>
-      <div id="sidenavbar">
-        <button onClick={() => navigate(-1)}>Back</button>
-        {/* <button onclick="menü()">Menu</button> */}
-      </div>
-      {/*
-    <!--light-mode-->
-    */}{" "}
-      {/*
-    <script>
-      function myFunction() {
-        var element = document.body;
-        element.classList.toggle("light-mode");
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--menü-->
-    */}{" "}
-      {/*
-    <script>
-      function menü() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "hidden";
-        document.getElementById("navbar").style.visibility = "visible";
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--closeit-->
-    */}{" "}
-      {/*
-    <script>
-      function closeit() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "visible";
-        document.getElementById("navbar").style.visibility = "hidden";
-      }
-    </script>
-    */}
+      <Navbar />
       <article>
         {/*
       <!--hersteller-->
@@ -243,7 +180,7 @@ function Manufacturers() {
           </p>
         </div>
       </article>
-    </>
+    </Body>
   );
 }
 

src/routes/de/overview.tsx

@@ -1,130 +1,19 @@
-import { A } from "@solidjs/router";
-import { Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title } from "solid-start";
 import DeviceTile from "~/components/DeviceTile";
 import R from "~/components/Reference";
+import Navbar, { lightMode } from "~/components/de/Navbar";
 
 function overview() {
-  const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>Einführung EUCs</Title>
       <Link rel="stylesheet" href="/styles/overview.css" />
-
-      <div id="navbar">
-        <A href="/de/">Start</A>
-        <A href="#start">Was sind EUCs?</A>
-        <A href="#why">Warum EUCs?</A>
-        <A href="#funktion">Funktionsweise</A>
-        <A href="#begriffe">Begriffe</A>
-        <A href="#sicherheit">Sicherheit</A>
-        <A href="#ausrüstung">Ausrüstung</A>
-        <A href="#cutout">Cut-out's</A>
-        <A href="#akkuss">Akkusicherheit</A>
-        <A href="#fahrweise">Fahrweise</A>
-        <A href="#wobbles">Wobbles</A>
-        <A href="#leistung">Leistung</A>
-        <A href="#federung">Federung</A>
-        <A href="#reifen">Reifen</A>
-        <A href="#historie">Historie</A>
-        <A href="/de/manufacturers">Hersteller</A>
-        <A href="#geräte">Geräte Liste</A>
-        {/* <button onclick="myFunction()">Light Mode</button> */}
-        {/* <button onclick="window.location.href='en/overview';">Language</button> */}
-        <div>{/* <button onclick="closeit()"><-Schließen</button> */}</div>
-      </div>
-
-      <div id="sidenavbar">
-        <button onClick={() => navigate(-1)}>Zurück</button>
-        <A href="#start">Start</A>
-        {/* <button onclick="menü()">Menü</button> */}
-      </div>
+      <Navbar />
 
       <header id="start">
         <img src="/images/cover.jpg" />
       </header>
 
-      {/* <!--light-mode--> */}
-      {/* <script>
-      function myFunction() {
-        var element = document.body;
-        element.classList.toggle("light-mode");
-      }
-    </script> */}
-
-      {/* <!--menü--> */}
-      {/* <script>
-      function menü() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "hidden";
-        document.getElementById("navbar").style.visibility = "visible";
-      }
-    </script> */}
-
-      {/* <script>
-        document.getElementById("imghover1").addEventListener("mouseover", function_imghover1);
-        document.getElementById("imghover1").addEventListener("mouseout", funtion_hide);
-
-        document.getElementById('imghover2').addEventListener("mouseover", function_imghover2);
-        document.getElementById('imghover2').addEventListener("mouseout", funtion_hide); 
-
-        getElementById('imghover3').addEventListener("mouseover", function_imghover3);
-        getElementById('imghover3').addEventListener("mouseout", funtion_hide);
-
-    function function_imghover1(){    
-        document.getElementById("hidden1").style.display = "block";
-        let position = document.getElementById("hidden1");
-        
-        const onMouseMove = (e) =>{
-            position.style.left = e.pageX + 'px';
-            position.style.top = e.pageY + 'px';
-        }
-
-        document.addEventListener('mousemove', onMouseMove);
-    }
-
-    function function_imghover2(){    
-        document.getElementById('hidden2').style.display = "block";
-        let position = document.getElementById('hidden2');
-        
-        const onMouseMove = (e) =>{
-            position.style.left = e.pageX + 'px';
-            position.style.top = e.pageY + 'px';
-        }
-
-        document.addEventListener('mousemove', onMouseMove);
-    }
-
-    function function_imghover3(){    
-        document.getElementById('hidden3').style.display = "block";
-        let position = document.getElementById('hidden3');
-        
-        const onMouseMove = (e) =>{
-            position.style.left = e.pageX + 'px';
-            position.style.top = e.pageY + 'px';
-        }
-
-        document.addEventListener('mousemove', onMouseMove);
-    }
-
-    function funtion_hide(){
-        document.getElementById('hidden1').style.display = "none";
-        document.getElementById('hidden2').style.display = "none";
-        document.getElementById('hidden3').style.display = "none";
-    }
-        
-    </script> */}
-
-      {/* <!--closeit--> */}
-      {/* <script>
-      function closeit() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "visible";
-        document.getElementById("navbar").style.visibility = "hidden";
-      }
-    </script> */}
-
       {/* <!--Intro--> */}
       <article>
         <div class="row">
@@ -444,18 +333,12 @@ function overview() {
         <div class="row">
           <h3 id="begriffe">Begriffs- und Spezifikations Erklärungen</h3>
           <div class="col-6">
-            {/* <style>
-            p {
-              text-align: left;
-            }
-          </style> */}
             <p>
               <b id="tiltback">Tilt-back</b>: Die Pedale des Geräts neigen sich
               nach hinten, um den Fahrer abzubremsen. Wird bei niedrigem Akku
               stand oder zu hoher Beanspruchung benutzt, um die Elektronik zu
               schützen.
             </p>
-
             <p>
               <b>Pedal Dip</b>: Die pedale geben nach, das Gerät kann die
               gefragte Leistung nicht aufrechterhalten und die Pedale neigen
@@ -463,13 +346,11 @@ function overview() {
               Bremsen). In den meisten Fällen kommen die Pedale aber sofort
               wieder hoch, sodass die Fahrt ungestört weiter gehen kann.
             </p>
-
             <p>
               <b>Pedal-angle</b>: Winkel in dem die Pedale zum Gerät stehen, von
               vorne gesehen. Ein steilerer Winkel sorgt für mehr Halt in Kurven,
               kann aber auch unangenehm werden für längere Fahrten.
             </p>
-
             <p class="imghover">
               <b id="spiked-pedals">Spiked-pedals</b>: Spitzen auf den Pedalen,
               die Schuhen mehr Halt geben. Ähnlich zu Mountainbike Pedalen, sind
@@ -482,7 +363,6 @@ function overview() {
             <div class="hidden">
               <img src="/images/SpikedPedals.jpeg" />
             </div>
-
             <p class="imghover">
               <b id="pads">Pads</b>: aus Plastik oder Schaumstoff bestehende
               Teile die seitlich am Gerät montiert werden, meist gedruckt aus
@@ -495,13 +375,11 @@ function overview() {
             <div class="hidden">
               <img src="/images/Pads.jpg" />
             </div>
-
             <p>
               <b>Power Pads</b>: haben Kontakt an den Waden und dem
               Schienenbein, dienen zum besseren beschleunigen und bremsen.
               Essenziell für schwere Geräte mit hohen pedalen.
             </p>
-
             <p>
               <b>Jump Pads</b>: haben Kontakt mit dem Fuß und der Verse, dienen
               zum Springen und zur Sicherheit. Im Falle eines unerwarteten
@@ -509,14 +387,13 @@ function overview() {
               Gerät fällt. Allerdings können sie im Falle eines crashes
               behinderlich sein, da sie ein schnelles absteigen erschweren.
             </p>
-
             <p>
               <b>Wobbles</b>: beschreibt das unbeabsichtigte Wackeln des Geräts
               bei höherer Geschwindigkeit. Mehr dazu <R href="#wobbles">hier</R>
             </p>
           </div>
 
-          <div style={{ "padding-left": "3%" }} class="col-6">
+          <div class="col-6">
             <p class="imghover">
               <b id="trolley">Trolley Handle</b>: ein ausfahrbarer Griff zum
               Schieben des Gerätes, ähnlich wie bei einem Koffer.
@@ -991,7 +868,7 @@ function overview() {
             auch unter kontrolle bekommen. Generell sagen viele, dass es eine{" "}
             <b>Sache des Trainings</b> und der Erfahrung ist. Auch sind Geräte
             wie die MSuper-Reihe, RS's und EXN's von Gotway anfälliger als zum
-            Beispiel das Veteran Sherman oder das <R href="/KS22DE">KS S22</R>.
+            Beispiel das Veteran Sherman oder das <R href="/de/KS22">KS S22</R>.
           </p>
         </div>
 
@@ -1086,11 +963,7 @@ function overview() {
           <div class="righties">
             <img src="/images/solowheel-1.jpg" />
           </div>
-          <img
-            class="lefties"
-            style={{ clear: "none" }}
-            src="/images/historieEUC.webp"
-          />
+          <img class="lefties" src="/images/historieEUC.webp" />
           <p>
             Die Grundlegende Technik kam mit dem
             <R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@@ -1217,7 +1090,7 @@ function overview() {
           </p>
 
           <DeviceTile
-            href="KSS22"
+            href="/de/KSS22"
             name="Kingsong S22"
             src="/videos/S20Werbevideo.mp4"
           />
@@ -1254,7 +1127,7 @@ function overview() {
         </div>
       </article>
       <footer />
-    </>
+    </Body>
   );
 }
 

src/routes/en/KSS22.tsx

@@ -1,20 +1,16 @@
-import { Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title } from "solid-start";
+import { lightMode } from "~/components/en/Navbar";
 
 function KSS22() {
-  const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>KS S22</Title>
       <Link rel="stylesheet" href="/styles/devices.css" />
-
-      <div id="sidenavbar">
-        <button onClick={() => navigate(-1)}>Back</button>
-        <button onClick={() => navigate("/en/overview")}>Start</button>
-      </div>
+      {/* <Navbar /> */}
 
       <div class="row">
         <div class="col-4">
-          <img src="KS S22/S22shutterkode2.jpg" />
+          <img src="/images/KSS22/S22shutterkode2.jpg" />
         </div>
 
         <div class="col-8">
@@ -62,13 +58,13 @@ function KSS22() {
 
       <div class="row">
         <div class="col-4">
-          <img src="KS S22/S22shutterkode5.jpg" />
+          <img src="/images/KSS22/S22shutterkode5.jpg" />
         </div>
         <div class="col-4">
-          <img src="KS S22/BusJump.jpg" />
+          <img src="/images/KSS22/BusJump.jpg" />
         </div>
         <div class="col-4">
-          <img src="KS S22/S22shutterkode4.jpg" />
+          <img src="/images/KSS22/S22shutterkode4.jpg" />
         </div>
       </div>
 
@@ -216,7 +212,7 @@ function KSS22() {
           </tr>
         </tbody>
       </table>
-    </>
+    </Body>
   );
 }
 

src/routes/en/index.tsx

@@ -1,15 +1,13 @@
-import {
-  faArrowUpRightFromSquare,
-  faBookOpen,
-  faGlobe,
-} from "@fortawesome/pro-regular-svg-icons";
-import { A, Link, Title } from "solid-start";
+import { faYoutube } from "@fortawesome/free-brands-svg-icons";
+import { faBookOpen, faGlobe } from "@fortawesome/pro-regular-svg-icons";
+import { A, Body, Link, Title } from "solid-start";
 import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
+import { lightMode } from "~/components/en/Navbar";
 
-function StartENG() {
+function Introduction() {
   return (
-    <>
-      <Title>Start</Title>
+    <Body classList={{ "light-mode": lightMode() }}>
+      <Title>Introduction</Title>
       <Link rel="stylesheet" href="/styles/start.css" />
 
       <div class="container">
@@ -66,7 +64,7 @@ function StartENG() {
       <A href="/en/overview">
         <div id="MoreButton">
           <p>
-            I want to read everything about it!
+            I want to read everything about it!{" "}
             <FontAwesomeIcon icon={faBookOpen} />
           </p>
         </div>
@@ -75,8 +73,7 @@ function StartENG() {
       <A href="https:/youtube.com/playlist?list=PLfoxTRt1qLuAg-Al9JNHrl_7KVl-uSxwV">
         <div id="MoreButton">
           <p>
-            Na, videos are just fine
-            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+            Na, videos are just fine <FontAwesomeIcon icon={faYoutube} />
           </p>
         </div>
       </A>
@@ -84,13 +81,12 @@ function StartENG() {
       <A href="/de/">
         <div id="MoreButton">
           <p>
-            Sprache
-            <FontAwesomeIcon icon={faGlobe} />
+            Wechsel zu Deutsch <FontAwesomeIcon icon={faGlobe} />
           </p>
         </div>
       </A>
-    </>
+    </Body>
   );
 }
 
-export default StartENG;
+export default Introduction;

src/routes/en/manufacturers.tsx

@@ -1,75 +1,12 @@
-import { A, Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title } from "solid-start";
 import R from "~/components/Reference";
+import Navbar, { lightMode } from "~/components/en/Navbar";
 
 function Manufacturers() {
-  const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>Manufacturers</Title>
-      <Link rel="stylesheet" href="/styles/overview.css" />
-      <div id="navbar">
-        <A href="/en/">Start</A>
-        <A href="/en/overview#start">What are EUCs?</A>
-        <A href="/en/overview#why">Why EUCs?</A>
-        <A href="/en/overview#funktion">Functionality</A>
-        <A href="/en/overview#begriffe">Glossarry</A>
-        <A href="/en/overview#sicherheit">Safety</A>
-        <A href="/en/overview#ausrüstung">Gear</A>
-        <A href="/en/overview#cutout">Cut-out's</A>
-        <A href="/en/overview#akkuss">Battery safety</A>
-        <A href="/en/overview#fahrweise">Ride style</A>
-        <A href="/en/overview#wobbles">Wobbles</A>
-        <A href="/en/overview#leistung">Performance</A>
-        <A href="/en/overview#federung">Suspension</A>
-        <A href="/en/overview#reifen">Tires</A>
-        <A href="/en/overview#historie">History</A>
-        <A href="/en/manufacturers">Manufacturers</A>
-        <A href="/en/overview#geräte">Device list</A>
-        {/* <button onclick="myFunction()">Light Mode</button> */}
-        {/* <button onclick="window.location.href='/de/manufacturers';">Sprache</button> */}
-        <div>{/* <button onclick="closeit()"><A> <-Close</A></button> */}</div>
-      </div>
-      <div id="sidenavbar">
-        <button onClick={() => navigate(-1)}>Back</button>
-        {/* <button onclick="menü()">Menu</button> */}
-      </div>
-      {/*
-    <!--light-mode-->
-    */}{" "}
-      {/*
-    <script>
-      function myFunction() {
-        var element = document.body;
-        element.classList.toggle("light-mode");
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--menü-->
-    */}{" "}
-      {/*
-    <script>
-      function menü() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "hidden";
-        document.getElementById("navbar").style.visibility = "visible";
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--closeit-->
-    */}{" "}
-      {/*
-    <script>
-      function closeit() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "visible";
-        document.getElementById("navbar").style.visibility = "hidden";
-      }
-    </script>
-    */}
+      <Link rel="stylesheet" href="/styles/overview.css" /> <Navbar />
       <article>
         {/*
       <!--hersteller-->
@@ -234,7 +171,7 @@ function Manufacturers() {
           </p>
         </div>
       </article>
-    </>
+    </Body>
   );
 }
 

src/routes/en/overview.tsx

@@ -1,134 +1,18 @@
-import { A, Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title } from "solid-start";
 import DeviceTile from "~/components/DeviceTile";
 import R from "~/components/Reference";
+import Navbar, { lightMode } from "~/components/en/Navbar";
 
 function Overview() {
-  const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>Introduction EUCs</Title>
       <Link rel="stylesheet" href="/styles/overview.css" />
-      <div id="navbar">
-        <A href="/en/">Start</A>
-        <A href="#start">What are EUCs?</A>
-        <A href="#why">Why EUCs?</A>
-        <A href="#funktion">Functionality</A>
-        <A href="#begriffe">Glossarry</A>
-        <A href="#sicherheit">Safety</A>
-        <A href="#ausrüstung">Gear</A>
-        <A href="#cutout">Cut-out's</A>
-        <A href="#akkuss">Battery safety</A>
-        <A href="#fahrweise">Ride style</A>
-        <A href="#wobbles">Wobbles</A>
-        <A href="#leistung">Performance</A>
-        <A href="#federung">Suspension</A>
-        <A href="#reifen">Tires</A>
-        <A href="#historie">History</A>
-        <A href="/en/manufacturers">Manufacturers</A>
-        <A href="#geräte">Device list</A>
-        {/* <button onclick="myFunction()">Light Mode</button> */}
-        {/* <button onclick="window.location.href='/de/overview';">Sprache</button> */}
-        <div>{/* <button onclick="closeit()"><A> <-Close</A></button> */}</div>
-      </div>
-      <div id="sidenavbar">
-        <button onClick={() => navigate(-1)}>Back</button>
-        <A href="#start">Start</A>
-        {/* <button onclick="menü()">Menu</button> */}
-      </div>
+      <Navbar />
       <header id="start">
         <img src="/images/cover.jpg" />
       </header>
       {/*
-    <!--light-mode-->
-    */}{" "}
-      {/*
-    <script>
-      function myFunction() {
-        var element = document.body;
-        element.classList.toggle("light-mode");
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--menü-->
-    */}{" "}
-      {/*
-    <script>
-      function menü() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "hidden";
-        document.getElementById("navbar").style.visibility = "visible";
-      }
-    </script>
-    */}
-      {/* <script>
-        document.getElementById("imghover1").addEventListener("mouseover", function_imghover1);
-        document.getElementById("imghover1").addEventListener("mouseout", funtion_hide);
-
-        document.getElementById('imghover2').addEventListener("mouseover", function_imghover2);
-        document.getElementById('imghover2').addEventListener("mouseout", funtion_hide); 
-
-        getElementById('imghover3').addEventListener("mouseover", function_imghover3);
-        getElementById('imghover3').addEventListener("mouseout", funtion_hide);
-
-    function function_imghover1(){    
-        document.getElementById("hidden1").style.display = "block";
-        let position = document.getElementById("hidden1");
-        
-        const onMouseMove = (e) =>{
-            position.style.left = e.pageX + 'px';
-            position.style.top = e.pageY + 'px';
-        }
-
-        document.addEventListener('mousemove', onMouseMove);
-    }
-
-    function function_imghover2(){    
-        document.getElementById('hidden2').style.display = "block";
-        let position = document.getElementById('hidden2');
-        
-        const onMouseMove = (e) =>{
-            position.style.left = e.pageX + 'px';
-            position.style.top = e.pageY + 'px';
-        }
-
-        document.addEventListener('mousemove', onMouseMove);
-    }
-
-    function function_imghover3(){    
-        document.getElementById('hidden3').style.display = "block";
-        let position = document.getElementById('hidden3');
-        
-        const onMouseMove = (e) =>{
-            position.style.left = e.pageX + 'px';
-            position.style.top = e.pageY + 'px';
-        }
-
-        document.addEventListener('mousemove', onMouseMove);
-    }
-
-    function funtion_hide(){
-        document.getElementById('hidden1').style.display = "none";
-        document.getElementById('hidden2').style.display = "none";
-        document.getElementById('hidden3').style.display = "none";
-    }
-        
-    </script> */}
-      {/*
-    <!--closeit-->
-    */}{" "}
-      {/*
-    <script>
-      function closeit() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "visible";
-        document.getElementById("navbar").style.visibility = "hidden";
-      }
-    </script>
-    */}{" "}
-      {/*
     <!--Intro-->
     */}
       <article>
@@ -447,13 +331,6 @@ function Overview() {
         <div class="row">
           <h3 id="begriffe">Glossary and specification explonation</h3>
           <div class="col-6">
-            {/*
-          <style>
-            p {
-              text-align: left;
-            }
-          </style>
-          */}
             <p>
               <b id="tiltback">Tilt-back</b>: The device's pedals tilt backwards
               to slow the rider down. Used when the battery is low or when the
@@ -519,7 +396,7 @@ function Overview() {
             </p>
           </div>
 
-          <div style={{ "padding-left": "3%" }} class="col-6">
+          <div class="col-6">
             <p class="imghover">
               <b id="trolley">Trolley Handle</b>: an extendable handle for
               pushing the device, similar to a suitcase.
@@ -991,7 +868,7 @@ function Overview() {
             control. Generally, many say it's a <b>matter of training</b> and
             experience. Also, devices like Gotway's MSuper series, RS's and
             EXN's are more vulnerable than, for example, the Veteran Sherman or
-            the <R href="/KS22ENG">KS S22</R>.
+            the <R href="/en/KS22">KS S22</R>.
           </p>
         </div>
 
@@ -1095,11 +972,7 @@ function Overview() {
           <div class="righties">
             <img src="/images/solowheel-1.jpg" />
           </div>
-          <img
-            class="lefties"
-            style={{ clear: "none" }}
-            src="/images/historieEUC.webp"
-          />
+          <img class="lefties" src="/images/historieEUC.webp" />
           <p>
             The underlying technique came with the
             <R href="https://de.wikipedia.org/wiki/Segway_Personal_Transporter">
@@ -1226,7 +1099,7 @@ function Overview() {
           </p>
 
           <DeviceTile
-            href="KSS22"
+            href="/en/KSS22"
             name="Kingsong S22"
             src="/videos/S20Werbevideo.mp4"
           />
@@ -1263,7 +1136,7 @@ function Overview() {
         </div>
       </article>
       <footer />
-    </>
+    </Body>
   );
 }
 

src/routes/soon.tsx

@@ -1,77 +1,16 @@
-import { A, Link, Title, useNavigate } from "solid-start";
+import { Body, Link, Title, useNavigate } from "solid-start";
+import Navbar, { lightMode } from "~/components/en/Navbar";
 
 function soon() {
   const navigate = useNavigate();
   return (
-    <>
+    <Body classList={{ "light-mode": lightMode() }}>
       <Title>soon</Title>
       <Link rel="stylesheet" href="/styles/overview.css" />
-      <div id="navbar">
-        <A href="/">Start</A>
-        <A href="/en/overview#start">What are EUCs?</A>
-        <A href="/en/overview#why">Why EUCs?</A>
-        <A href="/en/overview#funktion">Functionality</A>
-        <A href="/en/overview#begriffe">Glossarry</A>
-        <A href="/en/overview#sicherheit">Safety</A>
-        <A href="/en/overview#ausrüstung">Gear</A>
-        <A href="/en/overview#cutout">Cut-out's</A>
-        <A href="/en/overview#akkuss">Battery safety</A>
-        <A href="/en/overview#fahrweise">Ride style</A>
-        <A href="/en/overview#wobbles">Wobbles</A>
-        <A href="/en/overview#leistung">Performance</A>
-        <A href="/en/overview#federung">Suspension</A>
-        <A href="/en/overview#reifen">Tires</A>
-        <A href="/en/overview#historie">History</A>
-        <A href="/en/manufacturers">Manufacturers</A>
-        <A href="/en/overview#geräte">Device list</A>
-        {/* <button onclick="myFunction()">Light Mode</button> */}
-        {/* <button onclick="window.location.href='/en/manufacturers';">Sprache</button> */}
-        <div>{/* <button onclick="closeit()"><A> <-Close</A></button> */}</div>
-      </div>
-      <div id="sidenavbar">
-        <button onClick={() => navigate(-1)}>Back</button>
-        {/* <button onclick="menü()">Menu</button> */}
-      </div>
-      {/*
-    <!--light-mode-->
-    */}{" "}
-      {/*
-    <script>
-      function myFunction() {
-        var element = document.body;
-        element.classList.toggle("light-mode");
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--menü-->
-    */}{" "}
-      {/*
-    <script>
-      function menü() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "hidden";
-        document.getElementById("navbar").style.visibility = "visible";
-      }
-    </script>
-    */}{" "}
-      {/*
-    <!--closeit-->
-    */}{" "}
-      {/*
-    <script>
-      function closeit() {
-        var element = document.body;
-        element.classList.toggle("menü");
-        document.getElementById("sidenavbar").style.visibility = "visible";
-        document.getElementById("navbar").style.visibility = "hidden";
-      }
-    </script>
-    */}
+      <Navbar />
       <p style={{ "text-align": "center" }}>This side is not available yet.</p>
       <button onClick={() => navigate(-1)}>Back</button>
-    </>
+    </Body>
   );
 }
 

vite.config.ts

@@ -3,4 +3,8 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [solid()],
+  server: {
+    host: "0.0.0.0",
+    strictPort: true,
+  },
 });