Hugging Face's logo

Spaces:
BraydenMoore
/
unsecured-camera
Running

App Files Community
BraydenMoore commited on
Commit
7dfb20b
•
1 Parent(s): 873d875

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +116 -0
templates/index.html ADDED
@@ -0,0 +1,116 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
4
+ <head>
5
+ <title>a random unsecured security camera</title>
6
+ <style>
7
+ body {
8
+ background-color: black;
9
+ padding-top: 3%;
10
+ }
11
+
12
+ .pulse {
13
+ width: 40px;
14
+ height: 40px;
15
+ border-radius: 50%;
16
+ position: absolute;
17
+ background-color: yellow;
18
+ opacity: 0.5;
19
+ animation: pulse-animation 5s infinite;
20
+ margin-left: -20px;
21
+ margin-top: -20px;
22
+ }
23
+
24
+ .dot {
25
+ width: 5px;
26
+ height: 5px;
27
+ border-radius: 50%;
28
+ position: absolute;
29
+ background-color: yellow;
30
+ margin-left: -2.5px;
31
+ margin-top: -2.5px;
32
+ }
33
+
34
+ @keyframes pulse-animation {
35
+ 0% { transform: scale(0.1); opacity: 0.4; }
36
+ 100% { transform: scale(6); opacity: 0; }
37
+ }
38
+
39
+ .flex-container {
40
+ display: flex;
41
+ justify-content: left;
42
+ align-items: top;
43
+ }
44
+
45
+ .outer-container {
46
+ margin: auto;
47
+ justify-content: center;
48
+ align-items: left;
49
+ max-width: 80vw;
50
+ }
51
+
52
+ .feed {
53
+ padding: 1%;
54
+ border-style: solid;
55
+ border-width: 1px;
56
+ border-color: yellow;
57
+ margin-right: 3%;
58
+ }
59
+
60
+ .map-div {
61
+ padding: 1%;
62
+ border-style: solid;
63
+ border-width: 1px;
64
+ border-color: yellow;
65
+ }
66
+
67
+ a:hover {
68
+ background-color: yellow;
69
+ color: black;
70
+ transition: 0.5s ease-in-out;
71
+ }
72
+
73
+ </style>
74
+ </head>
75
+
76
+ <body style="background-color: black;">
77
+ <div class="outer-container">
78
+ <h1 style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50; margin-bottom: 3%;"> a random unsecured camera</h1>
79
+ <div class="flex-container">
80
+ <img id="feed" class="feed" src="{{ url }}" style="width: 800px; height: 600px;" />
81
+ <div style="display: flex; flex-direction: column; align-items: flex-start;">
82
+
83
+ <div class="map-div" style="position: relative; width: 500px; height: 300px; margin-bottom: 3%;">
84
+ <div style="position: relative;">
85
+ <img id="map" src="{{ url_for('static', filename='map.png') }}" style="width: 500px; height: 300px;" />
86
+ <div class="dot" style="left: {{ X }}%; top: {{ Y }}%;"></div>
87
+ <div class="pulse" style="left: {{ X }}%; top: {{ Y }}%;"></div>
88
+ </div>
89
+ </div>
90
+ <h2 style="border-bottom: 1px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h2>
91
+ <p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ loc }} <br><br> {{ ip }} <br><br> {{ org }} <br><br> {{ time }}</p>
92
+
93
+ <a href="." style="margin-top: 3%; display: inline-block;">
94
+ <button class="hoverButton" style="border: 1px solid yellow; background-color: transparent; color: rgb(83, 83, 83); padding: 10px;">
95
+ another
96
+ </button>
97
+ </a>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </div>
102
+
103
+
104
+ <script>
105
+ document.addEventListener("DOMContentLoaded", function() {
106
+ const feed = document.getElementById("feed");
107
+ feed.src = "{{ url_for('static', filename='loading.gif') }}"
108
+ setTimeout(function() {
109
+ const newUrl = "{{ url }}";
110
+ feed.src = newUrl;
111
+ });
112
+ });
113
+ </script>
114
+ </body>
115
+
116
+ </html>