|
<!DOCTYPE html> |
|
<html> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<head> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> |
|
<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; |
|
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; |
|
justify-content: left; |
|
max-width: 70vw; |
|
} |
|
#feed-div { |
|
display: flex; |
|
justify-content: right; |
|
width: 90%; |
|
height: 90%; |
|
position: relative; |
|
margin-right: 3%; |
|
} |
|
h1 { |
|
margin: 0px; |
|
margin-top: 20px; |
|
} |
|
.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; |
|
} |
|
.tag { |
|
font-family: 'Helvetica'; |
|
font-weight: 50; |
|
margin: auto; |
|
color:yellow; |
|
} |
|
|
|
#share { |
|
margin: auto; |
|
margin-left: 10px; |
|
color: yellow; |
|
transition: 0.3s ease; |
|
} |
|
#share:hover { |
|
opacity: 0.5; |
|
} |
|
|
|
@media only screen and (orientation: portrait) { |
|
h1 { |
|
margin-top: 4% !important; |
|
} |
|
.flex-container { |
|
flex-direction: column; |
|
align-items: left; |
|
} |
|
|
|
.map-div { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
.outer-container { |
|
max-width: 85vw; |
|
} |
|
#feed-div { |
|
justify-content: left; |
|
width: 100%; |
|
max-height: 45%; |
|
margin-right: 0; |
|
} |
|
.feed { |
|
height: 100%; |
|
width: 100%; |
|
max-height: 100%; |
|
} |
|
.info { |
|
width: 90%; |
|
height: 65%; |
|
} |
|
} |
|
</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={{ id }}" 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> |
|
<i id="share" class="fa-solid fa-link" data-id="{{ id }}"></i> |
|
<p id="copied" class="tag" style="visibility: hidden;">copied</p> |
|
</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 class="tag">a brayden moore website<br></span>thanks for visiting |
|
</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.2"; |
|
|
|
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; |
|
setTimeout(() => { |
|
feed.style.width = "100%"; |
|
feed.style.height = "70%"; |
|
feed.style.opacity = "1"; |
|
}, 100); |
|
|
|
const infoText = document.getElementById("info-text"); |
|
infoText.style.opacity = "1"; |
|
|
|
setTimeout(refreshImage, 1000); |
|
country.textContent = "{{ country }}" |
|
}; |
|
|
|
img.onerror = function() { |
|
feed.style.width = "80px"; |
|
feed.style.height = "50px"; |
|
feed.src = loadingGif; |
|
|
|
const urlParams = new URLSearchParams(window.location.search); |
|
const countryElement = document.getElementById("country"); |
|
if (urlParams.get('new') === 'false') { |
|
countryElement.textContent = "couldn't connect."; |
|
} |
|
else { |
|
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); |
|
}); |
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
const shareIcon = document.getElementById("share"); |
|
const copiedText = document.getElementById("copied"); |
|
|
|
shareIcon.addEventListener("click", function() { |
|
const id = this.getAttribute("data-id"); |
|
const urlToCopy = `${window.location.origin}/?new=false&id=${id}`; |
|
|
|
navigator.clipboard.writeText(urlToCopy).then(() => { |
|
console.log("URL copied to clipboard"); |
|
shareIcon.className = "fa-solid fa-check"; |
|
|
|
}).catch(err => { |
|
console.log("Could not copy text: ", err); |
|
}); |
|
}); |
|
}); |
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
const urlParams = new URLSearchParams(window.location.search); |
|
const countryElement = document.getElementById("country"); |
|
|
|
if (urlParams.get('new') === 'false') { |
|
countryElement.textContent = "connecting..."; |
|
} |
|
}); |
|
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function() { |
|
const feed = document.getElementById("feed"); |
|
let isFullscreen = false; |
|
|
|
function toggleFullScreen() { |
|
if (!isFullscreen) { |
|
if (this.requestFullscreen) { |
|
this.requestFullscreen(); |
|
} else if (this.mozRequestFullScreen) { |
|
this.mozRequestFullScreen(); |
|
} else if (this.webkitRequestFullscreen) { |
|
this.webkitRequestFullscreen(); |
|
} else if (this.msRequestFullscreen) { |
|
this.msRequestFullscreen(); |
|
} |
|
} else { |
|
if (document.exitFullscreen) { |
|
document.exitFullscreen(); |
|
} else if (document.mozCancelFullScreen) { |
|
document.mozCancelFullScreen(); |
|
} else if (document.webkitExitFullscreen) { |
|
document.webkitExitFullscreen(); |
|
} else if (document.msExitFullscreen) { |
|
document.msExitFullscreen(); |
|
} |
|
} |
|
} |
|
|
|
feed.addEventListener("click", toggleFullScreen); |
|
feed.addEventListener("touchstart", toggleFullScreen); |
|
|
|
document.addEventListener("fullscreenchange", function() { |
|
isFullscreen = !isFullscreen; |
|
}); |
|
}); |
|
|
|
|
|
</script> |
|
</body> |
|
|
|
</html> |