mirror of https://github.com/CIRCL/lookyloo
chg: Improve UI (index and menu)
Raphaël Vinot
parent
4847fdb670
commit
81acc8e2d5
|
|
@ -20,17 +20,9 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#menu_container {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
/* menu vertical */
|
||||
|
||||
#menu {
|
||||
#menu_vertical {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
|
|
@ -42,30 +34,78 @@
|
|||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#menu_container .menu-header {
|
||||
width: 200px;
|
||||
height: 110px;
|
||||
resize: both;
|
||||
#menu_container_vertical {
|
||||
position: fixed;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#menu_container ul.components {
|
||||
padding: 20px 0;
|
||||
#menu_container_vertical .menu-header {
|
||||
width: 200px;
|
||||
height: 110px;
|
||||
resize: both;
|
||||
}
|
||||
|
||||
#menu_container ul li a {
|
||||
padding: 10px;
|
||||
#menu_container_vertical ul.components {
|
||||
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 {
|
||||
filter: blur(10px);
|
||||
/* menu horizontal */
|
||||
|
||||
#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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -121,22 +121,20 @@
|
|||
|
||||
<!-- Containers -->
|
||||
|
||||
<div id="menu_container" class="tree-panel-container">
|
||||
<div id=menu>
|
||||
<div class="menu_header">
|
||||
<div id="menu_container_vertical" class="tree-panel-container">
|
||||
<div id=menu_vertical>
|
||||
<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">
|
||||
<b>Menu</b>
|
||||
</div>
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#menu_content">
|
||||
<div>
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#menu_vertical_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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue