Merge pull request #813 from sau-mili/main

feat: UI of rate us page improved with better alignment and css styles
apu52 · Jun 26, 2024 · 4503b42 · 4503b42
2 parents ff9d723 + bc95966
commit 4503b42
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 32 deletions.
diff --git a/feedback.html b/feedback.html
@@ -51,46 +51,60 @@
         </div>
       </nav>
     </div>
-
-    <div class="container">
-
-
-
+    <div class="sidebyside">
+      <div class="image">
+        <!-- <img src="./img/rateus.jpg"></img> -->
+      </div>
+      <div class="container">
         <div class="glassmorphism-container">
-            <h1 class="feedback-heading">Rate Our Service</h1>
+            <h1 class="feedback-heading">Rate Our Service</h1><hr>
 
             <!-- <div class="stars" id="stars-container"> -->
             <!-- Stars will be added dynamically using JavaScript -->
             <!-- </div> -->
             <p>How easy was it to navigate through the website?</p>
+            <div class="rate">
             <div class="stars" id="navEase-stars-container"></div>
-            <p id="navEase-rating-text">Rating: 0</p>
+            <p id="navEase-rating-text">Rating: 0</p> 
+          </div><hr>
             <p>How much straightforward and easy was the booking process</p>
+            <div class="rate">
             <div class="stars" id="bookingProcess-stars-container"></div>
             <p id="bookingProcess-rating-text">Rating: 0</p>
+            </div><hr>
             <p>Did the payment options meet your needs? Were you comfortable with the security measures in place?</p>
+            <div class="rate">
             <div class="stars" id="paymentOptions-stars-container"></div>
             <p id="paymentOptions-rating-text">Rating: 0</p>
+            </div><hr>
             <p>How responsive and helpful was the customer support team?</p>
+            <div class="rate">
             <div class="stars" id="customerSupport-stars-container"></div>
             <p id="customerSupport-rating-text">Rating: 0</p>
+            </div><hr>
             <p>How much would you recommend this travel website to others?</p>
+            <div class="rate">
             <div class="stars" id="recommendation-stars-container"></div>
             <p id="recommendation-rating-text">Rating: 0</p>
+            </div><hr>
             <p>If you've taken a package tour from this website, how was the overall experience?</p>
+            <div class="rate">
             <div class="stars" id="packageTour-stars-container"></div>
             <p id="packageTour-rating-text">Rating: 0</p>
+            </div><hr>
             <!-- Feedback input box section -->
             <div>
                 <label for="feedback-input" id="rating-text">Your Feedback:</label>
                 <br><br>
                 <textarea id="feedback-input" placeholder="Remember to be nice please!"></textarea>
             </div>
             <button class="button" onclick="submitFeedback()">Submit</button>
+            <div><button class="button button2" onclick="location.href = 'index.html';">Return To Home Page</button></div>
         </div>
-        <div><button class="button" onclick="location.href = 'index.html';">Return To Home Page</button></div>
-    </div>
+
+      </div>
     </div>
+
     <!-- SweetAlert2 -->
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
     <script src="feedback.js" defer></script>

diff --git a/img/background.png b/img/background.png
diff --git a/img/bgrate.jpg b/img/bgrate.jpg
diff --git a/img/rateus.jpg b/img/rateus.jpg
diff --git a/style_.css b/style_.css
@@ -2,6 +2,8 @@
 
 /* Google Fonts */
 body {
+  /* background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url("./img/sunset.jpg"); */
+ background: linear-gradient(#D8E3FF, white);
   background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)),url("./img/greenbackgroung.jpeg");
   background-size: cover;
   background-position: center;
@@ -10,19 +12,19 @@ body {
   align-items: center;
   min-height: 100vh;
   margin: 0;
-  /* background: linear-gradient(to right, #4DA0B0, #fff);/ font-family: "Arial", sans-serif; */
+
+  /* /background: linear-gradient(to right, #4DA0B0, #fff);/ font-family: "Arial", sans-serif; */
+
 }
 
 .feedback-heading {
   font-size: 3rem;
-
-  font-family: Georgia, "Times New Roman", Times, serif;
   text-transform: uppercase;
   background-image: linear-gradient(-225deg,
       #231557 0%,
       #44107a 29%,
       #ff1361 67%,
-      #fff800 100%);
+      #510134 100%);
 
   background-size: auto auto;
 
@@ -45,44 +47,64 @@ body {
 .container {
   display: flex;
   flex-direction: column;
+  flex-basis: 100%;
   justify-content: center;
   align-items: center;
+  margin: 0px;
+  padding: 0px;
+  background:linear-gradient(#D8E3FF, white);
 }
 
 .glassmorphism-container {
   background: rgba(46, 123, 225, 0.1);
-  backdrop-filter: blur(0.5px);
+  backdrop-filter: blur(10px);
+  /* border-radius: 15px; */
+  background-size: cover;
+
   border-radius: 15px;
 
+
   padding: 20px;
-  margin-top: 102px;
-  margin-bottom: 23px;
+  /* margin-top: 102px;
+  margin-bottom: 23px; */
 
   text-align: center;
   max-width: 800px;
-  width: 90%;
-  margin-bottom: 20px;
+  width: 100%;
+
 }
 
 p {
-  line-height: 1.2em;
+  line-height: 1.1em;
   margin: 0;
+  font-size: 18px;
   font-family: Poppins, sans-serif;
-  font-size: 20px;
-  color: #07147a;
-  padding: 8px 5px;
-  text-align: center;
+  color: #2e345c;
+  padding: 2px 5px;
+  text-align:left;
   text-rendering: optimizeLegibility;
 }
 
+.rate{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: baseline;
+  padding-right: 20px;
+}
+.rate p{
+  text-align: center;
+  color:#231557;
+  font-weight: 500;
+}
 .stars {
   display: flex;
   justify-content: center;
-  margin-top: 20px;
+  /* margin-top: 20px; */
 }
 
 .star {
-  color: #eae3be;
+  color: #f4df78;
   font-size: 2rem;
   cursor: pointer;
   transition: color 0.2s ease-in-out;
@@ -354,10 +376,10 @@ p {
   align-items: center;
   appearance: none;
   background-image: radial-gradient(100% 100% at 100% 0,
-      #5adaff 0,
-      #5468ff 100%);
+      #020c38 0,
+      #1730ee 100%);
   border: 0;
-  border-radius: 6px;
+  border-radius: 2px !important;
   box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,
     rgba(45, 35, 66, 0.3) 0 7px 13px -3px, rgba(58, 65, 111, 0.5) 0 -3px 0 inset;
   box-sizing: border-box;
@@ -375,18 +397,22 @@ p {
   padding-right: 16px;
   border-radius: 50px;
   /* transition: all .1s ease-in-out; */
-  border: 2px solid #6a5acd;
-  color: #ff0000;
+  /* border: 2px solid #6a5acd; */
+  color: #ffffff;
   font-weight: 500;
   font-size: 14px;
   letter-spacing: 2px;
   vertical-align: middle;
   text-decoration: none;
   white-space: nowrap;
-  box-shadow: 2px 2px 8px red;
+  box-shadow: 0px 1px 1px 1px rgb(50, 46, 46);
   margin-bottom: 20px;
   box-sizing: border-box;
 }
+.button2{
+  background-color: #3c4fe0 !important;
+  background-image: none !important;
+}
 
 .button:focus {
   /* box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px,
@@ -397,7 +423,8 @@ p {
   /* box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px,
     rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
   transform: translateY(-2px); */
-  background-color: #6a5acd;
+  background-image: none;
+  background-color: #6a5acd !important;
    color: #fff;
 
 }
@@ -407,4 +434,26 @@ p {
   box-shadow: #3c4fe0 0 3px 7px inset;
   transform: translateY(2px);
 }
+.sidebyside {
+  display: grid;
+  grid-template-columns: 1fr 1fr; /* Corrected from 's: 1fr 1fr;' */
+  margin: 0 auto;
+  min-height: 80vh;
+  width: 80vw;
+  gap:0em;
+  scale:0.8;
+  box-shadow: 0 2px 4px grey;
+  margin-top: 102px;
+  margin-bottom: 23px;
+  /* margin:105px; */
+}
 
+.sidebyside .image {
+  background-size: cover;
+  background: url(./img/rateus.jpg) center/cover no-repeat !important;
+  /* margin-top: 102px;
+  margin-bottom: 23px; */
+  /* Ensure the div takes up the full space within the grid cell */
+  /* width: 100%;
+  height: 100%; */
+}