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

update styling

Browse Source
This commit is contained in:
Trompi001 2026-05-25 17:41:51 +02:00
parent 2d51443c94
commit 909eb97bbb
7 changed files with 42 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/custom.css
View File

@ -63,9 +63,7 @@ body {
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:not(.modal):hover {
@ -238,6 +236,7 @@ p {
background: #ffffff;
border-radius: 10px;
overflow: hidden;
font-size: 1rem;
}
.leaderboard-table th,
@ -245,6 +244,7 @@ p {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
font-size: 16px;
}
.leaderboard-table thead th {

13
pages/home.html
View File

@ -1,7 +1,8 @@
<div class="card">
<h4 class="card-title mb-3">Willkommen beim Lorem Ipsum Game</h2>
<p class="card-text text-uted fs-6 mb-4">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 class="card-text fs-6"> 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 class="card mb-4 text-start">
<div class="mb-4">
<h2 class="fw-bold mb-1">Willkommen beim Lorem Ipsum Game</h2>
<p class="text-muted mb-0 fs-6">Teste deine Fähigkeiten im Umgang mit Lorem Ipsum Texten! Je schneller und genauer du bist, desto höher ist dein Score.</p>
</div>
<p class="card-text fs-6">Wähle eine Option aus der Navigation, um zu starten. Viel Spaß beim Spielen!</p>
<img id="logo_img" src="image/Logo_loremIpsum.png" alt="Lorem Ipsum Game" class="img-fluid mt-3 d-block mx-auto">
</div>

9
pages/leaderboard.html
View File

@ -1,8 +1,9 @@
<!-- Hauptbereich der Rangliste -->
<div class="card">
<h2 class="mb-3">Leaderboard</h2>
<p class="mt-2 mb-4">Hier siehst du ein Leaderboard mit den 10 Besten User.</p>
<div class="card mb-4 text-start">
<div class="mb-4">
<h2 class="fw-bold mb-1">Leaderboard</h2>
<p class="text-muted mb-0 fs-6">Hier siehst du ein Leaderboard mit den 10 besten Usern.</p>
</div>
<!-- Tabellarische Darstellung der besten Eintraege -->
<table class="leaderboard-table">

23
pages/login.html
View File

@ -1,13 +1,16 @@
<!-- Login Seite -->
<div class="card">
<h2 class="mb-3">Account</h2>
<div class="card mb-4 text-start">
<div class="mb-4">
<h2 class="fw-bold mb-1">Account</h2>
<p class="text-muted mb-0 fs-6">Verwalte deine Sitzung und Account-Details.</p>
</div>
<div id="auth-feedback" class="alert d-none" role="status" aria-live="polite"></div>
<!-- Logout und Account löschen -->
<div class="card bg-light mb-3" id="current-session-box">
<h3 class="h5 mb-2">Aktuelle Sitzung</h3>
<p class="mb-2" id="current-session-text">Nicht eingeloggt.</p>
<h3 class="mb-2">Aktuelle Sitzung</h3>
<p class="h5 mb-2" id="current-session-text">Nicht eingeloggt.</p>
<div class="d-flex gap-2">
<button id="logout-button" type="button" class="btn btn-outline-secondary btn-sm" disabled>Logout</button>
<button id="delete-account-button" type="button" class="btn btn-danger btn-sm" disabled>Account löschen</button>
@ -18,13 +21,13 @@
<div class="row g-3" id="auth-forms-row">
<div class="col-12 col-lg-6">
<div class="card h-100">
<h3 class="h5 mb-3">Login</h3>
<h3 class="mb-3">Login</h3>
<form id="login-form">
<div class="mb-3">
<div class="h5 mb-3">
<label for="login-username" class="form-label">Username</label>
<input id="login-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
</div>
<div class="mb-3">
<div class="h5 mb-3">
<label for="login-password" class="form-label">Passwort</label>
<input id="login-password" class="form-control" type="password" required maxlength="100" autocomplete="current-password" />
</div>
@ -35,15 +38,15 @@
<div class="col-12 col-lg-6">
<div class="card h-100">
<h3 class="h5 mb-3">Neuen Account erstellen</h3>
<h3 class="mb-3">Neuen Account erstellen</h3>
<form id="register-form">
<div class="mb-3">
<div class="h5 mb-3">
<label for="register-username" class="form-label">Gewünschter Username</label>
<input id="register-username" class="form-control" type="text" required maxlength="40" autocomplete="username" />
</div>
<button type="submit" class="btn btn-success">Account anlegen</button>
</form>
<p class="small mt-3 mb-0 text-muted">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
<p class="text-muted mb-0 fs-6">Hinweis: Das Passwort wird vom Backend erstellt und bei Erfolg angezeigt.</p>
</div>
</div>
</div>

8
pages/messages.html
View File

@ -1,8 +1,8 @@
<div class="card messages-card">
<div class="messages-header">
<div class="card messages-card mb-4 text-start">
<div class="messages-header mb-4">
<div>
<h2 class="mb-1">Nachrichten</h2>
<p class="text-muted mb-0">Fordere andere User heraus und lies eingehende Antworten.</p>
<h2 class="fw-bold mb-1">Nachrichten</h2>
<p class="text-muted mb-0 fs-6">Fordere andere User heraus und lies eingehende Antworten.</p>
</div>
<button class="btn btn-sm" id="refresh-messages-button" type="button">Aktualisieren</button>
</div>

12
pages/play.html
View File

@ -1,14 +1,14 @@
<!-- Spielseite: Die vier Phasen werden per play.js ein- und ausgeblendet. -->
<div class="game-container">
<div class="game-container text-start">
<!-- Status-Badge zeigt die aktuelle Spielphase: Bereit, Lernphase, Eingabe, Abgeschlossen. -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div>
<h2 class="fw-bold mb-0">Lorem Ipsum - Challenge you brain</h2>
<div class="d-flex justify-content-between align-items-md-center flex-column flex-md-row mb-4">
<div class="mb-3 mb-md-0">
<h2 class="fw-bold mb-1">Lorem Ipsum - Challenge your brain</h2>
<div id="challengeHint" class="challenge-hint d-none"></div>
<p class="text-muted mb-0">Merken Sie sich den Text so gut wie möglich.</p>
<p class="text-muted mb-0 fs-6">Merken Sie sich den Text so gut wie möglich.</p>
</div>
<div id="gameStatus" class="badge bg-secondary fs-6 px-3 py-2">
<div id="gameStatus" class="badge bg-secondary fs-6 px-3 py-2" style="width: fit-content;">
Bereit
</div>
</div>

9
pages/scores.html
View File

@ -1,7 +1,8 @@
<div class="card">
<h2 class="mb-3">Meine Scores</h2>
<p class="mt-2 mb-4">Hier siehst du alle gespeicherten Scores deines Accounts.</p>
<div class="card mb-4 text-start">
<div class="mb-4">
<h2 class="fw-bold mb-1">Meine Scores</h2>
<p class="text-muted mb-0 fs-6">Hier siehst du alle gespeicherten Scores deines Accounts.</p>
</div>
<div id="scores-feedback" class="alert d-none mb-4" role="alert"></div>