add watch demo to status page

Home/views/partials/video-script.ejs

@@ -0,0 +1,49 @@
+<div id="videoContainer" class="hidden modal-lg relative z-10" aria-labelledby="modal-title" role="dialog"
+    aria-modal="true">
+
+    <div id="video-veil" class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>
+
+    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+        <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+
+            <div
+                class="relative transform overflow-hidden rounded-lg px-1 pb-6 pt-6 text-left transition-all sm:my-8 sm:w-full sm:max-w-xl">
+                <div class="absolute right-0 top-0 hidden pr-3 pt-11 sm:block">
+                    <button type="button" id="videoClose"
+                        class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                        <span class="sr-only">Close</span>
+                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+                            aria-hidden="true">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="sm:flex sm:items-start">
+
+                    <div class="mt-3 text-center sm:ml-1 sm:mt-0 sm:text-left">
+                        <div class="mt-2">
+                            <iframe id="videoPlayer" width="560" height="315" src="" frameborder="0"
+                                allowfullscreen></iframe>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    function playVideo(videoId) {
+        var videoUrl = "https://www.youtube.com/embed/" + videoId + "?autoplay=1";
+        document.getElementById('videoPlayer').src = videoUrl;
+        document.getElementById('videoContainer').classList.remove('hidden');
+
+        var btn = document.getElementById("videoClose");
+
+        btn.onclick = function () {
+            document.getElementById('videoContainer').classList.add('hidden');
+            document.getElementById('videoPlayer').src = "";
+        }
+    }
+</script>

Home/views/partials/watch-demo.ejs

@@ -0,0 +1,12 @@
+<div class="absolute rounded-xl p-2 inset-0 bg-black opacity-5"></div>
+<button
+  class="shadow absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 hover:text-white"
+  onclick="playVideo('<%- videoId %>')">
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+    stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round"
+      d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z" />
+  </svg>
+
+  <span class="ml-1">Watch Demo</span>
+</button>