From 7c10e0ffe768102916fe31d7634ba131f8e4bf7b Mon Sep 17 00:00:00 2001 From: Fabian Schieder Date: Mon, 2 Mar 2026 23:14:21 +0100 Subject: [PATCH] refactor 404 page layout and styles for improved user experience --- 404.php | 748 +++++++++++++++++--------------------------------------- 1 file changed, 221 insertions(+), 527 deletions(-) diff --git a/404.php b/404.php index c1ac7f0..e00f7d2 100644 --- a/404.php +++ b/404.php @@ -5,554 +5,248 @@ http_response_code(404); // Request-Daten absichern $requestUri = htmlspecialchars($_SERVER['REQUEST_URI'] ?? '', ENT_QUOTES, 'UTF-8'); $method = htmlspecialchars($_SERVER['REQUEST_METHOD'] ?? '', ENT_QUOTES, 'UTF-8'); -$ip = htmlspecialchars($_SERVER['REMOTE_ADDR'] ?? '', ENT_QUOTES, 'UTF-8'); // Optional: einfaches Logging -error_log("[404] $ip $method $requestUri"); +error_log("[404] " . ($_SERVER['REMOTE_ADDR'] ?? '') . " $method $requestUri"); ?> - + - + 404 – Seite nicht gefunden | Geizkragen - - - - -
-
-
-
-
+
+
+ + -
- - -
-
- - - - -
-
- - - - - -
- -
- - - - - -
- -

Seite nicht gefunden

-

- Die Seite, die du suchst, existiert leider nicht oder wurde verschoben. -

- -
- -
- - - - + +
+
+ + + + - Zur Startseite - - -
- -
- -
-
- - - - Request
-
- - - - - - geizkragen.store + +

Seite nicht gefunden

+

+ Die Seite, die du suchst, existiert leider nicht oder wurde verschoben. +

+ +
+ +
+ + + + + + Zur Startseite + +
-
-
+
- + .error-code::before, + .error-code::after { + content: '404'; + position: absolute; + top: 0; left: 0; right: 0; + overflow: hidden; + background: inherit; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .error-code::before { + clip-path: inset(0 0 65% 0); + animation: glitch1 3s infinite linear alternate-reverse; + } + + .error-code::after { + clip-path: inset(65% 0 0 0); + animation: glitch2 3s infinite linear alternate-reverse; + } + + @keyframes glitch1 { + 0%,92% { transform: translate(0); } + 93% { transform: translate(-6px,-2px); } + 94% { transform: translate(3px,1px); } + 95% { transform: translate(-2px,2px); } + 96%,100%{ transform: translate(0); } + } + + @keyframes glitch2 { + 0%,90% { transform: translate(0); } + 91% { transform: translate(4px,2px); } + 92% { transform: translate(-5px,-1px); } + 93% { transform: translate(2px,-2px); } + 94%,100%{ transform: translate(0); } + } + + /* ── Card ── */ + .error-card { + background: rgba(31, 41, 55, 0.55); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border: 1px solid var(--border-subtle); + border-radius: var(--radius-xl); + padding: 2.5rem 2.5rem 2rem; + max-width: 520px; + width: 100%; + box-shadow: var(--shadow-md), 0 0 60px var(--color-primary-glow); + animation: fadeInUp 0.6s ease-out 0.1s both; + } + + .error-card__icon { + width: 56px; + height: 56px; + margin: 0 auto 1.25rem; + background: var(--color-primary-soft); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: var(--color-primary); + animation: pulse-glow 3s ease-in-out infinite; + } + + .error-card__title { + font-size: 1.4rem; + font-weight: 800; + color: var(--text-primary); + margin-bottom: 0.6rem; + } + + .error-card__text { + color: var(--text-muted); + font-size: 0.95rem; + line-height: 1.6; + margin-bottom: 0.25rem; + } + + .error-card__path { + display: inline-block; + background: var(--color-primary-soft); + border: 1px solid rgba(39, 74, 151, 0.25); + color: #6b8fd8; + font-family: 'Courier New', Courier, monospace; + font-size: 0.82rem; + font-weight: 600; + padding: 0.35rem 0.9rem; + border-radius: var(--radius-md); + margin: 1rem 0 1.5rem; + word-break: break-all; + max-width: 100%; + } + + /* ── Buttons ── */ + .error-card__actions { + display: flex; + gap: 0.75rem; + justify-content: center; + flex-wrap: wrap; + } + + .btn { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.7rem 1.4rem; + border-radius: var(--radius-md); + font-size: 0.9rem; + font-weight: 600; + font-family: var(--font-family); + text-decoration: none; + cursor: pointer; + border: none; + transition: all var(--transition-smooth); + } + + .btn--primary { + background: var(--color-primary); + color: #fff; + box-shadow: 0 4px 14px var(--color-primary-glow); + } + + .btn--primary:hover { + background: var(--color-primary-hover); + transform: translateY(-2px); + box-shadow: 0 8px 24px var(--color-primary-glow); + color: #fff; + } + + .btn--ghost { + background: rgba(255,255,255,0.04); + color: var(--text-muted); + border: 1px solid var(--border-subtle); + } + + .btn--ghost:hover { + background: rgba(255,255,255,0.09); + color: var(--text-primary); + transform: translateY(-2px); + } + + /* ── Responsive ── */ + @media (max-width: 480px) { + .error-card { + padding: 1.8rem 1.25rem 1.5rem; + } + .error-card__actions { + flex-direction: column; + } + .btn { + justify-content: center; + width: 100%; + } + } + -