File size: 4,052 Bytes
7dfb20b b2f4683 7dfb20b b2f4683 7dfb20b 8650bd5 7dfb20b 37cd3ac 8650bd5 4290743 4340f17 37cd3ac 8650bd5 0c43571 37cd3ac 4340f17 37cd3ac 4340f17 37cd3ac 8503381 7dfb20b 8650bd5 ba4374b 37cd3ac 8650bd5 37cd3ac 0c43571 8650bd5 0c43571 c47440a bee2f76 7dfb20b 8650bd5 37cd3ac 0c43571 8650bd5 7dfb20b 8650bd5 7dfb20b 8650bd5 7dfb20b 3c76c1a 7dfb20b 8650bd5 7dfb20b 8650bd5 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 |
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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: space-between;
}
.feed-wrapper, .info {
flex-basis: 48%;
}
.feed-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border: 1px solid yellow;
}
.feed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
.map-div {
position: relative;
width: 100%;
padding-bottom: 60%; /* aspect ratio */
overflow: hidden;
}
#map, .dot, .pulse {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 768px) {
.flex-container {
flex-direction: column;
align-items: center;
}
.feed-wrapper, .info {
width: 90%;
}
.feed-wrapper {
padding-bottom: 50%;
}
}
</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">
<div class="feed-wrapper">
<img id="feed" class="feed" src="{{ url_for('proxy', url=url) }}" />
</div>
<div class="info">
<div class="map-div">
<img id="map" src="{{ url_for('static', filename='map.png') }}" />
<div class="dot" style="left: {{ X }}%; top: {{ Y }}%;"></div>
<div class="pulse" style="left: {{ X }}%; top: {{ Y }}%;"></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>
<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> |