Skip to content

Commit 2581c91

Browse files
akshitagupta15juneakshitagupta15june
authored
Merge pull request akshitagupta15june#1998 from emrhngngr/emrhnbranch
Improved contact form UI and fixed dark theme issue in contact form
2 parents 4f9527b + 1cb8b35 commit 2581c91

File tree

1 file changed

+154
-102
lines changed

1 file changed

+154
-102
lines changed

‎index.html‎

Lines changed: 154 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -583,115 +583,167 @@ <h5 class="text_3 md:text-[40px] font-bold mb-2 text-center">
583583
</div>
584584
</section>
585585

586-
587-
588-
589586
<!-- style="opacity: 0; transform: translateX(50px); transition: opacity 1s ease, transform 1s ease;" -->
590587
<!-- Contact us section html starts from here -->
591-
<section id="contact" class="dark:bg-gray-700 b_1 pt-40 pb-20">
592-
<div class="w-full contact-form-container mx-auto max-w-screen-md" id="contactFormContainer">
588+
<section id="contact" class="bg-gradient-to-b from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 pt-24 pb-16">
589+
<div class="w-full mx-auto max-w-screen-md px-4">
593590
<form action="https://formspree.io/f/xayaokzl" method="POST"
594-
class="bg-black rounded-md main-bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-200 border border-gray-50 px-8 pt-8 pb-10">
595-
<p id="contact"></p>
596-
597-
598-
<h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3 contact-form-text" style="color: white;">
599-
CONTACT US
600-
</h2>
601-
<p class="text-base text-center text_3 contact-form-text" style="color: white;">
602-
603-
604-
Any issues! Fill the form below and our team will contact you
605-
shortly.
606-
</p>
607-
<br />
608-
<div class="mb-4">
609-
610-
611-
<label class="block text_3 text-sm font-bold mb-2 contact-form-text" for="contact_nom" style="color: white;">
612-
613-
614-
Name
615-
</label>
616-
<!-- <input
617-
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline"
618-
id="contact_nom"
619-
name="contact_nom"
620-
type="text"
621-
placeholder="Name"
622-
/> -->
623-
<input
624-
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline"
625-
id="contact_nom" name="contact_nom" type="text" placeholder="Name" oninput="validateName(this)" />
626-
627-
<span id="nameError" class="text-red-500"></span>
628-
629-
<script>
630-
function validateName(input) {
631-
var nameRegex = /^[A-Za-z\- ]+$/; // Allow letters, hyphens, and spaces
632-
633-
if (input.value.trim() === '') {
634-
document.getElementById('nameError').textContent = '';
635-
input.classList.remove('border-red-500');
636-
} else if (!input.value.match(nameRegex)) {
637-
document.getElementById('nameError').textContent =
638-
'Please enter a valid name with only letters, spaces, and hyphens.';
639-
input.classList.add('border-red-500');
640-
} else {
641-
document.getElementById('nameError').textContent = '';
642-
input.classList.remove('border-red-500');
643-
}
644-
}
645-
</script>
646-
647-
</div>
648-
<div class="mb-6">
649-
650-
651-
<label class="block text_3 text-sm font-bold mb-2 contact-form-text" for="contact_email" style="color: white;">
652-
653-
Email
654-
</label>
655-
<input
656-
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline"
657-
id="contact_email" name="contact_email" type="email" required placeholder="hello@petme"
658-
oninput="validateEmail(this)" />
659-
<span id="emailError" class="text-red-500"></span>
660-
661-
662-
<script>
663-
function validateEmail(input) {
664-
const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
665-
666-
if (input.value.trim() === '') {
667-
document.getElementById('emailError').textContent = '';
668-
input.classList.remove('border-red-500');
669-
} else if (!input.value.match(emailRegex)) {
670-
document.getElementById('emailError').textContent =
671-
'Please enter a valid email including @.';
672-
input.classList.add('border-red-500');
673-
} else {
674-
document.getElementById('emailError').textContent = '';
675-
input.classList.remove('border-red-500');
676-
}
677-
}
678-
</script>
679-
</div>
680-
<div class="mb-6">
681-
<label for="contact_message" class="block text_3 text-sm font-bold mb-2 contact-form-text" style="color: white;">Message</label>
682-
<textarea
683-
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline"
684-
id="contact_message" name="contact_message" required rows="6" placeholder="Your message"></textarea>
591+
class="relative overflow-hidden rounded-2xl shadow-xl bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
592+
593+
<!-- Form Header -->
594+
<div class="relative overflow-hidden bg-slate-200 py-8 px-6">
595+
<div class="absolute inset-0 opacity-10">
596+
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC40Ij48cGF0aCBkPSJNMzYgMzRjMC0yLjItMS44LTQtNC00cy00IDEuOC00IDQgMS44IDQgNCA0IDQtMS44IDQtNHptMC0xOGMwLTIuMi0xLjgtNC00LTRzLTQgMS44LTQgNCAxLjggNCA0IDQgNC0xLjggNC00em0xOCA4YzAtMi4yLTEuOC00LTQtNHMtNCAxLjgtNCA0IDEuOCA0IDQgNCA0LTEuOCA0LTR6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=')]"></div>
597+
</div>
598+
<h2 class="text-3xl font-bold text-white text-center relative z-10 text_3">CONTACT US</h2>
599+
<p class="text-base text-opacity-90 text-center mt-2 relative z-10 text_3">
600+
Any issues? Fill the form below and our team will contact you shortly.
601+
</p>
685602
</div>
686-
<div class="flex justify-center">
687-
<button
688-
class="bg-amber-800 hover-button hover:bg-amber-700 text-center text_3 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
689-
type="submit">
690-
Submit
691-
</button>
603+
604+
<!-- Form Body -->
605+
<div class="p-8">
606+
<div class="space-y-6">
607+
<!-- Name Field -->
608+
<div>
609+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="contact_nom">
610+
Name
611+
</label>
612+
<div class="relative rounded-md shadow-sm">
613+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
614+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
615+
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
616+
</svg>
617+
</div>
618+
<input
619+
class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-600 focus:border-transparent transition-all duration-200"
620+
id="contact_nom" name="contact_nom" type="text" placeholder="Your name" oninput="validateName(this)" />
621+
</div>
622+
<span id="nameError" class="text-red-500 text-sm mt-1 block"></span>
623+
</div>
624+
625+
<!-- Email Field -->
626+
<div>
627+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="contact_email">
628+
Email
629+
</label>
630+
<div class="relative rounded-md shadow-sm">
631+
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
632+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
633+
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
634+
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
635+
</svg>
636+
</div>
637+
<input
638+
class="block w-full pl-10 pr-3 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-600 focus:border-transparent transition-all duration-200"
639+
id="contact_email" name="contact_email" type="email" required placeholder="your.email@example.com" oninput="validateEmail(this)" />
640+
</div>
641+
<span id="emailError" class="text-red-500 text-sm mt-1 block"></span>
642+
</div>
643+
644+
<!-- Message Field -->
645+
<div>
646+
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" for="contact_message">
647+
Message
648+
</label>
649+
<div class="relative rounded-md shadow-sm">
650+
<textarea
651+
class="block w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-600 focus:border-transparent transition-all duration-200"
652+
id="contact_message" name="contact_message" required rows="5" placeholder="How can we help you?"></textarea>
653+
</div>
654+
</div>
655+
656+
<!-- Submit Button -->
657+
<div class="pt-2">
658+
<button
659+
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-base font-medium text-white bg-amber-600 hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:bg-amber-700 dark:hover:bg-amber-600 dark:focus:ring-amber-600 transition-all duration-200"
660+
type="submit">
661+
<span>Submit</span>
662+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
663+
<path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
664+
</svg>
665+
</button>
666+
</div>
667+
</div>
692668
</div>
693669
</form>
694670
</div>
671+
672+
<!-- Dark Mode Toggle Button -->
673+
<div class="fixed bottom-4 right-4">
674+
<button id="darkModeToggle" class="bg-gray-200 dark:bg-gray-700 p-2 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
675+
<!-- Sun icon (for dark mode) -->
676+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-600 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
677+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
678+
</svg>
679+
<!-- Moon icon (for light mode) -->
680+
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-200 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
681+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
682+
</svg>
683+
</button>
684+
</div>
685+
686+
<!-- Validation Scripts -->
687+
<script>
688+
// Name validation
689+
function validateName(input) {
690+
var nameRegex = /^[A-Za-z\- ]+$/; // Allow letters, hyphens, and spaces
691+
692+
if (input.value.trim() === '') {
693+
document.getElementById('nameError').textContent = '';
694+
input.classList.remove('border-red-500');
695+
input.classList.add('border-gray-300', 'dark:border-gray-600');
696+
} else if (!input.value.match(nameRegex)) {
697+
document.getElementById('nameError').textContent = 'Please enter a valid name with only letters, spaces, and hyphens.';
698+
input.classList.remove('border-gray-300', 'dark:border-gray-600');
699+
input.classList.add('border-red-500');
700+
} else {
701+
document.getElementById('nameError').textContent = '';
702+
input.classList.remove('border-red-500');
703+
input.classList.add('border-gray-300', 'dark:border-gray-600');
704+
}
705+
}
706+
707+
// Email validation
708+
function validateEmail(input) {
709+
const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
710+
711+
if (input.value.trim() === '') {
712+
document.getElementById('emailError').textContent = '';
713+
input.classList.remove('border-red-500');
714+
input.classList.add('border-gray-300', 'dark:border-gray-600');
715+
} else if (!input.value.match(emailRegex)) {
716+
document.getElementById('emailError').textContent = 'Please enter a valid email including @.';
717+
input.classList.remove('border-gray-300', 'dark:border-gray-600');
718+
input.classList.add('border-red-500');
719+
} else {
720+
document.getElementById('emailError').textContent = '';
721+
input.classList.remove('border-red-500');
722+
input.classList.add('border-gray-300', 'dark:border-gray-600');
723+
}
724+
}
725+
726+
// Dark mode toggle
727+
const darkModeToggle = document.getElementById('darkModeToggle');
728+
729+
// Check for saved theme preference or use the system preference
730+
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
731+
document.documentElement.classList.add('dark');
732+
} else {
733+
document.documentElement.classList.remove('dark');
734+
}
735+
736+
// Add event listener to the dark mode toggle button
737+
darkModeToggle.addEventListener('click', function() {
738+
if (document.documentElement.classList.contains('dark')) {
739+
document.documentElement.classList.remove('dark');
740+
localStorage.theme = 'light';
741+
} else {
742+
document.documentElement.classList.add('dark');
743+
localStorage.theme = 'dark';
744+
}
745+
});
746+
</script>
695747
</section>
696748

697749
<script>

0 commit comments

Comments
 (0)