| Server IP : 127.0.0.1 / Your IP : 216.73.216.48 Web Server : Apache/2.4.58 (Win64) OpenSSL/3.1.3 PHP/8.2.12 System : Windows NT DESKTOP-3H4FHQJ 10.0 build 19045 (Windows 10) AMD64 User : win 10 ( 0) PHP Version : 8.2.12 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : D:/xampp/htdocs-coblaa/Cinevaa/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | CINEVAA</title>
<style>
:root {
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--text-dark: #1f2937;
--text-light: #4b5563;
--bg-light: #f9fafb;
--white: #ffffff;
--error: #ef4444;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
margin: 0;
}
.contact-container {
max-width: 600px;
margin: 50px auto;
padding: 2rem;
background: var(--white);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
h1 { text-align: center; color: var(--text-dark); margin-bottom: 10px; }
p.subtitle { text-align: center; color: var(--text-light); margin-bottom: 30px; }
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9rem; }
input, textarea {
width: 100%;
padding: 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 1rem;
box-sizing: border-box; /* Crucial for layout */
transition: border-color 0.2s;
}
input:focus, textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.error-message {
color: var(--error);
font-size: 0.8rem;
margin-top: 5px;
display: none;
}
button {
width: 100%;
padding: 14px;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
button:hover { background-color: var(--primary-hover); }
#success-msg {
display: none;
background: #dcfce7;
color: #166534;
padding: 15px;
border-radius: 6px;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="contact-container">
<h1>Get in Touch</h1>
<p class="subtitle">Have questions about CINEVAA? We're here to help.</p>
<div id="success-msg">Thank you! Your message has been sent successfully.</div>
<form id="contactForm">
<div class="form-group">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="John Doe">
<div class="error-message" id="nameError">Please enter your name.</div>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="john@example.com">
<div class="error-message" id="emailError">Please enter a valid email address.</div>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" id="subject" placeholder="How can we help?">
<div class="error-message" id="subjectError">Please enter a subject.</div>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="5" placeholder="Your message here..."></textarea>
<div class="error-message" id="messageError">Message cannot be empty.</div>
</div>
<button type="submit">Send Message</button>
</form>
</div>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// Reset errors
document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');
let isValid = true;
// Name validation
const name = document.getElementById('name').value;
if (name.trim() === '') {
document.getElementById('nameError').style.display = 'block';
isValid = false;
}
// Email validation
const email = document.getElementById('email').value;
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (!email.match(emailPattern)) {
document.getElementById('emailError').style.display = 'block';
isValid = false;
}
// Subject validation
const subject = document.getElementById('subject').value;
if (subject.trim() === '') {
document.getElementById('subjectError').style.display = 'block';
isValid = false;
}
// Message validation
const message = document.getElementById('message').value;
if (message.trim() === '') {
document.getElementById('messageError').style.display = 'block';
isValid = false;
}
if (isValid) {
// Simulate form submission
document.getElementById('contactForm').style.display = 'none';
document.getElementById('success-msg').style.display = 'block';
console.log("Form Submitted:", { name, email, subject, message });
// Here you would typically use fetch() to send data to your backend
}
});
</script>
</body>
</html>