-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
71 lines (58 loc) · 3.19 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>airbnbee</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='css/main.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
</head>
<body>
<div class="intro">
<div class="logo"><img src="img/airbnbee-logo.svg" alt="Airbnbee"></div>
<span class="tagline"><p>Welcome to Airbnbee. Where bees find a new home.</p></span>
<button class="start-btn red" onclick="onRedClick()">I'm ready to Beegin!</button>
<span class="meta"><p>Based on Landcare Research data.<br>Made with love at <a href="http://naturehack.confetti.events/" target="_blank">Nature Hack</a>.</p></span>
</div>
<div class="loader"><img src="img/bee.svg" alt="bee" class="bee"></div>
<div class="instructions"><img src="img/bee.svg" alt="bee" class="icon-bee">Great! <strong>Now click on a spot</strong> where you'd like to start a bee colony. We will analyze it based on <a href="https://confluence.landcareresearch.co.nz/display/LHP/Nature+Hack" target="_blank">Landcare Research</a> data to see how suitable it is. May the force bee with you!</div>
<div class="results-tab">
<div id='ratings' class="rating five">
<span id='rating-value' class="sym five">5 <img src="img/star.svg" alt="stars"></span>
<h1 id='rating-title'>Great location!</h1>
</div>
<ul id='comments'>
<li><img src="img/checkmark.svg" alt="checkmark" class="icon-checkmark"> Good access</li>
<li><img src="img/checkmark.svg" alt="checkmark" class="icon-checkmark"> Close to water source</li>
<li><img src="img/checkmark.svg" alt="checkmark" class="icon-checkmark"> Great soil drainage</li>
<li><img src="img/checkmark.svg" alt="checkmark" class="icon-checkmark"> Good altitude</li>
</ul>
<button class="results-btn red" onclick="onRedClick()">Save this spot!</button>
<!--
<div class="divider"></div>
<div class="collection">
<h2>Data collected:</h2>
<ul>
<li>Nearest road access: 55 m</li>
<li>Nearest water source: 20 m</li>
<li>Soil drainage rating: 4/5</li>
</ul>
</div>
-->
<span class="meta">
<ul>
<li><strong>Analysed in real time using data sourced from:</strong></li>
<li>LandcareResearch,</li>
<li>Land Information New Zealand,</li>
<li>Ministry for the Environment</li>
</ul>
</span>
</div>
<div class="overlay"></div>
<div id='map'></div>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src='js/main.js'></script>
</html>