|
<!DOCTYPE html> |
|
<html> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<head> |
|
<title>a random unsecured security camera</title> |
|
<style> |
|
body { |
|
justify-content: left; |
|
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(3); opacity: 0; } |
|
} |
|
|
|
.flex-container { |
|
display: flex; |
|
justify-content: left; |
|
align-items: top; |
|
} |
|
|
|
.outer-container { |
|
margin: 5%; |
|
justify-content: left; |
|
align-items: left; |
|
max-width: 80vw; |
|
} |
|
|
|
.feed { |
|
padding: 1%; |
|
border-style: solid; |
|
border-width: 1px; |
|
border-color: yellow; |
|
margin-right: 3%; |
|
margin-bottom: 3%; |
|
width: 50%; |
|
height: 70vh; |
|
} |
|
|
|
.map-div { |
|
padding: 1%; |
|
border: 1px solid yellow; |
|
position: relative; |
|
width: 100%; |
|
height: 50%; |
|
margin-bottom: 3%; |
|
box-sizing: border-box; |
|
} |
|
|
|
.map { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
margin: auto; |
|
} |
|
|
|
.info { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
} |
|
|
|
a:hover { |
|
background-color: yellow; |
|
color: black; |
|
transition: 0.5s ease-in-out; |
|
} |
|
|
|
@media only screen and (orientation: portrait) { |
|
.flex-container { |
|
flex-direction: column; |
|
align-items: left; |
|
} |
|
|
|
.feed { |
|
padding: 0; |
|
width: 80vw; |
|
height: 30vh; |
|
margin-right: 0; |
|
} |
|
.info { |
|
width: 80vw; |
|
height: 65vh; |
|
} |
|
} |
|
|
|
</style> |
|
</head> |
|
|
|
<body style="background-color: black;"> |
|
<div class="outer-container"> |
|
<h4 style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;"> a random unsecured camera in</h4> |
|
<h2 style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50; margin-bottom: 3%;"> {{ country }}</h2> |
|
<div class="flex-container"> |
|
<img id="feed" class="feed" src="{{ url_for('proxy', url=url) }}" /> |
|
<div class="info"> |
|
<div class="map-div"> |
|
<img id="map" src="{{ url_for('static', filename='map.png') }}" style="width: 100%; height: 100%;" /> |
|
<div class="dot" style="left: {{ X }}%; top: {{ Y }}%;"></div> |
|
<div class="pulse" style="left: {{ X }}%; top: {{ Y }}%;"></div> |
|
</div> |
|
|
|
<h3 style="border-bottom: 1px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h3> |
|
<p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ loc }} <br>< {{ ip }} <br> {{ org }} <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> |
|
|
|
|
|
<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> |