Add student feedback modal UI

src/_includes/partials/feedback_modal.html

@@ -0,0 +1,136 @@
+<!-- Regional Settings Modal -->
+<form x-show="isFeedbackModalOpen" x-cloak id="hs-pro-shwprm" class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto [--close-when-click-inside:false] pointer-events-auto" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shwprm-label" @click.stop>
+  <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-2xl sm:w-full m-3 sm:mx-auto h-[calc(100%-56px)] min-h-[calc(100%-56px)] flex items-center">
+    <div class="w-full max-h-full relative overflow-hidden flex flex-col bg-white rounded-xl pointer-events-auto shadow-xl dark:bg-neutral-800">
+      <!-- Header -->
+      <div class="py-4 px-6 flex justify-between items-center border-b border-gray-200 dark:border-neutral-700">
+        <h4 id="hs-pro-shwprm-label" class="font-semibold text-gray-800 dark:text-neutral-200">
+          Feedback Us
+        </h4>
+        <button x-cloak x-show="isFeedbackSubmitted" type="button" class="size-8 shrink-0 flex justify-center items-center gap-x-2 rounded-full border border-transparent bg-gray-100 text-gray-800 hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-200 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:text-neutral-400 dark:focus:bg-neutral-600" aria-label="Close" data-hs-overlay="#hs-pro-shwprm">
+          <span class="sr-only">Close</span>
+          <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+        </button>
+      </div>
+      <!-- End Header -->
+
+      <!-- Body -->
+      <div class="overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
+        <div x-show="!isFeedbackSubmitted" class="p-6 space-y-5">
+          <!-- Product -->
+          <div class="grow mb-2 text-center">
+            <h3 class="mb-2 text-2xl font-bold text-gray-800 dark:text-neutral-200">
+              Congratulation !
+            </h3>
+            <p class="text-sm text-gray-500 dark:text-neutral-200">
+              You have successfully completed <span class="font-bold text-gray-800">Banking Current Affairs - 2023</span>.
+              We would love to hear your thoughts, suggestions, concerns so we can improve!
+            </p>
+          </div>
+          <!-- End Product -->
+
+          <!-- Rating -->
+          <div>
+            <label class="block mb-2 text-sm font-medium text-gray-800 dark:text-neutral-200">
+              Overall rating for the course
+            </label>
+
+            <!-- Rating -->
+            <div class="flex flex-row-reverse justify-end items-center gap-x-0.5">
+              <input id="hs-pro-shwrr-1" required type="radio" class="peer -ms-7 size-7 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0" name="hs-pro-shwrr" value="1">
+              <label for="hs-pro-shwrr-1" class="peer-checked:text-yellow-400 text-gray-300 pointer-events-none dark:peer-checked:text-yellow-600 dark:text-neutral-600">
+                <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              </label>
+              <input id="hs-pro-shwrr-2" type="radio" class="peer -ms-7 size-7 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0" name="hs-pro-shwrr" value="2">
+              <label for="hs-pro-shwrr-2" class="peer-checked:text-yellow-400 text-gray-300 pointer-events-none dark:peer-checked:text-yellow-600 dark:text-neutral-600">
+                <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              </label>
+              <input id="hs-pro-shwrr-3" type="radio" class="peer -ms-7 size-7 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0" name="hs-pro-shwrr" value="3">
+              <label for="hs-pro-shwrr-3" class="peer-checked:text-yellow-400 text-gray-300 pointer-events-none dark:peer-checked:text-yellow-600 dark:text-neutral-600">
+                <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              </label>
+              <input id="hs-pro-shwrr-4" type="radio" class="peer -ms-7 size-7 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0" name="hs-pro-shwrr" value="4">
+              <label for="hs-pro-shwrr-4" class="peer-checked:text-yellow-400 text-gray-300 pointer-events-none dark:peer-checked:text-yellow-600 dark:text-neutral-600">
+                <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              </label>
+              <input id="hs-pro-shwrr-5" type="radio" class="peer -ms-7 size-7 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0" name="hs-pro-shwrr" value="5">
+              <label for="hs-pro-shwrr-5" class="peer-checked:text-yellow-400 text-gray-300 pointer-events-none dark:peer-checked:text-yellow-600 dark:text-neutral-600">
+                <svg class="shrink-0 size-7" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+              </label>
+            </div>
+            <!-- End Rating -->
+          </div>
+          <!-- End Rating -->
+
+          <!-- Input -->
+          <div>
+            <label class="flex items-center gap-x-2 mb-2 text-sm font-medium text-gray-800 dark:text-neutral-200">
+              How the mentor of the course taught complex problems ?
+              <span><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-red-600" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg></span>
+            </label>
+
+
+            <textarea required class="py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-600 dark:focus:ring-neutral-600 min-h-[4rem]" rows="2" placeholder=""></textarea>
+          </div>
+          <!-- End Input -->
+
+         <!-- Input -->
+          <div>
+            <label class="block mb-2 text-sm font-medium text-gray-800 dark:text-neutral-200">
+              Was the course content up to date?
+            </label>
+
+            <textarea class="py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-600 dark:focus:ring-neutral-600 min-h-[4rem]" rows="2" placeholder=""></textarea>
+          </div>
+          <!-- End Input -->
+
+         <!-- Input -->
+          <div>
+            <label class="flex items-center gap-x-2 mb-2 text-sm font-medium text-gray-800 dark:text-neutral-200">
+              Did you find the assignments helpful?
+              <span><svg xmlns="http://www.w3.org/2000/svg" class="size-3.5 text-red-600" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-asterisk-icon lucide-asterisk"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg></span>
+            </label>
+
+            <textarea required class="py-3 px-4 block w-full border-gray-200 rounded-lg sm:text-sm placeholder:text-gray-400 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-600 dark:focus:ring-neutral-600 min-h-[4rem]" rows="2" placeholder=""></textarea>
+          </div>
+          <!-- End Input -->
+        </div>
+
+
+        <div x-cloak x-show="isFeedbackSubmitted" class="space-y-5">
+          <div class="text-center min-h-48 flex items-center p-4">
+            <div>
+              <h3 class="mb-2 text-2xl font-bold text-gray-800 dark:text-neutral-200">
+                Yeahhhh 🎉
+              </h3>
+              <p class="text-gray-500 dark:text-neutral-500">
+                  Thanks for sharing your thoughts on Banking Current Affairs - 2023.
+                  Your feedback helps us make our courses even better for future learners.
+              </p>
+            </div>
+          </div>
+
+          <div class="py-2.5 px-4 border-t border-gray-200 dark:border-neutral-700">
+            <div class="text-end">
+              <button data-hs-overlay="#hs-pro-shwprm" type="button"  class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bggray-100">
+                close
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- End Body -->
+
+      <!-- Footer -->
+      <div x-cloak x-show="!isFeedbackSubmitted" class="py-4 px-6 border-t border-gray-200 dark:border-neutral-700">
+        <div class="text-end">
+          <button type="button" @click="isFeedbackSubmitted = true" class="py-2 px-3 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-blue-700">
+            Submit
+          </button>
+        </div>
+      </div>
+      <!-- End Footer -->
+    </div>
+  </div>
+</form>
+<!-- End Regional Settings Modal -->

src/content_detail_page/includes/content_heading.html

@@ -16,8 +16,8 @@ <h1 class="text-lg lg:text-2xl font-bold text-gray-900">What is Markup language?
         <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l1.664 1.664M21 21l-1.5-1.5m-5.485-1.242L12 17.25 4.5 21V8.742m.164-4.078a2.15 2.15 0 011.743-1.342 48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185V19.5M4.664 4.664L19.5 19.5" />
       </svg>                
     </a>
-    <button
-      x-on:click="!is_completed && (is_completed = true)"
+    <button data-hs-overlay="#hs-pro-shwprm"
+      x-on:click="if (!is_completed) { is_completed = true, isFeedbackModalOpen = true }"
       :class="is_completed ? 'cursor-not-allowed opacity-50' : 'hover:bg-emerald-500'"
       type="button"
       class="hidden md:flex w-auto relative inline-flex items-center gap-x-1.5 rounded-md bg-emerald-600 px-3 py-2 text-sm font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-emerald-600 transition-colors duration-200"

src/content_detail_page/includes/content_scripts.html

@@ -12,6 +12,8 @@
       activeTab: '{{ tab }}',
       isCustomizeOpen: false,
       contentType: 'topics',
+      isFeedbackModalOpen: false,
+      isFeedbackSubmitted: false,
 
       exam: {
         ["x-html"](){

src/content_detail_page/pdf.html

@@ -26,5 +26,6 @@
 		{% include "./includes/comment_section.html" %}
 	</main>
 	{% include "./includes/global_search_modal.html"%}
+	{% include "src/_includes/partials/feedback_modal.html" %}
 </div>
 {% endblock %}