added dark theme for rate us

apu52 · Jul 22, 2024 · 98dbd6f · 98dbd6f
1 parent 3432a48
commit 98dbd6f
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 8 deletions.
diff --git a/feedback.css b/feedback.css
@@ -0,0 +1,70 @@
+ /* Dark mode styles */
+ body.dark-theme {
+    background-color: #1a1a1a;
+    color: #f0f0f0;
+  }
+
+  body.dark-theme .container{
+    background: #333;
+  }
+
+  body.dark-theme .image{
+    background-color: #555;
+  }
+
+  body.dark-theme .image{
+    background-color: #555;
+  }
+
+  /* Glassmorphism container */
+  body.dark-theme .glassmorphism-container {
+    background-color: rgba(50, 50, 50, 1);
+    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
+  }
+
+  /* Feedback heading */
+  body.dark-theme .glassmorphism-container .feedback-heading {
+    background-image: none;
+    -webkit-text-fill-color: #f0f0f0;
+  }
+
+  body.dark-theme .glassmorphism-container p {
+    color: #f5f5f5 !important;
+  }
+
+  /* Rating sections */
+  body.dark-theme .rate {
+    color: #f0f0f0;
+  }
+
+  body.dark-theme .stars {
+    color: #ffd700;
+  }
+
+  body.dark-theme #rating-text{
+    background-image: none;
+    -webkit-text-fill-color: #f0f0f0;
+  }
+
+  /* Feedback textarea */
+  body.dark-theme textarea {
+    background-color: #2a2a2a;
+    color: #f0f0f0;
+    border: 1px solid #444;
+  }
+
+  /* Submit button */
+  body.dark-theme input[type="submit"] {
+
+    background-color: #3a3a3a;
+    color: #f0f0f0;
+  }
+
+  body.dark-theme input[type="submit"]:hover {
+    background-color: #4a4a4a;
+  }
+
+  /* Return to Home Page link */
+  body.dark-theme div:last-child {
+    color: #4a90e2;
+  }
diff --git a/feedback.html b/feedback.html
@@ -12,10 +12,10 @@
           integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
           crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-
     <link rel="stylesheet" href="style_.css">
-
     <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="feedback.css">
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
 
 
@@ -50,6 +50,7 @@
     }
 
     </style>
+    <script src="Theme.js" defer></script>
 </head>
 
 <body>
@@ -124,23 +125,25 @@
     });
 
   </script>
-    <div class="nav-container">
+    <header class="registration-header">
+    <div class="nav-container" id="top">
       <nav class="newNav">
-        <a href="index.html" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
+        <a href="../index.html" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
 
         <ul class="navLinks">
-          <li class="link home" data-aos="fade-down"><a href="./index.html#home" target="_blank">Home</a></li>
+
+          <li class="link" data-aos="fade-down"><a href="./index.html#home" target="_blank">Home</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#AboutUs" target="_blank">AboutUs</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#Destinations" target="_blank">Destinations</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#trip" target="_blank">Pricing</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#ReviewGallery" target="_blank">Trip Gallery</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#testimonials" target="_blank">Testimonials</a></li>
-          <li class="link" data-aos="fade-down"><a href="./feedback.html" target="_blank">Rate Us?</a></li>
+          <li class="link" data-aos="fade-down"><a href="#">Rate Us?</a></li>
           <li class="link" data-aos="fade-down"><a href="./index.html#cnt-form" target="_blank">Contact Us</a></li>
 
         </ul>
-        <a href="newLogin.html" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
-          data-aos="fade-down">Login/SignUp</button></a>
+        <a href="../newLogin.html" class="contact-btn"><button class="btn" id="btn-style"
+            style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a>
         <div class="toggle-container" data-aos="fade-down">
           <input id="themeToggle" class="toggle" type="checkbox">
         </div>
@@ -151,6 +154,7 @@
         </div>
       </nav>
     </div>
+  </header>
     <div class="sidebyside">
       <div class="image">
         <!-- <img src="./img/rateus.jpg"></img> -->
@@ -215,5 +219,43 @@ <h1 class="feedback-heading">Rate Our Service</h1><hr>
     </script>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
     <script src="feedback.js" defer></script>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+      AOS.init({
+        duration: 1500,
+        offset: 120
+      });
+    </script>
+    <script>
+
+      // To highlight active navbar
+      document.addEventListener("DOMContentLoaded", function () {
+        const navLinks = document.querySelectorAll('.navLinks a');
+
+        function highlightNavLink() {
+          const scrollPosition = window.scrollY;
+
+          navLinks.forEach(link => {
+            const sectionId = link.getAttribute('href').substring(1);
+            const section = document.getElementById(sectionId);
+
+            // Adjust this value to control when the link should be highlighted
+            const offsetPercentage = 20;
+
+            if (section.offsetTop - window.innerHeight * (offsetPercentage / 100) <= scrollPosition &&
+              section.offsetTop + section.offsetHeight > scrollPosition) {
+              link.classList.add('active');
+            } else {
+              link.classList.remove('active');
+            }
+          });
+        }
+
+        document.addEventListener('scroll', highlightNavLink);
+        window.addEventListener('resize', highlightNavLink);
+
+        // Initialize AOS library
+        AOS.init();
+      });</script>
 </body>
 </html>