diff --git a/assets/css/custom.css b/assets/css/custom.css index 352d024..feb608c 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -14,10 +14,22 @@ body { } .navbar .nav-link { color: #fff; - transition: color 0.3s; + transition: color 0.3s, background-color 0.3s; + margin: 0 5px; } .navbar .nav-link:hover { - color: #ffd166; + background-color: #ffd166; + color: #1b1b2f; + border-radius: 6px; + padding: 5px 10px; +} + +.navbar .nav-link.active { + background-color: #ffd166; + color: #1b1b2f; + font-weight: bold; + border-radius: 6px; + padding: 5px 10px; } /* Main content styles */ @@ -76,31 +88,34 @@ button:hover, .btn:hover { /* Sidebar Styles */ #sidebar { width: 240px; - height: auto; + min-height: auto; background: linear-gradient(180deg, #1b1b2f, #4a6fa5); color: white; padding: 25px; } - -.logo { - font-size: 24px; - margin-bottom: 30px; -} -#logo-img { - max-width: 400px; - width: 90%; - height: auto; -} #sidebar .nav-link { margin: 0.5rem 0; - transition: all 0.3s; + transition: color 0.3s, background-color 0.3s; color: white; + padding: 5px 10px; + border-radius: 6x; } #sidebar .nav-link:hover { - color: #ffd166; - background-color: rgba(255,255,255,0.1); + color: #1b1b2f; border-radius: 6px; } +#sidebar .nav-link.active { + color: #1b1b2f; + font-weight: bold; + background-color: #ffd166; + border-radius: 6px; + padding: 5px 10px; +} +#logo-img { + max-width: 500px; + width: 100%; + height: auto; +} #main-area { flex: 1; background: #f3f4f6; @@ -149,6 +164,10 @@ button:hover, .btn:hover { display: flex; overflow-x: auto; } + #sidebar .nav-link { + flex: 0 0 auto; + margin: 0 10px; + } } @media (min-width: 1200px) { body { diff --git a/image/icon_l.png b/image/icon_l.png new file mode 100644 index 0000000..84ae9f7 Binary files /dev/null and b/image/icon_l.png differ diff --git a/image/icon_loremIpsum2.png b/image/icon_loremIpsum2.png new file mode 100644 index 0000000..df644c9 Binary files /dev/null and b/image/icon_loremIpsum2.png differ diff --git a/index.html b/index.html index 894f177..9da057b 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Lorem Ipsum - Das Spiel - + @@ -21,10 +21,8 @@ @@ -32,24 +30,12 @@
@@ -59,64 +45,19 @@

Dashboard

-
-
-

Willkommen beim Lorem Ipsum Game

-

Teste deine Fähigkeiten im Umgang mit Lorem Ipsum Texten! Je schneller und genauer du bist, desto höher ist dein Score. Viel Spaß beim Spielen!

-

Wähle eine Option aus der Navigation, um zu starten.

- Lorem Ipsum Game -
-
+
+ + - - \ No newline at end of file diff --git a/js/navigation.js b/js/navigation.js new file mode 100644 index 0000000..6b05550 --- /dev/null +++ b/js/navigation.js @@ -0,0 +1,33 @@ +document.addEventListener("DOMContentLoaded", () => { + function setActiveMenu(id) { + //Alle Sidebar-Links zurücksetzen + document.querySelectorAll("#sidebar .nav-link").forEach(link => link.classList.remove("active")); + // Alle Navbar-Links zurücksetzen + document.querySelectorAll(".navbar-nav .nav-link").forEach(link => link.classList.remove("active")); + + //Aktiven Link setzen + const activeLink = document.getElementById(id); + if (activeLink) activeLink.classList.add("active"); + } + function loadPage(page, menuId) { + fetch("pages/" + page + ".html") + .then(response => response.text()) + .then(data => { + document.getElementById("main-content").innerHTML = data; + setActiveMenu(menuId); + }) + .catch(error => { + document.getElementById("main-content").innerHTML = "
Fehler beim Laden der Seite.
"; + }); + } + + document.getElementById("nav-home").onclick = () => loadPage("home", "nav-home"); + document.getElementById("nav-play").onclick = () => loadPage("play", "nav-play"); + document.getElementById("nav-my-scores").onclick = () => loadPage("scores", "nav-my-scores"); + document.getElementById("nav-leaderboard").onclick = () => loadPage("leaderboard", "nav-leaderboard"); + document.getElementById("navbar-login").onclick = () => loadPage("login", "navbar-login"); + document.getElementById("navbar-messages").onclick = () => loadPage("messages", "navbar-messages"); + + //Startseite laden + loadPage("home", "nav-home"); +}); \ No newline at end of file diff --git a/pages/home.html b/pages/home.html new file mode 100644 index 0000000..731056c --- /dev/null +++ b/pages/home.html @@ -0,0 +1,8 @@ +
+

Willkommen beim Lorem Ipsum Game

+

Teste deine Fähigkeiten im Umgang mit Lorem Ipsum Texten! Je schneller und genauer du bist, desto höher ist dein Score. + Viel Spaß beim Spielen!

+ +

Wähle eine Option aus der Navigation, um zu starten.

+ Lorem Ipsum Game +
\ No newline at end of file diff --git a/pages/leaderboard.html b/pages/leaderboard.html new file mode 100644 index 0000000..7fbb136 --- /dev/null +++ b/pages/leaderboard.html @@ -0,0 +1,5 @@ +
+

Leaderboard

+ +

Hier kannst du die besten Spieler und ihre Scores sehen.

+
diff --git a/pages/login.html b/pages/login.html new file mode 100644 index 0000000..23f1dd7 --- /dev/null +++ b/pages/login.html @@ -0,0 +1,5 @@ +
+

Login / Registrieren

+

Hier kannst du dich einloggen oder registrieren, um deine Scores zu speichern.

+ +
\ No newline at end of file diff --git a/pages/messages.html b/pages/messages.html new file mode 100644 index 0000000..cf65402 --- /dev/null +++ b/pages/messages.html @@ -0,0 +1,6 @@ +
+

Nachrichten

+ +

Hier kannst du deine Nachrichten ansehen und verwalten.

+ +
\ No newline at end of file diff --git a/pages/play.html b/pages/play.html new file mode 100644 index 0000000..a28877a --- /dev/null +++ b/pages/play.html @@ -0,0 +1,7 @@ +
+

Spiel Starten

+

Hier kannst du das Spiel starten. Viel Erfolg!

+ + + +
\ No newline at end of file diff --git a/pages/scores.html b/pages/scores.html new file mode 100644 index 0000000..78eb95e --- /dev/null +++ b/pages/scores.html @@ -0,0 +1,6 @@ +
+

Meine Scores

+ +

Hier kannst du deine bisherigen Scores einsehen.

+ +
\ No newline at end of file