generated from Templates_CodeFirst/templateHtmlCss
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
4.5 KiB
115 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact Us</title>
|
|
<!-- Tailwind CSS via CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link type="text/css" rel="stylesheet" href="style.css">
|
|
<script src="effect.js" defer></script>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar bg-gray-200 shadow-lg">
|
|
<ul class="navbar-list flex justify-around items-center py-4">
|
|
<li><a href="index.html" class="text-gray-700 hover:text-blue-500">Accueil</a></li>
|
|
<li><a href="cursus.html" class="text-gray-700 hover:text-blue-500">Cursus</a></li>
|
|
<li><a href="planning.html" class="text-gray-700 hover:text-blue-500">Planning</a></li>
|
|
<li class="dropdown relative">
|
|
<a href="#" class="text-gray-700 hover:text-blue-500">Gallerie</a>
|
|
<ul class="dropdown-content absolute left-0 mt-2 bg-white shadow-lg p-4 hidden">
|
|
<li><a href="images.html" class="hover:text-blue-500">Images</a></li>
|
|
<li><a href="videos.html" class="hover:text-blue-500">Vidéos</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="form.html" class="text-gray-700 hover:text-blue-500">Formulaire</a></li>
|
|
<label class="switch">
|
|
<input type="checkbox" id="theme-switch">
|
|
<span class="slider"></span>
|
|
</label>
|
|
</ul>
|
|
</nav>
|
|
|
|
<!-- Contact Form -->
|
|
<form action="process_form.php" method="POST" id="contact-form">
|
|
<div class="container px-4 mx-auto mt-10">
|
|
<div class="max-w-md mx-auto px-8 py-6 bg-gray-800 rounded-lg shadow-lg">
|
|
<h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
|
|
<form>
|
|
<div class="mb-4">
|
|
<label class="block text-white mb-1" for="name">Your Name</label>
|
|
<input
|
|
class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
|
|
placeholder="Enter your name"
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-white mb-1" for="email">Your Email</label>
|
|
<input
|
|
class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
|
|
placeholder="Enter your email"
|
|
type="email"
|
|
name="email"
|
|
id="email"
|
|
/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block text-white mb-1" for="message">Your Message</label>
|
|
<textarea
|
|
class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-yellow-300 transition duration-300"
|
|
rows="4"
|
|
placeholder="Enter your message"
|
|
name="message"
|
|
id="message"
|
|
></textarea>
|
|
</div>
|
|
<button
|
|
class="w-full bg-yellow-300 text-gray-800 py-2 px-4 rounded-lg hover:bg-yellow-400 transition duration-300"
|
|
type="submit"
|
|
>
|
|
Send Message
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JavaScript to Handle Form Submission -->
|
|
<script>
|
|
document.getElementById('contact-form').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
|
|
const name = document.getElementById('name').value;
|
|
const email = document.getElementById('email').value;
|
|
const message = document.getElementById('message').value;
|
|
|
|
// Display confirmation message
|
|
const responseMessage = document.getElementById('form-response');
|
|
responseMessage.textContent = `Thank you, ${name}! Your message has been sent successfully.`;
|
|
responseMessage.classList.remove('hidden');
|
|
|
|
// Clear the form
|
|
e.target.reset();
|
|
|
|
// Example: Send data via fetch to a backend API (optional)
|
|
/*
|
|
fetch('your-backend-endpoint', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ name, email, message })
|
|
});
|
|
*/
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|