feat: Sql task great animation
This commit is contained in:
parent
07ca969da2
commit
5888f44c27
@ -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 7s cubic-bezier(1, 0.05, 0.5, 1) forwards;
|
||||
animation: fadeinout 3s 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 7s cubic-bezier(1, 0.05, 0.5, 1) forwards;
|
||||
animation: fadeinout 3.5s 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; }
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user