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>
+28 -20
View File
@@ -41,30 +41,38 @@
</div>
</nav>
<main>
<div style="width: 50%">
<div style="width: 130px;">
<img src="../images/logo.png" alt="" width="120" height="72">
</div>
<main class="login-page">
<div class="login-container">
<div class="logo-wrapper">
<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>
<p style="width: 80%;">Benutzername/E-Mail-Adresse:</p>
<input type="email" name="email" style="width: 80%;" placeholder="E-Mail-Adresse" required autofocus>
<p style="width: 80%;">Passwort:</p>
<input type="password" name="password" style="width: 80%;" placeholder="Passwort" required>
<div style="width: 80%;">
<label>
<input type="checkbox" name="remember-me" value="1"> angemeldet bleiben
</label>
<form>
<label id ="inputEmail" class="screenreader-only">E-Mail Adresse / </label>
<p class="input-label">Benutzername/E-Mail-Adresse:</p>
<input type="email" name="email" class="login-input" placeholder="E-Mail-Adresse" required autofocus>
<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" class="login-button">anmelden</button>
<div class="register-link">
<a href="register.php">Noch keinen Account? Jetzt hier registrieren!</a>
</div>
</form>
</div>
<button type="submit" value="anmelden" name="loginSubmit" style="width: 80%;">anmelden</button><br>
<div style="width: 70%; text-align: center">
<a href="register.php" style="text-align: center;"> Noch keinen Account? Jetzt hier registrieren! </a>
</div>
</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>
+30 -23
View File
@@ -41,31 +41,38 @@
</div>
</nav>
<main>
<div style="width: 50%">
<div style="width: 130px;">
<img src="../images/logo.png" alt="" width="120" height="72">
<main class="login-page">
<div class="login-container">
<div class="logo-wrapper">
<img src="../images/logo.png" alt="Logo" class="login-logo">
</div>
<h1>Jetzt Registrieren!</h1>
<form>
<p class="input-label">Email:</p>
<input type="email" name="email" class="login-input" placeholder="mustermann@web.de" required>
<p class="input-label">Vorname:</p>
<input type="text" name="vorname" class="login-input" placeholder="Max" required>
<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" class="login-button">kostenlos registrieren</button>
</form>
</div>
<h1 style="width: 50%; text-align: center">Jetzt Registrieren!</h1><br>
<p style="width: 80%;"> Email:</p>
<input type="email" name="email" style="width: 80%;" placeholder="mustermann@web.de" required>
<p style="width: 80%;"> Vorname:</p>
<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>
<input type="password" name="password" style="width: 80%;" placeholder="Passwort" required>
<div style="width: 80%;">
<label>
<input type="checkbox" value="remember-me"> angemeldet bleiben
</label>
</div>
<button type="submit" value="anmelden" name="loginSubmit" style="width: 80%;">kostenlos registrieren</button>
</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>
+23 -17
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
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>
<div>
<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>
<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>
<a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
</div>
<!-- Flexbox -->
<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 class="container">
<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 class="container">
<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>
+43 -28
View File
@@ -41,38 +41,53 @@
</div>
</nav>
<main>
<main class="form-page">
<hr>
<div>
<div>
<h1>Benutzerdaten ändern</h1>
<a href="/users"><img src="../images/logo.png" alt="" width="120" height="72"></a>
</div>
<div>
<div>
<label id="Vorname">Vorname</label>
<input type="text" name="Vorname" required placeholder="Vorname" value="<?php //DB-Daten ?>">
<div class="form-container">
<div class="logo-wrapper">
<h1>Benutzerdaten ändern</h1>
<img src="../images/logo.png" alt="Logo" class="login-logo">
</div>
<div>
<label id="Nachname">Nachname</label>
<input type="text" name="Nachname" required placeholder="Nachname" value="<?php //DB-Daten ?>">
</div>
<div>
<label id="Email">Email-Adresse</label>
<input type="email" name="Email" required placeholder="mustermann@web.de" value="<?php //DB-Daten ?>">
</div>
<div>
<label id="Passwort">Passwort</label>
<input type="password" name="Passwort" required placeholder="Passwort">
</div>
<div>
<form>
<label class="input-label">Vorname</label>
<input type="text" name="Vorname" class="login-input" required
placeholder="Vorname"
value="<?php //DB-Daten ?>">
<label class="input-label">Nachname</label>
<input type="text" name="Nachname" class="login-input" required
placeholder="Nachname"
value="<?php //DB-Daten ?>">
<label class="input-label">Email-Adresse</label>
<input type="email" name="Email" class="login-input" required
placeholder="mustermann@web.de"
value="<?php //DB-Daten ?>">
<label class="input-label">Passwort</label>
<input type="password" name="Passwort" class="login-input"
required placeholder="Passwort">
<br>
<button type="submit" name="submit"><i></i> Speichern</button>
</div>
<button type="submit" class="login-button">
Speichern
</button>
<br><br>
<button type="button" class="login-button">
Account löschen
</button>
</form>
</div>
</div>
</main>
</main>
<footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
<a href="../legal/impressum.php">Impressum</a>
+177 -158
View File
@@ -1,183 +1,202 @@
/* ====================================
RESET
==================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
main {
max-width:1200px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
}
/* ====================================
BODY
==================================== */
body {
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
line-height: 1.6;
background-color: #eef2f7;
color: #1f2937;
margin: 0;
}
background: linear-gradient(
135deg,
#eef2ff,
#f8fafc
);
min-height: 100vh;
/* sorgt dafür, dass Footer unten bleibt */
.flexbox {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 30px;
}
/* ====================================
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);
.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;
}
nav div a {
.container:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.category-link {
display: block;
text-align: left;
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 {
padding: 12px;
background-color: #2563eb;
color: white;
text-decoration: none;
border-radius: 8px;
margin-bottom: 10px;
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
footer a:hover,
footer a:focus {
text-decoration: underline;
outline: 2px solid white;
outline-offset: 2px;
.category-link:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
/* ====================================
RESPONSIVE TABLET
==================================== */
@media (max-width: 768px) {
nav {
flex-direction: column;
.article-link a {
color: #1f2937;
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
}
.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;
justify-content: center;
align-items: center;
}
main {
margin: 1rem;
padding: 1.5rem;
}
h1 {
font-size: 1.8rem;
}
min-height: 80vh;
}
/* ====================================
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%;
text-align: center;
}
color: #1f2937;
}
footer {
flex-direction: column;
.input-label {
margin-bottom: 5px;
font-weight: bold;
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;
gap: 1rem;
}
}
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>