feat: Sql task window

app.py

@@ -1,13 +1,33 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, request, url_for, flash, redirect
+import sqlite3
+
+connection = sqlite3.connect('my_database.db')
+cursor = connection.cursor()
+cursor.execute('''
+    CREATE TABLE IF NOT EXISTS Users (
+    id INTEGER PRIMARY KEY,
+    login TEXT NOT NULL,
+    password TEXT NOT NULL
+    )
+''')
+cursor.execute('SELECT * FROM Users where login = "admin"')
+user = cursor.fetchone()
+if not user:
+    cursor.execute('INSERT INTO Users (login, password) VALUES (?, ?)', ('admin', '12345678'))
+connection.commit()
 
 app = Flask(__name__)
+app.config['SECRET_KEY'] = 'ca4ac4ada05f91a5790d2132992bfaed86df15c4d08f2dfe'
 
 @app.route("/")
 def index():
     return render_template('index.html')
 
-@app.route("/sql-injection")
+@app.route("/sql-injection", methods=('GET', 'POST'))
 def sql():
+    if request.method == 'POST':
+        login = request.form['login']
+        password = request.form['pass']
     return render_template('sql-injection.html')
 
 @app.route("/found-me")
@@ -18,5 +38,10 @@ def found():
 def decode():
     return render_template('decode.html')
 
+@app.route("/auth-data")
+def authdata():
+    pass
 
-app.run()
+
+app.run()
+connection.close()

static/index.css

@@ -3,23 +3,33 @@
     src: url("/static/fonts/Monocraft.otf") format("opentype");
 }
 
-
+#popup {
-#popup-overlay {
+    display: none;
-  top: 0;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(225, 225, 225);
-  display: none;
 }
 
-#popup {
+.inpt {
-    width: 3vw;
+    width: 15vw;
-    height: auto;
+    height: 1vw;
-    bottom: 1.5%;
+    box-shadow: 0.27em 0.27em 0em 0px rgba(186, 65, 166, 0.6);
-    left: 1.2%;
+    border: none;
-    position: absolute;
+    transition: 0.3s;
-    background-color: rgb(0 0 0 / 85%);
+    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", hidePopup);
-    popup.addEventListener("click", (event) => event.stopPropagation());
   }
 
 })(window, document, undefined);

templates/sql-injection.html

@@ -5,6 +5,21 @@
 
     {% include 'header.html' %}
 
+
+    <div class="container">
+        <div id="popup" class="sql-input divv">
+            <p class="simpletext">я попка кошки с подсказкой</p>
+        </div>
+
+        <div class="sql-input divv">
+            <form action="auth-data" method="post" class="simpletext">
+                <div class="small-container" ><p>Login   : </p> <input type="text" name="login" class="inpt" /></div>
+                <div class="small-container"><p>Password:</p> <input type="password" name="pass" class="inpt"/></div>
+                <input type="submit" value="Submit" class="btn1" />
+            </form>
+        </div>
+    </div>
+
     <div class="navigation divv">
         <div class="decore1"></div>
         <nav class="navlink">
@@ -16,11 +31,6 @@
         </nav>
     </div>
 
-     <div id="popup-overlay">
-        <div id="popup">
-            <p class="simpletext">я попка кошки с подсказкой</p>
-        </div>
-    </div>
 
     <img id="help" src="{{ url_for('static', filename='imgs/icon.png') }}">