Additional features in frontend

BardinPetr · Jul 20, 2018 · c9b3f11 · c9b3f11
1 parent ce88628
commit c9b3f11
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 22 deletions.
diff --git a/static/css/style-black.css b/static/css/style-black.css
@@ -25,7 +25,6 @@ input[readonly] {
 
 .navbar {
     border-radius: 0px;
-/ / Сбросить флажок
 }
 
 .panel-primary > .panel-heading {
@@ -253,4 +252,50 @@ a:focus, a:hover {
 
 #gotop_fab:hover {
     background-color: #555; /* Add a dark-grey background on hover */
+}
+
+.not-active-a {
+    pointer-events: none;
+    cursor: not-allowed;
+    text-decoration: none;
+    opacity: 0.5;
+}
+
+.tooltip {
+    position: relative;
+    display: inline-block;
+    border-bottom: 1px dotted black;
+}
+
+.tooltip .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip .tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: #555 transparent transparent transparent;
+}
+
+.tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
 }
diff --git a/static/js/index.js b/static/js/index.js
@@ -76,21 +76,29 @@ var reset_all = function reset_all() {
 
 $(document).ready(function () {
     var ws = new WebSocket('ws://' + loc + ':9999');
-    $("#fs_wrapper").fadeOut(1);
+    $("#fs_wrapper").fadeOut(0);
+    $("#ntext").fadeOut(0);
 
+    var tabs = ["#cyberowl_tab", "#settings_tab", "#main_tab", "#faq_tab"]
     var indicate_running = function indicate_running(state) {
         if (state) {
             $("#loading_gif").fadeIn(4000);
-            $("#settings_tab").fadeOut(2000);
-            $("#faq_tab").fadeOut(2000);
+            $("#ntext").fadeIn(2000);
             start_btn.prop("disabled", true);
             stop_btn.prop("disabled", false);
+            tabs.forEach(function(x, a, b) {
+                $(x).addClass("not-active-a");
+            });
         } else {
             $("#loading_gif").fadeOut(4000);
-            $("#settings_tab").fadeIn(2000);
-            $("#faq_tab").fadeIn(2000);
+            $("#ntext").fadeOut(2000);
             stop_btn.prop("disabled", true);
             start_btn.prop("disabled", false);
+            tabs.forEach(function(x, a, b) {
+                $(x).removeClass("not-active-a");
+                $(x).removeAttr('data-toggle');
+                $(x).removeAttr('title');
+            });
         }
     };
 
@@ -337,11 +345,12 @@ $(document).ready(function () {
         }
     });
 
+    const email_re = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);
     const mail_add_f = function (x) {
         var c = $("#mail_addr_inp");
         var cur = c.val();
         c.val('');
-        if (cur) {
+        if (cur && email_re.test(cur)) {
             addh_mail_a(cur);
             if (x !== 1) toastr.info("Успешно добавлен", "Параметры");
         } else {

diff --git a/static/js/settings.js b/static/js/settings.js
@@ -1,3 +1,8 @@
+var sel = function sel(x, y) {
+    $("#iserver").val(x);
+    $("#iport").val(y);
+};
+
 "use strict";
 
 var ws = new WebSocket("ws://127.0.0.1:9999"),
@@ -29,11 +34,6 @@ var send = function send(a) {
     ws.send(x);
 };
 
-var sel = function sel(x, y) {
-    $("#iserver").val(x);
-    $("#iport").val(y);
-};
-
 $(document).ready(function () {
     $("#time").val($("#time").val() || "10");
     $("#daysf").val($("#daysf").val() || "10");

diff --git a/templates/index-black.html b/templates/index-black.html
@@ -4,6 +4,7 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta charset="UTF-8">
     <title>CyberOWL</title>
+    <link rel="icon" href="/static/images/owl.png">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
     <link rel="stylesheet" href="/static/node_modules/@fortawesome/fontawesome-free/css/all.css">
@@ -45,17 +46,12 @@ <h4 class="modal-title">Результат сканирования</h4>
                 <a class="navbar-brand" href="/"><img src="/static/images/owl3.png" style="height: 150%"></a>
             </div>
             <div class="navbar-header">
-                <a class="navbar-brand" href="/">CyberOWL</a>
-            </div>
-            <div class="navbar-header">
-                <a class="navbar-brand" href="/">Главная</a>
-            </div>
-            <div class="navbar-header" id="settings_tab">
-                <a class="navbar-brand" href="/settings">Настройки</a>
-            </div>
-            <div class="navbar-header" id="faq_tab">
-                <a class="navbar-brand" href="/faq">Справка</a>
+                <a class="navbar-brand" href="/" id="cyberowl_tab">CyberOWL</a>
+                <a class="navbar-brand" href="/"  id="main_tab">Главная</a>
+                <a class="navbar-brand" href="/settings" id="settings_tab">Настройки</a>
+                <a class="navbar-brand" href="/faq" id="faq_tab">Справка</a>
             </div>
+            <p id="ntext" class="navbar-text">Не уходите со страницы во время работы</p>
             <ul class="nav navbar-nav navbar-right" style="margin-right: 0">
                 <li data-toggle="tooltip" data-placement="bottom" title="Сканирование....">
                     <img id="loading_gif" src="/static/images/loadinfo2.net.gif"