-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
505 lines (423 loc) · 22.5 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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>OptBnb</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/gmaps.css" rel="stylesheet">
<link href="css/tile.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<script src="js/Chart.js"></script>
<!-- Socket Stuff -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<style>
.bg-primary {
background-color: #FF5A60 !important;
}
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
</style>
</head>
<body style="background-color: #EFF3F4" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img src="img/optbnbLogo.png" alt="Airbnb logo" height="40" width="40"><img src="img/optbnbText.png" height="40" width="85"></a></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#trends">Trends</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#chatsection">Chat</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="https://github.com/kyle8998/Airbnb-Optimizer">Source Code</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="headsize bg-primary text-white">
<div class="container text-center">
<h1>Optimize Your Airbnb Listing!</h1>
<p class="lead">Enter your neighbourhood or geocoordinates below</p>
<!-- Form -->
<!-- <form class="startform form-inline"> -->
<div class="startform form-inline">
<p style="color:black" id="missinginfo"></p>
<!-- <label class="mr-sm-2" for="inlineFormCustomSelect"></label> -->
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="select_neighbourhood">
<option selected>Neighbourhood</option>
<option value="1">Bayview</option>
<option value="2">Bernal Heights</option>
<option value="3">Castro/Upper Market</option>
<option value="4">Chinatown</option>
<option value="5">Crocker Amazon</option>
<option value="6">Diamond Heights</option>
<option value="7">Downtown/Civic Center</option>
<option value="8">Excelsior</option>
<option value="9">Financial District</option>
<option value="10">Glen Park</option>
<option value="11">Golden Gate Park</option>
<option value="12">Haight Ashbury</option>
<option value="13">Inner Richmond</option>
<option value="14">Inner Sunset</option>
<option value="15">Lakeshore</option>
<option value="16">Marina</option>
<option value="17">Mission</option>
<option value="18">Nob Hill</option>
<option value="19">Noe Valley</option>
<option value="20">North Beach</option>
<option value="21">Ocean View</option>
<option value="22">Outer Mission</option>
<option value="23">Outer Richmond</option>
<option value="24">Outer Sunset</option>
<option value="25">Pacific Heights</option>
<option value="26">Parkside</option>
<option value="27">Potrero Hill</option>
<option value="28">Presidio</option>
<option value="29">Presidio Heights</option>
<option value="30">Russian Hill</option>
<option value="31">Seacliff</option>
<option value="32">South of Market</option>
<option value="33">Treasure Island/YBI</option>
<option value="34">Twin Peaks</option>
<option value="35">Visitacion Valley</option>
<option value="36">West of Twin Peaks</option>
<option value="37">Western Addition</option>
</select>
<!-- <label class="mr-sm-2" for="inlineFormCustomSelect"></label> -->
<select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="select_room">
<option selected>Rooms Available</option>
<option value="2">One</option>
<option value="3">Two</option>
<option value="4">Three</option>
<option value="5">Four or more</option>
</select>
<input type="Latitude" class="geocodeForm form-control" id="inputLatitude" placeholder="Latitude (optional)">
<input type="Longitude" class="geocodeForm form-control" id="inputLongitude" placeholder="Longitude (optional)">
<div>
<button onclick="optimize()" style="margin-top:.5rem"class="btn btn-primary">Optimize</button>
</div>
<hr>
<div id="loader" style="display: none" class="loader">Loading...</div>
<p id="optprice" class="optprice"><p>
<p id="estincome" class="estincome"><p>
<!-- </form> -->
</div>
</header>
<section style="height: 22.5em" id="map">
<div class="container2">
<div class="row">
<div class="col-lg-8 mx-auto">
<hr style="height:300pt; visibility:hidden;" />
</div>
</div>
</div>
</section>
<br>
<section id="trends" class="container_tile">
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile is-parent">
<article class="tile is-child notification">
<!-- <p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p> -->
<div class="content">
<h1>Trends</h1>
<h2 style="color:gray">Average Listing Price in Each Neighbourhood</h2>
<button type="button" class="btn btn-info" onclick="showgraph1()">1 Room</button>
<button type="button" class="btn btn-info" onclick="showgraph2()">2 Rooms</button>
<button type="button" class="btn btn-info" onclick="showgraph3()">3 Rooms</button>
<button type="button" class="btn btn-info" onclick="showgraph4()">4+ Rooms</button>
<!-- <hr style="height:2pt; visibility:hidden;" /> -->
<div class="col-lg-8 fixed_graph">
<!-- First CoL bar graph -->
<div id="1room" style="display: none">
<canvas id="col_bar" width="120" height="100"></canvas>
</div>
<div id="2room" style="display: none">
<canvas id="col_bar2" width="120" height="100"></canvas>
</div>
<div id="3room" style="display: none">
<canvas id="col_bar3" width="120" height="100"></canvas>
</div>
<div id="4room" style="display: none">
<canvas id="col_bar4" width="120" height="100"></canvas>
</div>
</div>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<div class="content">
<hr style="height:60pt; visibility:hidden;" />
<!-- <p class="title">How much does a AirBnb cost in my neighbourhood?</p> -->
<div class="testing">
<p class="subtitle is-4">How much does a AirBnb cost in my neighbourhood?</p>
<div class="content">
<p>The cost of living varies significantly across the world. When isolating the scope down to one city, San Francisco, we found that the cost of living still significantly changed based on what neighbourhood you live in. </p>
<p>We have graphed the average cost of living for each San Francisco neighbourhood based on the number of rooms available. The results are quite surprising! Each color on the graph symbolizes a different cost of living relative to the city. Green represents a cheaper area, blue is the average, red is on the expensive side, and blank is an outlier due to the lack of data.</p>
<p>From the data we can see that places such as Bayview or Crocker Amazon are consistently on the cheap end whereas places such as Russian Hill or South of Market are quite expensive.</p>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="trend2" style="background-color: rgb(242, 241, 239); padding: 50px 0">
<div class="tile is-ancestor">
<div style="padding-left: 4em; padding-right: 4em" class="tile is-parent">
<article class="tile is-child notification">
<p class="subtitle is-4">Do Ratings Really Matter?</p>
<div class="content">
<p>The short answer is yes. Ratings are one of the most important factors that a person looks at when looking for a place to stay. Nobody wants to stay in a place where the host has a bad reputation. Always be sure to take care of your guests!</p>
<p>We have visualized the average ratings for each neighbourhood in terms of Accuracy, Cleanliness, Check-in, Communication, Location, and Value. The ratings on the graph start at 8/10 to better contrast the different neighbourhoods. San Francisco is a highly competitive area, and in order to compete as a host, you must strive for high ratings.</p>
<p>A good way to stand out is to strive for perfection in a lacking area for your neighbourhood. For example Golden Gate Park is lacking a bit in cleanliness. As a host you could put cleanliness at a high priority to stand out in the area.</p>
<p class="subtitle is-4">What are the Best and Worst Neighbourhoods?</p>
<p> Whether you're looking to invest in buying properties or just a place to stay in San Francisco, you will most likely be looking for a highly rated area. Here are the top three areas with the most positive reviews.</p>
<b>Top Three</b>
<ul>
<li>Presidio - Overall Score: 97.67/100</li>
<li>Diamond Heights - Overall Score: 97.00/100</li>
<li>Presidio Heights - Overall Score: 96.35/100</li>
</ul>
<b>Worst Three</b>
<ul>
<li>Golden Gate Park - Overall Score: 87.75/100</li>
<li>Downtown/Civic Center - Overall Score: 89.66/100</li>
<li>Bayview - Overall Score: 91.01/100</li>
</ul>
</div>
</article>
</div>
<!-- Graph -->
<div style="width: 40em" class="media-stretch tile is-parent is-7">
<article class="tile is-child notification">
<p style="color:gray" class="title">In-depth Rating Analysis</p>
<!-- <p class="subtitle">With some content</p> -->
<div class="content">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Neighbourhood
</button>
<div class="form-control dropdown-menu scrollable-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" onclick="showradar1()">Bayview</a>
<a class="dropdown-item" onclick="showradar2()">Bernal Heights</a>
<a class="dropdown-item" onclick="showradar3()">Castro/Upper Market</a>
<a class="dropdown-item" onclick="showradar4()">Chinatown</a>
<a class="dropdown-item" onclick="showradar5()">Crocker Amazon</a>
<a class="dropdown-item" onclick="showradar6()">Diamond Heights</a>
<a class="dropdown-item" onclick="showradar7()">Downtown/Civic Center</a>
<a class="dropdown-item" onclick="showradar8()">Excelsior</a>
<a class="dropdown-item" onclick="showradar9()">Financial District</a>
<a class="dropdown-item" onclick="showradar10()">Glen Park</a>
<a class="dropdown-item" onclick="showradar11()">Golden Gate Park</a>
<a class="dropdown-item" onclick="showradar12()">Haight Ashbury</a>
<a class="dropdown-item" onclick="showradar13()">Inner Richmond</a>
<a class="dropdown-item" onclick="showradar14()">Inner Sunset</a>
<a class="dropdown-item" onclick="showradar15()">Lakeshore</a>
<a class="dropdown-item" onclick="showradar16()">Marina</a>
<a class="dropdown-item" onclick="showradar17()">Mission</a>
<a class="dropdown-item" onclick="showradar18()">Nob Hill</a>
<a class="dropdown-item" onclick="showradar19()">Noe Valley</a>
<a class="dropdown-item" onclick="showradar20()">North Beach</a>
<a class="dropdown-item" onclick="showradar21()">Ocean View</a>
<a class="dropdown-item" onclick="showradar22()">Outer Mission</a>
<a class="dropdown-item" onclick="showradar23()">Outer Richmond</a>
<a class="dropdown-item" onclick="showradar24()">Outer Sunset</a>
<a class="dropdown-item" onclick="showradar25()">Pacific Heights</a>
<a class="dropdown-item" onclick="showradar26()">Parkside</a>
<a class="dropdown-item" onclick="showradar27()">Potrero Hill</a>
<a class="dropdown-item" onclick="showradar28()">Presidio</a>
<a class="dropdown-item" onclick="showradar29()">Presidio Heights</a>
<a class="dropdown-item" onclick="showradar30()">Russian Hill</a>
<a class="dropdown-item" onclick="showradar31()">Seacliff</a>
<a class="dropdown-item" onclick="showradar32()">South of Market</a>
<a class="dropdown-item" onclick="showradar33()">Treasure Island/YBI</a>
<a class="dropdown-item" onclick="showradar34()">Twin Peaks</a>
<a class="dropdown-item" onclick="showradar35()">Visitacion Valley</a>
<a class="dropdown-item" onclick="showradar36()">West of Twin Peaks</a>
<a class="dropdown-item" onclick="showradar37()">Western Addition</a>
</div>
</div>
<canvas id="radar_chart" class="radarmedia" width="100" height="100"></canvas>
<h3 id="overallscore" style="color: #363636" class="optprice">Overall Rating: 100</h3>
<!-- <canvas id="scatter" width="300" height="200"></canvas> -->
</div>
</article>
</div>
</div>
</section>
<section style="padding: 50px 0" id="trend3">
<div class="tile is-ancestor">
<div class="tile is-vertical is-8">
<div class="tile is-parent">
<article class="tile is-child notification">
<!-- <p class="title">Wide column</p>
<p class="subtitle">Aligned with the right column</p> -->
<div class="content">
<!-- <h1>Trends</h1> -->
<h2 style="color:gray">Average Price vs. Bed/Bath Ratio</h2>
<canvas id="line-chart" width="700" height="450"></canvas>
</div>
</article>
</div>
</div>
<div class="tile is-parent">
<article class="tile is-child notification">
<div class="content">
<hr style="height:40pt; visibility:hidden;" />
<!-- <p class="title">How much does a AirBnb cost in my neighbourhood?</p> -->
<div class="testing">
<p class="subtitle is-4">How Many Bathrooms Should I Provide?</p>
<div class="content">
<p>This is something that can vary depending on the guest. You might believe that more bathrooms are always better, but that is not always the case. Sometimes having too many bathrooms may be a nuisance!</p>
<p>We graphed the ratio between rooms to bathrooms and their respective prices. From the data we can see that the ideal amount of bathrooms is usually the number of rooms or one less.</p>
<p>While more bathrooms often lead to more expensive prices, your profit is not always more. For example in a single bedroom listing, the price actually gets cheaper when going up to three or four bathrooms. Additionally as a host, the cost it takes to invest in additional bathroom is more than you think because of the cost and cleaning. Because of that the profit you may make for four bathrooms in a three bedroom listing may be negligible.</p>
</div>
</div>
</div>
</article>
</div>
</div>
</section>
<section id="about" class="bg-light">
<div class="container">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2>About OptBnb</h2>
<p class="lead">OptBnb was designed to optimize your Airbnb listings to maximize your revenue at a click of a button!</p>
<p> Enter the details of your listing, and we present you the optimal price for your listing. We take in account many factors including neighbourhood, area density, rooms, and many more! Additionally we display the hottest trends with the latest Airbnb listings so you can see how you match up with other listings. We currently only have support for San Francisco listings, but we are working on expanding it.</p>
</div>
</div>
</div>
</section>
<div id="chatsection" style="margin-top: 10em; margin-bottom: 10em" class="container">
<h2>Chat with other satisfied Airbnb hosts and professionals</h2>
<!-- User Form (First Page) -->
<div id="userFormArea" class="row chat">
<div class="col-md-12">
<form id="userForm">
<div class="form-group">
<label>Enter Name</label>
<input class="form-control" id="username" />
<br />
<input type="submit" class="btn btn-primary"
value="Enter" />
</div>
</form>
</div>
</div>
<!-- Chat Box -->
<div id="messageArea" class="row">
<div style="margin-top: 2em" class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul class="list-group" id="users"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<!-- Message Form (Enter Message) -->
<form id="messageForm">
<div class="form-group">
<label>Enter Message...</label>
<textarea class="form-control" id="message"></textarea>
<br />
<input type="submit" class="btn btn-primary"
value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright 2017 © OptBnb</p>
</div>
<!-- /.container -->
</footer>
<!-- Chat box script -->
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
var $messageArea = $('#messageArea');
var $userFormArea = $('#userFormArea');
var $userForm = $('#userForm');
var $users = $('#users');
var $username = $('#username');
$messageForm.submit(function(e){
e.preventDefault();
// console.log("Submitted");
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well"><strong>'+data.user+'</strong>: '+data.msg+'</div>');
});
$userForm.submit(function(e){
e.preventDefault();
// console.log("Submitted");
socket.emit('new user', $username.val(), function(data){
if(data){
$userFormArea.hide();
$messageArea.show();
}
});
$username.val('');
});
socket.on('get users', function(data){
var html = '';
for(i = 0; i < data.length; i++){
html += '<li class="list-group-item">'+data[i]+'</li>';
}
$users.html(html);
});
});
</script>
<!-- Bootstrap core JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="js/scrolling-nav.js"></script>
</body>
</html>
<script src="js/papaparse.min.js"></script>
<script src="js/gmaps.js"></script>
<script src="js/graphs.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFW1D1pXRv2vC52u-bGJ3IydUM_-DepUE&callback=initMap">
</script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFW1D1pXRv2vC52u-bGJ3IydUM_-DepUE&libraries=places&callback=initAutocomplete"
async defer></script> -->