212 lines
9.7 KiB
HTML
212 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% if error_code %}{{ error_code }} - {% endif %}{{ error_title or "Error" }} - DosVault</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
:root {
|
|
/* Default Dark Theme */
|
|
--primary-bg: #111827;
|
|
--secondary-bg: #1f2937;
|
|
--tertiary-bg: #374151;
|
|
--accent-bg: #2563eb;
|
|
--accent-hover: #1d4ed8;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #9ca3af;
|
|
--text-accent: #60a5fa;
|
|
--border-color: #4b5563;
|
|
--success-color: #059669;
|
|
--warning-color: #d97706;
|
|
--danger-color: #dc2626;
|
|
--gradient-from: #1f2937;
|
|
--gradient-to: #111827;
|
|
}
|
|
|
|
/* Apply CSS custom properties */
|
|
body {
|
|
background-color: var(--primary-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
.bg-primary { background-color: var(--primary-bg); }
|
|
.bg-secondary { background-color: var(--secondary-bg); }
|
|
.bg-tertiary { background-color: var(--tertiary-bg); }
|
|
.bg-accent { background-color: var(--accent-bg); }
|
|
.bg-accent:hover { background-color: var(--accent-hover); }
|
|
.bg-accent-hover { background-color: var(--accent-hover); }
|
|
.text-primary { color: var(--text-primary); }
|
|
.text-secondary { color: var(--text-secondary); }
|
|
.text-accent { color: var(--text-accent); }
|
|
.border-theme { border-color: var(--border-color); }
|
|
.bg-gradient-theme { background: linear-gradient(to bottom right, var(--gradient-from), var(--gradient-to)); }
|
|
|
|
/* Fade-in animation */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Glitch effect for error code */
|
|
.glitch {
|
|
font-size: 4rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
position: relative;
|
|
text-shadow: 0.05em 0 0 #00ffff, -0.03em -0.04em 0 #ff00ff,
|
|
0.025em 0.04em 0 #ffff00;
|
|
animation: glitch 500ms infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% {
|
|
text-shadow: 0.05em 0 0 #00ffff, -0.03em -0.04em 0 #ff00ff,
|
|
0.025em 0.04em 0 #ffff00;
|
|
}
|
|
15% {
|
|
text-shadow: 0.05em 0 0 #00ffff, -0.03em -0.04em 0 #ff00ff,
|
|
0.025em 0.04em 0 #ffff00;
|
|
}
|
|
16% {
|
|
text-shadow: -0.05em -0.025em 0 #00ffff, 0.025em 0.035em 0 #ff00ff,
|
|
-0.05em -0.05em 0 #ffff00;
|
|
}
|
|
49% {
|
|
text-shadow: -0.05em -0.025em 0 #00ffff, 0.025em 0.035em 0 #ff00ff,
|
|
-0.05em -0.05em 0 #ffff00;
|
|
}
|
|
50% {
|
|
text-shadow: 0.05em 0.035em 0 #00ffff, 0.03em 0 0 #ff00ff,
|
|
0 -0.04em 0 #ffff00;
|
|
}
|
|
99% {
|
|
text-shadow: 0.05em 0.035em 0 #00ffff, 0.03em 0 0 #ff00ff,
|
|
0 -0.04em 0 #ffff00;
|
|
}
|
|
100% {
|
|
text-shadow: 0.05em 0 0 #00ffff, -0.03em -0.04em 0 #ff00ff,
|
|
0.025em 0.04em 0 #ffff00;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-primary text-primary min-h-screen">
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-theme py-12 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-lg w-full text-center animate-fade-in">
|
|
<!-- DosVault Logo -->
|
|
<div class="mx-auto h-20 w-20 flex items-center justify-center mb-8">
|
|
<svg class="w-16 h-16 text-accent opacity-50" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Vault door -->
|
|
<circle cx="16" cy="16" r="14" fill="currentColor" opacity="0.1"/>
|
|
<circle cx="16" cy="16" r="12" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
<circle cx="16" cy="16" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
|
|
<circle cx="16" cy="16" r="4" fill="currentColor" opacity="0.3"/>
|
|
|
|
<!-- DOS-style pixels -->
|
|
<rect x="6" y="6" width="2" height="2" fill="currentColor" opacity="0.6"/>
|
|
<rect x="10" y="6" width="2" height="2" fill="currentColor" opacity="0.8"/>
|
|
<rect x="20" y="6" width="2" height="2" fill="currentColor" opacity="0.8"/>
|
|
<rect x="24" y="6" width="2" height="2" fill="currentColor" opacity="0.6"/>
|
|
<rect x="6" y="24" width="2" height="2" fill="currentColor" opacity="0.6"/>
|
|
<rect x="24" y="24" width="2" height="2" fill="currentColor" opacity="0.6"/>
|
|
|
|
<!-- Handle -->
|
|
<rect x="20" y="14" width="6" height="4" rx="2" fill="currentColor" opacity="0.7"/>
|
|
<circle cx="24" cy="16" r="1" fill="currentColor"/>
|
|
|
|
<!-- Error X overlay -->
|
|
<line x1="8" y1="8" x2="24" y2="24" stroke="currentColor" stroke-width="2" opacity="0.8"/>
|
|
<line x1="24" y1="8" x2="8" y2="24" stroke="currentColor" stroke-width="2" opacity="0.8"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Error Code with Glitch Effect -->
|
|
{% if error_code %}
|
|
<div class="glitch text-accent mb-4">{{ error_code }}</div>
|
|
{% endif %}
|
|
|
|
<!-- Error Title -->
|
|
<h1 class="text-3xl font-bold text-primary mb-4">
|
|
{{ error_title or "Oops! Something went wrong" }}
|
|
</h1>
|
|
|
|
<!-- Error Description -->
|
|
<p class="text-secondary text-lg mb-8 max-w-md mx-auto">
|
|
{{ error_description or "The page you're looking for doesn't exist or has been moved." }}
|
|
</p>
|
|
|
|
<!-- Error Details (if available) -->
|
|
{% if error_details %}
|
|
<div class="bg-tertiary border border-theme rounded-lg p-4 mb-8 text-left">
|
|
<div class="flex items-center mb-2">
|
|
<svg class="w-5 h-5 text-warning-color mr-2" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<h3 class="text-sm font-medium text-primary">Error Details</h3>
|
|
</div>
|
|
<p class="text-sm text-secondary font-mono">{{ error_details }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
|
|
<a href="/"
|
|
class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-accent hover:bg-accent-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent transition-colors">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v0M8 5a2 2 0 012-2h4a2 2 0 012 2v0"></path>
|
|
</svg>
|
|
Browse Games
|
|
</a>
|
|
|
|
<button onclick="goBack()"
|
|
class="inline-flex items-center px-6 py-3 border border-theme text-base font-medium rounded-md text-primary bg-secondary hover:bg-tertiary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent transition-colors">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
|
</svg>
|
|
Go Back
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Additional Help -->
|
|
<div class="mt-12 text-center">
|
|
<p class="text-sm text-secondary mb-4">Still having trouble?</p>
|
|
<div class="space-x-6">
|
|
{% if current_user and current_user.role == "super" %}
|
|
<a href="/admin" class="text-accent hover:text-accent-hover text-sm transition-colors">
|
|
Admin Panel
|
|
</a>
|
|
{% endif %}
|
|
<a href="/login" class="text-accent hover:text-accent-hover text-sm transition-colors">
|
|
Login
|
|
</a>
|
|
<span class="text-secondary text-sm">•</span>
|
|
<span class="text-secondary text-sm">DosVault v1.0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function goBack() {
|
|
// Try to go back in history, fallback to home page
|
|
if (window.history.length > 1) {
|
|
window.history.back();
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|