feat: Sql task great animation

static/index.css

@@ -13,7 +13,7 @@
     box-shadow: 0.27em 0.27em 0em 0px rgba(186, 65, 166, 0.6);
     border: none;
     transition: 0.3s;
-    margin: 1rem;
+    margin: 0.5rem;
     background-color: rgba(225, 225, 225, 0.99);
     border-radius: 3px;
 }
@@ -57,6 +57,7 @@
 .container {
     display: flex;
     flex-wrap: wrap;
+
 }
 
 .divv {
@@ -69,16 +70,55 @@
     margin-top: 2rem;
 }
 
-.sql-input {
+#sqlInpt {
     position: relative;
     margin: 3.5rem;
     background-color: rgb(0 0 0 / 85%);
-    padding: 2rem;
+    padding: 0.5rem 1.5rem;
     text-align: left;
+    width: 20%;
+    height: 27%;
+    transition: 1s;
+}
+.slideinInpt {
+    transition: 1s;
+    transform: translateX(345%);
+
+}
+
+.slideoutInpt {
+    transition: 1s;
+    transform: translateX(0%);
 }
 
 
-.info {
+
+.sql-guide {
+    width: 65%;
+    height: auto;
+    background-color: rgb(0 0 0/ 90%);
+    padding: 1rem;
+    margin-left: 3.5rem;
+    margin-top: 3.5rem;
+    box-shadow: 1em 1em 0em 0px rgba(186, 65, 166, 0.7);
+    transform: translateX(-165%);
+    transition: 1s;
+    position: absolute;
+}
+
+.slideinHelp {
+    transition: 1s;
+    transform: translateX(0%);
+
+}
+
+.slideoutHelp {
+    transition: 1;
+    transform: translateX(-165%);
+
+}
+
+.headerblock {
     width: 65%;
     height: 20%;
     padding: 1rem;
@@ -90,7 +130,7 @@
     transition: 0.5s;
 }
 
-.info:hover {
+.headerblock:hover {
     box-shadow: 1.5em 1.5em 0em 0px rgba(186, 65, 166, 0.7);
     padding: 1.5rem;
 }
@@ -239,8 +279,7 @@
     border: dashed rgba(0, 0, 0, 0.5);
     transition: 0.5s;
     box-shadow: 0.5em 0.5em 0em 0px rgba(0, 0, 0, 0.5);
-    -webkit-animation: fadeinout 7s cubic-bezier(0, 0, 0.2, 1) forwards;
+    animation: fadeinout 3s cubic-bezier(1, 0.05, 0.5, 1) forwards;
-    animation: fadeinout 7s cubic-bezier(1, 0.05, 0.5, 1) forwards;
     opacity: 0;
 }
 #error:hover {
@@ -269,8 +308,7 @@
     border: dashed rgba(225, 225, 225, 1);
     transition: 0.5s;
     box-shadow: 0.5em 0.5em 0em 0px rgba(0, 0, 0, 0.5);
-    -webkit-animation: fadeinout 7s cubic-bezier(0, 0, 0.2, 1) forwards;
+    animation: fadeinout 3.5s cubic-bezier(1, 0.05, 0.5, 1) forwards;
-    animation: fadeinout 7s cubic-bezier(1, 0.05, 0.5, 1) forwards;
     opacity: 0;
 }
 #success:hover {
@@ -279,10 +317,6 @@
     box-shadow: 0.7em 0.7em 0em 0px rgba(0, 0, 0, 0.65);
 }
 
-@-webkit-keyframes fadeinout {
-  50% { opacity: 1; }
-}
-
 @keyframes fadeinout {
   50% { opacity: 1; }
 }

static/scripts/index.js

@@ -7,14 +7,23 @@
   function init(){
     const popup = document.getElementById("popup");
     const help = document.getElementById("help");
+    const sqlInpt = document.getElementById("sqlInpt");
 
     function showPopup() {
+      popup.classList.remove('slideoutHelp');
+      sqlInpt.classList.remove('slideoutInpt');
       popup.style.display = "block";
-      console.log('cat')
+      setTimeout(() => popup.classList.add('slideinHelp'), 1);
+      setTimeout(() => sqlInpt.classList.add('slideinInpt'), 1);
     }
 
     function hidePopup() {
-      popup.style.display = "none";
+      sqlInpt.classList.remove('slideinInpt');
+      popup.classList.remove('slideinHelp');
+      setTimeout(() => {popup.style.display = "none"}, 1000);
+      setTimeout(() => {popup.style.position = "absolute"}, 1000);
+      popup.classList.add('slideoutHelp');
+      sqlInpt.classList.add('slideoutInpt')
     }
 
     help.addEventListener("click", showPopup);

templates/_head.html

@@ -2,5 +2,10 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
     <script src="{{ url_for('static', filename='scripts/index.js') }}"></script>
     <meta charset="UTF-8">
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/base16/ros-pine-moon.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+<script>hljs.highlightAll();</script>
     <title>Попакошька</title>
 </head>

templates/_header.html

@@ -1,4 +1,4 @@
-<div class="info divv">
+<div class="headerblock divv">
     <a href="{{ url_for('index') }}"><h1 class="header">CTF для самых маленьких</h1></a>
     <h3 class="context">Для тех кто хотел бы разобраться, но не знает, с чего начать</h3>
 </div>

templates/sql-injection.html

@@ -2,11 +2,17 @@
 
 {% block content%}
     <div class="container">
-        <div id="popup" class="sql-input divv">
+        <div id="popup" class="sql-guide divv">
-            <p class="simpletext">я попка кошки с подсказкой</p>
+            <p class="simpletext">Это так называемая SQL-инъекция - уязвимость в системах, где отправляются SQL запросы, например регистрационные формы. <br />
+            <p class="simpletext">Как именно это работает? Все дело в том, что запрос отправляется без проверки на то, что пользователь туда ввёл. С использованием синтаксиса запроса можно указать себе логин 'admin', а часть с проверкой пароля просто-напросто закомментировать.</p>
+            <pre><code class="python">login = request.form['login']
+password = request.form['pass']
+cursor = get_db().cursor()
+cursor.execute(f'SELECT * FROM Users WHERE login == "{login}" AND password == "{password}"')</code></pre></p><br />
+            <p class="simpletext">Примерно так выглядит сообтвествующий код, который позволяет использовать уязвимость</p>
         </div>
 
-        <div class="sql-input divv">
+        <div class="divv" id="sqlInpt">
             <form action="sql-injection" method="post" class="simpletext">
                 <div class="small-container" ><p>Login: <p class="hidden">...</p> </p> <input type="text" name="login" class="inpt" /></div>
                 <div class="small-container"><p>Password:</p> <input type="password" name="pass" class="inpt"/></div>