Merge pull request #918 from maniacedoc/feature/maniacedoc

Resolved conflicts and raising PR for enhancement of rate your experience form
PriyaGhosal · Oct 18, 2024 · e5bab3a · e5bab3a
2 parents 39aec89 + 2b181ef
commit e5bab3a
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -1207,11 +1207,11 @@ <h1 id="h1darkbtn">Travel Discussion Forum</h1>
 
       /* Navigation Styles */
       nav.hi ul {
-          list-style-type: none;
+          list-style-type: ;
           margin: 0;
           padding: 0;
           display: flex;
-          gap: 15px;
+          gap: 0px;
       }
 
       nav.hi ul li.NAVI {
@@ -1236,7 +1236,7 @@ <h1 id="h1darkbtn">Travel Discussion Forum</h1>
       /* Underline effect */
       nav.hi ul li.NAVI a::after {
           content: '';
-          display: block;
+         /*display: block;*/
           width: 0;
           height: 2px;
           background: #ffcc00;
@@ -1737,19 +1737,36 @@ <h2 style="color: #0057B3;" id="h1darkbtn">Rate your experience</h2>
             oninput="this.setCustomValidity('')"/>
 
             <label for="rating" id="darkbtn">Rating:</label>
-            <select id="rating" class="rating" name="rating">
+           <!-- <select id="rating" class="rating" name="rating">
               <option value="5">⭐⭐⭐⭐⭐</option>
               <option value="4">⭐⭐⭐⭐</option>
               <option value="3">⭐⭐⭐</option>
               <option value="2">⭐⭐</option>
               <option value="1">⭐</option>
-            </select>
+            </select>-->
+
+            <div class="rating" name="rating">
+              <!--<h3 style="font-weight: bold; font-size: 15px; text-align: left;">Your rating:</h3>  -->   
+              <div class="star-widget">
+               <input type="radio" name="rate" id="rate-5">
+               <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">
+               <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>
+               <input type="radio" name="rate" id="rate-1">
+               <label for="rate-1" class="fas fa-star"></label>
+               <header></header>
+            </div>
+           </div>
 
             <label for="review" id="darkbtn">Your Review:</label>
-            <textarea id="review" name="review" rows="4" required></textarea>
+            <textarea id="review" name="review" rows="3" placeholder="Write your review here..."></textarea>
             <label for="complaint" id="darkbtn">Complaint (if any):</label>
             <textarea id="complaint" name="complaint" rows="3"
-              placeholder="Describe any issue with the staff here. Please explain every single detail ex:location,name of the person"></textarea>
+              placeholder="Describe any issue with the staff here. Please provide details"></textarea>
 
             <div class="form-button">
               <button type="submit">Send</button>

diff --git a/style.css b/style.css
@@ -1652,7 +1652,7 @@ body.light-mode {
   font-style: italic;
 }
 
-.review-rating {
+/*.review-rating {
   padding: 15px 20px;
   border-bottom: 1px solid #eee;
   background-color: #f9f9f9;
@@ -1663,7 +1663,89 @@ body.light-mode {
   font-size: 1.4em;
   letter-spacing: 3px;
 }
+  */
+/*for rate your experince*/
+.rating {
+  position: relative;
+  width: 100%;
+  max-width: 400px; /* Maximum width of the rating widget */
+  background: #f5f1e6; /* Background color */
+  padding: 6px 12px; /* Padding around the content */
+  border-radius: 10px; /* Rounded corners */
+  display: flex; /* Use flexbox for layout */
+  align-items: right; /* Center items vertically */
+  justify-content: right; /* Center items horizontally */
+  flex-direction: column; /* Stack items vertically */
+  margin-bottom: auto; /* Center the widget horizontally */
+  box-shadow: 0 5pX 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better visibility */
+  height: 60px; /* Allow height to adjust based on content */
+}
+
+.rating .star-widget input{
+  display: none;
+}
+
+.star-widget label{
+    font-size: 17px;
+    color: #444;
+    padding: 6px;
+    float: right;
+    transition: all o.2s ease;
+    cursor: pointer;
+}
+
+input:not(:checked) ~ label:hover,
+input:not(:checked) ~ label:hover ~ label{
+  color: #fd4;
+}
+
+input:checked ~ label{
+  color: #fd4;
+}
+.rating form{
+  display: none;
+}
+input:checked ~ form{
+  display:block;
+  width: 100%;
+}
+
+input#rate-5:checked ~ label{
+  color: #fe7;
+  text-shadow: 0 0 20px #952;
+}
+
+.star-widget header {
+  width: 100%;
+  font-size: 19px;
+  color: rgb(4, 4, 4); /* Color for the header text */
+  font-weight: 500;
+  margin: 5px 0 20px 0; /* Margin for spacing */
+  text-align: center; /* Center the text */
+  transition: all 0.2s ease; /* Smooth transition for changes */
+}
+
+/* CSS for displaying messages based on selected rating */
+input#rate-1:checked ~ header:before {
+  content: "I just hate it 😠";
+}
 
+input#rate-2:checked ~ header:before {
+  content: "I don't like it 😐";
+}
+
+input#rate-3:checked ~ header:before {
+  content: "It is awesome 😉";
+}
+
+input#rate-4:checked ~ header:before {
+  content: "I just like it 😎";
+}
+
+input#rate-5:checked ~ header:before {
+  content: "I just love it 😍";
+}
+
 .review-text {
   padding: 20px;
   font-size: 1em;