diff --git a/website/web/static/tree.css b/website/web/static/tree.css index a5ab28ab..3a828b82 100644 --- a/website/web/static/tree.css +++ b/website/web/static/tree.css @@ -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); +} diff --git a/website/web/static/tree.js b/website/web/static/tree.js index 6434bb97..075b9827 100644 --- a/website/web/static/tree.js +++ b/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; diff --git a/website/web/templates/hostname_popup.html b/website/web/templates/hostname_popup.html index 0b2393e0..aa67d02d 100644 --- a/website/web/templates/hostname_popup.html +++ b/website/web/templates/hostname_popup.html @@ -76,10 +76,10 @@

{{ hostnode.name }}

- Download URLs as text + Download all URLs as text - Download Hashes as text + Download all Hashes as text
diff --git a/website/web/templates/index.html b/website/web/templates/index.html index b75f889d..8287f7a9 100644 --- a/website/web/templates/index.html +++ b/website/web/templates/index.html @@ -70,7 +70,9 @@ $(document).ready(function () {
-

Start a new capture

+

Web forensics tool

+
+ Start a new capture

{{ render_messages(container=True, dismissible=True) }}
diff --git a/website/web/templates/tree.html b/website/web/templates/tree.html index f635b27f..d332c853 100644 --- a/website/web/templates/tree.html +++ b/website/web/templates/tree.html @@ -121,22 +121,20 @@ -