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

add broken link icon to 404 error page with animated styling

Browse Source
This commit is contained in:
Fabian Schieder 2026-02-27 22:07:51 +01:00
parent 7f943c6224
commit 76d47bc193
1 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
404.php
View File

@ -374,20 +374,44 @@ error_log("[404] $ip $method $requestUri");
color: #64748b; color: #64748b;
} }
/* ===== LOGO ===== */ /* ===== BROKEN LINK ICON ===== */
.error-logo { .error-icon-top {
margin-bottom: 2rem; margin-bottom: 1.5rem;
animation: fadeInUp 0.8s ease-out 0.1s both; animation: fadeInUp 0.8s ease-out 0.1s both;
display: flex;
justify-content: center;
} }
.error-logo img { .error-icon-top__circle {
height: 40px; width: 72px;
opacity: 0.7; height: 72px;
transition: opacity 0.3s ease; border-radius: 50%;
background: linear-gradient(135deg, rgba(37,99,235,0.12), rgba(139,92,246,0.12));
border: 1px solid rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
position: relative;
} }
.error-logo img:hover { .error-icon-top__circle::before {
opacity: 1; content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px dashed rgba(37,99,235,0.2);
animation: spinSlow 12s linear infinite;
}
@keyframes spinSlow {
to { transform: rotate(360deg); }
}
.error-icon-top__circle svg {
width: 32px;
height: 32px;
stroke: #8b5cf6;
opacity: 0.8;
} }
/* ===== RESPONSIVE ===== */ /* ===== RESPONSIVE ===== */
@ -426,10 +450,15 @@ error_log("[404] $ip $method $requestUri");
<div class="error-container"> <div class="error-container">
<!-- Logo --> <!-- Broken Link Icon -->
<a href="/" class="error-logo"> <div class="error-icon-top">
<img src="/assets/images/logoText.png" alt="Geizkragen"> <div class="error-icon-top__circle">
</a> <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"/>
<line x1="8" y1="12" x2="16" y2="12"/>
</svg>
</div>
</div>
<!-- Glitch 404 Code --> <!-- Glitch 404 Code -->
<div class="error-code" aria-hidden="true">404</div> <div class="error-code" aria-hidden="true">404</div>