feat: Sql task great animation

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">
-            <p class="simpletext">я попка кошки с подсказкой</p>
+        <div id="popup" class="sql-guide divv">
+            <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>