appscms-tools-theme 5.1.0 → 5.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e9873210ca71d0712ce2ce36640ac409e25eab927e560ddd42a056da45d69a72
-  data.tar.gz: 36a20adf4282c20753d56640033073d0e4a5fe2071fed18e8da84fd771236b28
+  metadata.gz: c389f6235f535079eb7afd16c8476ea2fca847f79cc38c4431a4ce3d622c99c7
+  data.tar.gz: ee9c46a3fbcc60369f443a11771ace1ea87ba328d13c4d3ada16b91d248133ce
 SHA512:
-  metadata.gz: 378a7ef8db27a52c2e92a9dadcbbe818352ca7dffe4bb18bd82efede2084a96768d782fb24e57a938de73c52f36c798ddd56166026efa897722668ff3a0eb226
-  data.tar.gz: c9bc54601255293d084b41b3f28dec009769df67a0d5f91940cad5288e74ea6d893ea31b827e95b69e92cad14a658657998706775cc5eee912b27454ce811ac6
+  metadata.gz: 97aaf78c90775a8db29ae57a75dbba3cbaf5331307a590d45476a112ca9239226095ce03429d4a20c2cf20a9e46abc60f4c341b95662668b7d3151c41eef42bf
+  data.tar.gz: 20c7d3522d57fc5b44521ed01293eacc59a4cc53aab06d1a16c7112df98ebb5380c4c3c921e2824f287e8f272cb9d3dfba03e65e9dc716f8180c5a9497e98210

data/_includes/appscms/extras/ratings.html

@@ -13,7 +13,13 @@ site.data.rating.rating.tools -%} {%- for item in data -%} {%- if item.name
           src="/assets/images/rating.png"
           alt="rating-img"
         />
-        <div class="rating-text">Rate this tool</div>
+
+        <div class="rating-header">
+          <h2 class="rating-text">Rate this tool</h2>
+          <p class="rating-description">
+            Your feedback helps us improve our services
+          </p>
+        </div>
         <div class="rating-stars">
           <svg
             class="rating-star"
@@ -76,25 +82,99 @@ site.data.rating.rating.tools -%} {%- for item in data -%} {%- if item.name
             />
           </svg>
           <!-- <i class="bi bi-star-fill rating-star"></i>
-        <i class="bi bi-star-fill  rating-star"></i>
-        <i class="bi bi-star-fill rating-star"></i>
-        <i class="bi bi-star-fill rating-star"></i>
-        <i class="bi bi-star-fill rating-star"></i> -->
+          <i class="bi bi-star-fill  rating-star"></i>
+          <i class="bi bi-star-fill rating-star"></i>
+          <i class="bi bi-star-fill rating-star"></i>
+          <i class="bi bi-star-fill rating-star"></i> -->
         </div>
+
         <div class="rating-value ml-2">
           <span class="rating">
             <strong id="rating">{{rating}}</strong><span>/5</span>
           </span>
           &nbsp; <span class="total-ratings" id="count">{{votes}} </span> votes
         </div>
+        <button class="feedback-btn" id="openFeedbackBtn">
+          Share your feedback
+        </button>
       </div>
     </div>
   </div>
+
+  <div class="modal-overlay" style="display: none">
+    <div class="feedbackModal" class="modal" style="display: none">
+      <div class="modal-header">
+        <h3 class="modal-title">Share Your Feedback</h3>
+        <button class="close-button">&times;</button>
+      </div>
+      <div class="modal-body">
+        <form
+          id="feedbackForm"
+          action="https://script.google.com/macros/s/AKfycbzH82MA88NILpSjARmlwTKTwIYlyYnv44cl-7tLw-Q6_LPuPUTFjZ9z5NmWfSTSPH6z/exec"
+          method="POST"
+          target="hidden_iframe"
+        >
+          <div class="form-group">
+            <label for="comment" class=".form-label">Your Feedback:</label>
+            <textarea
+              id="comment"
+              name="comment"
+              class="form-input"
+              rows="4"
+              required
+              placeholder="Tell us what you liked or how we can improve..."
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label for="email" class=".form-label">Email (optional):</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              placeholder="Your.email@example.com"
+              class="form-input"
+            />
+          </div>
+        </form>
+
+        <!-- Hidden iframe to catch the response -->
+        <iframe
+          name="hidden_iframe"
+          id="hidden_iframe"
+          style="display: none"
+          class="hidden"
+        ></iframe>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary">Cancel</button>
+        <button class="btn btn-primary">Submit Feedback</button>
+      </div>
+    </div>
+    <div class="thank-you">
+      <div class="thank-you-icon">✓</div>
+      <h3 class="thank-you-title">Thank You!</h3>
+      <p class="thank-you-message">
+        We appreciate your feedback and will use it to improve our services.
+      </p>
+      <button class="btn btn-primary">Close</button>
+    </div>
+  </div>
 </div>
 
 <script>
   const ratingValue = document.getElementById("rating");
   const count = document.getElementById("count");
+  const tool = "{{page.tool}}";
+  const openBtn = document.getElementById("openFeedbackBtn");
+  const modal = document.querySelector(".feedbackModal");
+  const modalOverlay = document.querySelector(".modal-overlay");
+  const cancelButton = document.querySelector(".btn-secondary");
+  const submitButton = document.querySelector(".btn-primary");
+  const closeButton = document.querySelector(".close-button");
+  const thankYouMsg = document.querySelector(".thank-you");
+  const form = document.getElementById("feedbackForm");
+  const iframe = document.getElementById("hidden_iframe");
+
   const setRating = async (rating) => {
     const name = "{{site.name}}";
     const tool = "{{page.tool}}";
@@ -120,7 +200,13 @@ site.data.rating.rating.tools -%} {%- for item in data -%} {%- if item.name
         console.error("Error:", error);
       });
   };
-  const tool = "{{page.tool}}";
+  closeButton.addEventListener("click", () => {
+    modalOverlay.style.display = "none";
+  });
+
+  cancelButton.addEventListener("click", () => {
+    modalOverlay.style.display = "none";
+  });
   const fetchRating = async () => {
     const data = await fetch(
       `https://ratingapi-main.netlify.app/.netlify/functions/api/v1/${tool}/rating`
@@ -150,28 +236,114 @@ site.data.rating.rating.tools -%} {%- for item in data -%} {%- if item.name
   Array.from(ratingNode).map((item) =>
     item.addEventListener("click", () => {
       const tool = "{{page.tool}}";
-      if (!localStorage.getItem(`${tool}rating`)) {
-        function indexInClass(node) {
-          var className = node.className;
-          var num = 0;
-          for (var i = 0; i < ratingNode.length; i++) {
-            if (ratingNode[i] === node) {
-              return num;
-            }
-            num++;
+      function indexInClass(node) {
+        var className = node.className;
+        var num = 0;
+        for (var i = 0; i < ratingNode.length; i++) {
+          if (ratingNode[i] === node) {
+            return num;
           }
-          return -1;
+          num++;
         }
-        const index = indexInClass(item);
-        Array.from(ratingNode)
-          .slice(0, index + 1)
-          .map((item) => {
-            item.style.fill = "#FFB21D";
-          });
-        setRating(index + 1);
-        localStorage.setItem(`${tool}rating`, index + 1);
+        return -1;
       }
+
+      // Reset all stars to gray first
+      Array.from(ratingNode).map((star) => {
+        star.style.fill = "gray";
+      });
+
+      const index = indexInClass(item);
+      // Color the selected stars
+      Array.from(ratingNode)
+        .slice(0, index + 1)
+        .map((star) => {
+          star.style.fill = "#FFB21D";
+        });
+
+      setRating(index + 1);
+      localStorage.setItem(`${tool}rating`, index + 1);
+      modal.style.display = "block";
+      modalOverlay.style.display = "flex";
+      thankYouMsg.style.display = "none";
+      document.getElementById("comment").placeholder = `Tell us why you gave ${
+        index + 1
+      } stars...`;
     })
   );
+
+  openBtn.addEventListener("click", () => {
+    modal.style.display = "block";
+    modalOverlay.style.display = "flex";
+    thankYouMsg.style.display = "none";
+    form.reset();
+  });
+
+  document
+    .querySelector(".thank-you .btn-primary")
+    .addEventListener("click", () => {
+      modalOverlay.style.display = "none";
+    });
+
+  window.addEventListener("click", (event) => {
+    if (event.target === modal) {
+      modal.style.display = "none";
+    }
+  });
+
+  // Set up iframe onload handler
+  iframe.onload = function () {
+    // This function runs when the form submission completes
+    if (form.classList.contains("submitted")) {
+      // Reset the form
+      form.reset();
+      // Hide modal and show thank you message
+      modal.style.display = "none";
+      thankYouMsg.style.display = "block";
+      form.classList.remove("submitted");
+    }
+  };
+
+  // Handle submit button click
+  submitButton.addEventListener("click", function () {
+    // Mark the form as submitted
+    form.classList.add("submitted");
+
+    // Get the current domain, URL and rating
+    const domain = window.location.hostname;
+    const url = window.location.href;
+    const rating = localStorage.getItem(`${tool}rating`) || "0";
+
+    // Create or update hidden fields
+    createHiddenElement("domain", "domain").value = domain;
+    createHiddenElement("url", "url").value = url;
+    createHiddenElement("user-rating", "rating").value = rating;
+
+    // Disable the submit button
+    submitButton.disabled = true;
+    submitButton.textContent = "Submitting...";
+
+    // Submit the form
+    form.submit();
+
+    // Enable the button after 5 seconds (in case of errors)
+    setTimeout(function () {
+      submitButton.disabled = false;
+      submitButton.textContent = "Submit Feedback";
+    }, 5000);
+  });
+
+  // Helper function to create hidden form elements
+  function createHiddenElement(elementId, elementName) {
+    let field = document.getElementById(elementId);
+    if (!field) {
+      field = document.createElement("input");
+      field.type = "hidden";
+      field.name = elementName;
+      field.id = elementId;
+      form.appendChild(field);
+    }
+    return field;
+  }
 </script>
 {%- endif -%}

data/_includes/appscms/scripts/script.html

@@ -151,6 +151,5 @@ if page.layout == "appscms-feature" -%}
 {%- endif -%} {%- endif -%} {%- if site.authentication -%}
 <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
 <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>
-<script src="/assets/js/appscms-auth.js"></script>
 <script src="/assets/js/appscms-login.js"></script>
 {%- endif -%}

data/assets/css/appscms-theme.css

@@ -650,12 +650,12 @@ body {
 /* Rating tool css */
 .rating-tool {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
   background-color: #fcfcfc;
   border-radius: 50px;
-  height: 70px;
   margin: 40px 0;
 }
 
@@ -671,7 +671,7 @@ body {
 }
 
 .rating-tool .rating-text {
-  font-size: 16px;
+  font-size: 22px;
   font-weight: 700;
   color: rgb(33, 33, 33);
   padding: 6px;
@@ -2953,7 +2953,7 @@ select:focus {
   font-size: 14px;
   padding: 0px 0px 0px 25px;
 }
-<style > .side-modal-overlay {
+.side-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
@@ -3457,3 +3457,267 @@ a:hover {
 .auth-container a {
   justify-content: center;
 }
+.review {
+  width: 300px; /* Set each review card width to match the `.reviews` container */
+  flex-shrink: 0;
+}
+
+.feedback-btn {
+  background-color: #4361ee;
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: 12px;
+  margin-top: 10px;
+}
+
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-body {
+  padding: 25px;
+}
+
+@keyframes modalopen {
+  from {
+    opacity: 0;
+    transform: translateY(-60px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.close:hover {
+  color: black;
+}
+
+h2 {
+  margin-top: 0;
+  color: #333;
+}
+
+.form-group {
+  margin-botton: 15px;
+}
+
+label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+textarea,
+input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+textarea {
+  height: 120px;
+  resize: vertical;
+}
+.submit-btn {
+  background-color: #4caf50;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.rating-header {
+  margin-top: 10px;
+}
+
+.feedbackModal {
+  background-color: var(--white);
+  border-radius: 12px;
+  box-shadow: var(--shadow-feedback);
+  width: 100%;
+  max-width: 500px;
+  overflow: hidden;
+  animation: slideIn 0.3s ease-out;
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+  animation: fadeIn 0.3s ease-out;
+}
+
+.close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+}
+
+.form-control {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 22px;
+  color: var(--text-light);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  transition: all 0.2s;
+}
+
+.close-button:hover {
+  background-color: var(--gray-200);
+  color: var(--text);
+}
+
+.thank-you {
+  text-align: center;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.modal-footer {
+  padding: 15px 25px 20px;
+  text-align: right;
+}
+
+.form-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #2d3748;
+}
+
+.form-input {
+  width: 100%;
+  padding: 12px 15px;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  font-size: 15px;
+  color: #2d3748;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #4353ff;
+  box-shadow: 0 0 0 3px rgba(67, 83, 255, 0.2);
+}
+
+.modal-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--text);
+}
+
+.modal-header {
+  padding: 20px 25px;
+  border-bottom: 1px solid var(--gray-200);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Thank you message */
+.thank-you {
+  text-align: center;
+  padding: 30px 20px;
+  background-color: #fff;
+  border-radius: 22px;
+}
+
+.thank-you-icon {
+  width: 60px;
+  height: 60px;
+  background-color: #48bb78;
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 20px;
+  font-size: 30px;
+}
+
+.thank-you-title {
+  font-weight: 600;
+  font-size: 20px;
+  margin-bottom: 10px;
+}
+
+.thank-you-message {
+  color: var(--text-light);
+  margin-bottom: 25px;
+}