Merge branch 'dev' into responsiveCSS

font weight anpassung
update der register seite
2026-05-13 15:13:22 +02:00 · 2026-05-13 14:31:14 +02:00 · 2026-05-13 13:27:23 +02:00 · 2026-05-13 12:48:35 +02:00 · 2026-05-13 12:39:11 +02:00 · 2026-05-13 12:04:55 +02:00
11 changed files with 188 additions and 356 deletions
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
@@ -41,30 +41,38 @@
            </div>
        </nav>
-    <main>
+    <main class="login-page">
-    <div style="width: 50%">
+        <div class="login-container">
-        <div style="width: 130px;">
+            <div class="logo-wrapper">
-            <img src="../images/logo.png" alt="" width="120" height="72">
+                <img src="../images/logo.png" alt="Logo" class="login-logo">
            </div>
-        <h1 style="width: 60%; text-align: center">Bitte anmelden</h1><br>
+            <h1>Bitte anmelden</h1>
-        <label id="inputEmail" >E-Mail-Adresse / </label>
+            <form>
-        <p style="width: 80%;">Benutzername/E-Mail-Adresse:</p>
+                <label id ="inputEmail" class="screenreader-only">E-Mail Adresse / </label>
-        <input type="email" name="email" style="width: 80%;" placeholder="E-Mail-Adresse" required autofocus>
+                
-        <p style="width: 80%;">Passwort:</p>
+                <p class="input-label">Benutzername/E-Mail-Adresse:</p>
-        <input type="password" name="password" style="width: 80%;" placeholder="Passwort" required>
+                <input type="email" name="email" class="login-input" placeholder="E-Mail-Adresse" required autofocus>
-        <div style="width: 80%;">
+            
                <p class="input-label">Passwort:</p>
                <input type="password" name="password" class="login-input" placeholder="Passwort" required>
                <div class="checkbox-wrapper">
                    <label>
                        <input type="checkbox" name="remember-me" value="1"> angemeldet bleiben
                    </label>
                </div>
-        <button type="submit" value="anmelden" name="loginSubmit" style="width: 80%;">anmelden</button><br>
+            
-        <div style="width: 70%; text-align: center">
+                <button type="submit" value="anmelden" name="loginSubmit" class="login-button">anmelden</button>
-            <a href="register.php" style="text-align: center;"> Noch keinen Account? Jetzt hier registrieren! </a>
+            
                <div class="register-link">
                    <a href="register.php">Noch keinen Account? Jetzt hier registrieren!</a>
                </div>
            </form>
        </div>
    </main>
    <footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
        <a href="../legal/impressum.php">Impressum</a>
        <a href="../legal/datenschutz.php">Datenschutz</a>
@@ -41,31 +41,38 @@
        </div>
    </nav>
-    <main>
+    <main class="login-page">
-    <div style="width: 50%">
+        <div class="login-container">
-        <div style="width: 130px;">
+            <div class="logo-wrapper">
-            <img src="../images/logo.png" alt="" width="120" height="72">
+                <img src="../images/logo.png" alt="Logo" class="login-logo">
            </div>
-        <h1 style="width: 50%; text-align: center">Jetzt Registrieren!</h1><br>
+            <h1>Jetzt Registrieren!</h1>
-        <p style="width: 80%;"> Email:</p>
+            <form>
-        <input type="email" name="email"  style="width: 80%;" placeholder="mustermann@web.de" required>
+                <p class="input-label">Email:</p>
-        <p  style="width: 80%;"> Vorname:</p>
+                <input type="email" name="email" class="login-input" placeholder="mustermann@web.de" required>
        <input type="text" name="vorname"  style="width: 80%;" placeholder="Max" required>
        <p  style="width: 80%;"> Nachname:</p>
        <input type="text" name="nachname"  style="width: 80%;" placeholder="Mustermann" required>
-        <p  style="width: 80%;"> Passwort:</p>
+                <p class="input-label">Vorname:</p>
-        <input type="password" name="password"  style="width: 80%;" placeholder="Passwort" required>
+                <input type="text" name="vorname" class="login-input" placeholder="Max" required>
-        <div style="width: 80%;">
+            
                <p class="input-label">Nachname:</p>
                <input type="text" name="nachname" class="login-input" placeholder="Mustermann" required>
                <p class="input-label">Passwort:</p>
                <input type="password" name="password" class="login-input" placeholder="Passwort" required>
                <div class="checkbox-wrapper">
                    <label>
                        <input type="checkbox" value="remember-me"> angemeldet bleiben
                    </label>
                </div>
-        <button type="submit" value="anmelden" name="loginSubmit" style="width: 80%;">kostenlos registrieren</button>
+            
                <button type="submit" value="anmelden" name="loginSubmit" class="login-button">kostenlos registrieren</button>
            </form>
        </div>
    </main>
    <footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
        <a href="../legal/impressum.php">Impressum</a>
        <a href="../legal/datenschutz.php">Datenschutz</a>
@@ -13,22 +13,28 @@
        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>
-    <div>
+
-    <a href = "content/informatik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Informatik</b></a> <br>
+    <!-- Flexbox -->
-    <div>
+     <div class="flexbox">
        <div class="container">
            <a href="content/informatik.php" class="category-link">Informatik</a>
            <div class="article-link">
                <a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a>
            </div>
        </div>
-    <div>
+
-    <a href = "content/mathe.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Mathe</b></a> <br>
+        <div class="container">
-    <div>
+            <a href="content/mathe.php" class="category-link">Mathe</a>
            <div class="article-link">
                <a href="articles/pythagoras.php">Satz des Pythagoras</a>
            </div>
        </div>
-    <div>
+        
-    <a href = "content/physik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Physik</b></a>
+        <div class="container">
-    <div>
+            <a href="content/physik.php" class="category-link">Physik</a>
            <div class="article-link">
                <a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
            </div>
        </div>
    </div>
 </main>
@@ -70,6 +70,10 @@
                    <br>
                    <button type="submit" name="submit"><i></i> Speichern</button>
                </div>
                <div>
                    <br>
                    <button type="button" name="NutzerLoeschen">Account löschen</button>
                </div>
            </div>
        </div>
    </main>
@@ -1,183 +1,129 @@
-/* ====================================
+
-   RESET
+main {
-==================================== */
+  max-width:1200px;
-* {
+  margin: 0 auto;
-  margin: 0;
+  padding: 20px;
-  padding: 0;
+  font-family: Arial;
 }
 .flexbox {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
 }
 .container {
  border: 1px solid white;
  padding: 15px;
  border-radius: 8px;
  background-color: coral;
  transition: transform 0.2s;
 }
 .category-link {
  display: block;
  text-align: left;
  text-decoration: none;
  font-weight: bold;
  padding: 10px;
  background-color: blue;
  color: white;
  border-radius: 4px;
  margin-bottom: 10px;
 }
 .article-link a {
  color: blue;
  text-decoration: none;
 }
@media (min-width: 1024px) {
  .container {
    padding: 25px;
  }
 }
 /* Seite wird horizontal und vertikal zentriert */
 .login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
 }
 .login-container {
    width: 90%;
    max-width: 450px;
    padding: 30px;
    border: 1px solid white;
    border-radius: 10px;
    background-color: white;
 }
 .logo-wrapper {
    text-align: center;
    margin-bottom: 20px;
 }
 .login-logo {
    width: 120px;
    height: auto;
 }
 .login-container h1 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.5rem;
 }
 .input-label {
    margin-bottom: 5px;
    font-weight: bold;
    width: 100%;
 }
 .login-input {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid white;
    border-radius: 4px;
    box-sizing: border-box;
 }
-/* ====================================
+.checkbox-wrapper {
-   BODY
+    margin-bottom: 20px;
 ==================================== */
 body {
  font-family: Arial, Helvetica, sans-serif;
  color: #1f2937;
  line-height: 1.6;
  background: linear-gradient(
          135deg,
          #eef2ff,
          #f8fafc
  );
  min-height: 100vh;
  /* sorgt dafür, dass Footer unten bleibt */
  display: flex;
  flex-direction: column;
 }
-/* ====================================
+.login-button {
   NAVIGATION
 ==================================== */
 nav {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
 }
 nav div a {
  display: block;
  text-decoration: none;
  background: #2563eb;
  color: white;
  padding: 0.9rem 1.4rem;
  border-radius: 30px;
  font-weight: bold;
  transition: all 0.3s ease;
 }
 nav div a:hover,
 nav div a:focus {
  background: #1d4ed8;
  transform: translateY(-2px);
  outline: 3px solid #f59e0b;
  outline-offset: 2px;
 }
 /* ====================================
   MAIN
 ==================================== */
 main {
  flex: 1;
  max-width: 900px;
  margin: 3rem auto;
  padding: 2rem;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
 }
 /* ====================================
   ÜBERSCHRIFT
 ==================================== */
 h1 {
  text-align: center;
  color: #1e3a8a;
  margin-bottom: 2rem;
  font-size: 2.2rem;
 }
 /* ====================================
   BILD
 ==================================== */
 img {
  display: block;
  margin: 0 auto 2rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 15px;
 }
 /* ====================================
   TEXT
 ==================================== */
 p {
  font-size: 1.05rem;
 }
 /* ====================================
   FOOTER
 ==================================== */
 footer {
  background: #1e293b;
  padding: 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
 }
 footer a {
  color: white;
  text-decoration: none;
 }
 footer a:hover,
 footer a:focus {
  text-decoration: underline;
  outline: 2px solid white;
  outline-offset: 2px;
 }
 /* ====================================
   RESPONSIVE TABLET
 ==================================== */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: center;
  }
  main {
    margin: 1rem;
    padding: 1.5rem;
  }
  h1 {
    font-size: 1.8rem;
  }
 }
 /* ====================================
   RESPONSIVE HANDY
 ==================================== */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }
  nav div a {
    width: 100%;
-    text-align: center;
+    padding: 12px;
-  }
+    background-color: blue;
-
+    color: white;
-  footer {
+    border: none;
-    flex-direction: column;
+    border-radius: 4px;
-    text-align: center;
+    font-size: 1rem;
-    gap: 1rem;
+    cursor: pointer;
-  }
+}
 .login-button:hover {
    background-color: blue;
 }
 .register-link {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
 }
 /* Versteckt das doppelte Label fuer Screenreader/Accessibility */
 .screenreader-only {
  display: none;
 }
 body {
  background-color: coral;
 }
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
@@ -1,11 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
@@ -1,26 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
 <body>
 <nav>
    <div>
        <a href="index.html">Homepage</a>
    </div>
    <div>
        <a href="anmeldung.html">Anmelden/Abmelden</a>
    </div>
    <div>
        <a href="registrierung.html">Registrieren</a>
    </div>
 </nav>
@@ -1,40 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
 <body>
    <nav>
        <div>
            <a href="index.html">Homepage</a>
        </div>
        <div>
            <a href="anmeldung.html">Anmelden/Abmelden</a>
        </div>
        <div>
            <a href="registrierung.html">Registrieren</a>
        </div>
    </nav>
    <main>
        <h1>Nutzungsbedingungen</h1>
        <p>
            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>
    </main>
@@ -1,40 +0,0 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="utf-8">
    <meta name="description" content="Gästebuch Beispiel">
    <meta name="author" content="Dietrich Boles">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css" />
    <title>Gästebuch</title>
 </head>
 <body>
    <nav>
        <div>
            <a href="index.html">Homepage</a>
        </div>
        <div>
            <a href="anmeldung.html">Anmelden/Abmelden</a>
        </div>
        <div>
            <a href="registrierung.html">Registrieren</a>
        </div>
    </nav>
    <main>
        <h1>Registrierung</h1>
        <p>
            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>
    </main>
Author	SHA1	Message	Date
viratex	503df76d6b	Merge branch 'dev' into responsiveCSS	2026-05-13 15:13:22 +02:00
rirat-0	829d532518	font weight anpassung	2026-05-13 14:31:14 +02:00
rirat-0	33b0283758	update der register seite	2026-05-13 13:27:23 +02:00
rirat-0	6abc244be7	anpassung der login seite und main css fuer accessibility	2026-05-13 12:48:35 +02:00
rirat-0	012e3b8b9b	update css fuer login seite	2026-05-13 12:39:11 +02:00
rirat-0	9375ab90b0	update der login seite	2026-05-13 12:04:55 +02:00
niklas.ortmann	6198d7b9ae	Merge pull request 'Fehlende CRUD-Operationen' (#3 ) from Fehlende-CRUD-Operationen into dev Reviewed-on: #3	2026-05-13 12:04:38 +02:00
NOrtmann1	52bede8277	Update profile.php	2026-05-13 11:27:46 +02:00
rirat-0	b81216cef1	kleine fehler und farbe behoben	2026-05-12 18:03:37 +02:00
rirat-0	43f0c78b3d	Napassung von home.php und der main.css fuer responsive design	2026-05-12 14:19:57 +02:00