Merge pull request #1427 from SrijaVuppala295/price

Changed price styling !!
codervivek5 · Jun 20, 2024 · 6c1e6de · 6c1e6de
2 parents 191ed1e + b68215e
commit 6c1e6de
Show file tree

Hide file tree

Showing 7 changed files with 531 additions and 376 deletions.
diff --git a/Pages/About Page/about.css b/Pages/About Page/about.css
@@ -18,6 +18,63 @@ body {
     user-select: none;
 }
 
+body.dark-mode {
+    background-color: #121212;
+    color: #ffffff;
+}
+
+.toggle-button {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.toggle-button .checkbox {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-button .label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    cursor: pointer;
+    border-radius: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 5px;
+}
+
+.toggle-button .label .moon, 
+.toggle-button .label .sun, 
+.toggle-button .label .ball {
+    transition: 0.4s;
+}
+
+.toggle-button .label .ball {
+    width: 25px;
+    height: 25px;
+    background-color: white;
+    border-radius: 50%;
+    position: absolute;
+    left: 5px;
+}
+
+.toggle-button .checkbox:checked + .label {
+    background-color: #2196F3;
+}
+
+.toggle-button .checkbox:checked + .label .ball {
+    transform: translateX(26px);
+}
+
+
 .orange {
   color: #FF7A01;
 }

diff --git a/Pages/About Page/about.html b/Pages/About Page/about.html
@@ -20,8 +20,20 @@
   <link rel="stylesheet" href="../../style/style.css">
   <script src="../../script/script.js"></script>
   <link rel="stylesheet" href="./about.css">
-  <script src="./about.js"></script>
 
+  <script src="./about.js"></script>
+  <script
+    type="module"
+    src="https://cdn.jsdelivr.net/npm/@bufferhead/nightowl@0.0.14/dist/nightowl.js"
+></script>
+<script type="module">
+  import { createNightowl } from '@bufferhead/nightowl'
+
+  createNightowl({
+      defaultMode: 'dark',
+      toggleButtonMode: 'newState'
+  })
+</script>
 
 </head>
 
@@ -43,16 +55,19 @@
         <div class="burger-icon">
           <i class="fa-solid fa-bars" id='icon'></i>
         </div>
-        <div class="toggle-button">
+        <!-- <div class="toggle-button">
           <input type="checkbox" class="checkbox" id="checkbox">
           <label for="checkbox" class="label">
             <i class="material-symbols-outlined moon">dark_mode</i>
             <i class="material-symbols-outlined sun" style="font-size:21px;"> clear_day</i>
             <div class="material-symbols-outlined  ball" style="font-size:25px;">circle</div>
           </label>
-        </div>
+         
+        </div> -->
       </div>
     </div>
+
+
   </header>
 
 
@@ -79,7 +94,7 @@ <h2 id="about-header">The Ultimate Solution for Shopping Near You with Pinpoint
   </section>
 
 
-
+  
 
   <footer>
     <div class="row">
@@ -207,6 +222,7 @@ <h3>
   <!-- go to top -->
   <a class="go-top" href="#"><i class="fa-solid fa-arrow-up fa-lg"></i></a>
   <script type="text/javascript" src="https://studio.alan.app/web/lib/alan_lib.min.js"></script>
+
   <script>
     var alanBtnInstance = alanBtn({
       key: "574e6cb0247244fa64a5a62bdae65be32e956eca572e1d8b807a3e2338fdd0dc/stage",
@@ -224,8 +240,31 @@ <h3>
       rootEl: document.getElementById("alan-btn"),
     });
   </script>
+  <!--  <script> 
+
+// document.addEventListener('DOMContentLoaded', (event) => {
+//         const checkbox = document.getElementById('checkbox');
+
+//         // Load the saved theme from localStorage
+//         if (localStorage.getItem('theme') === 'dark') {
+//             document.body.classList.add('dark-mode');
+//             checkbox.checked = true;
+//         }
+
+//         checkbox.addEventListener('change', () => {
+//             if (checkbox.checked) {
+//                 document.body.classList.add('dark-mode');
+//                 localStorage.setItem('theme', 'dark');
+//             } else {
+//                 document.body.classList.remove('dark-mode');
+//                 localStorage.setItem('theme', 'light');
+//             }
+//         });
+//     });
+  </script> -->
   <script src="../../chatBot/script.js"></script>
   <script src="../../script/script.js"></script>
+
 </body>
 
 </html>
diff --git a/Pages/About Page/about.js b/Pages/About Page/about.js
@@ -14,6 +14,9 @@ const copyright = document.querySelector("#copyright p span");
 const about = document.getElementById("about-header");
 const readMore = document.getElementById("read-more-btn");
 
+
+
+
 // Dark Mode button Function
 const checkbox = document.getElementById("checkbox");
 checkbox.addEventListener("change", () => {