Compare commits

..

2 Commits

Author SHA1 Message Date
caroschulte02-alt 2560814893 First Implementation 2026-05-11 23:34:07 +02:00
caroschulte02-alt 30a3d8dcad First Implementation 2026-05-11 22:45:18 +02:00
11 changed files with 385 additions and 301 deletions
+11
View File
@@ -0,0 +1,11 @@
<!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 -30
View File
@@ -41,38 +41,30 @@
</div>
</nav>
<main class="login-page">
<div class="login-container">
<div class="logo-wrapper">
<img src="../images/logo.png" alt="Logo" class="login-logo">
</div>
<h1>Bitte anmelden</h1>
<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>
<main>
<div style="width: 50%">
<div style="width: 130px;">
<img src="../images/logo.png" alt="" width="120" height="72">
</div>
</main>
<h1 style="width: 60%; text-align: center">Bitte anmelden</h1><br>
<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>
</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>
+23 -30
View File
@@ -41,38 +41,31 @@
</div>
</nav>
<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>
<main>
<div style="width: 50%">
<div style="width: 130px;">
<img src="../images/logo.png" alt="" width="120" height="72">
</div>
</main>
<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>
+17 -23
View File
@@ -13,28 +13,22 @@
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>
<!-- 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>
<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>
</div>
</main>
+30 -45
View File
@@ -41,53 +41,38 @@
</div>
</nav>
<main class="form-page">
<div class="form-container">
<div class="logo-wrapper">
<h1>Benutzerdaten ändern</h1>
<img src="../images/logo.png" alt="Logo" class="login-logo">
</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" class="login-button">
Speichern
</button>
<br><br>
<button type="button" class="login-button">
Account löschen
</button>
</form>
<main>
<hr>
<div>
<div>
<h1>Benutzerdaten ändern</h1>
<a href="/users"><img src="../images/logo.png" alt="" width="120" height="72"></a>
</div>
</main>
<div>
<div>
<label id="Vorname">Vorname</label>
<input type="text" name="Vorname" required placeholder="Vorname" value="<?php //DB-Daten ?>">
</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>
<br>
<button type="submit" name="submit"><i></i> Speichern</button>
</div>
</div>
</div>
</main>
<footer style="position:fixed;bottom:0;width:100%;background:#fff;text-align:center;">
<a href="../legal/impressum.php">Impressum</a>
+153 -172
View File
@@ -1,202 +1,183 @@
main {
max-width:1200px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
/* ====================================
RESET
==================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ====================================
BODY
==================================== */
body {
background-color: #eef2f7;
color: #1f2937;
margin: 0;
}
font-family: Arial, Helvetica, sans-serif;
color: #1f2937;
line-height: 1.6;
.flexbox {
background: linear-gradient(
135deg,
#eef2ff,
#f8fafc
);
min-height: 100vh;
/* sorgt dafür, dass Footer unten bleibt */
display: flex;
flex-direction: column;
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;
/* ====================================
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:hover {
transform: translateY(-3px);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.category-link {
nav div a {
display: block;
text-align: left;
text-decoration: none;
font-weight: bold;
padding: 12px;
background-color: #2563eb;
background: #2563eb;
color: white;
border-radius: 8px;
margin-bottom: 10px;
transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
padding: 0.9rem 1.4rem;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
}
.category-link:hover {
background-color: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0,0,0,0.15);
nav div a:hover,
nav div a:focus {
background: #1d4ed8;
transform: translateY(-2px);
outline: 3px solid #f59e0b;
outline-offset: 2px;
}
.article-link a {
color: #1f2937;
text-decoration: none;
font-weight: bold;
transition: color 0.2s;
/* ====================================
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);
}
.article-link a:hover {
color: #2563eb;
text-decoration: underline;
/* ====================================
ÜBERSCHRIFT
==================================== */
h1 {
text-align: center;
color: #1e3a8a;
margin-bottom: 2rem;
font-size: 2.2rem;
}
/* ====================================
BILD
==================================== */
img {
display: block;
margin: 0 auto 2rem auto;
@media (min-width: 1024px) {
.container {
padding: 25px;
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;
}
}
/* Seite wird horizontal und vertikal zentriert */
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
}
/* ====================================
RESPONSIVE HANDY
==================================== */
@media (max-width: 480px) {
body {
font-size: 15px;
}
.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 {
nav div a {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
.login-logo {
width: 120px;
height: auto;
}
.login-container h1 {
footer {
flex-direction: column;
text-align: center;
margin-bottom: 25px;
font-size: 1.7rem;
color: #1e293b;
}
.input-label {
margin-bottom: 5px;
font-weight: bold;
width: 100%;
color: #1f2937;
}
.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;
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);
gap: 1rem;
}
}
+11
View File
@@ -0,0 +1,11 @@
<!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
@@ -0,0 +1,11 @@
<!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
@@ -0,0 +1,26 @@
<!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
@@ -0,0 +1,40 @@
<!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
@@ -0,0 +1,40 @@
<!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>