Merge branch 'main' into main

akshitagupta15june · Jun 10, 2024 · d236846 · d236846
2 parents 0eaf076 + f49b842
commit d236846
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 20 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/index.html b/index.html
@@ -1,3 +1,4 @@
+
 <html lang="en" class="dark">
 
 <head>
@@ -78,6 +79,7 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
             </div>
             <li>
               <a
+
                 href="#About"
                 class="text-custom-heading font-bold  underline-offset-4 turn-red-hover navbar-item"
                 >About Us</a
@@ -106,6 +108,7 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
             </li>
 
             <li>
+
               <div x-data="{ open: false }" @mouseleave="open = false" class="relative">
               <a @mouseover="open = true" class="text-custom-heading flex font-bold hover:underline underline-offset-4 turn-red-hover navbar-item w-full">
                 Support Us
@@ -117,6 +120,7 @@ <h1 class="text-4xl text_2  text-center md:text-left md:ml-12 uppercase font-ser
                 <a href="volunteer.html" class="block px-4 py-2 text-base text-gray-300 text-gray-700 hover:bg-gray-400 hover:text-white">Become a Volunteer</a>
               </div>
               </div>
+
             </li>
 
             <li>
@@ -580,16 +584,24 @@ <h5 class="text_3 md:text-[40px] font-bold mb-2 text-center">
       <form action="https://formspree.io/f/xayaokzl" method="POST"
         class="bg-black rounded-md main-bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-20 border border-gray-100 px-8 pt-8 pb-10">
         <p id="contact"></p>
-        <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3" style="color: white;">
+
+
+        <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3 contact-form-text" style="color: white;">
           CONTACT US
         </h2>
-        <p class="text-base text-center text_3" style="color: white;">
+        <p class="text-base text-center text_3 contact-form-text" style="color: white;">
+
+
           Any issues! Fill the form below and our team will contact you
           shortly.
         </p>
         <br />
         <div class="mb-4">
-          <label class="block text_3 text-sm font-bold mb-2" for="contact_nom" style="color: white;">
+
+
+          <label class="block text_3 text-sm font-bold mb-2 contact-form-text" for="contact_nom" style="color: white;">
+
+
             Name
           </label>
           <!-- <input
@@ -625,7 +637,10 @@ <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3" style="color: white;"
 
         </div>
         <div class="mb-6">
-          <label class="block text_3 text-sm font-bold mb-2" for="contact_email" style="color: white;">
+
+
+          <label class="block text_3 text-sm font-bold mb-2 contact-form-text" for="contact_email" style="color: white;">
+
             Email
           </label>
           <input
@@ -634,6 +649,7 @@ <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3" style="color: white;"
             oninput="validateEmail(this)" />
           <span id="emailError" class="text-red-500"></span>
 
+
           <script>
             function validateEmail(input) {
               const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
@@ -653,7 +669,7 @@ <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3" style="color: white;"
           </script>
         </div>
         <div class="mb-6">
-          <label for="contact_message" class="block text_3 text-sm font-bold mb-2" style="color: white;">Message</label>
+          <label for="contact_message" class="block text_3 text-sm font-bold mb-2 contact-form-text" style="color: white;">Message</label>
           <textarea
             class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:shadow-outline"
             id="contact_message" name="contact_message" required rows="6" placeholder="Your message"></textarea>
@@ -668,14 +684,15 @@ <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3" style="color: white;"
       </form>
     </div>
   </section>
-
+  
   <script>
-    window.addEventListener("scroll", function () {
-      var contactFormContainer = document.getElementById(
-        "contactFormContainer"
-      );
-      var scrollPosition = window.scrollY + window.innerHeight;
-      var contactFormOffset = contactFormContainer.offsetTop;
+      window.addEventListener("scroll", function () {
+        var contactFormContainer = document.getElementById(
+          "contactFormContainer"
+        );
+        var scrollPosition = window.scrollY + window.innerHeight;
+        var contactFormOffset = contactFormContainer.offsetTop;
+
 
       if (scrollPosition > contactFormOffset) {
         contactFormContainer.style.opacity = "1";
@@ -684,6 +701,7 @@ <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3" style="color: white;"
     });
   </script>
 
+
   <!-- <section class="dark:bg-gray-900 b_1 pt-20 pb-20">
 			<div class="w-full contact-form-container mx-auto max-w-screen-md">
 				<form
@@ -771,7 +789,9 @@ <h2 class="text-3xl mt-1 mb-2 text-center bold-500 text_3">
           </a>
         </div>
         <div>
+
           <div class="space-y-2 " style="color:#f1f5f9;">
+
             <h3 class="text-2xl font-medium">Adopt a pet</h3>
             <div>Give life to an animal in need</div>
           </div>
@@ -781,8 +801,10 @@ <h3 class="text-2xl font-medium">Adopt a pet</h3>
       <!-- Subscribe column -->
       <div class="md:flex flex-col hidden text-center items-center flex-1">
         <form id="subscription-form">
+
           <div class="space-y-2" style="color:#f1f4f9">
             <h3 class="text-2xl text-center" style="color:#f1f5f9">Subscribe to our newsletter</h3>
+
             <div class="text-md">
               Get the latest news and updates delivered straight to your inbox.
             </div>
@@ -910,6 +932,7 @@ <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
       const scrollPosition = window.scrollY + window.innerHeight;
       const contentOffset = aboutContent.offsetTop;
 
+
       if (scrollPosition > contentOffset) {
         aboutContent.style.opacity = "1";
         aboutContent.style.transform = "translateY(0)";
@@ -922,3 +945,4 @@ <h3 class="text-2xl text-center">Subscribe to our newsletter</h3>
 </body>
 
 </html>
+
diff --git a/light-dark-theme.js b/light-dark-theme.js
@@ -28,8 +28,17 @@ class Element {
 
   toggle() {
     this.eles.forEach((element) => {
-      element.classList.toggle(this.lightCss);
-      element.classList.toggle(this.darkCss);
+
+
+      if (document.body.classList.contains("light-mode")) {
+        element.classList.toggle(this.lightCss);
+        element.style.color = ""; // Change text color to blue in light mode
+      } else {
+        element.classList.toggle(this.darkCss);
+        element.style.color = ""; // Reset text color in dark mode
+      }
+
+
     });
   }
 }
@@ -48,7 +57,9 @@ icon.onclick = function () {
   toggleThemeForAllElements();
 };
 
-const elements = [
+
+
+let elements = [
   new Element(["text_1"], "text-slate-50", "text-gray-900"),
   new Element(["text_2"], "text-blue-600", "text-blue-200"),
   new Element(
@@ -75,13 +86,19 @@ const elements = [
     "bg-yellow-900"
   ),
   new Element(["bg_3"], "bg-blue-600", "bg-blue-200"),
-  new Element(["bg-blog","bg-donate"], "bg-white-200", "bg-amber-700"),
+  new Element(["bg-blog"], "bg-white-200", "bg-amber-700"),
   new Element(["mission-1"], "mission-dark", "mission-light"),
   new Element(["mission-2"], "mission-dark", "mission-light"),
   new Element(["navbar-item"], "turn-red-hover", "turn-yellow-hover"),
-  new Element(["donate-h1","donate-h2","leading-7"],["text-amber","text-gray-900"],"text-white")
-
-];
+  new Element(
+    ["contact-form-text"],
+    "contactusform-color-lightmode",
+    "contactusform-color-darkmode"
+  ),
+
+new Element(["donate-h1","donate-h2","leading-7"],["text-amber","text-gray-900"],"text-white")
+  ];
+
 
 function toggleThemeForAllElements() {
   elements.forEach((element) => element.toggle());

diff --git a/output.css b/output.css
@@ -7,6 +7,25 @@
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
 
+/* Light mode style */
+/* Add this to your CSS file */
+/* Add this to your CSS file */
+/* Add this to your CSS file */
+
+
+
+.contactusform-color-lightmode {
+  color: rgb(18, 17, 17) ;  /* contact us form text color in light-mode */
+}
+
+.contactusform-color-darkmode{
+  /*if contact us form text color needs to be changed, can be chnaged here */
+}
+
+
+
+
+
 *,
 ::before,
 ::after {
@@ -210,6 +229,10 @@ textarea {
   /* 3 */
 }
 
+
+
+/*---change*/
+
 /*
 Remove the inheritance of text transform in Edge and Firefox.
 */

diff --git a/style.css b/style.css
@@ -132,6 +132,8 @@
     max-width: 700px;
     width: 100%;
     margin: auto;
+
+
   }
 }
 
@@ -283,4 +285,8 @@
 
 .copyright1{
   margin-left: 50%;
-}
+}
+
+
+
+