277 lines
7.5 KiB
HTML
277 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>404 - Page Not Found | WebServ</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
background: linear-gradient(135deg, #0f172a, #1e293b);
|
|
color: #f8fafc;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.error-container {
|
|
max-width: 600px;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.error-code {
|
|
font-size: 8rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #ef4444, #dc2626);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 1rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.error-message {
|
|
font-size: 1.1rem;
|
|
color: #cbd5e1;
|
|
margin-bottom: 2rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.error-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 0.5rem;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #2563eb, #1d4ed8);
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: transparent;
|
|
color: #cbd5e1;
|
|
border: 1px solid #475569;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #334155;
|
|
border-color: #64748b;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.error-details {
|
|
margin-top: 3rem;
|
|
padding: 1.5rem;
|
|
background: rgba(30, 41, 59, 0.5);
|
|
border-radius: 0.5rem;
|
|
border: 1px solid #475569;
|
|
text-align: left;
|
|
}
|
|
|
|
.error-details h3 {
|
|
color: #f1f5f9;
|
|
margin-bottom: 1rem;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.error-details p {
|
|
color: #94a3b8;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0.5rem;
|
|
font-family: 'Fira Code', monospace;
|
|
}
|
|
|
|
.server-info {
|
|
margin-top: 2rem;
|
|
padding-top: 2rem;
|
|
border-top: 1px solid #475569;
|
|
color: #64748b;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.error-code {
|
|
font-size: 5rem;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.error-actions {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.floating-shapes {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.shape {
|
|
position: absolute;
|
|
background: rgba(37, 99, 235, 0.1);
|
|
border-radius: 50%;
|
|
animation: float 20s infinite ease-in-out;
|
|
}
|
|
|
|
.shape:nth-child(1) {
|
|
width: 100px;
|
|
height: 100px;
|
|
top: 10%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.shape:nth-child(2) {
|
|
width: 150px;
|
|
height: 150px;
|
|
top: 60%;
|
|
right: 10%;
|
|
animation-delay: 7s;
|
|
}
|
|
|
|
.shape:nth-child(3) {
|
|
width: 80px;
|
|
height: 80px;
|
|
bottom: 20%;
|
|
left: 20%;
|
|
animation-delay: 14s;
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0) rotate(0deg);
|
|
opacity: 0.3;
|
|
}
|
|
50% {
|
|
transform: translateY(-30px) rotate(180deg);
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="floating-shapes">
|
|
<div class="shape"></div>
|
|
<div class="shape"></div>
|
|
<div class="shape"></div>
|
|
</div>
|
|
|
|
<div class="error-container">
|
|
<div class="error-code">404</div>
|
|
<h1 class="error-title">Page Not Found</h1>
|
|
<p class="error-message">
|
|
The page you're looking for doesn't exist or has been moved.
|
|
Don't worry, even the best servers sometimes lose track of a page or two.
|
|
</p>
|
|
|
|
<div class="error-actions">
|
|
<a href="/" class="btn btn-primary">
|
|
🏠 Go Home
|
|
</a>
|
|
<a href="javascript:history.back()" class="btn btn-secondary">
|
|
← Go Back
|
|
</a>
|
|
</div>
|
|
|
|
<div class="error-details">
|
|
<h3>Technical Details</h3>
|
|
<p>Request: <span id="request-url"></span></p>
|
|
<p>Method: GET</p>
|
|
<p>Status: 404 Not Found</p>
|
|
<p>Timestamp: <span id="timestamp"></span></p>
|
|
<p>Referrer: <span id="referrer"></span></p>
|
|
</div>
|
|
|
|
<div class="server-info">
|
|
<p><strong>WebServ</strong> - High Performance C++ Web Server</p>
|
|
<p>If this error persists, please contact the site administrator.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Populate error details
|
|
document.getElementById('request-url').textContent = window.location.pathname;
|
|
document.getElementById('timestamp').textContent = new Date().toISOString();
|
|
document.getElementById('referrer').textContent = document.referrer || 'Direct access';
|
|
|
|
// Add some interactivity
|
|
const shapes = document.querySelectorAll('.shape');
|
|
let mouseX = 0;
|
|
let mouseY = 0;
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
mouseX = e.clientX / window.innerWidth;
|
|
mouseY = e.clientY / window.innerHeight;
|
|
|
|
shapes.forEach((shape, index) => {
|
|
const speed = (index + 1) * 0.5;
|
|
const x = mouseX * speed * 10;
|
|
const y = mouseY * speed * 10;
|
|
|
|
shape.style.transform = `translate(${x}px, ${y}px)`;
|
|
});
|
|
});
|
|
|
|
// Log error for debugging (in development)
|
|
if (window.location.hostname === 'localhost') {
|
|
console.log('404 Error Details:', {
|
|
url: window.location.href,
|
|
path: window.location.pathname,
|
|
referrer: document.referrer,
|
|
userAgent: navigator.userAgent,
|
|
timestamp: new Date().toISOString()
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|