Erste Schritte der Navigation implementiert
This commit is contained in:
DST81
parent
5e1106b72a
commit
fa0bcf0af8
@ -1,56 +1,154 @@
|
||||
|
||||
body {
|
||||
background: white;
|
||||
color: black;
|
||||
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;
|
||||
}
|
||||
p.image {
|
||||
text-align: center;
|
||||
|
||||
/* Navigation Styles */
|
||||
.navbar {
|
||||
background: linear-gradient(90deg, #1b1b2f, #4a6fa5)
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
.navbar .nav-link {
|
||||
color: #fff;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
.navbar .nav-link:hover {
|
||||
color: #ffd166;
|
||||
}
|
||||
|
||||
/* Main content styles */
|
||||
.container-dashboard {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
background-color: dodgerblue;
|
||||
}
|
||||
.container div {
|
||||
background-color:#f1f1f1;
|
||||
margin: 10px;
|
||||
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;
|
||||
color: black;
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
background-color: steelblue;
|
||||
/* Ü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: 100vh;
|
||||
background: linear-gradient(180deg, #1b1b2f, #4a6fa5);
|
||||
color: white;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
padding: 25px;
|
||||
}
|
||||
.container div {
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
#sidebar .nav-link {
|
||||
margin: 0.5rem 0;
|
||||
transition: color 0.3s background-color 0.3s;
|
||||
}
|
||||
#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) {
|
||||
.container > div {
|
||||
flex: 1 1 calc(50% - 40px);
|
||||
}
|
||||
#page-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
#sidebar {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
body {
|
||||
background-color: darkblue;
|
||||
color: white;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
p {
|
||||
.container div {
|
||||
flex: 1 1 calc(25% - 40px);
|
||||
}
|
||||
p.columns{
|
||||
column-count: 2;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
p.dotted {
|
||||
column-gap: 2rem;
|
||||
column-rule: 5px dotted black;
|
||||
outline-style: dotted;
|
||||
}
|
||||
.container div {
|
||||
flex: 1 1 calc(25% - 20px);
|
||||
#sidebar .nav-link {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
138
index.html
138
index.html
@ -1,37 +1,129 @@
|
||||
<!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>
|
||||
<!-- 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>
|
||||
<p class="dotted" >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
<p class="image"><img src="https://cdn.pixabay.com/photo/2020/04/05/13/22/lorem-5006124_1280.jpg" alt="Lorem ipsum Blumen" width="200px"></p>
|
||||
<div class="container">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
<div>Item 4</div>
|
||||
<!-- 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>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" 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>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#" id="nav-login">Login / Registrieren</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a href="index.html">Go to Main Page</a>
|
||||
<a href="secondSite.html">Go to Second Page</a>
|
||||
<br />
|
||||
</div>
|
||||
</nav>
|
||||
<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 text-white" href="#" id="nav-home">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="#" id="nav-play">Spiel Starten</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="#" id="nav-my-scores">Meine Scores</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="#" id="nav-leaderboard">Leaderboard</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-white" href="#" id="nav-login">Login / Registrieren</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<button class="btn btn-primary">Primary Button</button>
|
||||
<button class="btn btn-secondary" onclick="exampleLog()">Secondary Button</button>
|
||||
<button class="btn btn-success">Success Button</button>
|
||||
<button class="btn btn-danger">Danger Button</button>
|
||||
<button class="btn btn-warning">Warning Button</button>
|
||||
<button class="btn btn-info">Info Button</button>
|
||||
<button class="btn btn-light">Light Button</button>
|
||||
<button class="btn btn-dark">Dark Button</button>
|
||||
<button class="btn btn-link">Link Button</button>
|
||||
<!--Main Area -->
|
||||
<div id="main-area">
|
||||
<!--Topbar-->
|
||||
<header id="topbar">
|
||||
<h1 class="text-center mb-4">Dashboard</h1>
|
||||
<div class="user-info">
|
||||
<span>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>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
Loading…
x
Reference in New Issue
Block a user