-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
69 lines (53 loc) · 3.02 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rei-search</title>
<!--Style reset-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css">
<!--Favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon_io/favicon-16x16.png">
<link rel="manifest" href="images/favicon_io/site.webmanifest">
<!--Leaflet CSS for map-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<!-- Custom CSS -->
<link href="index.css" rel="stylesheet" type="text/css">
<!--LeafletJS library for map-->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!--Census citySDK library for map-->
<script src="./citysdk.js"></script>
</head>
<body>
<!--Blurred overlay that prevents using map before starting app-->
<div class="overlay"></div>
<main>
<header>
<h1>rei-search</h1>
</header>
<form method="POST" action="#" id="js-form">
<label for="js-zipcode">Enter a zip code</label>
<input type="text" name="location" id="js-zipcode" placeholder="19103" onfocus="this.placeholder =''" onblur="this.placeholder = '19103'" pattern="(\d{5}([\-]\d{4})?)">
<p>or</p>
<label for="js-city">Enter a city and state</label>
<input type="text" name="location" id="js-city" placeholder="philadelphia, pa" onfocus="this.placeholder =''" onblur="this.placeholder = 'philadelphia, pa'" pattern="([A-Za-z]+\s?)+,?\s?[A-Za-z]{2,}"><br>
<input type="submit" id="js-submit" value="submit">
</form>
<section id="js-instructions">
<h2>Start investing the right way</h2>
<p>Real estate investment decisions should always begin with proper due diligence.</p>
<p>This app is meant to be used by investors to discover and evaluate key statistics about the population and economy of US metropolitan statistical areas, which are geographic regions centered around areas of high population density (i.e., big cities) with integrated economies, in the geography you wish to invest.</p>
</section>
</main>
<!--Map-->
<div id="mapid"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>