Merge pull request #1 from adrima01/interface

new interface

website/web/static/tree.css

@@ -31,13 +31,14 @@
 #help {
   text-align: center;
   border-style: solid;
-  border-color: blue;
+  border-color: #0d6efd;
   border-radius: 25px;
   text-decoration: none;
   height: 50px;
   width: 50px;
-  background-color: blue;
+  background-color: #0d6efd;
   color: white;
+  align-content: center;
 }
 
 #help:hover {
@@ -116,8 +117,12 @@ hr {
   padding: 5px;
 }
 
+.hstack{
+  height: 106.6px;
+}
+
 #menu_container_horizontal .container {
-  width: 800px;
+  width: 80%;
 }
 
 #menu_container_horizontal ul.components {
@@ -138,18 +143,19 @@ hr {
 /* NEW: Dropdown Menu */
 /* Dropdown Button */
 .dropbtn {
-  background-color: #3498db;
+  background-color: #0d6efd;
   color: white;
   font-size: 16px;
   border: none;
   cursor: pointer;
   width: 180px;
   text-align: center;
+  height: 40px;
 }
 
 /* Dropdown button on hover & focus */
 .dropbtn:hover, .dropbtn:focus {
-  background-color: #2980b9;
+  background-color: #0067fc;
 }
 
 /* The container <div> - needed to position the dropdown content */

website/web/templates/tree.html

@@ -248,39 +248,29 @@
       </a>
     </div>
     <hr/>
-    <div class="mx-auto" style="width: 52px;">
+    <div class="mx-auto" style="text-align: center">
-      <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#menu_vertical_content">
+        <b>Legend</b>
-          <span class="if-collapsed">
+        <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#menu_vertical_content">
-            <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-down" alt="Maximize menu" height="25" width="25" title="Expand">
+            <span class="if-collapsed">
-          </span>
+                <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-down" alt="Maximize menu" height="25" width="25" title="Expand">
-          <span class="if-not-collapsed">
+            </span>
-            <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize menu" height="25" width="25" title="Collapse">
+            <span class="if-not-collapsed">
-          </span>
+                <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize menu" height="25" width="25" title="Collapse">
-      </button>
+            </span>
+        </button>
     </div>
-    <div id="legend_container" class="tree-panel-container">
-      <div id=legend class="collapse show">
-        <center>
-          <div style="display: inline">
-            <b>Legend</b>
-          </div>
-          <div style="display: inline;">
-            <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#legend">
-                <img src="{{ url_for('static', filename='down.jpg') }}" alt="Minimize legend" height="25" width="25" title="Collapse">
-            </button>
-          </div>
-        </center>
-      <hr/>
-      <div title="The node contains at least one insecure (not HTTPS) request">
-        <img src="{{ url_for('static', filename='insecure.svg') }}" alt="Insecure requests"
-             height="20" width="20"> Unencrypted requests
-      </div>
 
-      <div title="This node contains only empty responses">
+    <div id=menu_vertical_content class="collapse show">
-        <img src="{{ url_for('static', filename='empty.svg') }}" alt="Empty responses"
+        <hr/>
-             height="20" width="20"> Empty responses
+        <div title="The node contains at least one insecure (not HTTPS) request">
-      </div>
+            <img src="{{ url_for('static', filename='insecure.svg') }}" alt="Insecure requests"
+                height="20" width="20"> Unencrypted requests
+        </div>
 
+        <div title="This node contains only empty responses">
+            <img src="{{ url_for('static', filename='empty.svg') }}" alt="Empty responses"
+                height="20" width="20"> Empty responses
+        </div>
       <div title="Number of cookies received in the responses of this node">
         <img src="{{ url_for('static', filename='cookie_received.png') }}" alt="Cookie received"
              height="20" width="20"> Cookie received
@@ -349,7 +339,7 @@
       <div title="The node contains a downloaded file">
         <img src="{{ url_for('static', filename='download.png') }}" alt="Contains a downloaded file"
             height="20" width="20"> Downloaded file
-        </div>
+
       </div>
     </div>
   </div>
@@ -380,7 +370,7 @@
                        data-bs-target="#screenshotModal" role="button">Page Screenshot</a>
               </div>
           </div>
-          <div class="vr"></div>
+
           <div id="tools-menu" class="dropdown">
             <button class="dropbtn">Analytical Tools</button>
             <div id="tools-menu-content" class="dropdown-content">
@@ -400,7 +390,7 @@
                  data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button">Identifiers Capture</a>
             </div>
           </div>
-          <div class="vr"></div>
+
           <div id="actions-menu" class="dropdown">
             <button class="dropbtn">Actions</button>
             <div id="actions-menu-content" class="dropdown-content">
@@ -412,7 +402,7 @@
             </div>
           </div>
           {% if current_user.is_authenticated %}
-            <div class="vr"></div>
+
             <div id="admin-menu" class="dropdown">
               <button class="dropbtn">Admin only</button>
               <div id="admin-menu-content" class="dropdown-content">
@@ -456,7 +446,6 @@
           </div>
           {% endif %}
 
-          
           {% if enable_monitoring %}
           <a href="#monitoringModal" data-bs-toggle="modal" data-bs-target="#monitoringModal" role="button" class="btn btn-outline-info" title="Take regularily captures of the URL">Monitor capture</a>
           {% endif %}
@@ -467,7 +456,6 @@
 
           <a id="help" href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button" title="Lookyloo Manual">?</a>
 
-          
       </div>
     </div>
   </div>