Add custom 404 error page and update index.php for improved accessibility
This commit is contained in:
parent
0b7463c885
commit
4abcb114db
164
404.php
Normal file
164
404.php
Normal file
@ -0,0 +1,164 @@
|
||||
<?php
|
||||
http_response_code(404);
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 – Seite nicht gefunden · Fabian Schieder</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<style>
|
||||
body {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.error-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
max-width: 480px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: clamp(6rem, 20vw, 10rem);
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 60%, #a855f7 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
letter-spacing: -4px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.error-icon {
|
||||
font-size: 3rem;
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.error-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
-webkit-text-fill-color: var(--text);
|
||||
background: none;
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-divider {
|
||||
width: 48px;
|
||||
height: 3px;
|
||||
border-radius: 99px;
|
||||
background: linear-gradient(90deg, #6366f1, #0ea5e9);
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.65rem 1.4rem;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, #6366f1, #0ea5e9);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
/* Glow hinter der 404 */
|
||||
.glow {
|
||||
position: fixed;
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -60%);
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="background-blur"></div>
|
||||
<div class="glow"></div>
|
||||
|
||||
<div class="error-wrap">
|
||||
<div class="error-icon">🔍</div>
|
||||
|
||||
<div class="error-code">404</div>
|
||||
|
||||
<hr class="error-divider">
|
||||
|
||||
<h1 class="error-title">Seite nicht gefunden</h1>
|
||||
|
||||
<p class="error-desc">
|
||||
Die Seite, die du suchst, existiert nicht (mehr)<br>
|
||||
oder wurde vielleicht verschoben.
|
||||
</p>
|
||||
|
||||
<div class="error-actions">
|
||||
<a href="/" class="btn btn-primary">
|
||||
← Zurück zur Startseite
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="btn btn-secondary">
|
||||
Zurück
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
18
index.php
18
index.php
@ -54,7 +54,7 @@ $projects = [
|
||||
],
|
||||
],
|
||||
];
|
||||
?>
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
@ -62,7 +62,6 @@ $projects = [
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Fabian Schieder</title>
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -81,13 +80,13 @@ $projects = [
|
||||
<?php
|
||||
switch ($category) {
|
||||
case "privat":
|
||||
echo '<i class="fas fa-lock"></i> Privat';
|
||||
echo '🔒 Privat';
|
||||
break;
|
||||
case "schule":
|
||||
echo '<i class="fas fa-graduation-cap"></i> Schule';
|
||||
echo '🎓 Schule';
|
||||
break;
|
||||
case "dienste":
|
||||
echo '<i class="fas fa-network-wired"></i> Dienste';
|
||||
echo '🔗 Verlinkungen';
|
||||
break;
|
||||
}
|
||||
?>
|
||||
@ -108,9 +107,11 @@ $projects = [
|
||||
src="<?= htmlspecialchars($project['logo'], ENT_QUOTES) ?>"
|
||||
alt="<?= htmlspecialchars($project['title'], ENT_QUOTES) ?> Logo"
|
||||
class="card-logo"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
>
|
||||
<?php else: ?>
|
||||
<i class="fas fa-folder"></i>
|
||||
<span aria-hidden="true">📁</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
@ -119,9 +120,7 @@ $projects = [
|
||||
<p><?= htmlspecialchars($project['description'], ENT_QUOTES) ?></p>
|
||||
</div>
|
||||
|
||||
<div class="card-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
<div class="card-arrow" aria-hidden="true">→</div>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
@ -135,3 +134,4 @@ $projects = [
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user