From b4fde924341edde57281fde13badcd3eda63c6ab Mon Sep 17 00:00:00 2001
From: Nikhil dangi <nikhildangi1205@gmail.com>
Date: Sat, 24 Jan 2026 15:52:58 +0530
Subject: [PATCH] Upgrade contact us

---
 index.html             | 70 +++++++++++++++++++++++-------------------
 src/scripts/contact.js | 42 ++++++++++++++++++++++---
 2 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/index.html b/index.html
index c0015cf..f39471d 100644
--- a/index.html
+++ b/index.html
@@ -319,40 +319,47 @@ <h3 class="text-3xl font-bold text-gray-800 md:text-4xl">Contact Us</h3>
       </div>
       <div class="max-w-4xl mx-auto">
         <form id="contactForm" class="p-8 space-y-6 bg-white rounded-lg shadow">
-          
-          <div>
-            <label for="name" class="block font-medium text-gray-700">Name</label>
-            <input type="text" id="name" required
-              class="w-full mt-2 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#049b9f]
-                    transition-all duration-300 hover:shadow-md hover:border-[#049b9f]"
-              placeholder="Your name" />
-          </div>
 
-          <div>
-            <label for="email" class="block font-medium text-gray-700">Email</label>
-            <input type="email" id="email" required
-              class="w-full mt-2 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#049b9f]
-                    transition-all duration-300 hover:shadow-md hover:border-[#049b9f]"
-              placeholder="Your email" />
-          </div>
-
-          <div>
-            <label for="message" class="block font-medium text-gray-700">Message</label>
-            <textarea id="message" rows="5" required
-              class="w-full mt-2 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#049b9f]
-                    transition-all duration-300 hover:shadow-md hover:border-[#049b9f]"
-              placeholder="Your message"></textarea>
-          </div>
+  <!-- Status Message -->
+  <div id="formStatus"
+       class="hidden text-sm font-medium p-3 rounded"
+       aria-live="polite"></div>
+
+  <div>
+    <label for="name" class="block font-medium text-gray-700">Name</label>
+    <input type="text" id="name" required
+      class="w-full mt-2 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#049b9f]
+            transition-all duration-300 hover:shadow-md hover:border-[#049b9f]"
+      placeholder="Your name" />
+  </div>
+
+  <div>
+    <label for="email" class="block font-medium text-gray-700">Email</label>
+    <input type="email" id="email" required
+      class="w-full mt-2 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#049b9f]
+            transition-all duration-300 hover:shadow-md hover:border-[#049b9f]"
+      placeholder="your@email.com" />
+  </div>
+
+  <div>
+    <label for="message" class="block font-medium text-gray-700">Message</label>
+    <textarea id="message" rows="5" required
+      class="w-full mt-2 p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#049b9f]
+            transition-all duration-300 hover:shadow-md hover:border-[#049b9f]"
+      placeholder="Your message..."></textarea>
+  </div>
+
+  <div class="mt-4">
+    <button id="submitBtn" type="submit"
+      class="w-full bg-[#049b9f] text-white font-medium py-3 rounded-lg
+            transition-all duration-300 hover:bg-[#037b7f] hover:shadow-lg
+            focus:outline-none disabled:opacity-60 disabled:cursor-not-allowed">
+      Send Message
+    </button>
+  </div>
 
-          <div class="mt-4">
-            <button type="submit"
-              class="w-full bg-[#049b9f] text-white font-medium py-3 rounded-lg
-                    transition-all duration-300 hover:bg-[#037b7f] hover:shadow-lg hover:scale-105 focus:outline-none">
-              Send Message
-            </button>
-          </div>
+</form>
 
-        </form>
       </div>
     </section>
   </main>
@@ -431,6 +438,7 @@ <h3 class="text-3xl font-bold text-gray-800 md:text-4xl">Contact Us</h3>
           // Toggle icons
           lightIcon.classList.toggle('hidden');
           darkIcon.classList.toggle('hidden');
+          
 
           // Reset transforms
           lightIcon.style.transform = 'rotate(0) scale(1)';
diff --git a/src/scripts/contact.js b/src/scripts/contact.js
index e409800..c25a2f8 100644
--- a/src/scripts/contact.js
+++ b/src/scripts/contact.js
@@ -7,24 +7,39 @@ import {
 
 document.addEventListener("DOMContentLoaded", () => {
   const form = document.getElementById("contactForm");
+  const status = document.getElementById("formStatus");
+  const submitBtn = document.getElementById("submitBtn");
 
   if (!form) {
-    console.error("❌ contactForm not found in DOM");
+    console.error("❌ contactForm not found");
     return;
   }
 
   form.addEventListener("submit", async (e) => {
-    e.preventDefault(); // ⛔ STOP PAGE RELOAD
+    e.preventDefault();
 
     const name = document.getElementById("name").value.trim();
     const email = document.getElementById("email").value.trim();
     const message = document.getElementById("message").value.trim();
 
+    // Basic email regex
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
     if (!name || !email || !message) {
-      alert("⚠️ All fields are required");
+      showStatus("⚠️ All fields are required", "error");
       return;
     }
 
+    if (!emailRegex.test(email)) {
+      showStatus("⚠️ Please enter a valid email address", "error");
+      return;
+    }
+
+    // Loading state
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Sending...";
+    showStatus("Sending your message...", "info");
+
     try {
       await addDoc(collection(db, "contactMessages"), {
         name,
@@ -33,11 +48,28 @@ document.addEventListener("DOMContentLoaded", () => {
         createdAt: serverTimestamp()
       });
 
-      alert("✅ Message sent successfully!");
+      showStatus("✅ Message sent successfully! We’ll get back to you soon.", "success");
       form.reset();
+
     } catch (error) {
       console.error("❌ Firestore Error:", error);
-      alert("❌ Failed to send message");
+      showStatus("❌ Failed to send message. Please try again.", "error");
+    } finally {
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Send Message";
     }
   });
+
+  function showStatus(text, type) {
+    status.classList.remove("hidden");
+    status.textContent = text;
+
+    status.className =
+      "text-sm font-medium p-3 rounded " +
+      (type === "success"
+        ? "bg-green-100 text-green-700"
+        : type === "error"
+        ? "bg-red-100 text-red-700"
+        : "bg-blue-100 text-blue-700");
+  }
 });