Enhaced Rate Us Page (#603)

* Alligned Navbar * Added Icons * Added Rate Us Option * Added Rate Us Option * Added Rate Us * Added Rate Us * Added Icons * Enhaced Rate Us Page
Anishkagupta04 · Jun 19, 2024 · fab58a8 · fab58a8
1 parent 5c689ca
commit fab58a8
Show file tree

Hide file tree

Showing 4 changed files with 265 additions and 168 deletions.
diff --git a/index.html b/index.html
@@ -357,11 +357,11 @@
           <li><a href="#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
           <li><a href="Html-Files/contact.html"><i class="bi bi-telephone"></i>Contact us</a></li>
           <li><a href="rateus.html"><i class="bi bi-star"></i>Rate Us</a></li>
-          <li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
-           <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
-         </ul>
+          <li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li><br>
+          <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
+        </ul>
       </nav>
-    </header>
+          </header>
 
   <!-- ############# Header ############# -->
 

diff --git a/rateus.css b/rateus.css
@@ -1,11 +1,32 @@
+/* General Styles */
 body {
-  font-family: Arial, sans-serif;
-  background-color: black;
+  font-family: "Open Sans", sans-serif;
   color: #fff;
+  background-color: #000;
   margin: 0;
   padding: 0;
 }
 
+a {
+  color: #ffffff;
+  text-decoration: none;
+}
+
+a:hover {
+  color: #55a5ea;
+  text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Raleway", sans-serif;
+}
+
+/* Header Styles */
 .header_container {
   background-color: #022a2d;
   opacity: 0.9;
@@ -15,35 +36,87 @@ body {
   align-items: center;
   height: 85px;
   margin: auto;
-  margin-top: 5px;
+  margin-top: 15px; /* Adjust this value to move the header down */
+  position: relative; /* Added for z-index stacking */
+  z-index: 999; /* Ensure header is above other content */
 }
 
 .img {
   flex: 0 0 auto;
+  margin-left: 20px;
+}
+
+#rd-logo {
+  width: 90px; /* Increased logo size */
+  height: auto;
+}
+
+/* Navigation Menu Styles */
+.nav_menu {
+  margin-right: 20px;
+}
+
+.nav_link {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
 }
 
 .nav_link li {
-  margin-right: 1px;
-  padding: 4px 6px;
-  display: inline-block;
+  margin-right: 10px; /* Add space between items */
 }
 
 .nav_link li a {
+  display: flex;
+  align-items: center;
+  padding: 3px 10px;
+  color: white;
+  text-decoration: none; /* Remove underline from links */
   transition: all 0.3s ease 0s;
+  white-space: nowrap; /* Prevent text wrapping */
+}
+
+.nav_link li a:hover {
+  color: #55a5ea;
+}
+
+/* Find a Doctor Button Styles */
+
+.find-doctor {
+  display: flex;
+  align-items: center;
+  margin-left: 10px; /* Adjust margin as needed */
+  margin-top: -10px; /* Move the button upwards by adjusting this negative margin */
+}
+
+
+.find-doctor button {
+  background-color: #4bb6b7;
   color: white;
-  text-decoration: none;
+  padding: 12px 24px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-size: 1rem;
+  margin-right: 10px; /* Optional: Add margin between button and other elements */
+}
+
+.find-doctor button:hover {
+  background-color: #3aa5a6;
 }
 
+/* Container Styles */
 .container {
   background-color: #022a2d;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   text-align: center;
-  width: 450px;
-  margin: 20px auto;
+  max-width: 500px; /* Adjusted max-width for container */
+  margin: 85px auto 20px; /* Adjusted top margin to accommodate reduced header height */
   transition: box-shadow 0.3s, transform 0.3s;
-  position: relative;
 }
 
 .container:hover {
@@ -53,40 +126,43 @@ body {
 
 .container h2 {
   color: white;
+  font-size: 2rem;
+  margin-bottom: 20px;
 }
 
 .rating {
-  margin: 20px 0;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
 }
 
-.rating .star {
+.rating .emoji {
   cursor: pointer;
-  font-size: 30px;
-  color: #ccc;
-  transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
+  font-size: 40px; /* Increased emoji size */
+  transition: transform 0.3s, opacity 0.3s;
+  opacity: 0.7;
 }
 
-.rating .star.selected {
-  color: #f7d32e;
-  transform: scale(1.2);
-  font-size: 33px;
-
+.rating .emoji.selected {
+  opacity: 1;
+  transform: scale(1.2); /* Increased size on selection */
 }
 
-.rating .star:hover {
-  color: #f7d32e;
+.rating .emoji:hover {
+  opacity: 1;
 }
 
 textarea {
-  width: 90%;
-  height: 110px;
+  width: calc(100% - 40px);
+  height: 120px;
   margin: 20px auto;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 4px;
   transition: box-shadow 0.3s, transform 0.3s;
   background-color: #fff;
   color: #333;
+  resize: none;
 }
 
 textarea:hover {
@@ -97,13 +173,47 @@ textarea:hover {
 button {
   background-color: #4bb6b7;
   color: white;
-  padding: 10px 20px;
+  padding: 12px 24px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background-color 0.3s;
+  font-size: 1rem;
 }
 
 button:hover {
   background-color: #3aa5a6;
 }
+
+/* Mobile Navigation Styles */
+.mobile-nav-toggle {
+  color: #fff;
+  font-size: 28px;
+  cursor: pointer;
+  display: none;
+  line-height: 0;
+  transition: 0.5s;
+}
+
+.mobile-nav-toggle.bi-x {
+  color: #fff;
+}
+
+@media (max-width: 991px) {
+  /* Adjustments for mobile view */
+  .nav_menu {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 999; /* Ensure it's above the mobile nav toggle */
+  }
+
+  .nav_link {
+    margin-top: 20px; /* Adjust spacing between main links and "Find a Doctor" */
+  }
+
+  .find-doctor {
+    margin-top: 20px; /* Increase top margin for spacing */
+  }
+}
diff --git a/rateus.html b/rateus.html
@@ -11,7 +11,7 @@
 <body>
   <header class="header_container">
     <div class="img">
-        <img id="rd-logo" style="width: 90px; height: auto;" src="images/rd.png"> 
+      <img id="rd-logo" style="width: 90px; height: auto;" src="images/rd.png"> 
     </div>
     <nav class="nav_menu">
       <ul class="nav_link">
@@ -22,73 +22,78 @@
         <li><a href="#patient-portal"><i class="bi bi-person"></i> Patient Portal</a></li>
         <li><a href="#doctors"><i class="bi bi-person-circle"></i> Doctor</a></li>
         <li><a href="Html-Files/contact.html"><i class="bi bi-telephone"></i> Contact us</a></li>
-        <li><a href="Html-Files/rateus.html"><i class="bi bi-star"></i> Rate Us</a></li>
+        <li><a href="rateus.html"><i class="bi bi-star"></i> Rate Us</a></li>
         <li><a href="login.html"><i class="bi bi-box-arrow-right"></i> Sign in/Sign up</a></li>
-        <li><a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a></li>
       </ul>
+      <div class="find-doctor">
+        <a href="./Html-Files/Doctor Experience.html"><button>Find a Doctor</button></a>
+      </div>
     </nav>
   </header>
-
+  
   <div class="container">
     <h2>Rate Us</h2>
     <div class="rating">
-      <span class="star" data-value="1">&#9733;</span>
-      <span class="star" data-value="2">&#9733;</span>
-      <span class="star" data-value="3">&#9733;</span>
-      <span class="star" data-value="4">&#9733;</span>
-      <span class="star" data-value="5">&#9733;</span>
+      <span class="emoji" data-value="😢">😢</span>
+      <span class="emoji" data-value="😡">😡</span>
+      <span class="emoji" data-value="😐">😐</span>
+      <span class="emoji" data-value="😊">😊</span>
+      <span class="emoji" data-value="🤩">🤩</span>
     </div>
-    <textarea id="comment" placeholder="Give Us Your Feedback :) "></textarea>
+    <textarea id="comment" placeholder="Give Us Your Feedback :)"></textarea>
     <button onclick="submitRating()">Submit</button>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
   <script>
     document.addEventListener('DOMContentLoaded', () => {
-      const stars = document.querySelectorAll('.star');
+      const emojis = document.querySelectorAll('.emoji');
+      let selectedEmoji = '';
 
-      stars.forEach(star => {
-        star.addEventListener('click', () => {
-          const value = star.getAttribute('data-value');
-          highlightStars(value);
+      emojis.forEach(emoji => {
+        emoji.addEventListener('click', () => {
+          const value = emoji.getAttribute('data-value');
+          highlightEmojis(value);
+          selectedEmoji = value;
         });
       });
 
-      function highlightStars(value) {
-        stars.forEach((star, index) => {
-          if (index < value) {
-            star.classList.add('selected');
+      function highlightEmojis(value) {
+        emojis.forEach((emoji) => {
+          if (emoji.getAttribute('data-value') === value) {
+            emoji.classList.add('selected');
           } else {
-            star.classList.remove('selected');
+            emoji.classList.remove('selected');
           }
         });
       }
-    });
 
-    function submitRating() {
-      const selectedStars = document.querySelectorAll('.star.selected');
-      const comment = document.getElementById('comment').value;
-
-      if (selectedStars.length > 0 && comment.trim() !== '') {
-        Toastify({
-          text: "Thanks For Your Feedback :)",
-          duration: 3000,
-          close: true,
-          gravity: "top",
-          position: "center",
-          backgroundColor: "#4CAF50",
-        }).showToast();
-      } else {
-        Toastify({
-          text: "Please Fill All The Details :(",
-          duration: 3000,
-          close: true,
-          gravity: "top",
-          position: "center",
-          backgroundColor: "#FF0000",
-        }).showToast();
-      }
-    }
+      window.submitRating = function() {
+        const comment = document.getElementById('comment').value;
+
+        if (selectedEmoji && comment.trim() !== '') {
+          Toastify({
+            text: `Thanks For Your Feedback ${selectedEmoji} `,
+            duration: 3000,
+            close: true,
+            gravity: "top",
+            position: "center",
+            backgroundColor: "#4CAF50",
+          }).showToast();
+          console.log('Rating:', selectedEmoji);
+          console.log('Comments:', comment);
+        } else {
+          Toastify({
+            text: "Please Fill All The Details 😔",
+            duration: 3000,
+            close: true,
+            gravity: "top",
+            position: "center",
+            backgroundColor: "#FF0000",
+          }).showToast();
+        }
+      };
+    });
   </script>
 </body>
 </html>