|
<!DOCTYPE html> |
|
<html> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<head> |
|
<title>a random unsecured security camera</title> |
|
<style> |
|
body { |
|
background-color: black; |
|
padding-top: 3%; |
|
} |
|
|
|
.pulse { |
|
width: 40px; |
|
height: 40px; |
|
border-radius: 50%; |
|
position: absolute; |
|
background-color: yellow; |
|
opacity: 0.5; |
|
animation: pulse-animation 5s infinite; |
|
margin-left: -20px; |
|
margin-top: -20px; |
|
} |
|
|
|
.dot { |
|
width: 5px; |
|
height: 5px; |
|
border-radius: 50%; |
|
position: absolute; |
|
background-color: yellow; |
|
margin-left: -2.5px; |
|
margin-top: -2.5px; |
|
} |
|
|
|
@keyframes pulse-animation { |
|
0% { transform: scale(0.1); opacity: 0.4; } |
|
100% { transform: scale(6); opacity: 0; } |
|
} |
|
|
|
.flex-container { |
|
display: flex; |
|
justify-content: left; |
|
align-items: top; |
|
} |
|
|
|
.outer-container { |
|
margin: auto; |
|
justify-content: center; |
|
align-items: left; |
|
max-width: 80vw; |
|
} |
|
|
|
.feed { |
|
padding: 1%; |
|
border-style: solid; |
|
border-width: 1px; |
|
border-color: yellow; |
|
margin-right: 3%; |
|
} |
|
|
|
.map-div { |
|
padding: 1%; |
|
border-style: solid; |
|
border-width: 1px; |
|
border-color: yellow; |
|
} |
|
|
|
a:hover { |
|
background-color: yellow; |
|
color: black; |
|
transition: 0.5s ease-in-out; |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body style="background-color: black;"> |
|
<div class="outer-container"> |
|
<h1 style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50; margin-bottom: 3%;"> a random unsecured camera</h1> |
|
<div class="flex-container"> |
|
<img id="feed" class="feed" src="{{ url_for('proxy', url=url) }}" style="width: 800px; height: 600px;" /> |
|
<div style="display: flex; flex-direction: column; align-items: flex-start;"> |
|
|
|
<div class="map-div" style="position: relative; width: 500px; height: 300px; margin-bottom: 3%;"> |
|
<div style="position: relative;"> |
|
<img id="map" src="{{ url_for('static', filename='map.png') }}" style="width: 500px; height: 300px;" /> |
|
<div class="dot" style="left: {{ X }}%; top: {{ Y }}%;"></div> |
|
<div class="pulse" style="left: {{ X }}%; top: {{ Y }}%;"></div> |
|
</div> |
|
</div> |
|
<h2 style="border-bottom: 1px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h2> |
|
<p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ loc }} <br><br> {{ ip }} <br><br> {{ org }} <br><br> {{ time }}</p> |
|
|
|
<a href="." style="margin-top: 3%; display: inline-block;"> |
|
<button class="hoverButton" style="border: 1px solid yellow; background-color: transparent; color: rgb(83, 83, 83); padding: 10px;"> |
|
another |
|
</button> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<script> |
|
document.addEventListener("DOMContentLoaded", function() { |
|
const feed = document.getElementById("feed"); |
|
feed.src = "{{ url_for('static', filename='loading.gif') }}" |
|
setTimeout(function() { |
|
const newUrl = "{{ url }}"; |
|
feed.src = newUrl; |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
|
|
</html> |
