163 lines
5.9 KiB
HTML
163 lines
5.9 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>
|
|
|
|
<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>
|
|
|
|
<form id="loginForm" action="/login" method="POST" class="flex flex-col gap-5 opacity-0">
|
|
|
|
<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>
|
|
|
|
</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);
|
|
|
|
setTimeout(() => {
|
|
gsap.to("#startup", {
|
|
opacity: 0,
|
|
duration: 0.6,
|
|
onComplete: () => {
|
|
document.getElementById("startup").style.display = "none";
|
|
|
|
const tl = gsap.timeline();
|
|
|
|
tl.fromTo("#loginBox",
|
|
{ opacity: 0, scale: 0.1 },
|
|
{
|
|
opacity: 1,
|
|
scale: 1,
|
|
duration: 0.8,
|
|
ease: "power2.out"
|
|
}
|
|
);
|
|
|
|
tl.to("#loginTitle", {
|
|
duration: 1,
|
|
text: "AstraOS Login",
|
|
ease: "none"
|
|
}, "-=0.2");
|
|
|
|
tl.to("#loginForm", {
|
|
opacity: 1,
|
|
duration: 0.5
|
|
}, "-=0.5");
|
|
}
|
|
});
|
|
}, 1500);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|