162 lines
9.1 KiB
HTML
162 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AstraOS — 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, #1b1b26, #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(192, 132, 252, 0.7)"></div>
|
|
<svg class="relative z-10" viewBox="0 0 100 100">
|
|
<path
|
|
d="M50 5
|
|
L63 40
|
|
L95 50
|
|
L63 60
|
|
L50 95
|
|
L37 60
|
|
L5 50
|
|
L37 40
|
|
Z"
|
|
fill="#c084fc"
|
|
/>
|
|
<path
|
|
d="M50 28
|
|
L58 45
|
|
L76 50
|
|
L58 55
|
|
L50 72
|
|
L42 55
|
|
L24 50
|
|
L42 45
|
|
Z"
|
|
fill="#ffffff"
|
|
opacity="0.9"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<p class="mt-4 text-xl tracking-wide opacity-80">AstraOS</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-purple-500/20 rounded-2xl p-8 backdrop-blur-lg shadow-xl opacity-0">
|
|
<h1 id="loginTitle" class="text-3xl font-bold text-center mb-6 tracking-wider text-purple-300">
|
|
</h1>
|
|
{% 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 'blue' }}-500/20 p-4 text-sm text-{{ 'red' if category == 'danger' else 'blue' }}-300 border border-{{ 'red' if category == 'danger' else 'blue' }}-500/30">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
<form id="loginForm" action="/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-purple-600">
|
|
</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-purple-600 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-purple-600 hover:bg-purple-700 text-white py-2 rounded-lg
|
|
font-semibold transition">
|
|
Login
|
|
</button>
|
|
<div class="flex items-center my-1">
|
|
<div class="flex-grow border-t border-gray-600"></div>
|
|
<span class="flex-shrink mx-4 text-gray-400 text-sm">oder</span>
|
|
<div class="flex-grow border-t border-gray-600"></div>
|
|
</div>
|
|
<a href="{{ url_for('login_discord') }}"
|
|
class="flex items-center justify-center bg-[#5865F2] hover:bg-[#4752C4] text-white py-2 rounded-lg font-semibold transition">
|
|
<svg class="w-6 h-6 mr-2" aria-hidden="true" role="img" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.317 4.36981C18.2767 3.20426 16.1224 2.27659 13.8468 1.61774C13.679 1.57584 13.5041 1.68116 13.4343 1.84475C12.8151 3.24952 12.3413 4.96228 12.0009 6.53635C10.6866 6.37181 9.36521 6.37181 8.01525 6.53635C7.67488 4.96228 7.20103 3.24952 6.58181 1.84475C6.51205 1.68116 6.33712 1.57584 6.16931 1.61774C3.89372 2.27659 1.73942 3.20426 -0.300884 4.36981C-0.535332 4.49339 -0.620213 4.7833 -0.499842 5.01329C0.0107496 5.92333 0.406433 6.97593 0.683583 8.0343C0.715011 8.14443 0.801901 8.23132 0.912038 8.26275C2.43731 8.73725 3.93953 9.1111 5.42371 9.34818C5.60563 9.3789 5.75754 9.24538 5.71964 9.06346C5.54471 8.25822 5.3928 7.43716 5.24089 6.62322C5.22194 6.52066 5.28274 6.4181 5.3853 6.39233C9.41501 5.69637 14.5858 5.69637 18.6155 6.39233C18.7181 6.4181 18.7789 6.52066 18.7599 6.62322C18.608 7.43716 18.4561 8.25822 18.2812 9.06346C18.2433 9.24538 18.3952 9.3789 18.5771 9.34818C20.0613 9.1111 21.5635 8.73725 23.0888 8.26275C23.1989 8.23132 23.2858 8.14443 23.3172 8.0343C23.5944 6.97593 23.9901 5.92333 24.4998 5.01329C24.6202 4.7833 24.5353 4.49339 24.3009 4.36981L20.317 4.36981Z"></path><path fill="currentColor" d="M12.0009 16.4373C14.2131 16.4373 16.0013 14.834 16.0013 12.8337C16.0013 10.8334 14.2202 9.23004 12.0009 9.23004C9.78161 9.23004 8.00049 10.8334 8.00049 12.8337C8.00049 14.834 9.78161 16.4373 12.0009 16.4373ZM18.0016 16.4373C20.2138 16.4373 22.002 14.834 22.002 12.8337C22.002 10.8334 20.2209 9.23004 18.0016 9.23004C15.7823 9.23004 14.0012 10.8334 14.0012 12.8337C14.0012 14.834 15.7823 16.4373 18.0016 16.4373Z"></path></svg>
|
|
Mit Discord anmelden
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
gsap.to("#star", {
|
|
rotation: 360,
|
|
duration: 1.6,
|
|
ease: "power1.inOut",
|
|
repeat: -1
|
|
});
|
|
gsap.to("#star", {
|
|
scale: 1.22,
|
|
duration: 1,
|
|
yoyo: true,
|
|
repeat: -1,
|
|
ease: "power1.inOut"
|
|
});
|
|
gsap.registerPlugin(TextPlugin);
|
|
{% if not get_flashed_messages() %}
|
|
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: "AstraOS Login",
|
|
ease: "none"
|
|
}, "-=0.2");
|
|
tl.to("#loginForm", {
|
|
opacity: 1,
|
|
duration: 0.4
|
|
}, "-=0.4");
|
|
}
|
|
});
|
|
}, 800);
|
|
{% else %}
|
|
document.getElementById("startup").style.display = "none";
|
|
document.getElementById("loginBox").style.opacity = 1;
|
|
document.getElementById("loginForm").style.opacity = 1;
|
|
document.getElementById("loginTitle").textContent = "AstraOS Login";
|
|
{% endif %}
|
|
</script>
|
|
</body>
|
|
</html>
|