|
<!DOCTYPE html> |
|
<html> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<head> |
|
<link rel="preload" href="{{ url_for('static', filename='map_populated.png') }}" as="image"> |
|
<link rel="preload" href="{{ url_for('static', filename='eye.gif') }}" as="image"> |
|
<link rel="icon" type="image/png" href="https://images.squarespace-cdn.com/content/v1/64790f5777b5d772678cce83/6d71eaee-f825-4324-be9b-2def32469eac/Untitled+drawing+%2811%29.png?format=100w"> |
|
<title>a random unsecured camera</title> |
|
<style> |
|
body { |
|
justify-content: center; |
|
background-color: black; |
|
padding-top: 2%; |
|
display: flex; |
|
align-items:center; |
|
height: 90vh; |
|
} |
|
h3 { |
|
margin-bottom: 20px; |
|
margin-top: 0px !important; |
|
} |
|
.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 { |
|
border-style: solid; |
|
border-width: 2px; |
|
border-color: black; |
|
width: 5px; |
|
height: 5px; |
|
border-radius: 50%; |
|
position: absolute; |
|
background-color: yellow; |
|
margin-left: -4.5px; |
|
margin-top: -4.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 { |
|
display: inline-block; |
|
margin-left: 2%; |
|
justify-content: left; |
|
max-width: 85vw; |
|
} |
|
#feed-div { |
|
display: flex; |
|
justify-content: left; |
|
align-items: top; |
|
width: 90%; |
|
max-height: 45%; |
|
position: relative; |
|
margin-right: 3%; |
|
margin-bottom: 3%; |
|
} |
|
h1 { |
|
margin: 0px; |
|
} |
|
.feed { |
|
transition: 0.3s ease; |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.map { |
|
width: 100%; |
|
height: 100%; |
|
object-fit: cover; |
|
margin: auto; |
|
} |
|
.map-div { |
|
position: relative; |
|
width: 280px; |
|
height: 190px; |
|
margin-top: 3%; |
|
margin-bottom: 3%; |
|
box-sizing: border-box; |
|
} |
|
.info { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: flex-start; |
|
margin-right: 30px; |
|
} |
|
|
|
a:hover { |
|
background-color: yellow; |
|
color: black; |
|
transition: 0.5s ease; |
|
} |
|
a { |
|
text-decoration: none; |
|
color:rgb(83, 83, 83); |
|
transition: 0.5s ease; |
|
} |
|
@media only screen and (orientation: portrait) { |
|
body { |
|
margin-left: auto; |
|
} |
|
|
|
.h1 { |
|
margin-bottom: 2%; |
|
} |
|
|
|
.flex-container { |
|
flex-direction: column; |
|
align-items: left; |
|
} |
|
|
|
.map-div { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
#feed-div { |
|
width: 100%; |
|
max-height: 45%; |
|
margin-right: 0; |
|
} |
|
.feed { |
|
height: 100%; |
|
width: 100%; |
|
max-height: 100%; |
|
} |
|
.info { |
|
width: 90%; |
|
height: 65%; |
|
} |
|
#tag { |
|
color:rgb(83, 83, 83); |
|
} |
|
} |
|
</style> |
|
</head> |
|
|
|
<body style="background-color: black;"> |
|
<div class="outer-container"> |
|
<div class="flex-container"> |
|
|
|
<div id="feed-div"> |
|
<img id="feed" class="feed" src="{{ url_for('static', filename='eye.gif') }}" /> |
|
</div> |
|
|
|
|
|
<div class="info"> |
|
<h1 id="country" style="color:rgb(83, 83, 83); margin-top: 1%; font-family: 'Helvetica'; font-weight: 50; margin-bottom: 3%;"> searching...</h1> |
|
<a href="{{ ip_link }}" target="_blank"> <h3 style="border-bottom: 2px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h3></a> |
|
|
|
<div style="display: flex; margin-top: 0%; margin-bottom: 0%;"> |
|
<a href="?new=true" style="margin-right: 10px; display: inline-block;"> |
|
<button class="hoverButton" style="border: 2px solid yellow; background-color: transparent; color: rgb(83, 83, 83); padding: 10px;"> |
|
another |
|
</button> |
|
</a> |
|
<a href="?new=false" id="refreshSameFeedButton" style="display: inline-block;"> |
|
<button class="hoverButton" style="border: 2px solid rgb(83, 83, 83); background-color: transparent; color: rgb(83, 83, 83); padding: 10px;"> |
|
refresh |
|
</button> |
|
</a> |
|
</div> |
|
|
|
<p id="info-text" style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;"> |
|
owner: {{ owner }}<br> |
|
ip: {{ ip }}<br> |
|
lat, lon: {{ loc }}<br> |
|
time: <span id="time"></span><br><br> |
|
|
|
<span id="tag">a brayden moore website<br>thanks for visiting</span> |
|
</p> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
|
|
<script> |
|
let loadingGif = "{{ url_for('static', filename='eye.gif') }}"; |
|
let currentFeed; |
|
document.addEventListener("DOMContentLoaded", function() { |
|
const feed = document.getElementById("feed"); |
|
feed.style.width = "80px"; |
|
feed.style.height = "50px"; |
|
feed.src = loadingGif; |
|
feed.style.opacity = "0.1"; |
|
|
|
const infoText = document.getElementById("info-text"); |
|
infoText.style.opacity = "0"; |
|
|
|
const country = document.getElementById("country"); |
|
|
|
const newUrl = "{{ url }}"; |
|
|
|
function refreshImage() { |
|
let xhr = new XMLHttpRequest(); |
|
xhr.open('HEAD', newUrl + '?t=' + new Date().getTime(), true); |
|
xhr.onreadystatechange = function() { |
|
if (xhr.readyState === 4) { |
|
if (xhr.status === 200) { |
|
if (xhr.getResponseHeader('Content-Type') === 'image/jpeg') { |
|
img.src = newUrl + '?t=' + new Date().getTime(); |
|
} |
|
} |
|
} |
|
}; |
|
xhr.send(); |
|
} |
|
|
|
const img = new Image(); |
|
img.onload = function() { |
|
old = newUrl; |
|
feed.src = this.src; |
|
feed.style.width = "100%"; |
|
feed.style.height = "100%"; |
|
feed.style.opacity = "1"; |
|
|
|
const infoText = document.getElementById("info-text"); |
|
infoText.style.opacity = "1"; |
|
|
|
setTimeout(refreshImage, 1000); |
|
country.textContent = "{{ country }}" |
|
}; |
|
|
|
img.onerror = function() { |
|
window.location.href = "?new=true"; |
|
}; |
|
|
|
img.src = newUrl; |
|
}); |
|
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
const timezone = "{{ timezone }}"; |
|
setInterval(() => { |
|
const now = new Date(); |
|
const options = { |
|
timeZone: timezone, |
|
hour: '2-digit', |
|
minute: '2-digit', |
|
second: '2-digit', |
|
hour12: true |
|
}; |
|
const timeString = now.toLocaleTimeString('en-US', options); |
|
document.getElementById("time").textContent = timeString; |
|
}, 200); |
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
|
|
</html> |
