Hugging Face's logo

Spaces:
BraydenMoore
/
unsecured-camera

App Files Community
BraydenMoore commited on
Commit
8650bd5
•
1 Parent(s): bc376fd

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +35 -29
templates/index.html CHANGED
@@ -39,20 +39,19 @@
39
 
40
  .flex-container {
41
  display: flex;
42
- justify-content: space-between; /* Adds space between feed and info */
43
  }
44
 
45
  .feed-wrapper, .info {
46
- flex-basis: 48%; /* Takes up roughly half the space, accounting for margins */
47
  }
48
 
49
  .feed-wrapper {
50
  position: relative;
51
- padding-bottom: 56.25%; /* 16:9 ratio */
52
  height: 0;
53
  overflow: hidden;
54
  border: 1px solid yellow;
55
- margin-right: 2%; /* Reintroduced margin */
56
  }
57
 
58
  .feed {
@@ -64,20 +63,33 @@
64
  object-fit: contain;
65
  }
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
67
  @media only screen and (max-width: 768px) {
68
  .flex-container {
69
  flex-direction: column;
70
  align-items: center;
71
  }
72
-
73
  .feed-wrapper, .info {
74
- flex-basis: auto;
75
  width: 90%;
76
  }
77
 
78
  .feed-wrapper {
79
- padding-bottom: 50%; /* Adjusting for mobile */
80
- margin-right: 0; /* Remove margin */
81
  }
82
  }
83
 
@@ -86,42 +98,36 @@
86
 
87
  <body style="background-color: black;">
88
  <div class="outer-container">
89
- <!-- ... existing content ... -->
90
  <div class="flex-container">
91
  <div class="feed-wrapper">
92
  <img id="feed" class="feed" src="{{ url_for('proxy', url=url) }}" />
93
  </div>
94
  <div class="info">
95
- <div class="map-div" style="position: relative; margin-bottom: 3%;">
96
- <div style="position: relative;">
97
- <img id="map" src="{{ url_for('static', filename='map.png') }}" />
98
- <div class="dot" style="left: {{ X }}%; top: {{ Y }}%;"></div>
99
- <div class="pulse" style="left: {{ X }}%; top: {{ Y }}%;"></div>
100
- </div>
101
- </div>
102
- <h2 style="border-bottom: 1px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h2>
103
- <p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ loc }} <br><br> {{ ip }} <br><br> {{ org }} <br><br> {{ time }}</p>
104
-
105
- <a href="." style="margin-top: 3%; display: inline-block;">
106
- <button class="hoverButton" style="border: 1px solid yellow; background-color: transparent; color: rgb(83, 83, 83); padding: 10px;">
107
- another
108
- </button>
109
- </a>
110
- </div>
111
  </div>
 
 
 
 
 
 
 
112
  </div>
 
113
  </div>
114
-
115
-
116
  <script>
117
  document.addEventListener("DOMContentLoaded", function() {
118
  const feed = document.getElementById("feed");
119
  feed.src = "{{ url_for('static', filename='loading.gif') }}"
120
  setTimeout(function() {
121
- const newUrl = "{{ url }}";
122
  feed.src = newUrl;
123
- });
124
  });
 
125
  </script>
126
  </body>
127
 
 
39
 
40
  .flex-container {
41
  display: flex;
42
+ justify-content: space-between;
43
  }
44
 
45
  .feed-wrapper, .info {
46
+ flex-basis: 48%;
47
  }
48
 
49
  .feed-wrapper {
50
  position: relative;
51
+ padding-bottom: 56.25%;
52
  height: 0;
53
  overflow: hidden;
54
  border: 1px solid yellow;
 
55
  }
56
 
57
  .feed {
 
63
  object-fit: contain;
64
  }
65
 
66
+ .map-div {
67
+ position: relative;
68
+ width: 100%;
69
+ padding-bottom: 60%; /* aspect ratio */
70
+ overflow: hidden;
71
+ }
72
+
73
+ #map, .dot, .pulse {
74
+ position: absolute;
75
+ top: 0;
76
+ left: 0;
77
+ width: 100%;
78
+ height: 100%;
79
+ }
80
+
81
  @media only screen and (max-width: 768px) {
82
  .flex-container {
83
  flex-direction: column;
84
  align-items: center;
85
  }
86
+
87
  .feed-wrapper, .info {
 
88
  width: 90%;
89
  }
90
 
91
  .feed-wrapper {
92
+ padding-bottom: 50%;
 
93
  }
94
  }
95
 
 
98
 
99
  <body style="background-color: black;">
100
  <div class="outer-container">
101
+ <h1 style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50; margin-bottom: 3%;">a random unsecured camera</h1>
102
  <div class="flex-container">
103
  <div class="feed-wrapper">
104
  <img id="feed" class="feed" src="{{ url_for('proxy', url=url) }}" />
105
  </div>
106
  <div class="info">
107
+ <div class="map-div">
108
+ <img id="map" src="{{ url_for('static', filename='map.png') }}" />
109
+ <div class="dot" style="left: {{ X }}%; top: {{ Y }}%;"></div>
110
+ <div class="pulse" style="left: {{ X }}%; top: {{ Y }}%;"></div>
 
 
 
 
 
 
 
 
 
 
 
 
111
  </div>
112
+ <h2 style="border-bottom: 1px solid yellow; color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ name }}</h2>
113
+ <p style="color:rgb(83, 83, 83); font-family: 'Helvetica'; font-weight: 50;">{{ loc }} <br><br> {{ ip }} <br><br> {{ org }} <br><br> {{ time }}</p>
114
+ <a href="." style="margin-top: 3%; display: inline-block;">
115
+ <button class="hoverButton" style="border: 1px solid yellow; background-color: transparent; color: rgb(83, 83, 83); padding: 10px;">
116
+ another
117
+ </button>
118
+ </a>
119
  </div>
120
+ </div>
121
  </div>
 
 
122
  <script>
123
  document.addEventListener("DOMContentLoaded", function() {
124
  const feed = document.getElementById("feed");
125
  feed.src = "{{ url_for('static', filename='loading.gif') }}"
126
  setTimeout(function() {
127
+ const newUrl = "{{ url }}";
128
  feed.src = newUrl;
 
129
  });
130
+ });
131
  </script>
132
  </body>
133