Merge pull request #184 from AftabMankapure/DarkModeNew

Add a light and dark mode button . #74
ritika728 · Feb 17, 2024 · c18fb59 · c18fb59
2 parents 318ef34 + b729764
commit c18fb59
Show file tree

Hide file tree

Showing 11 changed files with 345 additions and 14 deletions.
diff --git a/css_files/faq.css b/css_files/faq.css
@@ -27,6 +27,7 @@
     border-radius: 5px;
     margin-bottom: 10px;
     background-color: #f9f9f9;
+    color: black;
   }
 
   .faq-answer {
@@ -37,6 +38,7 @@
     margin-bottom: 10px;
     background-color: #fff;
     transition: max-height 0.5s ease-in-out;
+    color: black;
   }
 
   h2{

diff --git a/css_files/feedback.css b/css_files/feedback.css
@@ -21,7 +21,7 @@ body{
   position: relative;
   width: 400px;
   padding: 20px 30px;
-  border: 1px solid white;
+  border: 1px solid rgb(241, 8, 8);
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -31,6 +31,7 @@ body{
 .container .post{
   display: none;
 }
+
 .container .text{
   font-size: 25px;
   color: white;
@@ -172,6 +173,9 @@ form .btn button:hover{
   font-size: 25px;
   width: 100%;
 }
+input{
+  border: 2px red;
+}
 
 .navbar li {
   margin: 0;

diff --git a/css_files/mode.css b/css_files/mode.css
@@ -0,0 +1,54 @@
+:root{
+    --text-color- :black;
+
+ }
+
+ .dark-class {
+     color: white;
+     background-color: rgb(12, 10, 10);
+     --text-color- :black;
+    }
+  p {
+    color: var(--text-color-);
+
+  }
+  .toggleButton {
+     width: 5rem;
+     height: 2rem;
+     position: relative;
+     display: inline-block;
+  }
+  .toggleButton input {
+     opacity: 0;
+  }
+  .roundButton {
+     background-color: black;
+     top: 0;
+     left: 0;
+     position: absolute;
+     right: 0;
+     bottom: 0;
+     cursor: pointer;
+  }
+  .roundButton:before {
+     left: 0;
+     bottom: 0;
+     position: absolute;
+     content: "";
+     background-color: grey;
+     transition: 1s;
+     height: 2rem;
+     width: 2rem;
+  }
+  input:checked+.roundButton {
+     background-color: white;
+  }
+  input:checked+.roundButton:before {
+     transform: translateX(3rem);
+  }
+  .roundButton.circle {
+     border-radius: 2rem;
+  }
+  .roundButton.circle:before {
+     border-radius: 50%;
+  }
diff --git a/enroll/index.html b/enroll/index.html
@@ -36,6 +36,11 @@
       z-index: 333333;
     }
   </style>
+  <!-- toggle butto  -->
+  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+  Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+  crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
+  <link rel="stylesheet" href="../css_files/mode.css">
 </head>
 
 <body>
@@ -56,6 +61,12 @@
         <li class="link" data-aos="fade-down"><a href="../html_files/faq.html">FAQ</a></li>
         <li class="link" data-aos="fade-down"><a href="../html_files/blog.html">Blog</a></li>
         <li class="link" data-aos="fade-down"><a href="../index.html#contact">Contact</a></li>
+        <li >
+          <label class = "toggleButton">
+            <input type = "checkbox" id = "toggle">
+            <div class = "roundButton circle" ></div>
+         </label>
+        </li>
       </ul>
       <!-- <div class="hamburger" data-aos="fade-down">
           <div class="hamburger-menu">
@@ -203,6 +214,30 @@ <h2>Connect with Us</h2>
   <button id="scrollToTopBtn" style="color: #fff;"><i class="fa-solid fa-arrow-up"></i></button>
 
   <script src="../javascript/hambg.js"></script>
+  <!-- dark mode -->
+  <script>
+    // Check if there is a stored preference for dark mode
+    const darkModePreference = localStorage.getItem('darkMode');
+
+    // If there is a preference, set the initial state
+    if (darkModePreference === 'enabled') {
+        $("body").addClass("dark-class");
+        $('#toggle').prop('checked', true);
+    }
+
+    // Listen for changes to the toggle
+    $('#toggle').change(() => {
+        if ($('#toggle').is(":checked")) {
+            $("body").addClass("dark-class");
+            // Store the dark mode preference
+            localStorage.setItem('darkMode', 'enabled');
+        } else {
+            $("body").removeClass("dark-class");
+            // Remove the dark mode preference
+            localStorage.removeItem('darkMode');
+        }
+    });
+</script>
 </body>
 
 </html>
diff --git a/enroll/style.css b/enroll/style.css
@@ -11,7 +11,6 @@ body{
   align-items: center;
   justify-content: center;
   min-height: 100%;
-  background: linear-gradient(#00796b 0%, #175c26 100%);
   padding-bottom: 50px;
   flex-direction: column;
 }
@@ -22,8 +21,21 @@ body{
   border-radius: 16px;
   padding: 30px;
   box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
+  margin-bottom: 20px;
 
 }
+.price{
+  color: #000;
+}
+label{
+  color: black;
+}
+li{
+  color: black;
+}
+p{
+  color: black;
+}
 .wrapper header{
   height: 55px;
   display: flex;

diff --git a/html_files/blog.html b/html_files/blog.html
@@ -38,6 +38,11 @@
             z-index: 333333;
         }
     </style>
+    <!-- toggle butto  -->
+  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+  Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+  crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
+  <link rel="stylesheet" href="../css_files/mode.css">
     <title>Blog</title>
 </head>
 
@@ -60,6 +65,12 @@
                 <li class="link" data-aos="fade-down"><a href="./faq.html">FAQ</a></li>
                 <li class="link" data-aos="fade-down"><a href="./blog.html">Blog</a></li>
                 <li class="link" data-aos="fade-down"><a href="../index.html#contact">Contact</a></li>
+                <li >
+                    <label class = "toggleButton">
+                      <input type = "checkbox" id = "toggle">
+                      <div class = "roundButton circle" ></div>
+                   </label>
+                  </li>
             </ul>
             <!-- <div class="hamburger" data-aos="fade-down">
               <div class="hamburger-menu">
@@ -259,6 +270,29 @@ <h2>Connect with Us</h2>
     <script src="../javascript/hambg.js"></script>
     <script src="../javascript/index.js"></script>
 
+    <script>
+        // Check if there is a stored preference for dark mode
+        const darkModePreference = localStorage.getItem('darkMode');
+
+        // If there is a preference, set the initial state
+        if (darkModePreference === 'enabled') {
+            $("body").addClass("dark-class");
+            $('#toggle').prop('checked', true);
+        }
+
+        // Listen for changes to the toggle
+        $('#toggle').change(() => {
+            if ($('#toggle').is(":checked")) {
+                $("body").addClass("dark-class");
+                // Store the dark mode preference
+                localStorage.setItem('darkMode', 'enabled');
+            } else {
+                $("body").removeClass("dark-class");
+                // Remove the dark mode preference
+                localStorage.removeItem('darkMode');
+            }
+        });
+    </script>
 
 </body>
 

diff --git a/html_files/faq.html b/html_files/faq.html
@@ -41,9 +41,15 @@
     }
   </style>
 
+  <!-- toggle butto  -->
+  <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+  Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+  crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
+  <link rel="stylesheet" href="../css_files/mode.css">
+
 </head>
 
-<body style="background-image: url('../images/main.jpg');"></body>
+<body >
 <div id="progressbar"></div>
 <div id="scrollPath"></div>
 
@@ -60,6 +66,12 @@
       <li class="link" data-aos="fade-down"><a href="./feedback.html">Rate Us</a></li>
       <li class="link" data-aos="fade-down"><a href="./faq.html">FAQ</a></li>
       <li class="link" data-aos="fade-down"><a href="../index.html#contact">Contact</a></li>
+      <li >
+        <label class = "toggleButton">
+          <input type = "checkbox" id = "toggle">
+          <div class = "roundButton circle" ></div>
+       </label>
+      </li>
     </ul>
     <!-- <div class="hamburger" data-aos="fade-down">
             <div class="hamburger-menu">
@@ -202,8 +214,30 @@ <h2>Connect with Us</h2>
 
 </script>
 
+<!-- dark mode -->
+<script>
+  // Check if there is a stored preference for dark mode
+  const darkModePreference = localStorage.getItem('darkMode');
 
+  // If there is a preference, set the initial state
+  if (darkModePreference === 'enabled') {
+      $("body").addClass("dark-class");
+      $('#toggle').prop('checked', true);
+  }
 
+  // Listen for changes to the toggle
+  $('#toggle').change(() => {
+      if ($('#toggle').is(":checked")) {
+          $("body").addClass("dark-class");
+          // Store the dark mode preference
+          localStorage.setItem('darkMode', 'enabled');
+      } else {
+          $("body").removeClass("dark-class");
+          // Remove the dark mode preference
+          localStorage.removeItem('darkMode');
+      }
+  });
+</script>
 
 <button id="scrollToTopBtn" style="color: #fff;"><i class="fa-solid fa-arrow-up"></i></button>
 

diff --git a/html_files/feedback.html b/html_files/feedback.html
@@ -35,11 +35,33 @@
       background: linear-gradient(to top, #008aff, #00ffe7);
       z-index: 333333;
     }
+
   </style>
+  <style>
+    input[type="radio"] {
+      display: none;
+    }
+
+    label.fas.fa-star {
+      font-size: 25px;
+      color: #ccc;
+      cursor: pointer;
+      margin-right: 5px;
+    }
+
+    input[type="radio"]:checked + label.fas.fa-star {
+      color: #ffc107; /* Change this to the desired border color when the star is selected */
+    }
+  </style>
+ <!-- toggle butto  -->
+ <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+ Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+ crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>
+ <link rel="stylesheet" href="../css_files/mode.css">
 
 </head>
 
-<body style="background-image: url('../images/main.jpg');" class="body">
+<body >
   <div id="progressbar"></div>
   <div id="scrollPath"></div>
 
@@ -57,6 +79,12 @@
         <li class="link" data-aos="fade-down"><a href="./faq.html">FAQ</a></li>
         <li class="link" data-aos="fade-down"><a href="./blog.html">Blog</a></li>
         <li class="link" data-aos="fade-down"><a href="../index.html#contact">Contact</a></li>
+        <li >
+          <label class = "toggleButton">
+            <input type = "checkbox" id = "toggle">
+            <div class = "roundButton circle" ></div>
+         </label>
+        </li>
       </ul>
       <!-- <div class="hamburger" data-aos="fade-down">
             <div class="hamburger-menu">
@@ -74,7 +102,7 @@
                   <li><a href="./html_files/faq.html" onclick="toggleMenu()">FAQ</a></li>
               </div>
           </div> -->
-      <div class="ham">
+      <div class="ham" >
         <div class="line"></div>
         <div class="line"></div>
         <div class="line"></div>
@@ -95,7 +123,7 @@
       <label for="rate-5" class="fas fa-star"></label>
       <input type="radio" name="rate" id="rate-4">
       <label for="rate-4" class="fas fa-star"></label>
-      <input type="radio" name="rate" id="rate-3">
+      <input type="radio" name="rate" id="rate-3" >
       <label for="rate-3" class="fas fa-star"></label>
       <input type="radio" name="rate" id="rate-2">
       <label for="rate-2" class="fas fa-star"></label>
@@ -187,6 +215,29 @@ <h2>Connect with Us</h2>
   }
 
 </script>
+<script>
+  // Check if there is a stored preference for dark mode
+  const darkModePreference = localStorage.getItem('darkMode');
+
+  // If there is a preference, set the initial state
+  if (darkModePreference === 'enabled') {
+      $("body").addClass("dark-class");
+      $('#toggle').prop('checked', true);
+  }
+
+  // Listen for changes to the toggle
+  $('#toggle').change(() => {
+      if ($('#toggle').is(":checked")) {
+          $("body").addClass("dark-class");
+          // Store the dark mode preference
+          localStorage.setItem('darkMode', 'enabled');
+      } else {
+          $("body").removeClass("dark-class");
+          // Remove the dark mode preference
+          localStorage.removeItem('darkMode');
+      }
+  });
+</script>
 <script src="../javascript/hambg.js"></script>
 
 </html>