joostadrian/lorem_ipsum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navigation Grundgerüst erstellt

Browse Source
This commit is contained in:
DST81 2026-03-10 18:43:37 +01:00
parent 8fb326cf87
commit ffd443b9dc
11 changed files with 117 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/css/custom.css
View File

@ -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 {

BIN
image/icon_l.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 441 KiB

BIN
image/icon_loremIpsum2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 635 KiB

83
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title >Lorem Ipsum - Das Spiel</title>
<link rel="icon" type="image/png" href="image/icon_loremIpsum.png">
<link rel="icon" type="image/png" href="image/icon_l.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap-5.3.8-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/custom.css">
@ -21,10 +21,8 @@
<!--evtl. weglassen, da es eine Sidebar gibt -->
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
</li>
<li class ="nav-item"><a class="nav-link" href="#" id="navbar-messages">Nachrichten</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="navbar-login">Login / Registrieren</a></li>
</ul>
</div>
</div>
@ -32,24 +30,12 @@
<div id="page-wrapper">
<!-- Sidebar -->
<nav id="sidebar" class="bg-dark text-white p-3">
<h3 class="text-center">Navigation</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="index.html" id="nav-home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-play">Spiel Starten</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-my-scores">Meine Scores</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" id="nav-leaderboard">Leaderboard</a>
</li>
<!-- evtl. weglassen, da es in der Topbar ist
<li class="nav-item">
<a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
</li> -->
<li class="nav-item"><a class="nav-link" href="#" id="nav-home">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="nav-play">Spiel Starten</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="nav-my-scores">Meine Scores</a></li>
<li class="nav-item"> <a class="nav-link" href="#" id="nav-leaderboard">Leaderboard</a></li>
</ul>
</nav>
@ -59,64 +45,19 @@
<header id="topbar">
<h1 class="text-center mb-4">Dashboard</h1>
<div class="user-info">
<span>Guest</span>
<span id="username-display">👤 Guest</span>
</div>
</header>
<!-- Content -->
<main class="container mt-4" id="main-content">
<div class="card">
<h2>Willkommen beim Lorem Ipsum Game</h2>
<p>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!</p>
<p> Wähle eine Option aus der Navigation, um zu starten.</p>
<img id="logo_img" src="image/Logo_loremIpsum.png" alt="Lorem Ipsum Game" class="img-fluid mt-3 d-block mx-auto">
</div>
</main>
<main class="container mt-4" id="main-content"></main>
</div>
</div>
<!-- Bootstrap JS Bundle -->
<script src="assets/bootstrap-5.3.8-dist/js/bootstrap.bundle.min.js"></script>
<!--Navigation Script -->
<script src="js/navigation.js"></script>
<!-- Script zum Navigieren zwischen Seiten -->
<script>
const mainContent = document.getElementById('main-content');
document.getElementById('nav-home').addEventListener('click', () => {
mainContent.innerHTML = `
<h1>Willkommen beim Lorem Ipsum Game</h1>
<p>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!</p>
<h2> Wähle eine Option aus der Navigation, um zu starten.</h2>
`;
});
document.getElementById('nav-play').addEventListener('click', () => {
mainContent.innerHTML = `
<h2 class="mb-3">Spiel Starten</h2>
<p class="mt-2">Hier kannst du das Spiel starten. Viel Erfolg!</p>
<!-- Hier könnte der eigentliche Spielinhalt eingebunden werden -->
`;
});
document.getElementById('nav-my-scores').addEventListener('click', () => {
mainContent.innerHTML = `
<h2 class="mb-3">Meine Scores</h2>
<p class="mt-2">Hier kannst du deine bisherigen Scores einsehen.</p>
<!-- Hier könnte eine Score-Tabelle oder ähnliches eingebunden werden -->
`;
});
document.getElementById('nav-leaderboard').addEventListener('click', () => {
mainContent.innerHTML = `
<h2 class="mb-3">Leaderboard</h2>
<p class="mt-2">Hier kannst du die besten Spieler und ihre Scores sehen.</p>
<!-- Hier könnte eine Leaderboard-Tabelle eingebunden werden -->
`;
});
document.getElementById('nav-login').addEventListener('click', () => {
mainContent.innerHTML = `
<h2 class="mb-3">Login / Registrieren</h2>
<p class="mt-2">Hier kannst du dich einloggen oder registrieren, um deine Scores zu speichern.</p>
<!-- Hier könnte ein Login-Formular eingebunden werden -->
`;
});
</script>
</body>
</html>

33
js/navigation.js Normal file
View File

@ -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 = "<div class='alert alert-danger'>Fehler beim Laden der Seite.</div>";
});
}
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");
});

8
pages/home.html Normal file
View File

@ -0,0 +1,8 @@
<div class="card">
<h2>Willkommen beim Lorem Ipsum Game</h2>
<p>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!</p>
<p> Wähle eine Option aus der Navigation, um zu starten.</p>
<img id="logo_img" src="image/Logo_loremIpsum.png" alt="Lorem Ipsum Game" class="img-fluid mt-3 d-block mx-auto">
</div>

5
pages/leaderboard.html Normal file
View File

@ -0,0 +1,5 @@
<div class="card">
<h2 class="mb-3">Leaderboard</h2>
<p class="mt-2">Hier kannst du die besten Spieler und ihre Scores sehen.</p>
</div>

5
pages/login.html Normal file
View File

@ -0,0 +1,5 @@
<div class="card">
<h2 class="mb-3">Login / Registrieren</h2>
<p class="mt-2">Hier kannst du dich einloggen oder registrieren, um deine Scores zu speichern.</p>
<!-- Hier könnte ein Login-Formular eingebunden werden -->
</div>

6
pages/messages.html Normal file
View File

@ -0,0 +1,6 @@
<div class="card">
<h2 class="mb-3">Nachrichten</h2>
<p class="mt-2">Hier kannst du deine Nachrichten ansehen und verwalten.</p>
<!-- Hier könnte eine Nachrichtenliste oder ähnliches eingebunden werden -->
</div>

7
pages/play.html Normal file
View File

@ -0,0 +1,7 @@
<div class= "card">
<h2 class="mb-3">Spiel Starten</h2>
<p class="mt-2">Hier kannst du das Spiel starten. Viel Erfolg!</p>
<button class="btn btn-primary mt-3">Spiel starten</button>
<!-- Hier könnte der eigentliche Spielinhalt eingebunden werden -->
</div>

6
pages/scores.html Normal file
View File

@ -0,0 +1,6 @@
<div class="card">
<h2 class="mb-3">Meine Scores</h2>
<p class="mt-2">Hier kannst du deine bisherigen Scores einsehen.</p>
<!-- Hier könnte eine Score-Tabelle oder ähnliches eingebunden werden -->
</div>