lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
169 lines (152 loc) • 10.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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>
<div class="min-h-screen bg-white dark:bg-black flex items-center justify-center text-gray-900 font-primarylw">
<div class="max-w-screen-xl mx-6 sm:mx-10 bg-white dark:bg-black border dark:border-gray-800 shadow-2xl
rounded-lg overflow-hidden flex flex-col lg:flex-row">
<!-- Left Section -->
<div class="flex-1 p-6 sm:p-12 lg:p-16">
<div class="text-center">
<img src="https://lightswind.com/lighstwind-logo.png" alt="Logo" class="w-12 mx-auto" />
</div>
<div class="mt-12">
<h1 class="text-3xl font-bold text-gray-800 dark:text-gray-200 text-center">Create Your Account</h1>
<p class="mt-4 text-sm text-gray-600 dark:text-gray-400 text-center">
Join us today! It takes only a few steps.
</p>
<div class="mt-8 space-y-4">
<button
class="w-full py-3 px-6 bg-blue-500 text-white rounded-lg shadow-md flex items-center justify-center hover:bg-blue-600 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 48 48">
<path fill="#fbc02d"
d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12 s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20 s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z">
</path>
<path fill="#e53935"
d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039 l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z">
</path>
<path fill="#4caf50"
d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36 c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z">
</path>
<path fill="#1565c0"
d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571 c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z">
</path>
</svg>
<span class="ml-3">Sign up with Google</span>
</button>
<button
class="w-full py-3 px-6 bg-gray-800 text-white rounded-lg shadow-md flex items-center justify-center hover:bg-gray-900 transition">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 32 32">
<path fill-rule="evenodd"
d="M16 4C9.371 4 4 9.371 4 16c0 5.3 3.438 9.8 8.207 11.387.602.11.82-.258.82-.578 0-.286-.011-1.04-.015-2.04-3.34.723-4.043-1.609-4.043-1.609-.547-1.387-1.332-1.758-1.332-1.758-1.09-.742.082-.726.082-.726 1.203.086 1.836 1.234 1.836 1.234 1.07 1.836 2.808 1.305 3.492 1 .11-.777.422-1.305.762-1.605-2.664-.301-5.465-1.332-5.465-5.93 0-1.313.469-2.383 1.234-3.223-.121-.3-.535-1.523.117-3.175 0 0 1.008-.32 3.301 1.23A11.487 11.487 0 0116 9.805c1.02.004 2.047.136 3.004.402 2.293-1.55 3.297-1.23 3.297-1.23.656 1.652.246 2.875.12 3.175.77.84 1.231 1.91 1.231 3.223 0 4.61-2.804 5.621-5.476 5.922.43.367.812 1.101.812 2.219 0 1.605-.011 2.898-.011 3.293 0 .32.214.695.824.578C24.566 25.797 28 21.3 28 16c0-6.629-5.371-12-12-12z" />
</svg>
<span class="ml-3">Sign up with GitHub</span>
</button>
</div>
<div class="relative my-8">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300"></div>
</div>
<div class="relative text-center text-gray-600 dark:text-gray-400 bg-white dark:bg-black px-4">
Or sign up with your
email</div>
</div>
<form class="space-y-4">
<input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 text-gray-800 dark:text-gray-200
border border-gray-200 dark:border-gray-800 placeholder-gray-500 text-sm
focus:outline-none focus:border-gray-400 focus:bg-white dark:bg-black" type="email"
placeholder="Email" />
<input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 text-gray-800 dark:text-gray-200 border
border-gray-200 dark:border-gray-800 placeholder-gray-500 text-sm
focus:outline-none focus:border-gray-400 focus:bg-white dark:bg-black mt-5" type="password"
placeholder="Password" />
<button type="submit"
class="w-full py-3 px-6 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 transition">Sign
Up</button>
</form>
<p class="text-center text-sm mt-4 text-gray-600 dark:text-gray-400">
By signing up, you agree to our
<a href="javascript:void(0)" class="text-blue-500 hover:underline">Terms</a> and
<a href="javascript:void(0)" class="text-blue-500 hover:underline">Privacy Policy</a>.
</p>
</div>
</div>
<!-- Right Section -->
<div class="hidden lg:flex flex-1 bg-indigo-100 items-center justify-center">
<img src="https://firebasestorage.googleapis.com/v0/b/codewithmuhilandb.appspot.com/o/uploads%2FBasicLoginFormBg.png?alt=media&token=329d0c0d-71ec-4311-8d80-d21d20c0653f"
alt="Illustration" class="w-full h-full object-cover" />
</div>
</div>
</div>
<!-- Theme Toggle Button -->
<button id="theme-toggle"
class="fixed top-2 left-2 text-black dark:text-white bg-gray-500/30 dark:bg-gray-900/70 p-2 rounded-full shadow-md hover:bg-gray-700">
<!-- Sun Icon for Light Mode -->
<svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<!-- Moon Icon for Dark Mode -->
<svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-5">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
</button>
<script src="https://cdn.jsdelivr.net/npm/lightwind@3.1.0/src/lightswind.min.js"></script>
<script>
tailwind.config = {
darkMode: 'class', // Enable class-based dark mode
theme: {
extend: {
colors: {},
},
},
};
const setInitialTheme = () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
if (currentTheme === 'dark') {
document.body.classList.add('dark');
document.getElementById('sun-icon').style.opacity = '0';
document.getElementById('moon-icon').style.opacity = '1';
} else {
document.body.classList.remove('dark');
document.getElementById('sun-icon').style.opacity = '1';
document.getElementById('moon-icon').style.opacity = '0';
}
};
setInitialTheme();
const themeToggleButton = document.getElementById('theme-toggle');
themeToggleButton.addEventListener('click', () => {
const currentTheme = localStorage.getItem('iframetheme') || 'dark';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem('iframetheme', newTheme);
document.body.classList.toggle('dark', newTheme === 'dark');
if (newTheme === 'dark') {
document.getElementById('moon-icon').style.opacity = '0';
document.getElementById('sun-icon').style.opacity = '1';
} else {
document.getElementById('moon-icon').style.opacity = '1';
document.getElementById('sun-icon').style.opacity = '0';
}
const iframe = document.querySelector('iframe');
if (iframe) {
const iframeWindow = iframe.contentWindow;
const iframeDocument = iframe.contentDocument || iframeWindow.document;
if (iframeDocument) {
iframeDocument.addEventListener('DOMContentLoaded', () => {
iframeDocument.body.classList.toggle('dark', newTheme === 'dark');
});
}
}
});
</script>
</body>
</html>