CIRCL
/
lookyloo
mirror of https://github.com/CIRCL/lookyloo
2
0
Fork 0
Code Issues Releases Wiki Activity

Reposisioning and tooltips

pull/910/head
AntoniaBK 2024-04-23 12:00:13 +02:00
parent d35993b765
commit b77d850b9d
2 changed files with 194 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
website/web/static/tree.css
View File

@ -65,20 +65,14 @@ hr {
left: 5px; left: 5px;
background: white; background: white;
border: 2px solid; border: 2px solid;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }
#menu_container_vertical { #menu_container_vertical {
position: fixed; position: fixed;
top: 5px; top: 5px;
left: 5px; left: 5px;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }
#menu_container_vertical .menu-header { #menu_container_vertical .menu-header {
@ -91,14 +85,13 @@ hr {
padding: 10px 0; padding: 10px 0;
} }
#menu_container_vertical ul li a { #menu_container_vertical ul li a {
padding: 5px; padding: 5px;
font-size: 1.1em; font-size: 1.1em;
display: block; display: block;
} }
#menu_container_vertical ul li a:hover {
}
/* menu horizontal */ /* menu horizontal */
#menu_horizontal { #menu_horizontal {
@ -115,18 +108,16 @@ hr {
left: 5px; left: 5px;
left: 217px; left: 217px;
padding: 5px; padding: 5px;
width: 80%;
} }
.hstack{ .hstack{
height: 106.6px; height: 106.6px;
} }
#menu_container_horizontal .container {
width: 80%;
}
#menu_container_horizontal ul.components { #menu_container_horizontal ul.components {
padding: 5px; padding: 5px;
} }
#menu_container_horizontal ul li a { #menu_container_horizontal ul li a {
@ -150,7 +141,7 @@ hr {
cursor: pointer; cursor: pointer;
width: 180px; width: 180px;
text-align: center; text-align: center;
height: 40px; height: 50px;
} }
/* Dropdown button on hover & focus */ /* Dropdown button on hover & focus */
@ -182,14 +173,11 @@ hr {
display: block; display: block;
} }
.dropdown-content.show {
display: block;
}
/* Change color of dropdown links on hover */ /* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1;} .dropdown-content a:hover {background-color: #f1f1f1;}
/* Show the dropdown menu on hover */ /* Show the dropdown menus on hover */
#capture-menu:hover #capture-menu-content { #capture-menu:hover #capture-menu-content {
display: block; display: block;
} }
@ -202,10 +190,8 @@ hr {
#admin-menu:hover #admin-menu-content { #admin-menu:hover #admin-menu-content {
display: block; display: block;
} }
#extra-menu:hover #extra-menu-content {
/* Change the background color of the dropdown button when the dropdown content is shown */ display: block;
.dropdown:hover .dropbtn {
background-color: #2980b9;
} }
@ -214,10 +200,7 @@ hr {
position: fixed; position: fixed;
bottom: 5px; bottom: 5px;
right: 5px; right: 5px;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }
#legend { #legend {
@ -226,8 +209,5 @@ hr {
right: 5px; right: 5px;
background: white; background: white;
border: 2px solid; border: 2px solid;
padding-top: 5px; padding: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
} }

320
website/web/templates/tree.html
View File

@ -248,103 +248,39 @@
</a> </a>
</div> </div>
<hr/> <hr/>
<div class="mx-auto" style="text-align: center"> <div class="mx-auto" style="width: 52px;">
<b>Legend</b> <button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#menu_vertical_content">
<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#menu_vertical_content"> <span class="if-collapsed">
<span class="if-collapsed"> <img src="{{ url_for('static', filename='up.jpg') }}" class="arrow-down" 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> <span class="if-not-collapsed">
<span class="if-not-collapsed"> <img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize menu" height="25" width="25" title="Collapse">
<img src="{{ url_for('static', filename='up.jpg') }}" alt="Minimize menu" height="25" width="25" title="Collapse"> </span>
</span> </button>
</button>
</div> </div>
<hr/>
<div id=menu_vertical_content class="collapse show"> <div id=menu_vertical_content class="collapse show">
<hr/> <ul class="list-group list-group-flush">
<div title="The node contains at least one insecure (not HTTPS) request"> <li class="list-group-item">
<img src="{{ url_for('static', filename='insecure.svg') }}" alt="Insecure requests" <a href="{{ url_for('capture_web') }}" role="button">New capture</a>
height="20" width="20"> Unencrypted requests </li>
</div> {% if enable_monitoring %}
<li class="list-group-item">
<div title="This node contains only empty responses"> <a href="#monitoringModal" data-bs-toggle="modal" data-bs-target="#monitoringModal" role="button" class="btn btn-outline-info">Monitor capture</a>
<img src="{{ url_for('static', filename='empty.svg') }}" alt="Empty responses" </li>
height="20" width="20"> Empty responses {% endif %}
</div> {% if enable_mail_notification %}
<div title="Number of cookies received in the responses of this node"> <li class="list-group-item">
<img src="{{ url_for('static', filename='cookie_received.png') }}" alt="Cookie received" <a href="#emailModal" data-bs-toggle="modal" data-bs-target="#emailModal" role="button" class="btn btn-outline-danger">Report suspicious</br>capture</a>
height="20" width="20"> Cookie received </li>
</div> {% endif %}
</ul>
<div title="Number of cookies sent in the requests of this node">
<img src="{{ url_for('static', filename='cookie_read.png') }}" alt="Cookie read"
height="20" width="20"> Cookie read
</div>
<div title="Number of redirects initiated by the responses of this node">
<img src="{{ url_for('static', filename='redirect.png') }}" alt="Redirect"
height="20" width="20"> Redirect
</div>
<div title="Number of resources loaded from iFrames in the responses in this node">
<img src="{{ url_for('static', filename='ifr.png') }}" alt="iFrame"
height="20" width="20"> iFrame
</div>
<div title="Number of JavaScript in the responses in this node">
<img src="{{ url_for('static', filename='javascript.png') }}" alt="JavaScript"
height="20" width="20"> Javascript
</div>
<div title="Number of fonts in the responses in this node">
<img src="{{ url_for('static', filename='font.png') }}" alt="Font"
height="20" width="20"> Font
</div>
<div title="Number of HTML in the responses in this node">
<img src="{{ url_for('static', filename='html.png') }}" alt="HTML"
height="20" width="20"> HTML
</div>
<div title="Number of JSON in the responses in this node">
<img src="{{ url_for('static', filename='json.png') }}" alt="JSON"
height="20" width="20"> JSON
</div>
<div title="Number of CSS in the responses in this node">
<img src="{{ url_for('static', filename='css.png') }}" alt="CSS"
height="20" width="20"> CSS
</div>
<div title="Number of executables in the responses in this node">
<img src="{{ url_for('static', filename='exe.png') }}" alt="EXE"
height="20" width="20"> EXE
</div>
<div title="Number of images in the responses in this node">
<img src="{{ url_for('static', filename='img.png') }}" alt="Image"
height="20" width="20"> Image
</div>
<div title="Number of videos in the responses in this node">
<img src="{{ url_for('static', filename='video.png') }}" alt="Video"
height="20" width="20"> Video
</div>
<div title="Number of unknown resources in the responses in this node">
<img src="{{ url_for('static', filename='wtf.png') }}" alt="Content type not set/unknown"
height="20" width="20"> Unknown content
</div>
<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>
</div> </div>
</div> </div>
<div id="menu_container_horizontal" class="tree-panel-container"> <div id="menu_container_horizontal" class="tree-panel-container">
<div id=menu_horizontal class="d-flex"> <div id=menu_horizontal class="d-flex">
<div class="flex-shrink-1 align-self-center"> <div class="flex-shrink-1 align-self-center">
@ -360,14 +296,18 @@
<div id="menu_horizontal_content" class="collapse show flex-grow-1 ms-3 container"> <div id="menu_horizontal_content" class="collapse show flex-grow-1 ms-3 container">
<div class="hstack gap-3"> <div class="hstack gap-3">
<div class="vr"></div> <div class="vr"></div>
<div id="capture-menu" class="dropdown"> <div id="capture-menu" class="dropdown">
<button class="dropbtn">Capture</button> <button class="dropbtn">Capture</button>
<div id="capture-menu-content" class="dropdown-content"> <div id="capture-menu-content" class="dropdown-content">
<a href="#detailsModal" data-bs-toggle="modal" data-bs-target="#detailsModal" role="button">Capture Details</a> <a href="#detailsModal" data-bs-toggle="modal" data-bs-target="#detailsModal"
<a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}" role="button" title="Details about the capture configuration">Capture Details</a>
data-bs-toggle="modal" data-bs-target="#statsModal" role="button">Statistics</a>
<a href="#screenshotModal" data-bs-toggle="modal" <a href="#statsModal" data-remote="{{ url_for('stats', tree_uuid=tree_uuid) }}" data-bs-toggle="modal"
data-bs-target="#screenshotModal" role="button">Page Screenshot</a> data-bs-target="#statsModal" role="button" title="The capture in numbers">Statistics</a>
<a href="#screenshotModal" data-bs-toggle="modal" data-bs-target="#screenshotModal"
role="button" title="Contains the URL rendered in the browser">Page Screenshot</a>
</div> </div>
</div> </div>
@ -375,19 +315,32 @@
<button class="dropbtn">Analytical Tools</button> <button class="dropbtn">Analytical Tools</button>
<div id="tools-menu-content" class="dropdown-content"> <div id="tools-menu-content" class="dropdown-content">
<a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}" <a href="#modulesModal" data-remote="{{ url_for('trigger_modules', tree_uuid=tree_uuid, force=False) }}"
data-bs-toggle="modal" data-bs-target="#modulesModal" role="button">Third Party Reports</a> data-bs-toggle="modal" data-bs-target="#modulesModal" role="button"
title="Lookups from supported 3rd party services">Third Party Reports</a>
<a href="#historyModal" data-remote="{{ url_for('historical_lookups', tree_uuid=tree_uuid, force=False) }}" <a href="#historyModal" data-remote="{{ url_for('historical_lookups', tree_uuid=tree_uuid, force=False) }}"
data-bs-toggle="modal" data-bs-target="#historyModal" role="button">Historical lookups</a> data-bs-toggle="modal" data-bs-target="#historyModal" role="button"
title="Historical data and context about this capture ">Historical lookups</a>
<a href="#hashlookupModal" data-remote="{{ url_for('hashlookup', tree_uuid=tree_uuid) }}" <a href="#hashlookupModal" data-remote="{{ url_for('hashlookup', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#hashlookupModal" role="button">Hashlookup hits</a> data-bs-toggle="modal" data-bs-target="#hashlookupModal" role="button"
title="Hits in Hashlookup ">Hashlookup hits</a>
<a href="#bodyHashesModal" data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}" <a href="#bodyHashesModal" data-remote="{{ url_for('tree_body_hashes', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button">Ressources Capture</a> data-bs-toggle="modal" data-bs-target="#bodyHashesModal" role="button"
title="All ressources contained in the tree">Ressources Capture</a>
<a href="#faviconsModal" data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}" <a href="#faviconsModal" data-remote="{{ url_for('tree_favicons', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button">Favicons Capture</a> data-bs-toggle="modal" data-bs-target="#faviconsModal" role="button"
title="Favicons found on the rendered page">Favicons Capture</a>
<a href="#captureHashesTypesModal" data-remote="{{ url_for('tree_capture_hashes_types', tree_uuid=tree_uuid) }}" <a href="#captureHashesTypesModal" data-remote="{{ url_for('tree_capture_hashes_types', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#captureHashesTypesModal" role="button">Capture hashes types</a> data-bs-toggle="modal" data-bs-target="#captureHashesTypesModal" role="button"
title="Compare hashes of the rendered page">Capture hashes types</a>
<a href="#identifiersModal" data-remote="{{ url_for('tree_identifiers', tree_uuid=tree_uuid) }}" <a href="#identifiersModal" data-remote="{{ url_for('tree_identifiers', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button">Identifiers Capture</a> data-bs-toggle="modal" data-bs-target="#identifiersModal" role="button"
title="Identifiers found on the rendered page">Identifiers Capture</a>
</div> </div>
</div> </div>
@ -395,14 +348,18 @@
<button class="dropbtn">Actions</button> <button class="dropbtn">Actions</button>
<div id="actions-menu-content" class="dropdown-content"> <div id="actions-menu-content" class="dropdown-content">
<a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}" <a href="#urlsInPageModal" data-remote="{{ url_for('urls_rendered_page', tree_uuid=tree_uuid) }}"
data-bs-toggle="modal" data-bs-target="#urlsInPageModal" role="button">Subsequent Captures</a> data-bs-toggle="modal" data-bs-target="#urlsInPageModal" role="button"
<a href="{{ url_for('recapture', tree_uuid=tree_uuid) }}" role="button">Re-Capture</a> title="Start a capture from one of the URLs rendered in the page">Subsequent Captures</a>
<a href="#downloadModal" data-bs-toggle="modal"
data-bs-target="#downloadModal" role="button">Download elements</a> <a href="{{ url_for('recapture', tree_uuid=tree_uuid) }}" role="button"
title="Submit the URL again">Re-Capture</a>
<a href="#downloadModal" data-bs-toggle="modal" data-bs-target="#downloadModal" role="button"
title="Download specific elements of the capture">Download elements</a>
</div> </div>
</div> </div>
{% if current_user.is_authenticated %}
{% if current_user.is_authenticated %}
<div id="admin-menu" class="dropdown"> <div id="admin-menu" class="dropdown">
<button class="dropbtn">Admin only</button> <button class="dropbtn">Admin only</button>
<div id="admin-menu-content" class="dropdown-content"> <div id="admin-menu-content" class="dropdown-content">
@ -423,35 +380,21 @@
{% endif %} {% endif %}
{%if enable_categorization or enable_bookmark or enable_context_by_users %} {%if enable_categorization or enable_bookmark or enable_context_by_users %}
<div class="vr"></div> <div id="extra-menu" class="dropdown">
<div class="col-md"> <button class="dropbtn">Extras</button>
<ul class="list-group list-group-flush"> <div id="extra-menu-content" class="dropdown-content">
{% if enable_categorization %} {% if enable_categorization %}
<li class="list-group-item"> <a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}"
<a href="#categoriesModal" data-remote="{{ url_for('categories_capture', tree_uuid=tree_uuid) }}" data-bs-toggle="modal" data-bs-target="#categoriesModal" role="button">Manage categories</a>
data-bs-toggle="modal" data-bs-target="#categoriesModal" role="button">Manage categories</a> {% endif %}
</li> {% if enable_bookmark %}
{% endif %} <a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a>
{% if enable_bookmark %} {% endif %}
<li class="list-group-item"> {% if enable_context_by_users %}
<a href="#/" role="button" onclick="UnbookmarkAllNodes();">Unbookmark all nodes</a> <a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a>
</li> {% endif %}
{% endif %} </div>
{% if enable_context_by_users %} </div>
<li class="list-group-item">
<a href="#/" role="button" onclick="MarkAsKnown('{{ tree_uuid }}');">Mark all the captures' entries as known</a>
</li>
{% endif %}
</ul>
</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 %}
{% if enable_mail_notification %}
<a href="#emailModal" data-bs-toggle="modal" data-bs-target="#emailModal" role="button" class="btn btn-outline-danger">Report suspicious</br>capture</a>
{% endif %} {% endif %}
<a id="help" href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button" title="Lookyloo Manual">?</a> <a id="help" href="https://www.lookyloo.eu/docs/main/usage.html#_investigate_a_capture" role="button" title="Lookyloo Manual">?</a>
@ -461,6 +404,109 @@
</div> </div>
</div> </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">
<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
</div>
<div title="Number of cookies sent in the requests of this node">
<img src="{{ url_for('static', filename='cookie_read.png') }}" alt="Cookie read"
height="20" width="20"> Cookie read
</div>
<div title="Number of redirects initiated by the responses of this node">
<img src="{{ url_for('static', filename='redirect.png') }}" alt="Redirect"
height="20" width="20"> Redirect
</div>
<div title="Number of resources loaded from iFrames in the responses in this node">
<img src="{{ url_for('static', filename='ifr.png') }}" alt="iFrame"
height="20" width="20"> iFrame
</div>
<div title="Number of JavaScript in the responses in this node">
<img src="{{ url_for('static', filename='javascript.png') }}" alt="JavaScript"
height="20" width="20"> Javascript
</div>
<div title="Number of fonts in the responses in this node">
<img src="{{ url_for('static', filename='font.png') }}" alt="Font"
height="20" width="20"> Font
</div>
<div title="Number of HTML in the responses in this node">
<img src="{{ url_for('static', filename='html.png') }}" alt="HTML"
height="20" width="20"> HTML
</div>
<div title="Number of JSON in the responses in this node">
<img src="{{ url_for('static', filename='json.png') }}" alt="JSON"
height="20" width="20"> JSON
</div>
<div title="Number of CSS in the responses in this node">
<img src="{{ url_for('static', filename='css.png') }}" alt="CSS"
height="20" width="20"> CSS
</div>
<div title="Number of executables in the responses in this node">
<img src="{{ url_for('static', filename='exe.png') }}" alt="EXE"
height="20" width="20"> EXE
</div>
<div title="Number of images in the responses in this node">
<img src="{{ url_for('static', filename='img.png') }}" alt="Image"
height="20" width="20"> Image
</div>
<div title="Number of videos in the responses in this node">
<img src="{{ url_for('static', filename='video.png') }}" alt="Video"
height="20" width="20"> Video
</div>
<div title="Number of unknown resources in the responses in this node">
<img src="{{ url_for('static', filename='wtf.png') }}" alt="Content type not set/unknown"
height="20" width="20"> Unknown content
</div>
<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 style="width: 70px; float: right;">
<center>
<button type="button" class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#legend">
<img src="{{ url_for('static', filename='up.jpg') }}" alt="Maximize legend" height="40" width="40" title="Expand">
<b>Legend</b>
</button>
</center>
</div>
</div>
<!-- Modals --> <!-- Modals -->
@ -791,7 +837,7 @@
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<h4 class="modal-title" id="historyModalLabel"> <h4 class="modal-title" id="historyModalLabel">
Historical data and contex about this capture Historical data and context about this capture
</h4> </h4>
</br> </br>
<button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn btn-close" data-bs-dismiss="modal" aria-label="Close"></button>