150 lines
7.1 KiB
HTML
150 lines
7.1 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 — Maintenance Login</title>
|
|
<link rel="icon" href="{{ url_for('static', filename='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>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
background: radial-gradient(circle at top, #2c2315, #0a0a0f 70%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="text-white">
|
|
|
|
<div id="startup" class="fixed inset-0 bg-black flex flex-col items-center justify-center z-50">
|
|
<div id="star" class="w-16 h-16 relative">
|
|
<div class="absolute inset-0 rounded-full blur-2xl opacity-70" style="background: rgba(243, 156, 18, 0.7)"></div>
|
|
<svg class="relative z-10" viewBox="0 0 24 24" fill="none" stroke="#f39c12" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
</div>
|
|
<p class="mt-4 text-xl tracking-wide opacity-80">AstraOS Maintenance</p>
|
|
</div>
|
|
|
|
|
|
<div id="loginContent" class="min-h-screen flex items-center justify-center px-4">
|
|
|
|
<div id="loginBox" class="w-full max-w-md bg-black/40 border border-yellow-500/20 rounded-2xl p-8 backdrop-blur-lg shadow-xl opacity-0">
|
|
|
|
<div class="flex justify-center items-center gap-4 mb-6">
|
|
<svg class="w-8 h-8 text-yellow-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
<h1 id="loginTitle" class="text-3xl font-bold text-center tracking-wider text-yellow-300"></h1>
|
|
</div>
|
|
|
|
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="mb-4 rounded-md bg-{{ 'red' if category == 'danger' else 'yellow' }}-500/20 p-4 text-sm text-{{ 'red' if category == 'danger' else 'yellow' }}-300 border border-{{ 'red' if category == 'danger' else 'yellow' }}-500/30">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<form id="loginForm" action="{{ url_for('maintenance_login') }}" method="POST" class="flex flex-col gap-5 opacity-0">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
|
|
<div>
|
|
<label class="text-gray-300 text-sm">Username</label>
|
|
<input type="text" name="username" required placeholder="Username"
|
|
class="mt-1 w-full px-4 py-2 rounded-lg bg-gray-800/60 text-white
|
|
focus:outline-none focus:ring-2 focus:ring-yellow-500">
|
|
</div>
|
|
|
|
<div x-data="{ showPassword: false }">
|
|
<label class="text-gray-300 text-sm">Passwort</label>
|
|
<div class="relative">
|
|
<input :type="showPassword ? 'text' : 'password'" name="password" required placeholder="Passwort"
|
|
class="mt-1 w-full px-4 py-2 rounded-lg bg-gray-800/60 text-white
|
|
focus:outline-none focus:ring-2 focus:ring-yellow-500 pr-10">
|
|
<button type="button" @click="showPassword = !showPassword" class="absolute inset-y-0 right-0 top-0 pr-3 flex items-center text-gray-400 hover:text-gray-200">
|
|
<svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.432 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
<svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5" style="display: none;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.243 4.243l-4.243-4.243" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit"
|
|
class="mt-2 bg-yellow-600 hover:bg-yellow-700 text-white py-2 rounded-lg
|
|
font-semibold transition">
|
|
Bypass Login
|
|
</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
gsap.to("#star", {
|
|
rotation: 360,
|
|
duration: 8,
|
|
ease: "none",
|
|
repeat: -1
|
|
});
|
|
|
|
gsap.registerPlugin(TextPlugin);
|
|
|
|
{% if not get_flashed_messages() %}
|
|
// Nur Animation abspielen, wenn keine Nachrichten vorhanden sind
|
|
setTimeout(() => {
|
|
gsap.to("#startup", {
|
|
opacity: 0,
|
|
duration: 0.5,
|
|
onComplete: () => {
|
|
document.getElementById("startup").style.display = "none";
|
|
|
|
const tl = gsap.timeline();
|
|
|
|
tl.fromTo("#loginBox",
|
|
{ opacity: 0, scale: 0.8 },
|
|
{
|
|
opacity: 1,
|
|
scale: 1,
|
|
duration: 0.5,
|
|
ease: "power2.out"
|
|
}
|
|
);
|
|
|
|
tl.to("#loginTitle", {
|
|
duration: 0.8,
|
|
text: "Maintenance Login",
|
|
ease: "none"
|
|
}, "-=0.2");
|
|
|
|
tl.to("#loginForm", {
|
|
opacity: 1,
|
|
duration: 0.4
|
|
}, "-=0.4");
|
|
}
|
|
});
|
|
}, 800);
|
|
{% else %}
|
|
// Wenn Nachrichten vorhanden sind, Animation überspringen
|
|
document.getElementById("startup").style.display = "none";
|
|
document.getElementById("loginBox").style.opacity = 1;
|
|
document.getElementById("loginForm").style.opacity = 1;
|
|
document.getElementById("loginTitle").textContent = "Maintenance Login";
|
|
{% endif %}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|