Finished adding backend features to frontend

Frontend/assets/css/tools/mock/r11popup.css

@@ -2,11 +2,6 @@
     animation: blur 0.5s ease-in-out ;
     animation-fill-mode: forwards;
 }
-.popup-flex:has(.hiddable-container){
-    animation: deblur 0.3s ease-in-out ;
-    animation-direction: reverse;
-    animation-fill-mode: forwards;
-}
 .popup-flex{
     display: flex; 
     align-items: center;
@@ -66,28 +61,12 @@
     0% {
       backdrop-filter: blur(0px);
     }
-  
+
     50% {
       backdrop-filter: blur(5px);
     }
-  
+
     100% {
       backdrop-filter: blur(10px);
     }
   }
-
-@keyframes deblur {
-    0%{
-        backdrop-filter: blur(10px);
-      }
-    
-      50% {
-        backdrop-filter: blur(5px);
-      }
-    
-      100% {
-        backdrop-filter: blur(0px);
-        display: none;
-      }
-    
-}

Frontend/assets/scripts/tools/mock/uianimation.js

@@ -81,6 +81,16 @@ function showHeadersHistory(element){
     $('.popup-flex').removeClass('hiddable-container');
     document.getElementById('header-history-table-body').innerHTML = historyTable;
 }
+    window.addEventListener(
+        'click' ,
+        (clickedElement) => {
+            console.log(clickedElement.target);
+            if(!document.getElementById('header-history-popup').contains(clickedElement.target) && clickedElement.target.className == 'popup-flex' ) {
+                $('.popup-flex').addClass('hiddable-container');
+            }
+        }
+    );
+
 
 function focusInTip(element){
     showTip(element);