117 lines
No EOL
6.6 KiB
HTML
117 lines
No EOL
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de" class="dark h-full">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>404 - Zugriff verweigert</title>
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
'cyber-blue': '#00f3ff',
|
|
'cyber-purple': '#bd00ff',
|
|
'dark-bg': '#050a14',
|
|
},
|
|
animation: {
|
|
'blob-spin_slow': 'spin 20s linear infinite',
|
|
'blob-spin_reverse': 'spin 25s linear reverse infinite',
|
|
'tilt': 'tilt 10s infinite linear',
|
|
'scan': 'scan 4s linear infinite',
|
|
},
|
|
keyframes: {
|
|
tilt: {
|
|
'0%, 50%, 100%': { transform: 'rotate(0deg)' },
|
|
'25%': { transform: 'rotate(1deg)' },
|
|
'75%': { transform: 'rotate(-1deg)' },
|
|
},
|
|
scan: {
|
|
'0%': { backgroundPosition: '0 -100vh' },
|
|
'100%': { backgroundPosition: '0 100vh' },
|
|
}
|
|
},
|
|
backgroundImage: {
|
|
'scan-lines': 'linear-gradient(to bottom, transparent 50%, rgba(0, 243, 255, 0.05) 51%, transparent 51%)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.glitch-text {
|
|
text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
|
|
-0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
|
|
0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
|
|
animation: glitch 500ms infinite;
|
|
}
|
|
|
|
@keyframes glitch {
|
|
0% { text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em 0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
14% { text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75), -0.05em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em 0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
15% { text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 0, 0.75), -0.05em -0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
49% { text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75), 0.025em 0.025em 0 rgba(0, 255, 0, 0.75), -0.05em -0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
50% { text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
99% { text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75), 0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
100% { text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75), -0.025em -0.025em 0 rgba(0, 255, 0, 0.75), -0.025em -0.05em 0 rgba(0, 0, 255, 0.75); }
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-dark-bg text-gray-200 h-full overflow-hidden relative flex items-center justify-center font-mono">
|
|
|
|
<div class="absolute inset-0 pointer-events-none bg-scan-lines bg-[length:100%_4px] animate-scan opacity-20 z-10"></div>
|
|
|
|
<div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
|
|
<div class="absolute top-1/4 left-1/4 w-96 h-96 bg-cyber-purple/30 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob-spin_slow"></div>
|
|
<div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyber-blue/30 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob-spin_reverse"></div>
|
|
</div>
|
|
<div class="absolute inset-0 bg-[linear-gradient(rgba(18,24,38,0.8)_2px,transparent_2px),linear-gradient(90deg,rgba(18,24,38,0.8)_2px,transparent_2px)] bg-[size:30px_30px] [mask-image:radial-gradient(ellipse_80%_80%_at_50%_50%,#000_30%,transparent_100%)] -z-5"></div>
|
|
|
|
<div class="relative z-20 text-center px-6 max-w-2xl mx-auto">
|
|
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] md:w-[500px] md:h-[500px] border border-cyber-blue/20 rounded-full animate-pulse">
|
|
<div class="w-full h-full rounded-full border border-t-cyber-blue/80 border-r-transparent border-b-transparent border-l-transparent animate-spin"></div>
|
|
</div>
|
|
|
|
<h1 class="text-[10rem] md:text-[14rem] font-black leading-none select-none relative">
|
|
<span class="absolute inset-0 glitch-text opacity-50" aria-hidden="true">404</span>
|
|
<span class="relative text-transparent bg-clip-text bg-gradient-to-br from-cyber-blue via-white to-cyber-purple animate-tilt inline-block">
|
|
404
|
|
</span>
|
|
</h1>
|
|
|
|
<h2 class="text-2xl md:text-4xl font-bold mt-4 mb-4 tracking-wider uppercase text-red-500 drop-shadow-[0_0_10px_rgba(239,68,68,0.5)]">
|
|
Zugriff Verweigert
|
|
</h2>
|
|
|
|
<p class="text-gray-400 text-lg mb-10 md:px-12 leading-relaxed">
|
|
Endstation. Du hast das Ende meines Netzwerks erreicht.
|
|
Hier gibt es keine offenen Ports und nichts zu sehen.
|
|
<span class="block mt-2 text-cyber-blue/80 text-sm">>_ Verbindung wird getrennt...</span>
|
|
</p>
|
|
|
|
<div class="relative group inline-block">
|
|
<div class="absolute -inset-0.5 bg-gradient-to-r from-cyber-blue to-cyber-purple rounded-full blur opacity-30 group-hover:opacity-100 transition duration-500 group-hover:duration-200 animate-tilt"></div>
|
|
<a href="https://linktr.ee/RentnerKev" class="relative px-8 py-3 bg-dark-bg rounded-full leading-none flex items-center divide-x divide-gray-600 border border-gray-700 hover:border-gray-500 transition-colors duration-200">
|
|
<span class="flex items-center space-x-2">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-cyber-blue -ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
|
</svg>
|
|
<span class="text-gray-100 pr-4">RentnerKev</span>
|
|
</span>
|
|
<span class="pl-4 text-cyber-purple transition duration-200 group-hover:text-gray-100">
|
|
LINKTREE
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-4 text-gray-600 text-xs uppercase tracking-widest">
|
|
Security Protocol // Level 404 // Active
|
|
</div>
|
|
|
|
</body>
|
|
</html> |