Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ffd443b9dc | ||
|
|
8fb326cf87 | ||
|
|
c996777f45 | ||
|
|
fa0bcf0af8 | ||
|
|
5e1106b72a | ||
|
|
38f2c699b2 | ||
|
|
b430cb4d39 |
@ -0,0 +1,189 @@
|
||||
|
||||
body {
|
||||
background: #f0f4f8;
|
||||
color: #1b1b2f;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Navigation Styles */
|
||||
.navbar {
|
||||
background: linear-gradient(90deg, #1b1b2f, #4a6fa5)
|
||||
}
|
||||
.navbar .nav-link {
|
||||
color: #fff;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
margin: 0 5px;
|
||||
}
|
||||
.navbar .nav-link:hover {
|
||||
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 */
|
||||
.container-dashboard {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
/* Cards/Scores styles */
|
||||
.container > div {
|
||||
background-color:#ffffff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
||||
padding: 25px;
|
||||
font-size: 30px;
|
||||
flex: 1 1 100%;
|
||||
text-align: center;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
.container > div:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Überschriften und Abstände */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 20px;
|
||||
color: #1b1b2f;
|
||||
}
|
||||
p {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
/* Button Styles */
|
||||
button, .btn {
|
||||
background-color: #4a6fa5;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
button:hover, .btn:hover {
|
||||
background-color: #2b4a7c;
|
||||
}
|
||||
#page-wrapper {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
font-family: 'Segoe UI', sans-serif;
|
||||
}
|
||||
/* Sidebar Styles */
|
||||
#sidebar {
|
||||
width: 240px;
|
||||
min-height: auto;
|
||||
background: linear-gradient(180deg, #1b1b2f, #4a6fa5);
|
||||
color: white;
|
||||
padding: 25px;
|
||||
}
|
||||
#sidebar .nav-link {
|
||||
margin: 0.5rem 0;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
color: white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 6x;
|
||||
}
|
||||
#sidebar .nav-link:hover {
|
||||
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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* Topbar Styles */
|
||||
#topbar {
|
||||
height: 70px;
|
||||
background: white;
|
||||
padding: 0px 30px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
#main-content {
|
||||
background-color: #f0f4f8;
|
||||
padding: 30px;
|
||||
}
|
||||
/* Card Styles */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
|
||||
padding: 25px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Responsive Styles */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.container > div {
|
||||
flex: 1 1 calc(50% - 40px);
|
||||
}
|
||||
#page-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
#sidebar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
#sidebar .nav-link {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.container div {
|
||||
flex: 1 1 calc(25% - 40px);
|
||||
}
|
||||
p.columns{
|
||||
column-count: 2;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
#sidebar .nav-link {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
BIN
image/Logo_loremIpsum.png
Normal file
BIN
image/Logo_loremIpsum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
image/icon_l.png
Normal file
BIN
image/icon_l.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
BIN
image/icon_loremIpsum.png
Normal file
BIN
image/icon_loremIpsum.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
image/icon_loremIpsum2.png
Normal file
BIN
image/icon_loremIpsum2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 635 KiB |
58
index.html
58
index.html
@ -1,21 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<title>My Web Page</title>
|
||||
<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_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">
|
||||
</head>
|
||||
|
||||
<body class="p-4">
|
||||
<h1 class="text-primary">Hello From Main Page</h1>
|
||||
<a href="index.html">Go to Main Page</a>
|
||||
<a href="secondSite.html">Go to Second Page</a>
|
||||
<br />
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Lorem Ipsum - Das Spiel</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<!--evtl. weglassen, da es eine Sidebar gibt -->
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<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>
|
||||
</nav>
|
||||
<div id="page-wrapper">
|
||||
<!-- Sidebar -->
|
||||
<nav id="sidebar" class="bg-dark text-white p-3">
|
||||
<ul class="nav flex-column">
|
||||
<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>
|
||||
|
||||
<button class="btn btn-primary">Primary Button</button>
|
||||
<button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!--Main Area -->
|
||||
<div id="main-area">
|
||||
<!--Topbar-->
|
||||
<header id="topbar">
|
||||
<h1 class="text-center mb-4">Dashboard</h1>
|
||||
<div class="user-info">
|
||||
<span id="username-display">👤 Guest</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content -->
|
||||
<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>
|
||||
<script src="assets/src/example.js"></script>
|
||||
<!--Navigation Script -->
|
||||
<script src="js/navigation.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
33
js/navigation.js
Normal file
33
js/navigation.js
Normal 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
8
pages/home.html
Normal 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
5
pages/leaderboard.html
Normal 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
5
pages/login.html
Normal 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
6
pages/messages.html
Normal 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
7
pages/play.html
Normal 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
6
pages/scores.html
Normal 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>
|
||||
Loading…
x
Reference in New Issue
Block a user