286 lines
8.4 KiB
HTML
286 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Server Error | 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: 6rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #f59e0b, #d97706);
|
|
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;
|
|
}
|
|
|
|
.status-indicator {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
background: rgba(245, 158, 11, 0.1);
|
|
border: 1px solid #f59e0b;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
background: #f59e0b;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.error-code {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.error-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.error-actions {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="error-container">
|
|
<div class="error-code">5XX</div>
|
|
<h1 class="error-title">Server Error</h1>
|
|
<p class="error-message">
|
|
We're experiencing some technical difficulties. Our team has been notified
|
|
and is working to resolve the issue as quickly as possible.
|
|
</p>
|
|
|
|
<div class="status-indicator">
|
|
<div class="status-dot"></div>
|
|
<span>Server is being restored...</span>
|
|
</div>
|
|
|
|
<div class="error-actions">
|
|
<a href="/" class="btn btn-primary">
|
|
🏠 Go Home
|
|
</a>
|
|
<a href="javascript:location.reload()" class="btn btn-secondary">
|
|
🔄 Refresh Page
|
|
</a>
|
|
</div>
|
|
|
|
<div class="error-details">
|
|
<h3>Error Information</h3>
|
|
<p>Request: <span id="request-url"></span></p>
|
|
<p>Method: GET</p>
|
|
<p>Status: <span id="error-code">500</span> Internal Server Error</p>
|
|
<p>Timestamp: <span id="timestamp"></span></p>
|
|
<p>Request ID: <span id="request-id"></span></p>
|
|
</div>
|
|
|
|
<div class="server-info">
|
|
<p><strong>WebServ</strong> - High Performance C++ Web Server</p>
|
|
<p>Error ID: <span id="error-id"></span></p>
|
|
<p>If this problem persists, please contact our support team.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Generate random error ID
|
|
function generateErrorId() {
|
|
return 'ERR-' + Math.random().toString(36).substr(2, 9).toUpperCase();
|
|
}
|
|
|
|
// Generate random request ID
|
|
function generateRequestId() {
|
|
return 'REQ-' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
|
|
}
|
|
|
|
// Populate error details
|
|
document.getElementById('request-url').textContent = window.location.pathname;
|
|
document.getElementById('timestamp').textContent = new Date().toISOString();
|
|
document.getElementById('request-id').textContent = generateRequestId();
|
|
document.getElementById('error-id').textContent = generateErrorId();
|
|
|
|
// Auto-refresh after 30 seconds
|
|
let countdown = 30;
|
|
const refreshBtn = document.querySelector('.btn-secondary');
|
|
const originalText = refreshBtn.innerHTML;
|
|
|
|
function updateCountdown() {
|
|
if (countdown > 0) {
|
|
refreshBtn.innerHTML = `🔄 Refresh Page (${countdown}s)`;
|
|
countdown--;
|
|
setTimeout(updateCountdown, 1000);
|
|
} else {
|
|
refreshBtn.innerHTML = originalText;
|
|
location.reload();
|
|
}
|
|
}
|
|
|
|
// Start countdown after 5 seconds
|
|
setTimeout(updateCountdown, 5000);
|
|
|
|
// Log error for debugging
|
|
console.error('Server Error Details:', {
|
|
url: window.location.href,
|
|
path: window.location.pathname,
|
|
userAgent: navigator.userAgent,
|
|
timestamp: new Date().toISOString(),
|
|
errorId: document.getElementById('error-id').textContent,
|
|
requestId: document.getElementById('request-id').textContent
|
|
});
|
|
|
|
// Try to detect the specific error code from URL parameters
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const errorCode = urlParams.get('code') || '500';
|
|
document.getElementById('error-code').textContent = errorCode;
|
|
|
|
// Update title and message based on error code
|
|
const errorMessages = {
|
|
'500': 'Internal Server Error - Something went wrong on our end.',
|
|
'502': 'Bad Gateway - The server received an invalid response.',
|
|
'503': 'Service Unavailable - The server is temporarily unavailable.',
|
|
'504': 'Gateway Timeout - The server took too long to respond.'
|
|
};
|
|
|
|
if (errorMessages[errorCode]) {
|
|
document.querySelector('.error-message').textContent = errorMessages[errorCode];
|
|
}
|
|
|
|
// Update the main error code display
|
|
document.querySelector('.error-code').textContent = errorCode;
|
|
</script>
|
|
</body>
|
|
</html>
|