Update src/templates/index.html

src/templates/index.html

@@ -5,7 +5,7 @@
     <title>Епикриза</title>
     <link rel="stylesheet" href="/static/css/style.css"/>
     <style>
-      .chatbot-iframe {
+     .chatbot-iframe {
         position: fixed;
         bottom: 0px;
         left: 0px;
@@ -14,8 +14,22 @@
         z-index: 9999;
       }
       .chatbot-iframe.open {
+        width: 430px;
+        height: 630px;
         transition-delay: 0s;
       }
+      .chatbot-iframe.close {
+        width: 100px;
+        height: 100px;
+      }
+      @media only screen and (max-width: 768px) {
+        .chatbot-iframe.open {
+          width: 100dvw;
+          height: 100dvh;
+          left: 0;
+          bottom: 0;
+        }
+      }
     </style>
 </head>
 <body>
@@ -72,9 +86,9 @@
         <img src="/static/images/Logo.png" alt="Logo" class="logo-img-pb"/>
     </a>
 </div>
- <iframe
+  <iframe
       src="https://d1cg2ftwsk9g5q.cloudfront.net"
-      class="chatbot-iframe"
+      class="chatbot-iframe close"
       id="chatbot-iframe"
       frameborder="0"
       scrolling="no">
@@ -88,11 +102,6 @@
           console.error("Chatbot iframe not found.");
           return;
         }
-
-        // Postavi početne dimenzije
-        cb.style.width = "80px";
-        cb.style.height = "80px";
-
         // Detekcija jezika iz URL-a
         const currentUrl = window.location.href;
         let detectedLang = "sr";
@@ -110,29 +119,6 @@
         const chatbotUrl = `${cb.src}?lang=${detectedLang}`;
         cb.src = chatbotUrl;
 
-        // Podesi dimenzije prilikom otvaranja i zatvaranja
-        window.addEventListener("message", (event) => {
-          if (event.data === "closeChatbot") {
-            cb.classList.remove("open");
-            cb.style.width = "80px";
-            cb.style.height = "80px";
-          } else if (event.data === "openChatbot") {
-            cb.classList.add("open");
-            if (window.innerWidth <= 768) {
-              // Podesi za manje ekrane
-              cb.style.width = "100dvw";
-              cb.style.height = "100dvh";
-              cb.style.left = "0";
-              cb.style.bottom = "0";
-            } else {
-              // Podesi za veće ekrane
-              cb.style.width = "430px";
-              cb.style.height = "630px";
-            }
-          }
-        });
-
-        // Pošalji veličinu ekrana iframe-u
         setTimeout(() => {
           cb.contentWindow.postMessage(
             {
@@ -142,6 +128,16 @@
             "*"
           );
         }, 250);
+
+        window.addEventListener("message", (event) => {
+          if (event.data === "closeChatbot") {
+            cb.classList.remove("open");
+            cb.classList.add("close");
+          } else if (event.data === "openChatbot") {
+            cb.classList.remove("close");
+            cb.classList.add("open");
+          }
+        });
       });
     </script>
 </body>