4c3709b64e
All checks were successful
Deploy AstraOS Panel / deploy (push) Successful in 16s
Deaktivierung von Account und Notfication System hinzugefügt
191 lines
9 KiB
HTML
191 lines
9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AstraOS — Account deaktiviert</title>
|
|
<link rel="icon" href="/static/media/AstraOS_Logo.ico" type="image/x-icon">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
<style>
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #0a0a0f; }
|
|
::-webkit-scrollbar-thumb { background-color: #4b5563; border-radius: 4px; }
|
|
|
|
body {
|
|
background: radial-gradient(circle at top, #1b1b26, #0a0a0f 70%);
|
|
min-height: 100vh;
|
|
color: #e6e6e6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.animated-bg {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
width: 100vw; height: 100vh;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
.dot {
|
|
position: absolute;
|
|
width: 4px; height: 4px;
|
|
border-radius: 50%;
|
|
background: rgba(192, 132, 252, 0.15);
|
|
animation: float 20s infinite linear;
|
|
}
|
|
@keyframes float {
|
|
0% { transform: translateY(100vh) scale(1); }
|
|
100% { transform: translateY(-10vh) scale(1.5); }
|
|
}
|
|
|
|
.card-glow {
|
|
box-shadow: 0 0 60px rgba(139, 92, 246, 0.08), 0 0 120px rgba(139, 92, 246, 0.04);
|
|
}
|
|
|
|
@keyframes pulseIcon {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.06); }
|
|
}
|
|
.pulse-icon {
|
|
animation: pulseIcon 3s ease-in-out infinite;
|
|
}
|
|
|
|
.toast-container {
|
|
position: fixed;
|
|
top: 1.25rem;
|
|
right: 1.25rem;
|
|
z-index: 99999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.6rem;
|
|
align-items: flex-end;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-white font-sans antialiased flex items-center justify-center min-h-screen">
|
|
|
|
<div class="animated-bg"></div>
|
|
|
|
<!-- Flash messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="toast-container" x-data>
|
|
{% for category, message in messages %}
|
|
<div x-data="{ show: true }" x-init="setTimeout(() => show = false, 5000)" x-show="show"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-x-8"
|
|
x-transition:enter-end="opacity-100 translate-x-0"
|
|
x-transition:leave="transition ease-in duration-300"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 p-4 max-w-sm border border-{{ 'red' if category == 'danger' else ('green' if category == 'success' else 'blue') }}-500/40">
|
|
<p class="text-sm text-gray-100">{{ message }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="relative z-10 w-full max-w-md mx-auto px-4" x-data="{ showForm: false }" id="mainCard">
|
|
<div class="bg-black/50 backdrop-blur-xl rounded-2xl p-10 card-glow border border-purple-500/20 text-center">
|
|
|
|
<!-- Icon -->
|
|
<div class="pulse-icon inline-flex items-center justify-center w-20 h-20 rounded-full bg-red-500/10 border border-red-500/30 mb-6 mx-auto">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
|
|
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Title -->
|
|
<h1 class="text-3xl font-bold text-white mb-2">Account deaktiviert</h1>
|
|
<p class="text-gray-400 text-sm mb-8 leading-relaxed">
|
|
Dein AstraOS-Account wurde deaktiviert.<br>
|
|
Du hast aktuell keinen Zugang zum Panel.
|
|
</p>
|
|
|
|
<!-- Separator -->
|
|
<div class="border-t border-purple-500/20 mb-8"></div>
|
|
|
|
<!-- Options -->
|
|
<div class="space-y-3" x-show="!showForm">
|
|
<button @click="showForm = true"
|
|
class="w-full py-3 px-4 bg-purple-600/80 hover:bg-purple-600 text-white font-semibold rounded-xl transition-all duration-200 flex items-center justify-center gap-2 hover:shadow-lg hover:shadow-purple-500/20">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"/>
|
|
</svg>
|
|
Reaktivierung anfragen
|
|
</button>
|
|
<a href="/login"
|
|
class="block w-full py-3 px-4 bg-gray-700/60 hover:bg-gray-700 text-gray-300 font-medium rounded-xl transition-all duration-200 text-center">
|
|
Zur Anmeldeseite
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Reactivation Form -->
|
|
<div x-show="showForm" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" style="display: none;">
|
|
<h2 class="text-lg font-semibold text-purple-300 mb-4 text-left">Reaktivierung anfragen</h2>
|
|
<form action="/request_reactivation" method="POST" class="space-y-4 text-left">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1">Dein Benutzername</label>
|
|
<input type="text" name="username" required placeholder="Dein AstraOS-Benutzername"
|
|
class="w-full px-3 py-2.5 bg-gray-800/80 border border-gray-700 rounded-lg text-white text-sm
|
|
focus:outline-none focus:ring-2 focus:ring-purple-500 placeholder-gray-600">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-300 mb-1">
|
|
Begründung
|
|
<span class="text-gray-500 font-normal">(optional)</span>
|
|
</label>
|
|
<textarea name="reason" rows="3"
|
|
placeholder="Warum soll dein Account reaktiviert werden?"
|
|
class="w-full px-3 py-2.5 bg-gray-800/80 border border-gray-700 rounded-lg text-white text-sm resize-none
|
|
focus:outline-none focus:ring-2 focus:ring-purple-500 placeholder-gray-600"></textarea>
|
|
</div>
|
|
|
|
<div class="bg-indigo-950/50 border border-indigo-500/30 rounded-lg p-3 text-xs text-indigo-300">
|
|
Deine Anfrage wird dem Administrator gemeldet und per Discord zugestellt.
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-1">
|
|
<button type="button" @click="showForm = false"
|
|
class="flex-1 py-2.5 rounded-lg text-gray-300 bg-gray-700/60 hover:bg-gray-700 transition text-sm font-medium">
|
|
Abbrechen
|
|
</button>
|
|
<button type="submit"
|
|
class="flex-1 py-2.5 bg-purple-600 hover:bg-purple-700 text-white font-semibold rounded-lg transition text-sm">
|
|
Anfrage senden
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<p class="text-center text-gray-600 text-xs mt-6">
|
|
© 2026 AstraOS |
|
|
<a href="/impressum" class="hover:text-gray-400 transition">Impressum</a>
|
|
</p>
|
|
</div>
|
|
|
|
<script>
|
|
const bg = document.querySelector('.animated-bg');
|
|
if (bg) {
|
|
for (let i = 0; i < 40; i++) {
|
|
const dot = document.createElement('div');
|
|
dot.classList.add('dot');
|
|
dot.style.left = `${Math.random() * 100}vw`;
|
|
dot.style.animationDelay = `${Math.random() * -20}s`;
|
|
dot.style.animationDuration = `${20 + Math.random() * 10}s`;
|
|
bg.appendChild(dot);
|
|
}
|
|
}
|
|
gsap.from('#mainCard', { opacity: 0, y: 30, duration: 0.6, ease: 'power2.out' });
|
|
</script>
|
|
</body>
|
|
</html>
|