-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
231 lines (224 loc) · 14.8 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
<!-- Copywrite Dominik Honzak (c) 2024 -->
<!DOCTYPE html>
<html>
<head>
<html lang="en" xml:lang="en" xmlns= "http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Orienteering, Takoma Park</title>
<link rel="icon" type="image/x-icon" href="/EagleProject/images/icon.png" >
<meta name="description" content="Orienteering Takoma Park, an Eagle Scout Project created by Dominik Honzak">
<meta name="url" content="https://dahonzak.github.io/EagleProject/">
<meta property="og:title" content="Orienteering, Takoma Park">
<meta property="og:type" content="website">
<meta property="og:url" content="https://dahonzak.github.io/EagleProject/">
<meta property="og:image" content="/EagleProject/images/icon.png">
<meta property="og:description" content="Orienteering Takoma Park, an Eagle Scout Project created by Dominik Honzak">
<meta name="theme-color" content="orange">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/mobile.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="google-site-verification" content="jd3ydL8eOn__ZNI7blTVkEaDsqllxdKRLuz42Y2-47E" />
<meta name="robots" content="noodp,noydir" />
<link rel="manifest" href="/EagleProject/manifest.json">
</head>
<body>
<div id='bg'></div>
<div id='bg_overlay'></div>
<div class='container'>
<!-- 0 -->
<div class='tab show'>
<div id="box"></div>
<h1>Orienteering</h1>
<h2>Takoma Park, MD</h2>
<div class='button mainPageBtn' onclick='tab(1);'>Get Started</div>
<div class='button mainPageAlt' onclick='tab(10);'>About</div>
</div>
<!-- 1 -->
<div class='tab'>
<h1>Choose</h1>
<div class='choice'>
<div id="eventbanner"></div>
<div onclick='tab(2);' class="bgbl">Quick Start</div>
<div onclick='tab(5);'>New to Orienteering?</div>
<div onclick='tab(12);'>How to use this Application?</div>
<div onclick='location.href="https://forms.gle/FRnQaFRk9rA4GxM36";'>Report Bug</div>
<div onclick='tab(14);'>More Orienteering</div>
<!-- bugs to google form -->
</div>
</div>
<!-- 2 -->
<div class='tab'>
<h1>Maps</h1>
<div id='maps'></div>
</div>
<!-- 3 -->
<div class='tab'>
<h1>Map Details</h1>
<h2 id="mapname"></h2>
<img id="mapdisplay" src="" onclick="window.open(this.src, '_blank');"></img>
<div id="mapdetail">
</div>
<div class='button mainPageBtn' onclick='printMap();'>Print</div>
<div class='button mainPageBtn' onclick='tab(17);document.getElementById("name").focus();'>Start Course</div>
<div class='button mainPageBtn' id="mapleaders">Leaderboard</div>
<div class="button mainPageBtn" onclick="window.open('https://www.google.com/maps/place/38%C2%B058\'57.0%22N+77%C2%B000\'37.6%22W/@38.9825433,-77.0111951,17.68z/data=!4m4!3m3!8m2!3d38.982498!4d-77.0104372?entry=ttu', '_blank');">Start Location</div>
<div class='button mainPageAlt' onclick='tab(2);'>Back</div>
<!-- Course Download Map or print and see details -->
</div>
<!-- 4 -->
<div class='tab'>
<h1>Results</h1>
<table class='courseTable'>
<tr>
<th>Controls</th>
<th>Distance</th>
</tr>
<tr>
<td><span id='courseControlLength_off'>--</span></td>
<td><span id='courseDistance_off'>0.0/0.0km</span></td>
</tr>
</table>
<table class='courseTable'>
<tr>
<th>Elevation Gain</th>
<th>Average Split</th>
</tr>
<tr>
<td><span id='courseElevation_off'>0m</span></td>
<td><span id='courseSplit_off'>0:00</span></td>
</tr>
</table>
<h1 class='time'>00:00</h1>
<div class='button mainPageBtn' id='shareButton'>Share</div>
<!-- Course Time as well as share button and other course details -->
</div>
<!-- 5 -->
<div class='tab'>
<h1>Learn Orienteering</h1>
<video width="320" height="240" poster="images/icon.png" controls>
<source src="video_sound/learn.mp4" type="video/mp4">
</video>
<h2>Double Click to View</h2>
<div class="textblock" onclick="dropdown(this);"><h3>What is Orienteering?</h3><p1>Orienteering is a group of sports that involve using a map and compass to navigate from point to point in diverse and usually unfamiliar terrain whilst moving at speed. Participants are given a topographical map, usually a specially prepared orienteering map, which they use to find control points. Originally a training exercise in land navigation for military officers, orienteering has developed many variations. Among these, the oldest and the most popular is foot orienteering. For the purposes of this article, foot orienteering serves as a point of departure for discussion of all other variations, but almost any sport that involves racing against a clock and requires navigation with a map is a type of orienteering. (<a href='https://en.wikipedia.org/wiki/Orienteering'>Learn More</a>)</p1></div>
<!-- <div class="textblock" onclick="dropdown(this);"><h3></h3><p></p></div> -->
<div class="textblock" onclick="dropdown(this);"><h3>Goal</h3><p1>Go from point to point listed on a map, in order, as fast as possible. Starting from the triangle and moving sequentially then ending on the double circle.</p1></div>
<div class="textblock" onclick="dropdown(this);"><h3>How to use a Map?</h3><p1>When you first look at an orienteering map you will notice small squigly lines all over the map. These lines are called contour lines. Countour lines represent increments in elevation, the closer they are together the steeper the incline. This is because each contour line is spaced apart by exactly the same amount. Maps on this course only really include cotour lines and some roads which may be helpful for finding controls. You can try matching your enviornment to the contour lines and if you face the map the same direction it becomes a replacement for a compass.</p1></div>
<div class="textblock" onclick="dropdown(this);"><h3>How to use a Compass?</h3><p1>Hold your compass flat with the direction of travel arrow pointing away from you and directly at the landmark. Now rotate the bezel (outer ring/dial) until the magnetized needle is inside the orienting arrow (orienting arrow should be below the red needle). Look at the index line to read the bearing you've just captured keep the compass facing the same direction (make sure that there are no items near you that will effect the magnet: mainly large metal objects.)<img src='/EagleProject/images/compass.jpg' onclick="window.open(this.src, '_blank');"/></p1></div>
<div class="textblock" onclick="dropdown(this);"><h3>How to use a Map and Compass in combination?</h3><p1>To use a compass and a map is really quite simple, we will take the previous example on how to use a compass and apply it to the map. So first make sure you map is pointing north (red needle on compass) and the compass is facing the same direction as the map. Now keeping the map pointing north move the side of the compass to align with a line between your location and a control point. Now rotate the compass dial or outer ring just as you did before in how to use a compass. Whatever way the compass is pointing should be the direction to your next point. (important you must move in a straight line otherwise the bearing will be incorrect and you will end up somewhere entirely else).</p1></div>
<div class="textblock" onclick="dropdown(this);"><h3>How to use the Website/Application?</h3><p1>Open map selection select a map you want to run if you are new try an easier map first.<ul><li><button>Browse Maps</button></li><li>Print out the map or just use the web version.</li><li>Start your course navigate to the start point indicated as a triangle on the map.</li><li>Click <b>Confirm</b> to start the course.</li></ul></p1></div>
<div class='button mainPageAlt' onclick='tab(2);'>Browse Maps</div>
<div class='button mainPageAlt' onclick='tab(1);'>Back</div>
</div>
<!-- 6 -->
<div class='tab' id='course'>
<h1 id='courseName_on'></h1>
<table class='courseTable'>
<tr>
<th>Controls</th>
<th>Distance</th>
</tr>
<tr>
<td><span id='courseControlLength_on'>--</span></td>
<td><span id='courseDistance_on'>0.0km</span></td>
</tr>
</table>
<div id='courseDifficulty_on'></div>
<div class='control' onclick="checkLocation();">Start</div>
<h1 class='time'>00:00</h1>
<div class='distance'>0.0 km</div>
<div class='button mainPageAlt' onclick="openOptions();"><i class='fa fa-gear'></i> Options</div>
<div class="button mainPageBtn" onclick="checkLocation();">Confirm</div>
<!-- Course with timer and check location button -->
</div>
<!-- 7 -->
<div class='tab'>
<h1>Confirmed</h1>
<h2></h2>
<div class='circle lime'>✓</div>
<!-- Course with timer and check location button -->
</div>
<!-- 8 -->
<div class='tab'>
<h1>Inaccuracy</h1>
<h2 id="testing"></h2>
<h2>Check your accuracy or position and try again.</h2>
<div class='circle red'>×</div>
<!-- Course with timer and check location button -->
</div>
<!-- 9 -->
<div class='tab' id='course'>
<h1>Options</h1>
<div class='button mainPageBtn' onclick='newGame();'>Quit Course</div>
<div class='button mainPageBtn' onclick='skipBtn();'>Skip Control</div>
<div class='button mainPageBtn' onclick='openMap();'>View Map</div>
<div class='button mainPageBtn' onclick='openFullscreen();'>Enter Fullscreen</div>
<div class='button mainPageBtn' onclick='hotcoldmode();'>HotCold (Testing)</div>
<!-- <div class='button mainPageBtn' onclick='closeFullscreen();'>Exit Fullscreen</div> -->
<div class='button mainPageAlt' onclick='tab(6);'>Back</div>
</div>
<!-- 10 -->
<div class='tab'>
<h1>About</h1>
<h2>Orienteering Takoma Park Eagle Scout Project</h2>
<p>Hello, my name is Dominik Honzak and I created this website as part of my 2024 Eagle Scout project. This website was created entirely from scratch using the Replit IDE and hosted on Github static pages. I came up with this idea after many brainstorming sessions with friends and family. The idea of making an Eagle Project related to orienteering originally came from a family friend that has helped me through scouting for many years. I then develpoed this idea, looked at things like time constraints and my personal skills. Programming being one of my best skills I figured I could throw together a website like this. Although simplistic in theory its an innovative idea, nothing remotely similar could be found anywhere. I even tried using AI but because of its complexities and the complete lack of data/documentation on website geolocation I was unsuccessful in finding any outside information that would have been helpful to creating this project. This tool took a lot of time to create and I hope it can be put to good use. I hope this tool can help inspire many to learn how to use a map and a compass or to just get out of the house and exercise.</p>
<div class='button mainPageAlt' onclick='tab(0);'>Back</div>
</div>
<!-- 11 -->
<div class='tab'>
<h1>Connection</h1>
<h2 id="testing"></h2>
<h2>Your accuracy is too low to confirm that you are in the correct area.</h2>
<div class='circle blue'>?</div>
<!-- Course with timer and check location button -->
</div>
<!-- 12 -->
<div class='tab'>
<h1>Tutorial</h1>
<h2>How to use the orienteering application?</h2>
<p>If you have done orienteering before this application implements all parts of orienteering except the compass. When you open <b class="blue hover" onclick="tab(2);">Quickstart</b> there will be maps listed below the legend. If you click on one of the courses, it then opens so that you can then print the map and start the course. Alternatively while on the course you can press the "Options" button and "View Map" to see the map. <br><br>When you have arrived at your first destination (the start) click confirm, to confirm you are in the right location. Continue this process to the end of the course.<br><br> While on the course check the bottom of the screen where it shows your accuracy, if the accuracy is too high (above 15 m) then wait until it stablizes and try again. <br><br>If accuracy is still too high it may be a problem with the device, connection, or internet browser. If you do not see the accuracy bubble at the bottom of the screen make sure location services are turned on for both your phone and the website page. </p>
<div class='button mainPageAlt' onclick='tab(1);'>Back</div>
</div>
<!-- 13 -->
<div class='tab'>
<h1 id="filter_name"></h1>
<div id="filtered"></div>
<div class='button mainPageAlt' onclick='tab(2);'>Back</div>
</div>
<!-- 14 -->
<div class='tab'>
<h1>More Orienteering</h1>
- <b class="blue hover" onclick="location.href='https://www.qocweb.org/'">Local Orienteering Club - QOC</b><br>
- <b class="blue hover" onclick="location.href='https://orienteeringusa.org/'">Orienteering USA</b><br>
- <b class="blue hover" onclick="location.href='https://en.wikipedia.org/wiki/Orienteering'">Wikipedia</b><br>
- <b class="blue hover" onclick="location.href='https://filestore.scouting.org/filestore/Merit_Badge_ReqandRes/Orienteering.pdf'">Orienteering Boy Scout Merit Badge</b><br>
- <b class="blue hover" onclick="location.href='https://www.girlscouts.org/en/activities-for-girls/juniors/junior-orienteering-badge-activity.html'">Girl Scouts</b><br><br><br>
<div class='button mainPageAlt' onclick='tab(1);'>Back</div>
</div>
<!-- 15 -->
<div class='tab'>
<h1 id="eventname"></h1>
<div id="eventbannersub"></div>
<h3 id="eventtime"></h3>
<div class='button mainPageBtn' id="eventbtn">Location</div>
<div class='button mainPageAlt' onclick='tab(1);'>Back</div>
</div>
<!-- 16 -->
<div class='tab'>
<h1>LeaderBoard</h1>
<h2 id="leaderboardtitle"></h2>
<div id="leaderboard"></div>
<div class='button mainPageAlt' onclick='tab(1);'>Back</div>
</div>
<!-- 17 -->
<div class='tab'>
<h1>Name</h1>
<input id="name" type="text" placeholder="Type your name here..." maxlength="15" autocomplete="off" />
<div class='button mainPageBtn' onclick='setName();'>Submit</div>
</div>
<div class="footer"></div>
</div>
<script src="js/firebase.js" type="module"></script>
<script src="js/script.js"></script>
</body>
</html>