-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
140 lines (123 loc) · 5.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- per getbootstrap.com The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.2.0.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
//on website, try using src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBK-8PYAqn8tT9zZRXenPIZsINLtYYdM3k">
</script>
<!-- Bootstrap - manages grid layout for different browswers-->
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="styles/map-page.css" rel="stylesheet">
<title>Palm Beach Epic</title>
</head>
<body>
<div class="container-fluid">
<header>
<h1>The Palm Beach Epic - 70 Mile Road and Off-Road Ride</h1>
</header>
<!-- Will be populated with points of interest used on a map. -->
<div class="row">
<div class="col-md-6">
<article>
Search <input data-bind="textInput: searchTerm" id=
"searching">
<h3>Parking and Resupply ( <span data-bind=
"text: searchedWaypoints().length"></span>)</h3>
<ul data-bind="foreach: searchedWaypoints">
<li data-bind="text: title">
</li>
</ul>
<div class="row">
<div class="col-sm-4">
<img class = "my-profile-pic" src="images\florida-cypress-swamp-biking.jpg" alt="hike a bike on swamp buggy trail">
</div>
<div class = "col-sm-8">
<aside>
For added adventure, check out the swamp buggy trails
branching out from the main grade in Corbett WMA.
</aside>
</div>
</div>
</article>
</div>
<div class="col-md-6">
<article>
<h3>About the Ride</h3>
<p>This all day ride tours beautiful sections of the
Northern Everglades. Beginning at the Publix grocery store
paking lot in Jupiter Farms, the route winds through
Riverbend Park onto the Bluegill trail and over to Grassy
Waters. These sections are mostly shellrock, but Grassy
Waters may have some deeper sand. Also the section of
Bluegill trail between PGA and the B-Line isn't actually
built yet, so be ready to bump along in the grassy
doubletrack. Grassy Waters is a great spot for birding and
wildlife viewing. After leaving Grassy Waters preserve,
there are some gravel and paved roads in
residential/agricultural neighborhoods. Be sure to stop at
the shopping plaza in the Acreage for resupply. It is the
last chance to buy food or water until the end of the
route.</p>
<p>The western section of the route traverses the Corbett
Wildlife Management Area. Wear some blaze orange in hunting
season. The road is open to cars, but because it is remote
and in terrible condition, there are few vehicles. After
Corbett, the route travels the gravel roads in Hungryland
WMA, then returns east on the old Indiantown Grade. The
western section of the Indiantown Grade is rough
doubletrack, crossing several swales. Riders may want to
bail out and finish via the paved road in the wet season
(July - Sept) when the swales are full of water and the
grass gets long. There are alligators and water moccasins
and stuff back there.</p>
</article>
</div>
</div>
<!--end inner row-->
<!--
Uncomment this section if you need to see what the heck the viewmodel is thinking
<h3>All waypoints (<span data-bind="text: waypoints().length"> </span>)</h3>
<ul data-bind="foreach: waypoints">
<li data-bind= "text: title"> </li>
</ul>
<a href="gpsdata/palm-beach-epic-wpts.json">See json</a>
<h2>Debug</h2>
<pre data-bind="text: JSON.stringify(ko.toJS($data), null, 2)"></pre> -->
<div class="row">
<div class="col-md-6">
<div class="map-container">
<div class="map-canvas" id="map-canvas">
<a href="images/palm-beach-epic.jpg" alt="map photo">Googlemap Failed
to Load. Click here to see basic map</a>
</div>
</div>
</div>
<div class="col-md-6" id="strava-container">
<h3 id="strava-header">Strava</h3>
<h4 id="strava-links">Leaders: Riverbend to Sandhill Park
Segment</h4>
<!-- Table of Strava Results will land here -->
</div>
</div>
<!--end outer row div-->
</div>
<!--end container div-->
<!--These scripts go at end b/c page breaks if it tries to do stuff before loading these.-->
<script src="js/map-page.js"></script>
<!-- getbootstrap says "Include all compiled plugins (below), or include individual files as needed". dont know that I am using any?-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>