update styling

assets/css/custom.css

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

pages/home.html

@@ -1,7 +1,8 @@
-<div class="card">
+<div class="card mb-4 text-start">
-    <h4 class="card-title mb-3">Willkommen beim Lorem Ipsum Game</h2>
+    <div class="mb-4">
-    <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. 
+        <h2 class="fw-bold mb-1">Willkommen beim Lorem Ipsum Game</h2>
-        Viel Spaß beim Spielen!</p>
+        <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>
-    <p class="card-text fs-6"> Wähle eine Option aus der Navigation, um zu starten.</p>
+    </div>
-    <img id="logo_img" src="image/Logo_loremIpsum.png" alt="Lorem Ipsum Game"class="img-fluid mt-3 d-block mx-auto">
+    <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> 

pages/leaderboard.html

@@ -1,8 +1,9 @@
 <!-- Hauptbereich der Rangliste -->
-<div class="card">
+<div class="card mb-4 text-start">
-    <h2 class="mb-3">Leaderboard</h2>
+    <div class="mb-4">
-    
+        <h2 class="fw-bold mb-1">Leaderboard</h2>
-    <p class="mt-2 mb-4">Hier siehst du ein Leaderboard mit den 10 Besten User.</p>
+        <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">

pages/login.html

@@ -1,13 +1,16 @@
 <!-- Login Seite -->
-<div class="card">
+<div class="card mb-4 text-start">
-    <h2 class="mb-3">Account</h2>
+    <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>
+        <h3 class="mb-2">Aktuelle Sitzung</h3>
-        <p class="mb-2" id="current-session-text">Nicht eingeloggt.</p>
+        <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>

pages/messages.html

@@ -1,8 +1,8 @@
-<div class="card messages-card">
+<div class="card messages-card mb-4 text-start">
-    <div class="messages-header">
+    <div class="messages-header mb-4">
         <div>
-            <h2 class="mb-1">Nachrichten</h2>
+            <h2 class="fw-bold mb-1">Nachrichten</h2>
-            <p class="text-muted mb-0">Fordere andere User heraus und lies eingehende Antworten.</p>
+            <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>

pages/play.html

@@ -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 class="d-flex justify-content-between align-items-md-center flex-column flex-md-row mb-4">
-        <div>
+        <div class="mb-3 mb-md-0">
-            <h2 class="fw-bold mb-0">Lorem Ipsum - Challenge you brain</h2>
+            <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>

pages/scores.html

@@ -1,7 +1,8 @@
-<div class="card">
+<div class="card mb-4 text-start">
-    <h2 class="mb-3">Meine Scores</h2>
+    <div class="mb-4">
-
+        <h2 class="fw-bold mb-1">Meine Scores</h2>
-    <p class="mt-2 mb-4">Hier siehst du alle gespeicherten Scores deines Accounts.</p>
+        <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>