-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
101 lines (95 loc) · 4.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Neighborhood History</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Main layout for the map view -->
<header>
<div id="title">
<h1>Historic Architecture in Your Neighborhood</h1>
</div>
<!-- This form triggers a zoom to a new area, and a data reload -->
<form id="search-form" class="pure-form" data-bind="submit: $root.map.zoomToArea">
<input class="search-text" type="text" data-bind="textInput: $root.search.input" placeholder="Find your neighborhood">
<button class="pure-button search-button" type="submit">Go!</button>
</form>
</header>
<main>
<!-- This is only visible when screens are < 768px wide -->
<div class="list-toggle" data-bind="text: $root.list.toggleMessage, click: $root.list.toggleList"></div>
<!-- List view -->
<div class="list-view" data-bind="visible: $root.list.show">
<div class="filters">
<ul class="categories" data-bind="foreach: $root.list.filters">
<li class="category">
<input type="checkbox" data-bind="attr: { value: label },
checked: $root.list.visibleTypes" class="pure-checkbox"/>
<span data-bind="style: { backgroundColor: color }" class="legend-icon"></span>
<span data-bind="text: label"></span>
</li>
</ul>
</div>
<div class="list">
<ul id="properties" data-bind="foreach: $root.list.filteredPlaces">
<li class="property" data-bind="click: $root.list.placeInfo,
event: { mouseover: $root.list.highlightMarker, mouseout: $root.list.clearHighlight }">
<span data-bind="style: { backgroundColor: type().color }" class="legend-icon-small"></span>
<span class="property-label" data-bind="text: title"></span>
</li>
</ul>
</div>
</div>
<div id="map"></div>
</main>
<!-- This is the custom info window -->
<div id="lightbox" data-bind="visible: $root.info.show">
<!-- Neat typography trick from Wes Bos - and accessible, ftw -->
<button class="close-button pure-button" data-bind="click: $root.info.close"
aria-label="Close Account Info Modal Box">×</button>
<h3 data-bind="text: $root.info.placeName"></h3>
<div id="pano" data-bind="html: $root.info.pano"></div>
<div id="wiki" data-bind="html: $root.info.wiki"></div>
</div>
<!-- This is the splash screen / intro screen -->
<div id="intro" data-bind="visible: $root.showIntro">
<h1 class="intro-header">Historic Architecture in Your Neighborhood</h1>
<p>
There are more than 66,000 properties on the National Register of Historic Places
</p>
<p>Find out if there are any near you...</p>
<form id="landing-search" class="pure-form" data-bind="submit: $root.map.zoomToArea">
<input class="search-text" type="text" data-bind="textInput: $root.search.input" placeholder="Search by address, city, or zip">
<button class="pure-button" type="submit">Go!</button>
</form>
<div class="skyline"></div>
<div class="landing-legend">
<ul class="categories" data-bind="foreach: $root.list.filters">
<li class="category">
<span data-bind="style: { backgroundColor: color }" class="legend-icon"></span>
<span data-bind="text: label"></span>
</li>
</ul>
</div>
<div class="credits">
<p>Data provided by the U.S. National Park Service</p>
</div>
</div>
<!-- Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/knockout-3.4.2.js"></script>
<!-- App JS files -->
<script src="js/data.js"></script>
<script src="js/map.js"></script>
<script src="js/app.js"></script>
<!-- The Google Maps JS file-->
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=AIzaSyBbKzsLgpB2VvfTDX0XIEn6lVsd8QaBmQI&v=3&callback=init" onerror="initError()">
</script>
</body>
</html>