added feedback

Author: multiverseweb

index.html

@@ -140,8 +140,8 @@
       <br>
       <p>
       <div class="visitor-widget">
-        <span>CodeIt Visitors:</span>
-        <div style="display: flex; margin-left: 160px; margin-top: -40px;">
+        <span>CodeIt Execution Tally:</span>
+        <div style="display: flex; margin-left: 220px; margin-top: -40px;">
           <!-- Third-party visitor counter widget code -->
           <a href="http://www.freevisitorcounters.com"></a>
           <script type="text/javascript"
@@ -295,6 +295,15 @@
   </div>
   <div id="feedback" reveal></div>
 
+  <p class="subheading" style="text-align:center; margin-left: 50vw; transform: translate(-50%); margin-top: 100px; margin-bottom: 30px;">What Users Say About CodeIt</p>
+  <div class="scroll-container">
+    <div class="scroll-content" id="scroll-content">
+      <!-- Feedback cards will be dynamically loaded here -->
+    </div>
+  </div>
+
+
+
   <footer>
     <div class="left_last">
       <div class="contact"

resources/scripts/homeScript.js

@@ -158,3 +158,41 @@ window.embeddedChatbotConfig = {
 };
 
 document.getElementById("copyright").textContent = new Date().getFullYear();
+
+
+const scrollContent = document.getElementById("scroll-content");
+
+    const feedbackData = [
+      { name: "Yuvraj Sinha", feedback: "This website is really<br> useful for me.", rating: 5 },
+      { name: "Aditya", feedback: "Very good very very.", rating: 4 },
+      { name: "Biresh", feedback: "Starting out, it is a pretty site.", rating: 5 },
+      { name: "Randi Khanbasha", feedback: "Good tool.", rating: 4 },
+      { name: "Aditi", feedback: "Now that's innovative! CodeIt is <br>quite helpful for organising and <br>securing my code. Wonderful tool.", rating: 5 },
+    ];
+
+    function createFeedbackCard(user) {
+      const card = document.createElement("div");
+      card.className = "feedback-card";
+
+      card.innerHTML = `
+        <h4>${user.name}</h4>
+        <hr>
+        <p>${user.feedback}</p>
+        <div class="stars">${"★".repeat(user.rating)}${"☆".repeat(5 - user.rating)}</div>
+      `;
+      return card;
+    }
+
+    function loadFeedback() {
+      feedbackData.forEach((user) => {
+        const card = createFeedbackCard(user);
+        scrollContent.appendChild(card);
+      });
+
+      feedbackData.forEach((user) => {
+        const card = createFeedbackCard(user);
+        scrollContent.appendChild(card.cloneNode(true));
+      });
+    }
+
+    loadFeedback();

resources/styles/home-style.css

@@ -624,3 +624,62 @@ a{
         margin-top: 10px;
     }
 }
+
+.scroll-container {
+    overflow: hidden;
+    white-space: nowrap;
+    position: relative;
+    width: 100%;
+    height: min-content;
+    background-color: #ffffff00;
+    margin-bottom: 100px;
+  }
+
+  .scroll-content {
+    display: inline-flex;
+    animation: scroll 15s linear infinite;
+  }
+
+  .feedback-card {
+    max-width: 300px;
+    margin: 10px;
+    padding: 15px;
+    border: 1px solid #cccccc76;
+    border-radius: 8px;
+    background: #353535a2;
+    text-align: center;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+  .feedback-card h4 {
+    margin: 5px 0;
+    color: #d6d6d6;
+  }
+
+  .feedback-card p {
+    margin: 5px 0;
+    color: #ffffff;
+  }
+
+  .feedback-card .stars {
+    color: gold;
+    font-size: 20px;
+  }
+
+  @keyframes scroll {
+    from {
+      transform: translateX(0%);
+    }
+    to {
+      transform: translateX(-50%);
+    }
+  }
+
+  .scroll-container:hover .scroll-content {
+    animation-play-state: paused;
+  }
+
+  hr{
+    opacity: 0.1;
+  }