mirror of https://github.com/CIRCL/lookyloo
new: Improve view of metainfo
parent
f7ff6551c6
commit
974c501865
|
@ -20,18 +20,16 @@
|
|||
right: 5px;
|
||||
background: white;
|
||||
border: 2px solid;
|
||||
height: 1030px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnail:hover {
|
||||
position:relative;
|
||||
width:100%;
|
||||
height:auto;
|
||||
display:block;
|
||||
z-index:999;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
overflow: hidden;
|
||||
#screenshot .img-thumbnail {
|
||||
width: auto;
|
||||
height: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#lookyloo-icon {
|
||||
|
@ -68,6 +66,16 @@
|
|||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#tree-details_container {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
padding-top: 5px;
|
||||
padding-right: 5px;
|
||||
padding-bottom: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
#tree-details {
|
||||
position: fixed;
|
||||
bottom: 5px;
|
||||
|
|
|
@ -5,6 +5,13 @@
|
|||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src='{{ url_for('static', filename='tree.js') }}'></script>
|
||||
<script>
|
||||
$('#screenshot_view_button').click(function(){
|
||||
$(this).text(function(i, old){
|
||||
return old=='View' ? 'Hide' : 'View';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
@ -14,8 +21,8 @@
|
|||
</script>
|
||||
|
||||
<div id=lookyloo-icon></div>
|
||||
<div id=screenshot>
|
||||
<img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="thumbnail" height="300" width="200" overflow="hidden"/>
|
||||
<div id=screenshot class="collapse">
|
||||
<img src="{{ url_for('image', tree_uuid=tree_uuid) }}" class="img-fluid"/>
|
||||
</div>
|
||||
|
||||
<div id="legend_container" class="container">
|
||||
|
@ -72,7 +79,7 @@
|
|||
<img src="{{ url_for('static', filename='wtf.png') }}"
|
||||
alt="Content type not set/unknown" height="20" width="20"> Content type not set/unknown</br>
|
||||
</div>
|
||||
<div>
|
||||
<div style="width: 100px">
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#legend">
|
||||
<img src="{{ url_for('static', filename='maximize2.jpg') }}" alt="Minimize legend" height="40" width="40">
|
||||
|
@ -84,16 +91,44 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id=tree-details><center><b>Tree details</b></center></br>
|
||||
<b>Root URL</b>: {{ root_url }}</br>
|
||||
<b>Start time</b>: {{ start_time }}</br>
|
||||
<b>User Agent</b>: {{ user_agent }}</br>
|
||||
{% if meta %}
|
||||
{%for k, v in meta.items()%}
|
||||
<b>{{k.title()}}</b>: {{ v }}</br>
|
||||
{%endfor%}
|
||||
{%endif%}
|
||||
<center><a href="{{ url_for('image', tree_uuid=tree_uuid) }}">Download Image</a></center>
|
||||
<div id="tree-details_container" class="container">
|
||||
<div id=tree-details class="collapse show">
|
||||
<div>
|
||||
<center>
|
||||
<div style="display: inline">
|
||||
<b>Tree details</b>
|
||||
</div>
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
|
||||
<img src="{{ url_for('static', filename='minimize1.jpg') }}" alt="Minimize tree details" height="25" width="25">
|
||||
</button>
|
||||
</div>
|
||||
</center>
|
||||
</div>
|
||||
<hr/>
|
||||
<b>Root URL</b>: {{ root_url }}</br>
|
||||
<b>Start time</b>: {{ start_time }}</br>
|
||||
<b>User Agent</b>: {{ user_agent }}</br>
|
||||
{% if meta %}
|
||||
{%for k, v in meta.items()%}
|
||||
<b>{{k.title()}}</b>: {{ v }}</br>
|
||||
{%endfor%}
|
||||
{%endif%}
|
||||
<b>Screenshot</b>:
|
||||
<a href="{{ url_for('image', tree_uuid=tree_uuid) }}" class="btn btn-info" role="button">Download</a>
|
||||
<button id="screenshot_view_button" type="button" class="btn btn-info" data-toggle="collapse" data-target="#screenshot">View</button>
|
||||
</br>
|
||||
</div>
|
||||
<div style="width: 100px;float: right;">
|
||||
<div style="display: inline;">
|
||||
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#tree-details">
|
||||
<img src="{{ url_for('static', filename='maximize1.jpg') }}" alt="Minimize tree details" height="40" width="40">
|
||||
</button>
|
||||
</div>
|
||||
<div style="display: inline">
|
||||
<b>Tree details</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
|
|
Loading…
Reference in New Issue