Merge pull request #728 from Rishika367/main

feat: Enhanced Feedback Pop-up with More Emojis and Labels
PriyaGhosal · Oct 20, 2024 · ab0508e · ab0508e
2 parents c5e7340 + 9b918a0
commit ab0508e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 16 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -615,7 +615,7 @@ body.nav-active .navbar-list .navbar-link {
   background-color: white;
   padding: 20px;
   border-radius: 5px;
-  width: 300px;
+  width: 450px;
   text-align: center;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
 }
@@ -634,6 +634,7 @@ body.nav-active .navbar-list .navbar-link {
   cursor: pointer;
 }
 
+/* Styling for Emoji Section */
 .emojis {
   font-size: 30px;
   margin: 20px 0;
@@ -642,22 +643,31 @@ body.nav-active .navbar-list .navbar-link {
   justify-content: space-evenly;
 }
 
-.emoji {
+.emoji-option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   cursor: pointer;
   margin: 0 10px;
   transition: transform 0.2s;
 }
 
-.emoji:hover {
+.emoji-option p {
+  margin-top: 5px;
+  font-size: 14px;
+  color: #555;
+}
+
+.emoji-option:hover .emoji {
   transform: scale(1.2);
 }
 
 .emoji.selected {
-  border: 1px solid black;
-  /* Highlight selected emoji */
+  border: 2px solid #4caf50;
   border-radius: 5px;
 }
 
+/* Step Navigation Buttons */
 .buttons {
   display: flex;
   align-items: center;

diff --git a/index.html b/index.html
@@ -211,25 +211,49 @@ <h1 class="headline-lg" id="hero-label" data-aos="zoom-out">
       </section>
 
 
-      <!--
-        Feedback Section
-      -->
       <div class="feedback-button" id="feedbackButton">Feedback</div>
+
       <div class="feedback-modal" id="feedbackModal">
         <div class="modal-content">
           <span class="close" id="closeModal">&times;</span>
           <h2>We Value Your Feedback</h2>
+
           <form id="feedbackForm">
+            <!-- Step 1: Emoji Selection -->
             <div class="step" id="step1">
               <h3>How do you feel?</h3>
+
               <div class="emojis">
-                <span class="emoji" data-value="happy">😀</span>
-                <span class="emoji" data-value="neutral">😐</span>
-                <span class="emoji" data-value="sad">😢</span>
+                <div class="emoji-option">
+                  <span class="emoji" data-value="happy">😄</span>
+                  <p>Happy</p>
+                </div>
+                <div class="emoji-option">
+                  <span class="emoji" data-value="okay">🙂</span>
+                  <p>Okay</p>
+                </div>
+                <div class="emoji-option">
+                  <span class="emoji" data-value="neutral">😕</span>
+                  <p>Neutral</p>
+                </div>
+                <div class="emoji-option">
+                  <span class="emoji" data-value="disappointed">🙁</span>
+                  <p>Disappointed</p>
+                </div>
+                <div class="emoji-option">
+                  <span class="emoji" data-value="sad">😢</span>
+                  <p>Sad</p>
+                </div>
+                <div class="emoji-option">
+                  <span class="emoji" data-value="excited">😍</span>
+                  <p>Excited</p>
+                </div>
               </div>
+
               <button type="button" id="nextToFeedback">Next</button>
             </div>
-
+
+            <!-- Step 2: Feedback Input -->
             <div class="step" id="step2" style="display: none;">
               <h3>Your Feedback</h3>
               <textarea id="feedback" rows="5" placeholder="Write your feedback here..." required></textarea>
@@ -238,7 +262,8 @@ <h3>Your Feedback</h3>
                 <button type="button" id="backToEmoji">Back</button>
               </div>
             </div>
-
+
+            <!-- Step 3: Email Input -->
             <div class="step" id="step3" style="display: none;">
               <h3>Your Email</h3>
               <input type="email" id="email" placeholder="Enter your email" required />
@@ -250,14 +275,12 @@ <h3>Your Email</h3>
           </form>
         </div>
       </div>
-
-
+
       <div class="feedbackPopUp">
         Thank you for your Feedback
       </div>
 
 
-
       <!--
         - #CATEGORY
       -->