lightswind
Version:
A modern frontend library with pre-built Tailwind CSS components for building responsive and interactive user interfaces.
204 lines (172 loc) • 11 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Launch</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightwind@3.2.0/src/lightswind.css">
</head>
<body>
<div
class="flex flex-col items-center justify-center min-h-screen px-2 md:px-12 py-12 bg-gray-100 dark:bg-black text-gray-800 dark:text-gray-200 font-primarylw">
<h1 class="text-3xl md:text-4xl font-extrabold text-gray-800 dark:text-white text-center py-4">
Book Appointment
</h1>
<div
class="mx-auto w-full max-w-[550px] bg-white dark:bg-gray-900 shadow-lg rounded-lg px-4 md:px-8 py-4 md:py-8">
<form id="appointmentForm">
<div class="mb-5">
<label for="name" class="mb-3 block text-base font-medium text-gray-800 dark:text-gray-200">
Full Name
</label>
<input type="text" name="name" id="name" placeholder="Full Name"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
</div>
<div class="mb-5">
<label for="phone" class="mb-3 block text-base font-medium text-gray-800 dark:text-gray-200">
Phone Number
</label>
<input type="tel" name="phone" id="phone" placeholder="Enter your phone number"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
pattern="[0-9]{10}" required />
</div>
<div class="mb-5">
<label for="email" class="mb-3 block text-base font-medium text-gray-800 dark:text-gray-200">
Email Address
</label>
<input type="email" name="email" id="email" placeholder="Enter your email"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
</div>
<div class="-mx-3 flex flex-wrap">
<div class="w-full px-3 sm:w-1/2 mb-5">
<label for="date" class="mb-3 block text-base font-medium text-gray-800 dark:text-gray-200">
Date
</label>
<input type="date" name="date" id="date"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
</div>
<div class="w-full px-3 sm:w-1/2 mb-5">
<label for="time" class="mb-3 block text-base font-medium text-gray-800 dark:text-gray-200">
Time
</label>
<input type="time" name="time" id="time"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
</div>
</div>
<div class="mb-5">
<label class="mb-5 block text-base font-semibold text-gray-800 dark:text-gray-200 sm:text-xl">
Address Details
</label>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<input type="text" name="area" id="area" placeholder="Enter area"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
<input type="text" name="city" id="city" placeholder="Enter city"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
<input type="text" name="state" id="state" placeholder="Enter state"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
<input type="text" name="post-code" id="post-code" placeholder="Post Code"
class="w-full rounded-md border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 py-3 px-6 text-base font-medium text-gray-800 dark:text-gray-200 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
required />
</div>
</div>
<div class="mt-6">
<button type="submit"
class="flex items-center justify-center gap-2 w-full rounded-md bg-blue-600 hover:bg-blue-700 py-3 px-8 text-center text-base font-semibold text-white outline-none transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
Book Appointment
</button>
</div>
<div id="formMessage" class="mt-4 text-center text-sm font-medium text-green-500 hidden">
Your appointment has been booked successfully!
</div>
</form>
</div>
</div>
<script>
document.getElementById("appointmentForm").addEventListener("submit", function (e) {
e.preventDefault();
document.getElementById("formMessage").classList.remove("hidden");
setTimeout(() => {
document.getElementById("formMessage").classList.add("hidden");
document.getElementById("appointmentForm").reset();
}, 3000);
});
</script>
<!-- Theme Toggle Button -->
<button id="theme-toggle"
class="fixed z-50 top-2 left-2 text-gray-800 dark:text-gray-200 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>