-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
247 lines (204 loc) · 12.1 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Secure page against user generated content -->
<!-- With style-src, 'unsafe-eval' allows for things like CSSStyleSheet.insertRule(), and other JavaScript methods. -->
<!-- TODO: Consider allowing image requests over all https connections-->
<meta http-equiv="Content-Security-Policy" content="
default-src 'self' https://rivers.run https://*.rivers.run http://127.0.0.1:* https://maps.googleapis.com https://maps.gstatic.com;
connect-src 'self' https://rivers.run https://*.rivers.run http://127.0.0.1:* https://waterservices.usgs.gov https://docs.google.com https://*.googleapis.com https://maps.gstatic.com https://tile.openstreetmap.org https://mt1.google.com https://itunes.apple.com;
img-src 'self' https://rivers.run https://*.rivers.run http://127.0.0.1:* https://*.googleapis.com https://maps.gstatic.com data: blob: https://mesonet1.agron.iastate.edu;
font-src 'self' https://rivers.run https://*.rivers.run http://127.0.0.1:* data: https://fonts.googleapis.com https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline'"
>
<meta charset="UTF-8">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="apple-itunes-app" content="app-id=1552809249, app-argument=https://rivers.run/">
<!-- Flow Data Preload -->
<!-- Use crossorigin with as="fetch" requests. -->
<link rel="preload" href="flowdata3.json" as="fetch" importance="high" crossorigin>
<!-- River Data Preload -->
<link rel="preload" href="riverdata.json" as="fetch" importance="high" crossorigin>
<!--JavaScript & CSS-->
<link rel="preload" href="packages/index.css" as="style" importance="high">
<link rel="preload" href="packages/allPages.js" as="script" importance="high">
<link rel="preload" href="packages/index.js" as="script" importance="high">
<!-- Progressive Web App Manifest -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#317EFB"/>
<meta name="Description" content="Every River at your Fingertips! Rivers.run contains tons of write-ups from community experts to help you plan your next paddling trip. View our information here!">
<meta name="keywords" content="rivers.run, rivers, whitewater, river info, whitewater info, paddling, paddling info, kayak, canoe">
<!-- iOS is WAY too picky -->
<link rel="apple-touch-icon" type="image/png" href="resources/icons/57x57-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="114x114" href="resources/icons/114x114-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="144x144" href="resources/icons/144x144-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="resources/icons/60x60-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="resources/icons/120x120-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="resources/icons/76x76-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="152x152" href="resources/icons/152x152-Water-Drop.png"/>
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="resources/icons/180x180-Water-Drop.png"/>
<!-- Make sure we have a launch image and can be added -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="rivers.run">
<link rel="apple-touch-startup-image" href="resources/icons/512x512-Water-Drop.png">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- End of Images -->
<!-- Social Media preview -->
<meta property="og:title" content="Rivers.run - Paddling and River Information">
<meta property="og:description" content="River information at your fingertips! Flow info, access points, skill levels, and more, with over 13,000 gauges!">
<meta property="og:image" content="https://rivers.run/resources/images/preview.png">
<meta property="og:url" content="https://rivers.run/">
<meta name="twitter:card" content="summary_large_image">
<title>Rivers.run - Paddling and River Info</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="packages/index.css">
<!-- Consider combining allPages.js and index.js to save a good bit of bandwidth. This will require modifying allPages.js so that it can also use index.js to find the site root.-->
<script src="packages/allPages.js"></script>
<noscript><h1>JavaScript is needed in order to use rivers.run</h1></noscript>
<h1 class="center">River Information</h1>
<div class="searchcontain">
<img id="searchimg" alt="Search Icon" src="resources/SearchIcon.png">
<input id="searchbox" type="text" aria-label="Type in the box to search for a river" placeholder="Search..">
<button id="advancedsearch">Advanced</button>
<button id="addAllToFavorites">Add to Favorites</button>
</div>
<p id="advancedSearchWarning">Advanced search parameters are currently in use. <button class="clearAdvancedSearch">Reset advanced search parameters</button></p>
<div id="legend">
<span id="toolow">Too Low</span>
<span id="lowflow">Low Flow</span>
<span id="midflow">Mid Flow</span>
<span id="highflow">High Flow</span>
<span id="toohigh">Too High</span>
</div>
<div id="Rivers"></div>
<div id="advanced-search-modal" class="modal">
<div class="modal-content">
<span id="advanced-search-modal-close" class="modal-close">×</span>
<button class="clearAdvancedSearch">Reset advanced search parameters</button>
<br><br>
Name
<select id="nameType">
<option value="contains">Contains</option>
<option value="matches">Matches</option>
</select>
<input id="nameQuery" type="text" placeholder="Search Query">
<br>
Section
<select id="sectionType">
<option value="contains">Contains</option>
<option value="matches">Matches</option>
</select>
<input id="sectionQuery" type="text" placeholder="Search Query">
<br>
<label for="stateQuery">State is (codes, comma seperated list):</label>
<input id="stateQuery" type="text" placeholder="Enter States..." list="stateOptions" multiple>
<datalist id="stateOptions"></datalist>
<br>
Skill
<!-- Consider reusing skillToNumber code to avoid excessive duplication-->
<select id="skillQuery1">
<option value="1">Flat Water</option>
<option value="2">Beginner</option>
<option value="3">Novice</option>
<option value="4">Low Intermediate</option>
<option value="5">Intermediate</option>
<option value="6">High Intermediate</option>
<option value="7">Advanced</option>
<option value="8">Expert</option>
</select>
through
<select id="skillQuery2">
<option value="1">Flat Water</option>
<option value="2">Beginner</option>
<option value="3">Novice</option>
<option value="4">Low Intermediate</option>
<option value="5">Intermediate</option>
<option value="6">High Intermediate</option>
<option value="7">Advanced</option>
<option value="8">Expert</option>
</select>
<br><input id="includeUnknownSkill" type="checkbox">Include rivers without skill information<br>
Flow from
<select id="flowQuery1">
<option value="0">Too Low</option>
<option value="0.001">Minimum</option>
<option value="1">Low Flow</option>
<option value="2">Medium Flow</option>
<option value="3">High Flow</option>
<option value="3.999">Maximum</option>
<option value="4">Too High</option>
</select>
to
<select id="flowQuery2">
<option value="0">Too Low</option>
<option value="0.001">Minimum</option>
<option value="1">Low Flow</option>
<option value="2">Medium Flow</option>
<option value="3">High Flow</option>
<option value="3.999">Maximum</option>
<option value="4">Too High</option>
</select>
<br>
<input id="includeDams" type="checkbox">Always include rivers with dams<br>
<input id="includeUnknownFlow" type="checkbox">Include rivers without flow levels<br>
Rating from
<select id="ratingQuery1">
<option value="1">1 Star</option>
<option value="2">2 Stars</option>
<option value="3">3 Stars</option>
<option value="4">4 Stars</option>
<option value="5">5 Stars</option>
</select>
to
<select id="ratingQuery2">
<option value="1">1 Star</option>
<option value="2">2 Stars</option>
<option value="3">3 Stars</option>
<option value="4">4 Stars</option>
<option value="5">5 Stars</option>
</select>
<br>
<input id="includeUnknownRating" type="checkbox">Include rivers without ratings<br>
Writeup
<select id="writeupType">
<option value="contains">Contains</option>
<option value="matches">Matches</option>
</select>
<input id="writeupQuery" type="text" placeholder="Search Query">
<br>
Tags Contains (comma seperated list)
<input id="tagsQuery" type="text" placeholder="List of Tags">
<br>
Normal Search (Same as search box)
<input id="normalSearchBoxOnAdvancedSearch" type="text" placeholder="Normal Search">
<br><br>
<div id="locationSearchPortion">
Located within
<input id="distanceQuery" type="number" placeholder="Distance in Miles">
miles of
<input id="latitudeQuery" type="text" placeholder="Degrees Latitude">
<input id="longitudeQuery" type="text" placeholder="Degrees Longitude">
<br>
<input id="includeUnknownLocation" type="checkbox">Include rivers without GPS coordinates<br>
<button id="calculateCoordinates">Use Device Geolocation Service</button>
<p id="locationProgress"></p>
<div id="ipLocation" class="oldDataWarning"></div>
</div>
<br><br>
Sort the list by:
<select id="sortQuery">
<option value="none" selected>No Sort</option>
<option value="alphabetical">Alphabetical</option>
<option value="rating">Rating</option>
<option value="skill">Skill</option>
<option value="class">Class</option>
<option value="running">Flow</option>
</select>
<input id="sortQueryReverse" type="checkbox">Reverse List<br>
<p id="searchlink"></p>
</div>
</div>
<script src="packages/index.js"></script>
</body>
</html>