FSST/Geizkragen
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

improvements

Browse Source
This commit is contained in:
Fabian Schieder 2026-01-22 22:45:32 +01:00
parent 5795861b96
commit a76889aaf8
4 changed files with 149 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
assets/css/login.css
View File

@ -1,141 +1,161 @@
/* assets/css/login.css /* assets/css/login.css
Geizhals-inspiriertes, cleanes Login-Layout Login-Layout im Stil von style.css (dunkler Hintergrund + helle Cards)
*/ */
:root{ :root{
--gh-bg: #f4f6f8; /* nutzt eure globalen Farben aus style.css, mit Fallbacks */
--gh-card: #ffffff; --gh-bg: var(--bg-main, #151923);
--gh-text: #1f2937; --gh-card: var(--bg-card, #ffffff);
--gh-muted: #6b7280; --gh-header: var(--bg-header, #1f2937);
--gh-border: #e5e7eb;
--gh-accent: #18a957; /* "Deal"-Grün */ --gh-text: var(--text-main, #151c2e);
--gh-accent-2: #0f8a45; --gh-muted: var(--text-muted, #6b7280);
--gh-border: var(--border-color, #e5e7eb);
--gh-primary: var(--color-primary, #2563eb);
--gh-primary-hover: var(--color-primary-hover, #1d4ed8);
--gh-danger: #d92d20; --gh-danger: #d92d20;
--gh-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
--gh-radius: 14px; --gh-radius: var(--radius-lg, 16px);
--gh-focus: 0 0 0 4px rgba(24, 169, 87, 0.18); --gh-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.08));
--gh-transition-fast: var(--transition-fast, 150ms ease);
--gh-transition-normal: var(--transition-normal, 250ms ease);
--gh-focus: 0 0 0 4px rgba(37, 99, 235, 0.28);
} }
html, body{ /* Wir stylen nur innerhalb des Login-Bereichs, damit global nichts kaputtgeht */
height: 100%; .auth{
} min-height: calc(100svh - 56px);
padding: 34px 18px 60px;
body{ background: var(--gh-bg);
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
color: var(--gh-text); color: var(--gh-text);
background:
radial-gradient(1200px 500px at 20% 0%, rgba(24,169,87,0.10), transparent 55%),
radial-gradient(900px 400px at 90% 10%, rgba(59,130,246,0.08), transparent 60%),
var(--gh-bg);
} }
/* Überschrift */ .auth__card,
h2{ .auth__sideCard{
max-width: 440px;
margin: 44px auto 14px;
padding: 0 18px;
font-size: 1.55rem;
letter-spacing: 0.2px;
}
/* Formular-Karte */
form{
max-width: 440px;
margin: 0 auto;
padding: 22px 18px 18px;
background: var(--gh-card); background: var(--gh-card);
border: 1px solid var(--gh-border); border: 1px solid var(--gh-border);
border-radius: var(--gh-radius); border-radius: var(--gh-radius);
box-shadow: var(--gh-shadow); box-shadow: var(--gh-shadow);
} }
label{ .auth__title{
margin: 0;
font-size: 1.55rem;
letter-spacing: 0.2px;
color: var(--gh-text);
}
.auth__subtitle{
margin: 0;
color: var(--gh-muted);
font-size: 0.98rem;
line-height: 1.4;
}
.auth__field label{
display: block; display: block;
margin: 12px 0 6px; margin: 0 0 6px;
font-size: 0.95rem; font-size: 0.85rem;
color: var(--gh-muted); color: var(--gh-muted);
} }
input[type="text"], .auth__field input[type="text"],
input[type="password"]{ .auth__field input[type="password"]{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 12px 12px; padding: 0.75rem 0.8rem;
border: 1px solid var(--gh-border); border: 1px solid var(--gh-border);
border-radius: 12px; border-radius: var(--radius-sm, 6px);
background: #fbfbfc; background: #ffffff;
color: var(--gh-text); color: var(--gh-text);
outline: none; outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease; transition: border-color var(--gh-transition-fast), box-shadow var(--gh-transition-fast);
} }
input[type="text"]:focus, .auth__field input[type="text"]:focus,
input[type="password"]:focus{ .auth__field input[type="password"]:focus{
border-color: rgba(24,169,87,0.55); border-color: rgba(37, 99, 235, 0.75);
box-shadow: var(--gh-focus); box-shadow: var(--gh-focus);
background: #ffffff;
} }
/* Submit */ .auth__submit{
input[type="submit"]{
width: 100%; width: 100%;
margin-top: 14px; padding: 0.75rem 0.8rem;
padding: 12px 14px;
border: 0; border: 0;
border-radius: 12px; border-radius: var(--radius-sm, 6px);
background: linear-gradient(180deg, var(--gh-accent), var(--gh-accent-2)); background: var(--gh-primary);
color: #ffffff; color: #ffffff;
font-weight: 650; font-weight: 650;
cursor: pointer; cursor: pointer;
transition: transform 120ms ease, filter 120ms ease; transition: background var(--gh-transition-fast), transform var(--gh-transition-fast);
} }
input[type="submit"]:hover{ .auth__submit:hover{
filter: brightness(1.02); background: var(--gh-primary-hover);
transform: translateY(-1px); transform: translateY(-1px);
} }
input[type="submit"]:active{ .auth__submit:active{
transform: translateY(0px); transform: translateY(0px);
} }
/* Fehlertext (dein <p> oberhalb des Forms) */ .auth__muted{
p{ margin: 8px 0 0;
max-width: 440px;
margin: 10px auto;
padding: 0 18px;
color: var(--gh-muted); color: var(--gh-muted);
} }
p:has(+ form){ .auth__muted a{
/* der Absatz direkt vor dem Form: als Alert darstellen */ color: var(--gh-primary);
color: #ffffff;
background: var(--gh-danger);
border-radius: 12px;
padding: 10px 12px;
box-shadow: 0 8px 18px rgba(217, 45, 32, 0.18);
}
/* Register-Link */
p a{
color: var(--gh-accent-2);
text-decoration: none; text-decoration: none;
font-weight: 600; font-weight: 600;
} }
p a:hover{ .auth__muted a:hover{
text-decoration: underline; text-decoration: underline;
} }
/* Kleine Anpassungen für sehr schmale Displays */ .auth__sideCard{
@media (max-width: 520px){ padding: 18px;
h2{
margin-top: 28px;
font-size: 1.35rem;
} }
form{ .auth__tip{
border-radius: 12px; margin-top: 14px;
padding: 12px 12px;
border-radius: var(--radius-md, 10px);
background: #f3f4f6;
border: 1px solid var(--gh-border);
color: var(--gh-text);
}
@media (max-width: 900px){
.auth__grid{
grid-template-columns: 1fr;
}
.auth__logo{
width: 120px;
}
}
@media (max-width: 520px){
.auth{
padding-top: 18px;
}
.auth__card{
padding: 18px;
}
.auth__header{
grid-template-columns: 1fr;
}
.auth__logo{
width: 140px;
grid-row: auto;
} }
} }

3
footer.php
View File

@ -7,3 +7,6 @@
</nav> </nav>
</div> </div>
</footer> </footer>
</body>
</html>

48
login.php
View File

@ -58,29 +58,49 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
<?php include 'header.php'; ?> <?php include 'header.php'; ?>
<!DOCTYPE html> <!-- Hinweis: header.php öffnet bereits <!DOCTYPE html>, <html>, <head> und <body>. -->
<html>
<body>
<link rel="stylesheet" href="assets/css/login.css"> <link rel="stylesheet" href="assets/css/login.css">
<h2>Geizhals Login</h2>
<main class="auth" role="main">
<section class="auth__grid" aria-label="Login Bereich">
<div class="auth__card">
<header class="auth__header">
<h2 class="auth__title">Login</h2>
</header>
<?php if ($loginError): ?> <?php if ($loginError): ?>
<p><?php echo htmlspecialchars($loginError, ENT_QUOTES, 'UTF-8'); ?></p> <p class="auth__alert" role="alert"><?php echo htmlspecialchars($loginError, ENT_QUOTES, 'UTF-8'); ?></p>
<?php endif; ?> <?php endif; ?>
<form action="login.php" method="POST"> <form class="auth__form" action="login.php" method="POST" autocomplete="on">
<label for="uname">Username:</label> <div class="auth__field">
<input type="text" id="uname" name="uname"><br> <label for="uname">Username</label>
<label for="pw">Password:</label> <input type="text" id="uname" name="uname" inputmode="text" autocomplete="username" required>
<input type="password" id="pw" name="pw"><br><br> </div>
<input type="submit" value="Login">
<div class="auth__field">
<label for="pw">Passwort</label>
<input type="password" id="pw" name="pw" autocomplete="current-password" required>
</div>
<div class="auth__actions">
<input class="auth__submit" type="submit" value="Einloggen">
</div>
</form> </form>
<p><a href="register.html">Register</a></p> <div class="auth__links">
</body> <p class="auth__muted">Neu hier? <a href="other/login.html">Account erstellen</a></p>
</html> <p class="auth__muted"><a href="index.php">Zurück zur Startseite</a></p>
</div>
</div>
</section>
</main>
<?php <?php
mysqli_close($conn); mysqli_close($conn);
include 'footer.php'; include 'footer.php';
?> ?>
<!-- footer.php schließt </body> und </html> -->

8
style.css
View File

@ -10,7 +10,7 @@
} }
:root { :root {
--bg-main: #f4f6f9; --bg-main: #151923;
--bg-card: #ffffff; --bg-card: #ffffff;
--bg-header: #1f2937; --bg-header: #1f2937;
@ -18,7 +18,7 @@
--color-primary-hover: #1d4ed8; --color-primary-hover: #1d4ed8;
--color-accent: #10b981; --color-accent: #10b981;
--text-main: #111827; --text-main: #151c2e;
--text-muted: #6b7280; --text-muted: #6b7280;
--text-invert: #ffffff; --text-invert: #ffffff;
@ -41,8 +41,8 @@
body { body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, "Helvetica Neue", Arial, sans-serif; Roboto, "Helvetica Neue", Arial, sans-serif;
background: var(--bg-main); background: var(--bg-main); !important;
color: var(--text-main); color: var(--text-main); !important;
line-height: 1.45; line-height: 1.45;
} }