Merge pull request #194 from msv6264/enhancing-ui

improved ui of testimonal
Ojas-Arora · Jan 29, 2025 · 72522de · 72522de
2 parents 96ba136 + dbd261b
commit 72522de
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 6 deletions.
diff --git a/testimonial.css b/testimonial.css
@@ -5,6 +5,23 @@ body {
     background-color: #f9fafb;
 }
 
+:root{
+    --heading-color: rgb(248, 204, 6);
+    --name-color: #111827;
+    --role-color: #4B5563;
+    --quote-color: black;
+    --Tcard-bg: #fff;
+    --gradient-bg: linear-gradient(90deg, #44ff9a, #44b0ff, #8b44ff, #ff6644, #ebff70);
+}
+.dark{
+    --heading-color: #8b4513;
+    --name-color: aqua;
+    --role-color: yellow;
+    --quote-color: white;
+    --Tcard-bg: #010035;
+    --gradient-bg: linear-gradient(90deg, white, #fafafa, rgb(255, 255, 148), aqua, pink);
+}
+
 .image-icon1 {
     width: 68px;
     height: 68px;
@@ -372,7 +389,7 @@ body {
 
 .main-heading {
     font-size: 2rem;
-    color: rgb(248, 204, 6);
+    color: var(--heading-color);
     font-weight: 700;
     margin-top: 1rem;
 }
@@ -462,7 +479,7 @@ body {
     inset: -1rem;
     z-index: -1;
     filter: blur(16px);
-    background: linear-gradient(90deg, #44ff9a, #44b0ff, #8b44ff, #ff6644, #ebff70);
+    background: var(--gradient-bg)  no-repeat;
     opacity: 0.3;
     border-radius: 16px;
 }
@@ -494,7 +511,7 @@ body {
 }
 
 .testimonial-card {
-    background-color: #fff;
+    background-color: var(--Tcard-bg);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     border-radius: 16px;
     padding: 1.5rem;
@@ -513,7 +530,7 @@ body {
 .quote {
     margin-top: 1rem;
     font-size: 1rem;
-    color: #111827;
+    color: var(--quote-color);
 }
 
 .profile {
@@ -537,12 +554,12 @@ body {
 .name {
     font-size: 1rem;
     font-weight: 700;
-    color: #111827;
+    color: var(--name-color);
 }
 
 .role {
     font-size: 0.875rem;
-    color: #4B5563;
+    color: var(--role-color);
 }
 
 /* CSS for Scroll to Top Button */

diff --git a/testimonial.html b/testimonial.html
@@ -806,5 +806,32 @@ <h3>Subscribe to Our Newsletter</h3>
       };
 
     </script>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const themeToggle = document.querySelector('.theme-switch__checkbox');
+    const currentTheme = localStorage.getItem('theme');
+    if (currentTheme === 'dark') {
+        document.body.classList.add('dark');
+        document.body.classList.remove('light');
+        themeToggle.checked = true;
+    } else {
+        document.body.classList.add('light');
+        document.body.classList.remove('dark');
+    }
+
+  themeToggle.addEventListener('change', () => {
+    if (themeToggle.checked) {
+        document.body.classList.add('dark');
+        document.body.classList.remove('light');
+        localStorage.setItem('theme', 'dark');
+    } else {
+        document.body.classList.remove('dark');
+        document.body.classList.add('light');
+        localStorage.setItem('theme', 'light');
+    }
+    });
+  });
+</script>
 </body>
 </html>