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 359 additions and 191 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> </div>
</nav> </nav>
<main class="login-page"> <main>
<div class="login-container"> <div style="width: 50%">
<div class="logo-wrapper"> <div style="width: 130px;">
<img src="../images/logo.png" alt="Logo" class="login-logo"> <img src="../images/logo.png" alt="" width="120" height="72">
</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>
</div> </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;"> <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>
+23 -30
View File
@@ -41,38 +41,31 @@
</div> </div>
</nav> </nav>
<main class="login-page"> <main>
<div class="login-container"> <div style="width: 50%">
<div class="logo-wrapper"> <div style="width: 130px;">
<img src="../images/logo.png" alt="Logo" class="login-logo"> <img src="../images/logo.png" alt="" width="120" height="72">
</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> </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;"> <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>
+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 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>
<!-- Flexbox --> <a href = "content/informatik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Informatik</b></a> <br>
<div class="flexbox"> <div>
<div class="container"> <a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a>
<a href="content/informatik.php" class="category-link">Informatik</a> </div>
<div class="article-link"> </div>
<a href="articles/datenschutz.php">Datenschutz vs. Datensicherheit</a> <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> <div>
<a href="articles/pythagoras.php">Satz des Pythagoras</a>
<div class="container"> </div>
<a href="content/mathe.php" class="category-link">Mathe</a> </div>
<div class="article-link"> <div>
<a href="articles/pythagoras.php">Satz des Pythagoras</a> <a href = "content/physik.php" style = "padding: 5px; text-align: center; text-decoration: none; display: inline-block;"><b>Physik</b></a>
</div> <div>
</div> <a href="articles/tunneleffekt.php">Der Tunneleffekt</a>
</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> </div>
</main> </main>
-4
View File
@@ -70,10 +70,6 @@
<br> <br>
<button type="submit" name="submit"><i></i> Speichern</button> <button type="submit" name="submit"><i></i> Speichern</button>
</div> </div>
<div>
<br>
<button type="button" name="NutzerLoeschen">Account löschen</button>
</div>
</div> </div>
</div> </div>
</main> </main>
+158 -104
View File
@@ -1,129 +1,183 @@
/* ====================================
main { RESET
max-width:1200px; ==================================== */
margin: 0 auto; * {
padding: 20px; margin: 0;
font-family: Arial; padding: 0;
box-sizing: border-box;
} }
.flexbox { /* ====================================
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; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px;
margin-top: 30px;
} }
.container { /* ====================================
border: 1px solid white; NAVIGATION
padding: 15px; ==================================== */
border-radius: 8px; nav {
background-color: coral; display: flex;
transition: transform 0.2s; justify-content: center;
gap: 1rem;
flex-wrap: wrap;
padding: 1.5rem;
background: white;
box-shadow: 0 3px 10px rgba(0,0,0,0.08);
} }
.category-link { nav div a {
display: block; display: block;
text-align: left;
text-decoration: none; text-decoration: none;
font-weight: bold;
padding: 10px; background: #2563eb;
background-color: blue;
color: white; color: white;
border-radius: 4px;
margin-bottom: 10px; padding: 0.9rem 1.4rem;
border-radius: 30px;
font-weight: bold;
transition: all 0.3s ease;
} }
.article-link a { nav div a:hover,
color: blue; 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; text-decoration: none;
} }
footer a:hover,
footer a:focus {
text-decoration: underline;
@media (min-width: 1024px) { outline: 2px solid white;
.container { outline-offset: 2px;
padding: 25px; }
/* ====================================
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 { RESPONSIVE HANDY
display: flex; ==================================== */
justify-content: center; @media (max-width: 480px) {
align-items: center; body {
min-height: 80vh; font-size: 15px;
} }
nav div a {
.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%; width: 100%;
}
.login-input {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 1px solid white;
border-radius: 4px;
box-sizing: border-box;
}
.checkbox-wrapper {
margin-bottom: 20px;
}
.login-button {
width: 100%;
padding: 12px;
background-color: blue;
color: white;
border: none;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
}
.login-button:hover {
background-color: blue;
}
.register-link {
margin-top: 20px;
text-align: center; text-align: center;
font-size: 0.9rem; }
}
/* Versteckt das doppelte Label fuer Screenreader/Accessibility */ footer {
.screenreader-only { flex-direction: column;
display: none; text-align: center;
} gap: 1rem;
}
body {
background-color: coral;
} }
+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>