Navigation

static/index.css

@@ -7,8 +7,12 @@
     font-family: Monocraft;
     color: white;
     text-align: center;
+    line-height: 2;
+    font-size: 1.1rem;
 }
 
+
+
 .header {
     text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
     font-family: Monocraft;
@@ -69,21 +73,31 @@
 .navigation{
     width: 18%;
     height: 65%;
-    padding: 1rem;
+    padding: 0;
     border-color: #000000;
-    border-radius: 0;
-    border: none;
+    border-radius: 0.7rem;
     margin-right: 0rem;
-    left: calc(100% - 4rem);
+    left: calc(100% - 5rem);
     position: relative;
     transition: 0.5s;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
 }
 
 .navigation:hover {
-    left: 82%;
+    left: 85%;
 
 }
 
+.decore1 {
+    background-image: linear-gradient(to right, rgba(225, 225, 225, 0.8), rgba(225, 225, 225, 0.6));
+    width: 5.5%;
+    height: 85%;
+    margin: 0;
+    border-radius: 1rem;
+}
+
 .btn1 {
   box-shadow: 0 5px 15px 0 #BA41A6;
   transition: 0.5s;
@@ -137,6 +151,8 @@
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
+    margin-left: 1.5rem;
+    margin-top: 1rem;
 }
 
 .navbtn {
@@ -145,6 +161,25 @@
     flex-wrap: wrap;
 }
 
+.helpimg {
+    max-width: 100%;
+    width: 3.5vw;
+    height: auto;
+    margin: 2rem;
+    bottom: 10vw;
+    position: relative;
+    box-shadow: 0.4em 0.4em 0em 0px rgba(0, 0, 0, 0.8);
+    transition: 0.5s;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0);
+
+}
+
+.helpimg:hover {
+    box-shadow: 0.7em 0.7em 0em 0px rgba(0, 0, 0, 0.8);
+    transform: translate(0, 0.2em);
+}
+
 body {
     background-image: url(/static/imgs/bg.gif);
     width: 100vw;

templates/decode.html

@@ -10,4 +10,14 @@
         <a href="{{ url_for('index') }}"><h1 class="header">CTF для самых маленьких</h1></a>
         <h3 class="context">Для тех кто хотел бы разобраться, но не знает, с чего начать</h3>
     </div>
+    <div class="navigation divv">
+        <div class="decore1"></div>
+         <nav class="navlink">
+                <a href="{{ url_for('index') }}" class="link">на главную</a>
+                <a href="{{ url_for('sql') }}" class="link">sql пипка</a>
+                <a href="{{ url_for('found') }}" class="link">forensic</a>
+                <!--    <a href="">rfi</a>-->
+                <!--    <a href="">lfi</a>-->
+            </nav>
+    </div>
 </body>

templates/found.html

@@ -11,4 +11,14 @@
         <h3 class="context">Для тех кто хотел бы разобраться, но не знает, с чего начать</h3>
 
     </div>
+    <div class="navigation divv">
+        <div class="decore1"></div>
+         <nav class="navlink">
+                <a href="{{ url_for('index') }}" class="link">на главную</a>
+                <a href="{{ url_for('sql') }}" class="link">sql пипка</a>
+                <a href="{{ url_for('decode') }}" class="link">encode and decode</a>
+                <!--    <a href="">rfi</a>-->
+                <!--    <a href="">lfi</a>-->
+            </nav>
+    </div>
 </body>

templates/index.html

@@ -15,11 +15,12 @@
 
     <div class="container">
         <div class="info1 divv" >
-            <p class="simpletext">разделы:</p>
+            <p class="simpletext">Разделы заданий:</p>
             <nav class="navbtn">
                 <a href="{{ url_for('sql') }}" class="btn1">sql пипка</a>
                 <a href="{{ url_for('found') }}" class="btn1">forensic</a>
                 <a href="{{ url_for('decode') }}" class="btn1">encode and decode</a>
+
                 <!--    <a href="">rfi</a>-->
                 <!--    <a href="">lfi</a>-->
             </nav>
@@ -27,11 +28,13 @@
         </div>
 
         <div class="info1 divv">
-            <p class="simpletext">вступление какое нить мб</p>
-            <p class="simpletext"> здесь вы можете oзнакомиться с попками</p>
+            <p class="simpletext">Это ресурс для обучения, где можно попробовать свои силы в самых лёгких CTF задачках. Тут предоставлены несколько заданий, при помощи которых можно понять основы (чего основы?). При нажатии на ! в левом нижнем углу будут появляться посвнения по каждому заданию. Задания каждого профиля можно перегенерировать, чтобы попробовать решать самому без подсказок.</p>
+            <p class="simpletext"> Good luck, have fun :) </p>
+        </div>
     </div>
 
-    </div>
+    <img class="helpimg" src="{{ url_for('static', filename='imgs/icon.png') }}">
+
 
 
 <!-- <img src="{{ url_for('static', filename='imgs/Madoka-Kaname.webp') }}"> -->

templates/sql-injection.html

@@ -11,12 +11,14 @@
         <h3 class="context">Для тех кто хотел бы разобраться, но не знает, с чего начать</h3>
     </div>
     <div class="navigation divv">
+        <div class="decore1"></div>
          <nav class="navlink">
-                <a href="{{ url_for('sql') }}" class="link">sql пипка</a>
+                <a href="{{ url_for('index') }}" class="link">на главную</a>
                 <a href="{{ url_for('found') }}" class="link">forensic</a>
                 <a href="{{ url_for('decode') }}" class="link">encode and decode</a>
                 <!--    <a href="">rfi</a>-->
                 <!--    <a href="">lfi</a>-->
             </nav>
     </div>
+    <img class="helpimg" src="{{ url_for('static', filename='imgs/icon.png') }}">
 </body>