fix: help window animation

static/index.css

@@ -184,15 +184,15 @@
     padding-top: 2rem;
 }
 
-#sqlInpt {
-    position: relative;
+.sqlInpt {
     margin: 3.5rem;
     background-color: rgb(0 0 0 / 85%);
     padding: 0.5rem 1.5rem;
     text-align: left;
-    width: auto;
+    width: clamp(40rem, 35%, 60rem);
     height: 22rem;
     transition: 1s;
+    display: flex;
 }
 .slideinInpt {
     transition: 1s;
@@ -317,7 +317,7 @@
 }
 
 .navigation{
-    width: 18%;
+    width: 19.5rem;
     height: clamp(27rem, 65%, 39rem);
     padding: 0;
     top: 17.5%;

static/scripts/animation.js

@@ -1,9 +1,7 @@
 function showPopup() {
   const popup = document.getElementById("popup");
-  const sqlInpt = document.getElementById("sqlInpt");
 
   popup.classList.remove('slideoutHelp');
-  sqlInpt.classList.remove('slideoutInpt');
   popup.style.display = "block";
 
   setTimeout(() => {
@@ -14,10 +12,8 @@ function showPopup() {
 
 function hidePopup() {
   const popup = document.getElementById("popup");
-  const sqlInpt = document.getElementById("sqlInpt");
 
-  sqlInpt.classList.remove('slideinInpt');
-  sqlInpt.classList.add('slideoutInpt')
+
   popup.classList.remove('slideinHelp');
   popup.classList.add('slideoutHelp');
 

templates/sql-injection.html

@@ -1,7 +1,6 @@
 {% extends 'utils/_task.html' %}
 {% include 'utils/_websidenav.html' %}
 {% block content %}
-    <div class="container">
     <div id="popup" class="sql-guide capsule-window">
         <p class="simpletext" style="text-align: left"><a class="hltext" href="https://book.hacktricks.wiki/en/pentesting-web/sql-injection/index.html?highlight=sql%20inje#what-is-sql-injection">SQL-инъекция</a> - уязвимость системы, позволяющая пользователю ввести вредоносный код в SQL-запрос.<br />
         <p class="simpletext" style="text-align: left">Как именно это работает? Все дело в том, что данные, которые ввёл пользователь, вставляются в запрос напрямую <span class="context" style="font-size: 0.9rem">(пример кода с сервера ниже)</span></p>
@@ -17,8 +16,8 @@ cursor.execute(f'SELECT * FROM Users WHERE login == "{login}" AND password == "{
         <p class="simpletext">Соответственно вся часть после знака комментария просто не учитывается. Вы успешно вошли под логином <span class="mono">admin</span>.</p>
         <span class="close-btn usable-context" onclick="hidePopup()">скрыть</span>
     </div>
-    </div>
-    <div class="capsule-window" id="sqlInpt">
+<div class="container">
+    <div class="capsule-window sqlInpt" >
             <form action="sql-injection" method="post" class="simpletext">
                 <p class="simpletext">Попробуй войти от имени админа,<br />
                     используя уязвимость<abbr class="hltext" title="Смотри подсказку(кнопка снизу слева)">SQL-инъекции</abbr>. Найдите флаг</p>
@@ -27,7 +26,7 @@ cursor.execute(f'SELECT * FROM Users WHERE login == "{login}" AND password == "{
                 <input type="submit" value="Submit" class="btn1" />
             </form>
     </div>
-
+</div>
     {% if error %}
         <div id="error"> <p>{{ error }}</p> </div>
     {% elif success %}