polished webspages and completed implementation.
This commit is contained in:
parent
23791a2768
commit
9a3a106fca
7 changed files with 1194 additions and 172 deletions
238
contact.html
238
contact.html
|
|
@ -9,6 +9,18 @@
|
|||
content="Get in touch with KHY for professional furniture and design services."
|
||||
/>
|
||||
<link rel="stylesheet" href="styles/main.css" />
|
||||
<style>
|
||||
/* Smooth scrolling for the entire page */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Active navigation link styling */
|
||||
.nav-link.active {
|
||||
color: #b8873f !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
|
|
@ -35,56 +47,56 @@
|
|||
<li>
|
||||
<a
|
||||
href="index.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Home</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="products.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="index.html#products"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Products</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="projects.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-colors text-shadow-default"
|
||||
href="index.html#projects-button"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Projects</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="clients.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="index.html#clients"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Clients</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="about.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
href="index.html#about"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>About</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="contact.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Contact</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="blog.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Blog</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="quote.html"
|
||||
class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
|
||||
>Quote</a
|
||||
>
|
||||
</li>
|
||||
|
|
@ -214,7 +226,7 @@
|
|||
|
||||
<!-- Contact Form -->
|
||||
<div class="bg-white p-8 rounded-lg shadow-sm">
|
||||
<form class="space-y-6">
|
||||
<form id="contact-form" class="space-y-6">
|
||||
<!-- Name -->
|
||||
<div>
|
||||
<label
|
||||
|
|
@ -224,8 +236,11 @@
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Abc"
|
||||
id="contact-name"
|
||||
name="name"
|
||||
placeholder="First name last name"
|
||||
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -238,8 +253,11 @@
|
|||
</label>
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Abc@def.com"
|
||||
id="contact-email"
|
||||
name="email"
|
||||
placeholder="your@email.com"
|
||||
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -252,8 +270,11 @@
|
|||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="This is an optional"
|
||||
id="contact-subject"
|
||||
name="subject"
|
||||
placeholder="Title of your message"
|
||||
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -266,14 +287,36 @@
|
|||
</label>
|
||||
<textarea
|
||||
rows="5"
|
||||
placeholder="Hi! I'd like to ask about"
|
||||
id="contact-message"
|
||||
name="message"
|
||||
placeholder="Type your message here ..."
|
||||
class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold resize-none"
|
||||
required
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div
|
||||
id="contact-success"
|
||||
class="hidden bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg font-playfair font-normal text-base mb-4"
|
||||
style="display: none"
|
||||
>
|
||||
Thank you for your message! We will reply to you shortly.
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
id="contact-error"
|
||||
class="hidden bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg font-playfair font-normal text-base mb-4"
|
||||
style="display: none"
|
||||
>
|
||||
Please fill in all required fields before submitting.
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button
|
||||
type="submit"
|
||||
id="contact-submit"
|
||||
class="bg-uc-gold text-white font-playfair font-normal text-base px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all"
|
||||
>
|
||||
Submit
|
||||
|
|
@ -519,5 +562,166 @@
|
|||
</footer>
|
||||
|
||||
<script src="scripts/main.js"></script>
|
||||
<script>
|
||||
// Contact form validation and submission
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const contactForm = document.getElementById("contact-form");
|
||||
const successMessage = document.getElementById("contact-success");
|
||||
const errorMessage = document.getElementById("contact-error");
|
||||
const submitButton = document.getElementById("contact-submit");
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form fields
|
||||
const name = document.getElementById("contact-name").value.trim();
|
||||
const email = document.getElementById("contact-email").value.trim();
|
||||
const subject = document
|
||||
.getElementById("contact-subject")
|
||||
.value.trim();
|
||||
const message = document
|
||||
.getElementById("contact-message")
|
||||
.value.trim();
|
||||
|
||||
// Hide any existing messages
|
||||
successMessage.classList.add("hidden");
|
||||
errorMessage.classList.add("hidden");
|
||||
|
||||
// Validate all fields
|
||||
if (!name || !email || !subject || !message) {
|
||||
// Show error message
|
||||
errorMessage.classList.remove("hidden");
|
||||
errorMessage.style.display = "block";
|
||||
|
||||
// Highlight empty fields with red border
|
||||
const fields = [name, email, subject, message];
|
||||
const fieldIds = [
|
||||
"contact-name",
|
||||
"contact-email",
|
||||
"contact-subject",
|
||||
"contact-message",
|
||||
];
|
||||
|
||||
fieldIds.forEach((fieldId, index) => {
|
||||
const field = document.getElementById(fieldId);
|
||||
if (!fields[index]) {
|
||||
field.classList.add("border-red-500");
|
||||
field.classList.remove("border-gray-300");
|
||||
} else {
|
||||
field.classList.remove("border-red-500");
|
||||
field.classList.add("border-gray-300");
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to error message
|
||||
errorMessage.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
});
|
||||
|
||||
// Hide error message after 3 seconds
|
||||
setTimeout(() => {
|
||||
errorMessage.classList.add("hidden");
|
||||
errorMessage.style.display = "none";
|
||||
}, 3000);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate email format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
errorMessage.textContent = "Please enter a valid email address.";
|
||||
errorMessage.classList.remove("hidden");
|
||||
errorMessage.style.display = "block";
|
||||
document
|
||||
.getElementById("contact-email")
|
||||
.classList.add("border-red-500");
|
||||
document
|
||||
.getElementById("contact-email")
|
||||
.classList.remove("border-gray-300");
|
||||
|
||||
// Hide error message after 3 seconds
|
||||
setTimeout(() => {
|
||||
errorMessage.classList.add("hidden");
|
||||
errorMessage.style.display = "none";
|
||||
}, 3000);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// All validation passed - show success message
|
||||
successMessage.classList.remove("hidden");
|
||||
successMessage.style.display = "block";
|
||||
|
||||
// Reset form
|
||||
contactForm.reset();
|
||||
|
||||
// Reset all field borders
|
||||
const allFields = [
|
||||
"contact-name",
|
||||
"contact-email",
|
||||
"contact-subject",
|
||||
"contact-message",
|
||||
];
|
||||
allFields.forEach((fieldId) => {
|
||||
const field = document.getElementById(fieldId);
|
||||
field.classList.remove("border-red-500");
|
||||
field.classList.add("border-gray-300");
|
||||
});
|
||||
|
||||
// Scroll to success message
|
||||
successMessage.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
});
|
||||
|
||||
// Hide success message after 3 seconds
|
||||
setTimeout(() => {
|
||||
successMessage.classList.add("hidden");
|
||||
successMessage.style.display = "none";
|
||||
}, 3000);
|
||||
|
||||
// Optional: Disable submit button temporarily
|
||||
submitButton.disabled = true;
|
||||
submitButton.textContent = "Message Sent!";
|
||||
submitButton.classList.add("bg-green-600");
|
||||
submitButton.classList.remove("bg-uc-gold");
|
||||
|
||||
// Re-enable button after 3 seconds
|
||||
setTimeout(() => {
|
||||
submitButton.disabled = false;
|
||||
submitButton.textContent = "Submit";
|
||||
submitButton.classList.remove("bg-green-600");
|
||||
submitButton.classList.add("bg-uc-gold");
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
// Real-time validation feedback
|
||||
const formFields = [
|
||||
"contact-name",
|
||||
"contact-email",
|
||||
"contact-subject",
|
||||
"contact-message",
|
||||
];
|
||||
formFields.forEach((fieldId) => {
|
||||
const field = document.getElementById(fieldId);
|
||||
if (field) {
|
||||
field.addEventListener("input", function () {
|
||||
// Remove error styling when user starts typing
|
||||
this.classList.remove("border-red-500");
|
||||
this.classList.add("border-gray-300");
|
||||
|
||||
// Hide error message when user starts correcting
|
||||
if (this.value.trim()) {
|
||||
errorMessage.classList.add("hidden");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue