Compare commits

..

16 Commits

Author SHA1 Message Date
caroschulte02-alt 2258bf05eb First Implementation 2026-05-13 21:52:25 +02:00
caroschulte02-alt af1a7d8e16 First Implementation 2026-05-13 21:47:45 +02:00
caroschulte02-alt 0131f50d3a First Implementation 2026-05-13 21:46:23 +02:00
caroschulte02-alt 31af70a296 First Implementation 2026-05-13 21:44:52 +02:00
caroschulte02-alt d497ea4fc3 First Implementation 2026-05-13 16:29:31 +02:00
caroschulte02-alt 80316e080a First Implementation 2026-05-13 16:18:12 +02:00
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
11 changed files with 301 additions and 385 deletions
-11
View File
@@ -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>
+22 -14
View File
@@ -41,30 +41,38 @@
</div> </div>
</nav> </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> </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> <label>
<input type="checkbox" name="remember-me" value="1"> angemeldet bleiben <input type="checkbox" name="remember-me" value="1"> angemeldet bleiben
</label> </label>
</div> </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> </div>
</form>
</div> </div>
</main> </main>
<footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;"> <footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
<a href="../legal/impressum.php">Impressum</a> <a href="../legal/impressum.php">Impressum</a>
<a href="../legal/datenschutz.php">Datenschutz</a> <a href="../legal/datenschutz.php">Datenschutz</a>
+22 -15
View File
@@ -41,31 +41,38 @@
</div> </div>
</nav> </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> </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> <label>
<input type="checkbox" value="remember-me"> angemeldet bleiben <input type="checkbox" value="remember-me"> angemeldet bleiben
</label> </label>
</div> </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> </div>
</main> </main>
<footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;"> <footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
<a href="../legal/impressum.php">Impressum</a> <a href="../legal/impressum.php">Impressum</a>
<a href="../legal/datenschutz.php">Datenschutz</a> <a href="../legal/datenschutz.php">Datenschutz</a>
+15 -9
View File
@@ -13,22 +13,28 @@
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 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. sea takimata sanctus est Lorem ipsum dolor sit amet.
</p> </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> <a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a>
</div> </div>
</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> <a href="articles/pythagoras.php">Satz des Pythagoras</a>
</div> </div>
</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> <a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
</div> </div>
</div> </div>
</div>
</main> </main>
+41 -26
View File
@@ -41,36 +41,51 @@
</div> </div>
</nav> </nav>
<main> <main class="form-page">
<hr> <div class="form-container">
<div>
<div> <div class="logo-wrapper">
<h1>Benutzerdaten ändern</h1> <h1>Benutzerdaten ändern</h1>
<a href="/users"><img src="../images/logo.png" alt="" width="120" height="72"></a> <img src="../images/logo.png" alt="Logo" class="login-logo">
</div> </div>
<div>
<div> <form>
<label id="Vorname">Vorname</label>
<input type="text" name="Vorname" required placeholder="Vorname" value="<?php //DB-Daten ?>"> <label class="input-label">Vorname</label>
</div>
<div> <input type="text" name="Vorname" class="login-input" required
<label id="Nachname">Nachname</label> placeholder="Vorname"
<input type="text" name="Nachname" required placeholder="Nachname" value="<?php //DB-Daten ?>"> value="<?php //DB-Daten ?>">
</div>
<div> <label class="input-label">Nachname</label>
<label id="Email">Email-Adresse</label> <input type="text" name="Nachname" class="login-input" required
<input type="email" name="Email" required placeholder="mustermann@web.de" value="<?php //DB-Daten ?>"> placeholder="Nachname"
</div> value="<?php //DB-Daten ?>">
<div>
<label id="Passwort">Passwort</label> <label class="input-label">Email-Adresse</label>
<input type="password" name="Passwort" required placeholder="Passwort"> <input type="email" name="Email" class="login-input" required
</div> placeholder="mustermann@web.de"
<div> value="<?php //DB-Daten ?>">
<label class="input-label">Passwort</label>
<input type="password" name="Passwort" class="login-input"
required placeholder="Passwort">
<br> <br>
<button type="submit" name="submit"><i></i> Speichern</button>
</div> <button type="submit" class="login-button">
</div> Speichern
</button>
<br><br>
<button type="button" class="login-button">
Account löschen
</button>
</form>
</div> </div>
</main> </main>
+181 -162
View File
@@ -1,183 +1,202 @@
/* ====================================
RESET
==================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ====================================
BODY
==================================== */
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;
}
/* ====================================
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 { main {
flex: 1; max-width:1200px;
margin: 0 auto;
max-width: 900px; padding: 20px;
margin: 3rem auto; font-family: Arial, sans-serif;
padding: 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
} }
/* ==================================== body {
ÜBERSCHRIFT background-color: #eef2f7;
==================================== */ color: #1f2937;
h1 { margin: 0;
text-align: center;
color: #1e3a8a;
margin-bottom: 2rem;
font-size: 2.2rem;
} }
/* ==================================== .flexbox {
BILD display: flex;
==================================== */ flex-direction: column;
img { gap: 20px;
margin-top: 30px;
}
.container {
background-color: white;
border-radius: 8px;
padding: 15px;
border: 1px solid #dbe3ec;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.container:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.category-link {
display: block; display: block;
margin: 0 auto 2rem auto; text-align: left;
text-decoration: none;
max-width: 100%; font-weight: bold;
height: auto; padding: 12px;
background-color: #2563eb;
border-radius: 15px; color: white;
border-radius: 8px;
margin-bottom: 10px;
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
} }
/* ==================================== .category-link:hover {
TEXT background-color: #1d4ed8;
==================================== */ transform: translateY(-2px);
p { box-shadow: 0 4px 10px rgba(0,0,0,0.15);
font-size: 1.05rem;
} }
/* ==================================== .article-link a {
FOOTER color: #1f2937;
==================================== */ text-decoration: none;
footer { font-weight: bold;
background: #1e293b; transition: color 0.2s;
}
padding: 1.5rem; .article-link a:hover {
color: #2563eb;
text-decoration: underline;
}
@media (min-width: 1024px) {
.container {
padding: 25px;
}
}
/* Seite wird horizontal und vertikal zentriert */
.login-page {
display: flex; display: flex;
justify-content: center; 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; align-items: center;
} min-height: 80vh;
main {
margin: 1rem;
padding: 1.5rem;
}
h1 {
font-size: 1.8rem;
}
} }
/* ====================================
RESPONSIVE HANDY
==================================== */
@media (max-width: 480px) {
body {
font-size: 15px;
}
nav div a { .login-container {
width: 90%;
max-width: 450px;
padding: 30px;
border: 1px solid #dbe3ec;
border-radius: 10px;
background-color: white;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.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.7rem;
color: #1e293b;
}
.input-label {
margin-bottom: 5px;
font-weight: bold;
width: 100%; width: 100%;
text-align: center; color: #1f2937;
} }
footer { .input-label {
flex-direction: column; margin-bottom: 5px;
text-align: center; font-weight: bold;
gap: 1rem; width: 100%;
} color: #1f2937;
}
.login-input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid #d1d5db;
border-radius: 6px;
box-sizing: border-box;
font-size: 1rem;
background-color: white;
}
.login-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.checkbox-wrapper {
margin-bottom: 20px;
color: #1f2937;
}
.login-button {
width: 100%;
padding: 12px;
background-color: #2563eb;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.login-button:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.register-link {
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
color: #1f2937;
}
.register-link a {
color: #2563eb;
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
.register-link a:hover {
color: #1d4ed8;
text-decoration: underline;
}
/* Versteckt das doppelte Label fuer Screenreader/Accessibility */
.screenreader-only {
display: none;
}
/* Allgemeine Formularseiten */
.form-page {
display: flex;
justify-content: center;
padding: 40px 20px;
}
.form-container {
width: 90%;
max-width: 600px;
padding: 30px;
background-color: white;
border: 1px solid #dbe3ec;
border-radius: 10px;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
} }
-11
View File
@@ -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>
-11
View File
@@ -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>
-26
View File
@@ -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>
-40
View File
@@ -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>
-40
View File
@@ -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>