forked from jvicu2001/Simple-Weather-Overlay
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
164 lines (158 loc) · 8.66 KB
/
index.html
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
<!doctype html>
<html lang=es>
<head>
<meta charset="utf-8">
<title>Simple Weather Overlay</title>
<meta name="author" content="Jorge Vicuña">
<meta name="description" content="An (OBS/Xplit) Browser Overlay that shows current weather of an specific place.">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400i&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="jumbotron">
<h1 class="display-2">Simple Weather Overlay</h1>
<p>Have your local or somewhere else's current weather conditions shown in your stream!<br>
You'll need a Free API key from OpenWeather to use this <a href="https://openweathermap.org/price#commonquestions">(Registration needed).</a></p>
<a href="https://github.com/jvicu2001/Simple-Weather-Overlay">Source code here.</a>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<form>
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text">OpenWeather's API key</span></div>
<input name="api_key" type="text" class="form-control" required>
</div>
<div class="row">
<div class="input-group mb-3 col-lg-12 col-xl-6">
<div class="input-group-prepend"><span class="input-group-text">City</span></div>
<input type="text" class="form-control place_field" id="city_input" name="city" required>
<div class="input-group-append hover-pointer" onclick="GetPosition()">
<span class="input-group-text">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-geo-alt" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
</svg>
</span>
</div>
</div>
<div class="input-group mb-3 col-lg-12 col-xl-6">
<div class="input-group-prepend"><span class="input-group-text">Country</span></div>
<select name="country" class="custom-select place_field" id="country-list">
<option value="" selected>Choose a Country</option>
</select>
</div>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text">Language</span></div>
<select name="lang" class="custom-select" id="language-list">
<option value="" selected>Language</option>
</select>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend"><span class="input-group-text">Measure Units Format</span></div>
<select name="units" class="custom-select" id="units">
<option selected value="">Standard</option>
<option value="metric">Metric</option>
<option value="imperial">Imperial</option>
</select>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" class="custom-control-input" id="theme" name="theme">
<label class="custom-control-label" for="theme">Dark Theme</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" class="custom-control-input" id="show-location" name="show-place">
<label class="custom-control-label" for="show-location">Show location?</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" class="custom-control-input" id="next-day-minimum" name="next-min">
<label class="custom-control-label" for="next-day-minimum">Show next day's minimum? <a id="why-next-min-info" data-toggle="modal" data-target="#next-min-info">(why)</a></label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" class="custom-control-input" id="full-description" name="full-description">
<label class="custom-control-label" for="full-description">Full Weather Description? (Affected by language)</label>
</div>
<div class="custom-control custom-switch custom-control-inline">
<input type="checkbox" class="custom-control-input" id="min-max_text" name="min-max_text">
<label class="custom-control-label" for="min-max_text">Show Min/Max text?</label>
</div>
<input type="hidden" id="lat_field" name="lat" value="">
<input type="hidden" id="lon_field" name="lon" value="">
</form>
<button id="generatePreview" type="button" class="btn btn-primary d-none d-lg-inline" onclick="makeURL();">Preview</button>
<button style="margin: 5px;" type="button" class="btn btn-primary" data-toggle="modal" data-target="#finalResultModal" onclick="makeURL();previewSize();">
Get URL
</button>
</div>
<div class="col-lg-8 d-none d-lg-block">
<div style="text-align: center; margin: 5px;">
<h3>Preview <span style="font-size: 0.5em;">(Resize me!)</span></h3>
</div>
<div id="preview">
<iframe class="border" id="preview-iframe" src="http://placekitten.com/590/285" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="finalResultModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Almost done!</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Now go to your streaming software and add a Browser/Website Source with this URL:</p>
<span class="rounded text-light bg-secondary" id="result-url" style="display:flex; padding: 5px; overflow:auto;"></span>
<p>With width set at <span id="preview-width"></span>px and height at <span id="preview-height"></span>px<span class="d-lg-none"> for compact view.
<br>For shorter but wider view use wifth 900px and height 212px</span>.</p>
<p>Happy Streaming!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="next-min-info" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Why shoud I use the next day's minimum temperature?</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>The OpenWeather's API this site uses doesn't keep the actual minimum temperature data of the day. Instead it changes the value to the minimum between the current hour and the end of the day.</p>
<p>This site only collects the minimum and maximum temperature once per day, so the later in the day you start using this site, the worse the effect explained above will be.</p>
<p>To circumvent this, you can simply show the next day's minimum. <i>It shouldn't be a problem, right?</i></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="js/GeoPosition.js"></script>
</body>
</html>