112 lines
4 KiB
HTML
112 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>404 - Seite nicht gefunden</title>
|
|
<link rel="icon" href="{{ url_for('static', filename='media/AstraOS_Logo.ico') }}" type="image/x-icon">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { background: #0a0a0f; }
|
|
::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
|
|
|
|
body {
|
|
background: radial-gradient(circle at center, #1b1b26, #0a0a0f 70%);
|
|
overflow: hidden;
|
|
min-height: 100vh;
|
|
color: #e6e6e6;
|
|
display: flex;
|
|
flex-direction: column; /* Changed to column for footer */
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.animated-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
.dot {
|
|
position: absolute;
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: rgba(192, 132, 252, 0.2);
|
|
animation: float 20s infinite linear;
|
|
}
|
|
@keyframes float {
|
|
0% { transform: translateY(100vh) scale(1); }
|
|
100% { transform: translateY(-10vh) scale(1.5); }
|
|
}
|
|
.card {
|
|
background-color: rgba(10, 10, 15, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 1.5rem; /* Increased border-radius */
|
|
box-shadow: 0 0 30px rgba(192, 132, 252, 0.2); /* Glowing shadow */
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.gradient-text {
|
|
background: -webkit-linear-gradient(45deg, #a855f7, #d8b4fe);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
footer {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: rgba(255, 255, 255, 0.3);
|
|
font-size: 0.875rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-900 text-gray-100 font-sans">
|
|
<div class="animated-bg"></div>
|
|
|
|
<div class="main-content">
|
|
<div class="container-fluid">
|
|
<div class="row justify-content-center align-items-center">
|
|
<div class="col-md-6 text-center">
|
|
<div class="card">
|
|
<div class="card-body p-8 relative z-10">
|
|
<h1 class="display-1 font-bold gradient-text">404</h1>
|
|
<h2 class="mb-4 text-2xl font-semibold">Seite nicht gefunden</h2>
|
|
<p class="text-gray-400">Die von Ihnen angeforderte Seite konnte nicht gefunden werden.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2026 Astra OS. Alle Rechte vorbehalten. | Hosted by Astra OS</p>
|
|
</footer>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const bg = document.querySelector('.animated-bg');
|
|
const numDots = 100;
|
|
for (let i = 0; i < numDots; i++) {
|
|
const dot = document.createElement('div');
|
|
dot.classList.add('dot');
|
|
dot.style.left = `${Math.random() * 100}vw`;
|
|
dot.style.top = `${Math.random() * 100}vh`;
|
|
dot.style.animationDuration = `${Math.random() * 15 + 10}s`;
|
|
dot.style.animationDelay = `${Math.random() * 5}s`;
|
|
dot.style.transform = `scale(${Math.random() * 1.5 + 0.5})`;
|
|
bg.appendChild(dot);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|