feat: Sql task window

static/index.css

@@ -3,23 +3,33 @@
     src: url("/static/fonts/Monocraft.otf") format("opentype");
 }
 
-
-#popup-overlay {
-  top: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(225, 225, 225);
-  display: none;
+#popup {
+    display: none;
 }
 
-#popup {
-    width: 3vw;
-    height: auto;
-    bottom: 1.5%;
-    left: 1.2%;
-    position: absolute;
-    background-color: rgb(0 0 0 / 85%);
+.inpt {
+    width: 15vw;
+    height: 1vw;
+    box-shadow: 0.27em 0.27em 0em 0px rgba(186, 65, 166, 0.6);
+    border: none;
+    transition: 0.3s;
+    margin: 1rem;
+    background-color: rgba(225, 225, 225, 0.99);
+    border-radius: 3px;
+}
+.inpt:hover {
+    box-shadow: 0.5em 0.5em 0em 0px rgba(186, 65, 166, 0.6);
+}
+
+.inpt:focus-visible {
+    outline: none;
+    box-shadow: 0.5em 0.5em 0em 0px rgba(186, 65, 166, 1);
+}
+
+.small-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 
@@ -59,6 +69,15 @@
     margin-top: 2rem;
 }
 
+.sql-input {
+    position: relative;
+    margin: 3.5rem;
+    background-color: rgb(0 0 0 / 85%);
+    padding: 2rem;
+    text-align: left;
+}
+
+
 .info {
     width: 65%;
     height: 20%;
@@ -92,12 +111,13 @@
     width: 18%;
     height: 65%;
     padding: 0;
+    top: 17.5%;
     border-color: #000000;
     border-width: 0.4rem;
     border-radius: 0.7rem;
     margin-right: 0rem;
     left: calc(100% - 5rem);
-    position: relative;
+    position: absolute;
     transition: 0.5s;
     display: flex;
     flex-direction: row;
@@ -125,6 +145,10 @@
   border-radius: 0.5rem;
   margin-top: 0.7rem;
   margin-bottom: 0.7rem;
+  font-family: Monocraft;
+  border-color: rgba(0, 0, 0, 0);
+  color: white;
+  font-size: 1.1rem;
 }
 .btn1 + .btn1 {
     margin-left: 1rem;

static/scripts/index.js

@@ -5,21 +5,20 @@
   window.onload = init;
 
   function init(){
-    const popupOverlay = document.getElementById("popup-overlay");
     const popup = document.getElementById("popup");
     const help = document.getElementById("help");
 
     function showPopup() {
-      popupOverlay.style.display = "block";
+      popup.style.display = "block";
+      console.log('cat')
     }
 
     function hidePopup() {
-      popupOverlay.style.display = "none";
+      popup.style.display = "none";
     }
 
     help.addEventListener("click", showPopup);
-    popupOverlay.addEventListener("click", hidePopup);
-    popup.addEventListener("click", (event) => event.stopPropagation());
+    popup.addEventListener("click", hidePopup);
   }
 
 })(window, document, undefined);