Update src/templates/index.html

src/templates/index.html

@@ -5,6 +5,40 @@
     <title>Епикриза</title>
     <link rel="stylesheet" href="/static/css/style.css"/>
     <style>
+        @keyframes fadeIn {
+          0% {
+            opacity: 0;
+            visibility: hidden;
+          }
+          1% {
+            opacity: 0;
+            visibility: visible;
+          }
+          100% {
+            opacity: 1;
+            visibility: visible;
+          }
+        }
+
+        @keyframes fadeOut {
+          0% {
+            opacity: 1;
+            visibility: visible;
+          }
+          50% {
+            opacity: 50%;
+            visibility: visible;
+          }
+          99% {
+            opacity: 0;
+            visibility: visible;
+          }
+          100% {
+            opacity: 0;
+            visibility: hidden;
+          }
+        }
+      
         .chatbot-iframe {
             position: fixed;
             bottom: 0px;
@@ -12,10 +46,11 @@
             width: 70px;
             height: 70px;
             border: none;
-            transition: all 0.3s ease-in-out;
+            animation: fadeOut 0.5s linear forwards;
         }
 
         .chatbot-iframe.open {
+            animation: fadeIn 0.5s linear forwards;
             width: 410px;
             height: 610px;
         }