File size: 4,702 Bytes
7dfb20b 83db369 7dfb20b 0520341 7dfb20b 6319fe5 7dfb20b 83db369 4290743 83db369 6319fe5 b51cdf6 83db369 4340f17 37cd3ac 4340f17 83db369 c4766dd be3c2aa ae93cd8 8503381 7dfb20b 8650bd5 5f833b5 b3de1c9 1743e80 d98abd9 be3c2aa b3de1c9 8650bd5 be3c2aa cfa4ad6 ec5825a be3c2aa 98cf34f d57d8c9 98cf34f d57d8c9 be3c2aa 83db369 c47440a bee2f76 01ca5b7 1bce8d2 b51cdf6 1bce8d2 13d0ceb eef8fa3 5f833b5 c4766dd 1bce8d2 eef8fa3 5f833b5 1bce8d2 860c411 83db369 7dfb20b 840ee3e 83db369 be3c2aa 98cf34f be3c2aa b3de1c9 f0bb01e 83db369 f0bb01e e8c3ce8 8955f3a 83db369 98cf34f 7dfb20b 83db369 7dfb20b 3c76c1a 7dfb20b 83db369 7dfb20b 83db369 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 |
<!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> |