File size: 7,832 Bytes
7dfb20b 83db369 7dfb20b f0d739b c666fe4 da03cdb 7dfb20b 0520341 7dfb20b e04f6b7 7dfb20b f44f27e 7dfb20b f44f27e 7dfb20b 6319fe5 7dfb20b 83db369 4290743 83db369 e781f72 b51cdf6 a5eee72 4340f17 83db369 c4766dd 313e2d7 ea6b765 8503381 be3c2aa cfa4ad6 ec5825a be3c2aa dcc1609 8963060 dcc1609 d57d8c9 98cf34f d57d8c9 be3c2aa 83db369 c47440a 12354f8 c65ceca 12354f8 01ca5b7 e04f6b7 0da4ce6 1bce8d2 b51cdf6 1bce8d2 8055803 1bce8d2 e29920a d0455e9 c4766dd 1bce8d2 e29920a 5f833b5 1bce8d2 860c411 7dfb20b f20166c c82812d 83db369 7e57aa3 98cf34f 15acfc8 c65ceca 335ffd7 811fa4e 335ffd7 83db369 335ffd7 83db369 247198f 8690d89 247198f 335ffd7 247198f 335ffd7 15acfc8 ef9369f 1b97612 8a3a984 ef9369f 2fe8452 ef9369f 15acfc8 da03cdb 15acfc8 106cf6d 9cf5dbb 106cf6d 15acfc8 98cf34f 7dfb20b 83db369 7dfb20b 3c8edf7 c82812d 547afc5 3c8edf7 5d3e07e 13793ca 5d3e07e 13793ca fc0cfed d35e436 6b188da fc0cfed 13793ca fc0cfed ee2a7bc fc0cfed 5d3e07e fc0cfed 3c8edf7 462c77b 11f9dba 462c77b 7dfb20b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 |
<!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='loading.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: left;
background-color: black;
padding-top: 3%;
margin-left: 5vw;
}
.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 {
margin-left: 2%;
justify-content: left;
max-width: 85vw;
}
.feed {
padding: 1%;
border-style: solid;
border-width: 1px;
border-color: yellow;
margin-right: 3%;
margin-bottom: 3%;
width: 50%;
height: 65vh;
}
.map {
width: 100%;
height: 100%;
object-fit: cover;
margin: auto;
}
.map-div {
position: relative;
width: 450px;
height: 300px;
margin-top: 3%;
margin-bottom: 3%;
box-sizing: border-box;
}
.info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
a:hover {
background-color: yellow;
color: black;
transition: 0.5s ease-in-out;
}
a {
text-decoration: none;
color:rgb(83, 83, 83);
}
@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 {
width: 90vw;
max-height: 45vh;
margin-right: 0;
}
.info {
width: 90vw;
height: 65vh;
}
}
</style>
</head>
<body style="background-color: black;">
<div class="outer-container">
<p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;"> a random unsecured camera in</p>
<h1 id="country" style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50; margin-bottom: 3%;"> attempting to connect...</h1>
<div class="flex-container">
<img id="feed" class="feed" src="" />
<div class="info">
<a href="{{ ip_link }}" target="_blank"> <h3 style="margin:0; border-bottom: 1px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h3></a>
<div style="display: flex; margin-top: 6%; margin-bottom: 3%;">
<a href="?new=true" style="margin-right: 10px; display: inline-block;">
<button class="hoverButton" style="border: 1px 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: 1px solid rgb(83, 83, 83); background-color: transparent; color: rgb(83, 83, 83); padding: 10px;">
refresh
</button>
</a>
</div>
<p 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>
</p>
<div class="map-div">
<img id="map" src="{{ url_for('static', filename='map_populated.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>
<p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50; margin-top: 3%;">
a brayden moore website
</p>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
const feed = document.getElementById("feed");
feed.src = "{{ url_for('static', filename='loading.gif') }}";
const country = document.getElementById("country");
country.text = "attempting to connect..."
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() {
feed.src = this.src;
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> |