lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
149 lines (131 loc) • 8.53 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Animated Login Website</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.0.0/src/lightswind.css">
</head>
<body class=" overflow-hidden">
<div class="font-primarylw w-screen h-screen bg-black overflow-hidden">
<!-- Main container -->
<div class="blur-container absolute inset-0 grid overflow-hidden" style="filter: blur(12vw);">
<!-- First shape -->
<div class="shape absolute inset-0 mx-auto" style="clip-path: polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%);
background: linear-gradient(hotpink, red, orange, yellow, hotpink);
animation: GradientAnimatedBgTurn 8000ms linear infinite;
transform: rotate(0deg);
opacity: 0.66;">
</div>
<!-- Second shape -->
<div class="shape absolute inset-0 mx-auto" style="clip-path: polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%);
background: linear-gradient(cyan, blue, green, purple, cyan);
animation: GradientAnimatedBgTurn 6000ms linear infinite;
transform: rotate(180deg);">
</div>
</div>
<section class="flex justify-center items-center min-h-screen px-4 ">
<div
class="login-box relative w-full sm:w-[400px] bg-transparent border-2 border-white/50 rounded-2xl flex flex-col justify-center items-center backdrop-blur-[15px] backdrop-filter bg-blue-400/30 p-6">
<form action="" class="w-full">
<h2 class="text-2xl lg:text-3xl text-white text-center mb-6">Login Here</h2>
<!-- Email input -->
<div class="input-box relative w-full mb-7 border-b-2 border-white">
<span class="icon absolute right-2 text-white text-xl leading-[57px]">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5 md:size-6 mt-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
</svg>
</span>
<label class="icon absolute left-2 text-white text-lg leading-[57px]">Email</label>
<input type="email" id="email" required
class="w-full h-12 bg-transparent border-none outline-none text-white text-lg pl-2 pr-10 peer"
oninput="checkInput(this)" />
</div>
<!-- Password input with eye toggle -->
<div class="input-box relative w-full mb-7 border-b-2 border-white">
<!-- Lock icon -->
<span id="lock-icon"
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white text-xl cursor-pointer"
onclick="togglePasswordVisibility()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5 md:size-6 mt-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
</span>
<!-- Open lock icon -->
<span id="eye-open-icon"
class="absolute right-2 top-1/2 transform -translate-y-1/2 text-white text-xl hidden cursor-pointer"
onclick="togglePasswordVisibility()">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5 md:size-6 mt-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M13.5 10.5V6.75a4.5 4.5 0 1 1 9 0v3.75M3.75 21.75h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H3.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" />
</svg>
</span>
<label class="icon absolute left-2 text-white text-lg leading-[57px]">Password</label>
<input type="password" id="password" required
class="w-full h-12 bg-transparent border-none outline-none text-white text-lg pl-2 pr-10 peer"
oninput="checkInput(this)" />
</div>
<!-- Remember me and Forgot password -->
<div class="remember-forgot flex justify-between text-white text-xs my-3">
<label for="" class="flex items-center">
<input type="checkbox" class="mr-2" /> Remember me
</label>
<a href="javascript:void(0)" class="hover:underline">Forgot Password?</a>
</div>
<!-- Login Button -->
<button type="submit"
class="w-full h-10 lg:h-12 mt-4 bg-white text-black font-semibold text-lg rounded-full cursor-pointer hover:bg-gray-200">
Login
</button>
<!-- Register Link -->
<div class="register-link text-white text-xs text-center mt-6">
<p>Don't have an account? <a href="javascript:void(0)"
class="font-bold hover:underline">Register</a></p>
</div>
</form>
</div>
</section>
</div>
<script>
// Function to check if input has value and adjust label position
function checkInput(input) {
const label = input.previousElementSibling;
if (input.value !== '') {
label.classList.add('-top-0', '-translate-y-8', 'transition-all', 'duration-300');
} else {
label.classList.remove('-top-0', '-translate-y-8', 'transition-all', 'duration-300');
}
if (input.value !== '') {
input.setAttribute('autocomplete', 'off'); // Hide the default show/hide icon when typing
}
}
// Toggle password visibility and icons
function togglePasswordVisibility() {
const passwordInput = document.getElementById('password');
const lockIcon = document.getElementById('lock-icon');
const eyeOpenIcon = document.getElementById('eye-open-icon');
// Check if password is visible or not
if (passwordInput.type === 'password') {
passwordInput.type = 'text'; // Show password
lockIcon.classList.add('hidden');
eyeOpenIcon.classList.remove('hidden');
} else {
passwordInput.type = 'password'; // Hide password
lockIcon.classList.remove('hidden');
eyeOpenIcon.classList.add('hidden');
}
}
window.onload = function () {
document.querySelectorAll('input').forEach(input => {
checkInput(input); // Check if the input has any value when the page is loaded
});
};
</script>
</body>
</html>