|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Contact Us | Get in Touch</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(20px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 0.6s ease-out forwards; |
|
|
} |
|
|
|
|
|
.input-highlight { |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 0 0 1px rgba(147, 51, 234, 0); |
|
|
} |
|
|
|
|
|
.input-highlight:focus { |
|
|
box-shadow: 0 0 0 2px rgba(147, 51, 234, 1); |
|
|
} |
|
|
|
|
|
.success-message { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: all 0.4s ease; |
|
|
} |
|
|
|
|
|
.success-message.show { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.shake { |
|
|
animation: shake 0.5s; |
|
|
} |
|
|
|
|
|
@keyframes shake { |
|
|
0%, 100% { transform: translateX(0); } |
|
|
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } |
|
|
20%, 40%, 60%, 80% { transform: translateX(5px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-purple-50 to-purple-100 min-h-screen flex items-center justify-center p-4"> |
|
|
<div class="max-w-4xl w-full mx-auto grid md:grid-cols-2 gap-8 bg-white rounded-2xl shadow-xl overflow-hidden animate-fade-in"> |
|
|
|
|
|
<div class="bg-gradient-to-br from-purple-600 to-purple-700 text-white p-8 md:p-12 flex flex-col justify-center"> |
|
|
<div class="mb-8"> |
|
|
<h2 class="text-3xl font-bold mb-2">Get in touch</h2> |
|
|
<p class="opacity-90">We'd love to hear from you! Fill out the form and our team will get back to you within 24 hours.</p> |
|
|
</div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-500 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-envelope text-white text-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Email us</h4> |
|
|
<p class="text-purple-200">test@gmail.com</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-500 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-phone-alt text-white text-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Call us</h4> |
|
|
<p class="text-purple-200">+1 (555) 123-4567</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="bg-purple-500 p-3 rounded-full mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-white text-lg"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Visit us</h4> |
|
|
<p class="text-purple-200">123 Business Ave, Suite 500<br>San Francisco, CA 94107</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 pt-6 border-t border-purple-400"> |
|
|
<h4 class="font-semibold mb-3">Follow us</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-purple-500 hover:bg-purple-400 transition p-2 rounded-full"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-purple-500 hover:bg-purple-400 transition p-2 rounded-full"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-purple-500 hover:bg-purple-400 transition p-2 rounded-full"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-purple-500 hover:bg-purple-400 transition p-2 rounded-full"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-8 md:p-12"> |
|
|
<div class="success-message bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-6 hidden"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle mr-2"></i> |
|
|
<span>Thank you! Your message has been sent successfully.</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-2">Contact Us</h2> |
|
|
<p class="text-gray-600 mb-8">Fill out the form below and we'll get back to you soon.</p> |
|
|
|
|
|
<form id="contactForm" class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-user text-gray-400"></i> |
|
|
</div> |
|
|
<input type="text" id="name" name="name" required |
|
|
class="input-highlight pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition" |
|
|
placeholder="John Doe"> |
|
|
</div> |
|
|
<p class="text-red-500 text-xs mt-1 hidden" id="nameError">Please enter your name</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email Address</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-envelope text-gray-400"></i> |
|
|
</div> |
|
|
<input type="email" id="email" name="email" required |
|
|
class="input-highlight pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition" |
|
|
placeholder="john@example.com"> |
|
|
</div> |
|
|
<p class="text-red-500 text-xs mt-1 hidden" id="emailError">Please enter a valid email address</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone Number (Optional)</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-phone text-gray-400"></i> |
|
|
</div> |
|
|
<input type="tel" id="phone" name="phone" |
|
|
class="input-highlight pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition" |
|
|
placeholder="(123) 456-7890"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Subject</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-tag text-gray-400"></i> |
|
|
</div> |
|
|
<select id="subject" name="subject" required |
|
|
class="input-highlight pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition appearance-none"> |
|
|
<option value="" disabled selected>Select a subject</option> |
|
|
<option value="General Inquiry">General Inquiry</option> |
|
|
<option value="Support">Support</option> |
|
|
<option value="Sales">Sales</option> |
|
|
<option value="Feedback">Feedback</option> |
|
|
<option value="Other">Other</option> |
|
|
</select> |
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> |
|
|
<i class="fas fa-chevron-down text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-red-500 text-xs mt-1 hidden" id="subjectError">Please select a subject</p> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> |
|
|
<div class="relative"> |
|
|
<div class="absolute top-3 left-3"> |
|
|
<i class="fas fa-comment text-gray-400"></i> |
|
|
</div> |
|
|
<textarea id="message" name="message" rows="4" required |
|
|
class="input-highlight pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition" |
|
|
placeholder="Your message here..."></textarea> |
|
|
</div> |
|
|
<p class="text-red-500 text-xs mt-1 hidden" id="messageError">Please enter your message</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center"> |
|
|
<input type="checkbox" id="consent" name="consent" required |
|
|
class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"> |
|
|
<label for="consent" class="ml-2 block text-sm text-gray-700"> |
|
|
I agree to the <a href="#" class="text-purple-600 hover:underline">privacy policy</a> and <a href="#" class="text-purple-600 hover:underline">terms of service</a> |
|
|
</label> |
|
|
</div> |
|
|
<p class="text-red-500 text-xs mt-1 hidden" id="consentError">Please agree to our terms</p> |
|
|
|
|
|
<button type="submit" id="submitBtn" |
|
|
class="w-full bg-purple-600 hover:bg-purple-700 text-white font-medium py-3 px-4 rounded-lg transition duration-300 flex items-center justify-center"> |
|
|
<span id="submitText">Send Message</span> |
|
|
<i class="fas fa-paper-plane ml-2"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const form = document.getElementById('contactForm'); |
|
|
const submitBtn = document.getElementById('submitBtn'); |
|
|
const submitText = document.getElementById('submitText'); |
|
|
const successMessage = document.querySelector('.success-message'); |
|
|
|
|
|
form.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('[id$="Error"]').forEach(el => { |
|
|
el.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
let isValid = true; |
|
|
|
|
|
|
|
|
const name = document.getElementById('name'); |
|
|
if (!name.value.trim()) { |
|
|
document.getElementById('nameError').classList.remove('hidden'); |
|
|
name.classList.add('shake'); |
|
|
isValid = false; |
|
|
setTimeout(() => name.classList.remove('shake'), 500); |
|
|
} |
|
|
|
|
|
|
|
|
const email = document.getElementById('email'); |
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.([^\s@]+)$/; |
|
|
if (!emailRegex.test(email.value)) { |
|
|
document.getElementById('emailError').classList.remove('hidden'); |
|
|
email.classList.add('shake'); |
|
|
isValid = false; |
|
|
setTimeout(() => email.classList.remove('shake'), 500); |
|
|
} |
|
|
|
|
|
|
|
|
const subject = document.getElementById('subject'); |
|
|
if (!subject.value) { |
|
|
document.getElementById('subjectError').classList.remove('hidden'); |
|
|
subject.classList.add('shake'); |
|
|
isValid = false; |
|
|
setTimeout(() => subject.classList.remove('shake'), 500); |
|
|
} |
|
|
|
|
|
|
|
|
const message = document.getElementById('message'); |
|
|
if (!message.value.trim()) { |
|
|
document.getElementById('messageError').classList.remove('hidden'); |
|
|
message.classList.add('shake'); |
|
|
isValid = false; |
|
|
setTimeout(() => message.classList.remove('shake'), 500); |
|
|
} |
|
|
|
|
|
|
|
|
const consent = document.getElementById('consent'); |
|
|
if (!consent.checked) { |
|
|
document.getElementById('consentError').classList.remove('hidden'); |
|
|
consent.classList.add('shake'); |
|
|
isValid = false; |
|
|
setTimeout(() => consent.classList.remove('shake'), 500); |
|
|
} |
|
|
|
|
|
if (!isValid) return; |
|
|
|
|
|
|
|
|
submitBtn.disabled = true; |
|
|
submitText.textContent = 'Sending...'; |
|
|
submitBtn.innerHTML = '<span id="submitText">Sending...</span><i class="fas fa-spinner fa-spin ml-2"></i>'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
form.reset(); |
|
|
submitBtn.disabled = false; |
|
|
submitText.textContent = 'Send Message'; |
|
|
submitBtn.innerHTML = '<span id="submitText">Send Message</span><i class="fas fa-paper-plane ml-2"></i>'; |
|
|
|
|
|
|
|
|
successMessage.classList.remove('hidden'); |
|
|
successMessage.classList.add('show'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
successMessage.classList.remove('show'); |
|
|
setTimeout(() => successMessage.classList.add('hidden'), 400); |
|
|
}, 5000); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
const inputs = document.querySelectorAll('input, textarea, select'); |
|
|
inputs.forEach(input => { |
|
|
input.addEventListener('focus', function() { |
|
|
this.parentElement.querySelector('i').classList.remove('text-gray-400'); |
|
|
this.parentElement.querySelector('i').classList.add('text-purple-500'); |
|
|
}); |
|
|
|
|
|
input.addEventListener('blur', function() { |
|
|
this.parentElement.querySelector('i').classList.remove('text-purple-500'); |
|
|
this.parentElement.querySelector('i').classList.add('text-gray-400'); |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=vivekin/contact" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
