chg: Improve UI (index and menu)

website/web/static/tree.css

@@ -20,17 +20,9 @@
   text-align: center;
 }
 
-#menu_container {
+/* menu vertical */
-  position: fixed;
-  top: 5px;
-  left: 5px;
-  padding-top: 5px;
-  padding-right: 5px;
-  padding-bottom: 5px;
-  padding-left: 5px;
-}
 
-#menu {
+#menu_vertical {
   position: fixed;
   top: 5px;
   left: 5px;
@@ -42,30 +34,78 @@
   padding-left: 5px;
 }
 
-#menu_container .menu-header {
+#menu_container_vertical {
-	width: 200px;
+  position: fixed;
-	height: 110px;
+  top: 5px;
-	resize: both;
+  left: 5px;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-bottom: 5px;
+  padding-left: 5px;
 }
 
-#menu_container ul.components {
+#menu_container_vertical .menu-header {
-    padding: 20px 0;
+  width: 200px;
+  height: 110px;
+  resize: both;
 }
 
-#menu_container ul li a {
+#menu_container_vertical ul.components {
-    padding: 10px;
+    padding: 10px 0;
+}
+
+#menu_container_vertical ul li a {
+    padding: 5px;
     font-size: 1.1em;
     display: block;
 }
 
-#menu_container ul li a:hover {
+#menu_container_vertical ul li a:hover {
     background: #fff;
 }
 
-.blur {
+/* menu horizontal */
-  filter: blur(10px);
+
+#menu_horizontal {
+  position: fixed;
+  top: 5px;
+  left: 222px;
+  background: white;
+  border: 2px solid;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-left: 5px;
 }
 
+#menu_container_horizontal {
+  position: fixed;
+  top: 5px;
+  left: 5px;
+  padding-top: 5px;
+  padding-right: 5px;
+  padding-left: 5px;
+}
+
+#menu_container_horizontal .container {
+  width: 800px;
+}
+
+#menu_container_horizontal ul.components {
+    padding: 5px;
+}
+
+#menu_container_horizontal ul li a {
+    padding: 1px;
+    font-size: 1.1em;
+    display: block;
+}
+
+#menu_container_horizontal ul li a:hover {
+    background: #fff;
+}
+
+/* legend */
+
 #legend_container {
   position: fixed;
   bottom: 5px;
@@ -155,6 +195,18 @@ hr {
   border-width: 1px;
 }
 
+hr.vertical {
+  display: block;
+  margin-top: 0.1em;
+  margin-bottom: 0.5em;
+  margin-left: auto;
+  margin-right: auto;
+  border-color: black;
+  border-style: inset;
+  border-width: 1px;
+  height: 100px;
+}
+
 table {
   table-layout: fixed;
 }
@@ -175,3 +227,46 @@ table td p {
 #screenshot_thumbnail {
   scroll-margin: 50px;
 }
+
+.blur {
+  filter: blur(10px);
+}
+
+.arrow-down {
+  transform: rotate(180deg);
+}
+
+.arrow-right {
+  transform: rotate(90deg);
+}
+
+.arrow-left {
+  transform: rotate(270deg);
+}
+
+a.new-capture-button {
+  width: 160px;
+  height: 60px;
+  font-size: 25px;
+  letter-spacing: 2.5px;
+  font-weight: 500;
+  color: #ffffff;
+  background-color: #0000ff;
+  border: 10px;
+  border-radius: 50px;
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  transition: all 0.3s ease 0s;
+  cursor: pointer;
+  outline: none;
+  padding-right: 15px;
+	padding-left: 15px;
+	padding-bottom: 15px;
+	padding-top: 15px;
+}
+
+a.new-capture-button:hover {
+  background-color: #007070;
+  box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.1);
+  color: #fff;
+  transform: translateY(-7px);
+}

website/web/static/tree.js

@@ -3,13 +3,13 @@
 
 // Set the dimensions and margins of the diagram
 let margin = {
-    top: 20,
+    top: 110,
     right: 200,
     bottom: 10,
     left: 90
 };
 
-let menuHeight = document.getElementById('menu').clientHeight;
+let menuHeight = document.getElementById('menu_vertical').clientHeight;
 let width = 960 - margin.left - margin.right;
 let height = menuHeight * 2;
 

website/web/templates/hostname_popup.html

@@ -76,10 +76,10 @@
       <h3>{{ hostnode.name }}</h3>
     <button type="button" class="btn btn-info" onclick="whereAmI('{{ hostnode_uuid }}')">Locate in tree</button>
     <a href="{{ url_for('urls_hostnode', tree_uuid=tree_uuid, node_uuid=hostnode_uuid) }}" class="btn btn-info" role="button">
-        Download URLs as text
+        Download all URLs as text
     </a>
     <a href="{{ url_for('hashes_hostnode', tree_uuid=tree_uuid, node_uuid=hostnode_uuid) }}" class="btn btn-info" role="button">
-        Download Hashes as text
+        Download all Hashes as text
     </a>
   </center>
   <div>

website/web/templates/index.html

@@ -70,7 +70,9 @@ $(document).ready(function () {
     </a>
   </center>
   <center>
-    <h2><a href="{{ url_for('capture_web') }}">Start a new capture</a></h2>
+    <h4>Web forensics tool</h4>
+    </br>
+    <a href="{{ url_for('capture_web') }}" class="new-capture-button" > Start a new capture </a>
     <br><br>
     {{ render_messages(container=True, dismissible=True) }}
   </center>

website/web/templates/tree.html

@@ -121,22 +121,20 @@
 
 <!-- Containers -->
 
-<div id="menu_container" class="tree-panel-container">
+<div id="menu_container_vertical" class="tree-panel-container">
-  <div id=menu>
+  <div id=menu_vertical>
-    <div class="menu_header">
+    <div class="menu_vertical_header">
       <a href="{{ url_for('index') }}" title="Back to captures">
-        <img src="{{ url_for('static', filename='lookyloo.jpeg') }}" alt="Lookyloo icon" height="110">
+        <img src="{{ url_for('static', filename='lookyloo.jpeg') }}" alt="Lookyloo icon"
+             height="110">
       </a>
     </div>
     <hr/>
     <center>
-      <div style="display: inline">
+      <div>
-        <b>Menu</b>
+        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#menu_vertical_content">
-      </div>
-      <div style="display: inline;">
-        <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#menu_content">
             <span class="if-collapsed">
-              <img src="{{ url_for('static', filename='down.jpg') }}" alt="Maximize menu" height="25" width="25" title="Expand">
+              <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-down" alt="Maximize menu" height="25" width="25" title="Expand">
             </span>
             <span class="if-not-collapsed">
               <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize menu" height="25" width="25" title="Collapse">
@@ -145,58 +143,11 @@
       </div>
     </center>
     <hr/>
-    <div id=menu_content class="collapse show">
+    <div id=menu_vertical_content class="collapse show">
       <ul class="list-unstyled components">
         <li>
           <a href="#detailsModal" data-toggle="modal" data-target="#detailsModal" role="button">Capture Details</a>
         </li>
-        <li>
-          <a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" role="button">Page Screenshot</a>
-        </li>
-        <li>
-          <a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
-           data-toggle="modal" data-target="#statsModal" role="button">Tree Statistics</a>
-        </li>
-        <li>
-          <a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
-           data-toggle="modal" data-target="#modulesModal" role="button">Third Party Reports</a>
-        </li>
-        {% if has_redirects %}
-        <li>
-            <a href="{{ url_for('redirects', tree_uuid=tree_uuid) }}" role="button">Download Redirects list</a>
-        </li>
-        {% endif %}
-        {% if enable_mail_notification %}
-        <li>
-          <a href="#emailModal" data-toggle="modal" data-target="#emailModal" role="button">Contact Local Administrator</a>
-        </li>
-        {% endif %}
-        <li>
-          <a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
-             data-toggle="modal" data-target="#urlsInPageModal" role="button">Run Subsequent Captures</a>
-        </li>
-        {% if enable_categorization %}
-        <li>
-          <a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}"
-           data-toggle="modal" data-target="#categoriesModal" role="button">Manage categories</a>
-        </li>
-        {% endif %}
-        {% if current_user.is_authenticated and misp_push%}
-        <li>
-          <a href="#mispPushModal" data-remote="{{ url_for('web_misp_push_view', tree_uuid=tree_uuid) }}"
-           data-toggle="modal" data-target="#mispPushModal" role="button">Prepare push to MISP</a>
-        </li>
-        {% endif %}
-        {% if enable_bookmark %}
-        <li>
-          <a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a>
-        </li>
-        {% endif %}
-        {% if enable_context_by_users %}
-        <li>
-          <a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a>
-        </li>
-        {% endif %}
         <li>
           <a href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button">Lookyloo Manual</a>
         </li>
@@ -208,6 +159,87 @@
   </div>
 </div>
 
+<div id="menu_container_horizontal" class="tree-panel-container">
+  <div id=menu_horizontal class="media">
+    <button type="button" class="btn btn-link mr-3 align-self-center" data-toggle="collapse" data-target="#menu_horizontal_content">
+        <span class="if-collapsed">
+          <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-right" alt="Maximize menu" height="25" width="25" title="Expand">
+        </span>
+        <span class="if-not-collapsed">
+          <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-left" alt="Minimize menu" height="25" width="25" title="Collapse">
+        </span>
+    </button>
+    <div id="menu_horizontal_content" class="collapse show media-body mt-0 container">
+      <div class="row">
+        <hr class="vertical">
+        <div class="col-sm">
+          <ul class="list-unstyled components">
+            <li>
+              <a href="#screenshotModal" data-toggle="modal" data-target="#screenshotModal" role="button">Page Screenshot</a>
+            </li>
+            <li>
+              <a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}"
+                 data-toggle="modal" data-target="#statsModal" role="button">Tree Statistics</a>
+            </li>
+            <li>
+              <a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
+                 data-toggle="modal" data-target="#modulesModal" role="button">Third Party Reports</a>
+            </li>
+          </ul>
+        </div>
+        <hr class="vertical">
+        <div class="col-sm">
+          <ul class="list-unstyled components">
+            <li>
+              <a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
+                 data-toggle="modal" data-target="#urlsInPageModal" role="button">Run Subsequent Captures</a>
+            </li>
+            {% if has_redirects %}
+            <li>
+              <a href="{{ url_for('redirects', tree_uuid=tree_uuid) }}" role="button">Download Redirects list</a>
+            </li>
+            {% endif %}
+            {% if enable_mail_notification %}
+            <li>
+              <a href="#emailModal" data-toggle="modal" data-target="#emailModal" role="button">Contact Local Administrator</a>
+            </li>
+            {% endif %}
+          </ul>
+        </div>
+        {%if enable_categorization or (current_user.is_authenticated and misp_push) or enable_bookmark or enable_context_by_users %}
+        <hr class="vertical">
+        <div class="col-sm">
+          <ul class="list-unstyled components">
+            {% if enable_categorization %}
+            <li>
+              <a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}"
+                 data-toggle="modal" data-target="#categoriesModal" role="button">Manage categories</a>
+            </li>
+            {% endif %}
+            {% if current_user.is_authenticated and misp_push%}
+            <li>
+              <a href="#mispPushModal" data-remote="{{ url_for('web_misp_push_view', tree_uuid=tree_uuid) }}"
+                 data-toggle="modal" data-target="#mispPushModal" role="button">Prepare push to MISP</a>
+            </li>
+            {% endif %}
+            {% if enable_bookmark %}
+            <li>
+              <a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a>
+            </li>
+            {% endif %}
+            {% if enable_context_by_users %}
+            <li>
+              <a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a>
+            </li>
+            {% endif %}
+          </ul>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+
 <div id="legend_container" class="tree-panel-container">
   <div id=legend class="collapse show">
     <center>