Skip to content

M
MBetterc
Commit 0cf1f90a authored by Stefy Lanza (nextime / spora )'s avatar Stefy Lanza (nextime / spora )
Browse files
Options

Add humorous 404 page for Townships Combat League website 

- Create custom 404.html with combat sports theme
- Features TKO (Technical Knockout) messaging
- Includes animated boxing glove and fun stats
- Configure nginx to use custom 404 error page
parent d9a450c0
Show whitespace changes
Inline Side-by-side
Showing with 255 additions and 0 deletions
nginx.conf
View file @ 0cf1f90a
......@@ -13,6 +13,13 @@ server {
root /home/mbetterclient/web;
index index.html;
# Custom error pages
error_page 404 /404.html;
location = /404.html {
root /home/mbetterclient/web;
internal;
}
# Logging
access_log /var/log/nginx/tcl_access.log;
error_log /var/log/nginx/tcl_error.log;
......
web/404.html 0 → 100644
View file @ 0cf1f90a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404 - TKO! | Townships Combat League</title>
<link rel="stylesheet" href="styles.css">
<style>
.error-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(26, 26, 26, 0.9) 50%, rgba(0, 0, 0, 0.95) 100%);
padding: 40px 20px;
text-align: center;
}
.error-content {
max-width: 600px;
animation: fadeInUp 0.8s ease;
}
.error-code {
font-size: 12rem;
font-weight: 900;
line-height: 1;
margin-bottom: 20px;
background: linear-gradient(135deg, #ff4d4d 0%, #ff8c00 50%, #ff4d4d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 60px rgba(255, 77, 77, 0.5);
animation: pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow {
0%, 100% {
filter: drop-shadow(0 0 20px rgba(255, 77, 77, 0.5));
}
50% {
filter: drop-shadow(0 0 40px rgba(255, 77, 77, 0.8));
}
}
.error-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 15px;
}
.error-subtitle {
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 30px;
line-height: 1.6;
}
.fighter-animation {
font-size: 6rem;
margin: 30px 0;
animation: fighter-swing 1s ease-in-out infinite;
}
@keyframes fighter-swing {
0%, 100% {
transform: rotate(-5deg);
}
50% {
transform: rotate(5deg);
}
}
.error-message {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
}
.error-message p {
color: var(--text-muted);
margin-bottom: 15px;
font-size: 1rem;
line-height: 1.7;
}
.error-message p:last-child {
margin-bottom: 0;
}
.error-message .highlight {
color: var(--accent-color);
font-weight: 600;
}
.referee-call {
display: inline-block;
background: rgba(255, 77, 77, 0.2);
color: var(--error-color);
padding: 8px 20px;
border-radius: 20px;
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}
.error-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.error-actions .btn {
min-width: 180px;
}
.fun-stats {
margin-top: 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.fun-stat {
background: var(--card-background);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
transition: all 0.3s ease;
}
.fun-stat:hover {
border-color: var(--accent-color);
transform: translateY(-3px);
}
.fun-stat-value {
font-size: 1.8rem;
font-weight: 700;
color: var(--accent-color);
margin-bottom: 5px;
}
.fun-stat-label {
font-size: 0.85rem;
color: var(--text-muted);
}
.corner-advice {
margin-top: 30px;
padding: 20px;
background: rgba(0, 212, 255, 0.1);
border: 1px solid rgba(0, 212, 255, 0.3);
border-radius: 8px;
}
.corner-advice h4 {
color: var(--accent-color);
margin-bottom: 10px;
font-size: 1rem;
}
.corner-advice p {
color: var(--text-muted);
font-size: 0.9rem;
font-style: italic;
}
@media (max-width: 768px) {
.error-code {
font-size: 6rem;
}
.error-title {
font-size: 1.8rem;
}
.error-subtitle {
font-size: 1rem;
}
.fun-stats {
grid-template-columns: 1fr;
}
.error-actions {
flex-direction: column;
}
.error-actions .btn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="error-page">
<div class="error-content">
<div class="referee-call">🥊 Technical Knockout!</div>
<div class="error-code">404</div>
<h1 class="error-title">You Got Knocked Out!</h1>
<p class="error-subtitle">The page you're looking for has been counted out by the referee.</p>
<div class="fighter-animation">🥊</div>
<div class="error-message">
<p>Listen, champ... we've checked every corner of the ring, and this page is <span class="highlight">nowhere to be found</span>.</p>
<p>Maybe it retired? Maybe it's training for a comeback? Or maybe... just maybe... you typed the URL like you were throwing wild punches in the dark. 😅</p>
<p>Either way, the crowd's gone silent, the referee has counted to ten, and this page has been declared <span class="highlight">TKO - Total Knockout Offline</span>.</p>
</div>
<div class="corner-advice">
<h4>📢 Corner Man's Advice:</h4>
<p>"Get back in the game, fighter! Head back to the main arena and find a real match to bet on. Don't let one missed punch keep you down!"</p>
</div>
<div class="error-actions">
<a href="index.html" class="btn btn-primary">🥊 Back to the Ring</a>
<a href="player.html" class="btn btn-secondary">📺 Watch Live Fights</a>
</div>
<div class="fun-stats">
<div class="fun-stat">
<div class="fun-stat-value">0</div>
<div class="fun-stat-label">Pages Found</div>
</div>
<div class="fun-stat">
<div class="fun-stat-value">∞</div>
<div class="fun-stat-label">Disappointment Level</div>
</div>
<div class="fun-stat">
<div class="fun-stat-value">10</div>
<div class="fun-stat-label">Referee Count</div>
</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment