-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (193 loc) · 10.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>NYC Connector - Find places to volunteer at, donate to, or find help</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123480859-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123480859-1');
</script>
<script src="bower_components/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="bower_components/smooth-scroll.js/dist/smooth-scroll.polyfills.min.js"></script>
<link rel="icon" type="image/png" href="https://www.nycconnector.org/favicon.png" />
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
<link href="assets/css/main.css" rel="stylesheet" type="text/css" />
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-light pl-5" id="main_nav">
<a class="navbar-brand" href=""><img style="" src="assets/icons/logo1.png" /></a><br>
<br>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-links" aria-controls="navbar-links" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse ml-5" id="navbar-links">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link link" data-scroll href="#find_resources">Find Resources</a>
</li>
<li class="nav-item">
<a class="nav-link link" data-scroll href="#mission">Mission</a>
</li>
<li class="nav-item">
<a class="nav-link link" data-scroll href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid mt-5" id="info_jumbotron">
<div id="nyc_background" class="pt-5">
<div class="container" id="info_text">
<h1 class="display-4 text-center">NYC Connector</h1>
<h3 class="text-center"><em>Connecting individuals and resources!</em></h3><br>
<p class="lead">Built by <a style="color: skyblue;" href="https://www.codingforimpact.org" target="_blank">Coding for Impact</a>, <span class="font-weight-bold">NYC Connector</span> is a project which allows users to easily find and locate places near them where they can volunteer at, donate to, or find help at, such as soup kitchens, food pantries, SNAP centers, senior centers, food scrap drop-off sites, as well as clothing charities, homeless shelters, and medical centers. Enter an address or zip code and select the places you want to see, and resources nearby will be displayed on the map. Click on a pinpoint marker to view information about the resource. It's as easy as that!<br>
<br>
<a style="color: skyblue;" href="https://www.codingforimpact.org" target="_blank">
Coding for Impact</a> is an international student-run organization that delivers technological solutions
to nonprofits and charities around the world.
</p>
<br>
<br>
<br>
<br>
<!--<button type="button" class="btn btn-success">See the code</button>-->
</div>
</div>
</div>
<div class="jumbotron jumbotron-fluid pt-4" id="find_resources">
<h1 class="display-4 text-center">Find Resources</h1><br />
<div id="images">
<div class="row">
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/soupkitchen.gif">
<figcaption>
<input id="soup_kitchens_checkbox" type="checkbox" /> Soup Kitchens <br />
<img src="assets/icons/orange-dot.png" alt="Orange Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/foodpantry.gif">
<figcaption>
<input id="food_pantries_checkbox" type="checkbox" /> Food Pantries <br /><img src="assets/icons/yellow-dot.png" alt="Yellow Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/snapcenter.gif">
<figcaption>
<input id="snap_centers_checkbox" type="checkbox" /> SNAP Centers <br /><img src="assets/icons/green-dot.png" alt="Green Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/foodscrapdropoffcenter.gif">
<figcaption>
<input id="food_scraps_checkbox" type="checkbox" /> Food Scrap Drop-Off Sites <br /><img src="assets/icons/blue-dot.png" alt="Blue Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/seniorcenter.gif">
<figcaption>
<input id="senior_centers_checkbox" type="checkbox" /> Senior Centers <br /><img src="assets/icons/red-dot.png" alt="Red Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/clothingshelter.gif">
<figcaption>
<input id="clothing_charities_checkbox" type="checkbox" /> Clothing Charities <br /><img src="assets/icons/pink-dot.png" alt="Pink Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/homelessshelter.gif">
<figcaption>
<input id="homeless_shelters_checkbox" type="checkbox" /> Homeless Shelters <br /><img src="assets/icons/purple-dot.png" alt="Purple Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/volunteer.png">
<figcaption>
<input id="volunteer_checkbox" type="checkbox" /> Community Service Centers <br /><img src="assets/icons/lightblue-dot.png" alt="Light Blue Marker" />
</figcaption>
</div>
<div class="icon-group">
<img class="rounded-circle" src="assets/icons/health.png">
<figcaption>
<input id="medical_centers_checkbox" type="checkbox" /> Medical Centers <br /><img src="assets/icons/hospital.png" alt="Light Blue Marker" />
</figcaption>
</div>
</div>
</div><hr><br>
<div class="input-group mb-3" id="zip" style="position: relative;">
<input class="form-control" id="address" placeholder="Enter Address or Zip Code (e.g. 900 Park Avenue)" type="address" />
<div class="input-group-append">
<a data-scroll href="#map"><button class="btn" id="search" type="button">Find</button></a><br />
</div>
</div>
<div id="panel">
<h5 class="text-center mt-3">Click on a pinpoint marker</h5><hr>
</div>
<div id="map"></div>
</div>
<div class="jumbotron jumbotron-fluid" id="mission_jumbotron">
<div class="container">
<h1 class="display-4 text-center" id="mission">Mission</h1><br />
<p class="lead">NYC Connector was built in order to connect the thousands of charities, community service centers, and medical centers based in New York City with the tens of thousands of teenagers and adults looking to give back to the community or find help. You would be surprised to see the number of service opportunities within a couple blocks of where you live. Built by the team at <a style="color: skyblue;" href="https://www.codingforimpact.org" target="_blank">Coding for Impact</a>, a student-led club at Hunter College High School, NYC Connector aims to create a platform for connecting fringe, website-less and often contact-less charities to volunteers, as well as showing the plethora of service opportunities that exist in NYC. <br /><br />Unlike most websites that connect volunteers to charities, NYC Connector combines all different types of charitable non profit institutions constantly looking for people to help them into one website. We utilized and combined the most comprehensive datasets in NYC, resulting in a wide array of resources to choose from. For all individuals looking to volunteer in NYC or find medical help or shelter, our self-built software allows for individuals to view specific resource centers near their address, as well as giving direct contact information. We hope to drive a positive impact in our community with this project, and hope that you are able to utilize this resource to its best.</p>
</div>
</div>
<div class="jumbotron jumbotron-fluid bg-light" style="height: 100%;">
<div class="container">
<h1 class="display-4 text-center" id="contact">Contact</h1><br />
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScEOT5tmg_herTpYeq2L1gz8y6nYvDz3wVQBXzgn2KSUs5JwQ/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0" style="height: 90em; width: 100%;">Loading...</iframe>
</div>
</div>
<script>
var scroll = new SmoothScroll('a[href*="#"]', {
// Selectors
ignore: '[data-scroll-ignore]', // Selector for links to ignore (must be a valid CSS selector)
header: null, // Selector for fixed headers (must be a valid CSS selector)
topOnEmptyHash: true, // Scroll to the top of the page for links with href="#"
// Speed & Easing
speed: 500, // Integer. How fast to complete the scroll in milliseconds
clip: true, // If true, adjust scroll distance to prevent abrupt stops near the bottom of the page
offset: function(anchor, toggle) {
var id = $(toggle).attr("href");
if (id === "#find_resources") {
return 70;
}
if (id === "#contact") {
return 100;
}
if (id === "#map") {
return 85;
}
if (id === "#mission") {
return 100;
}
},
easing: 'easeInOutCubic', // Easing pattern to use
customEasing: function(time) {
// Function. Custom easing pattern
// If this is set to anything other than null, will override the easing option above
// return <your formulate with time as a multiplier>
// Example: easeInOut Quad
return time < 0.5 ? 2 * time * time : -1 + (4 - 2 * time) * time;
},
// History
updateURL: false, // Update the URL on scroll
popstate: false, // Animate scrolling with the forward/backward browser buttons (requires updateURL to be true)
// Custom Events
emitEvents: true // Emit custom events
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<!--<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmPBpjU-XCP5Sg1Nk6_PjGUEYkynGdD2A"></script>
<script src="bower_components/gmaps/gmaps.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>