-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (97 loc) · 9.08 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Sound Of Nature</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400|Montserrat:500" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="welcome">
<h1 class="padded-multiline animated fadeInLeft"><span>If you removed all the people, what would the world sound like?</span></h1>
<button id="startButton" class="animated fadeInUp" type="button">Explore</button>
<h5>Made with <span style="color:red">♥</span> by <a href="https://www.jasonbernert.com" target="blank">Jason Bernert</a></h5>
</div>
<div id="select" style="display:none;">
<h2 class="padded-multiline" style="margin: 60px auto;"><span>Drag the map, then hit listen.</span></h2>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 823.93427 1029.8962375" enable-background="new 0 0 2000 2000" xml:space="preserve">
<path d="m 776.75678,0 c -12.064,0 -24.124,4.608 -33.345,13.828 L 411.94378,345.27301 80.52575,13.879 c -18.443,-18.441 -48.255,-18.441 -66.695,0 -18.441,18.44 -18.441,48.244 0,66.685 l 331.418,331.39601 -331.418,331.399 c -18.441,18.44 -18.441,48.25 0,66.691 9.198,9.198 21.272,13.817 33.347,13.817 12.073,0 24.15,-4.619 33.348,-13.817 l 331.41803,-331.398 331.468,331.445 c 9.197,9.198 21.271,13.82 33.345,13.82 12.074,0 24.101,-4.622 33.346,-13.82 18.442,-18.441 18.442,-48.247 0,-66.687 l -331.464,-331.446 331.464,-331.44501 c 18.442,-18.441 18.442,-48.25 0,-66.691 C 800.88178,4.608 788.81678,0 776.75678,0 Z" /></svg>
<div id="coordinates"><span id="cords-lat">40.00</span>° N</br><span id="cords-lon">-98.00</span>° W</div>
<div class="buttonContainer">
<button id="listenButton" type="button">Listen</button>
</div>
</div>
<div id="listen" style="display:none;">
<div id="soundscapeDiscription">
<?xml version="1.0" encoding="utf-8"?><svg width='60px' height='60px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ellipsis">
<circle cx="16" cy="50" r="10" fill="#ffffff" transform="rotate( 50 50)">
<animate id="anir11" attributeName="r" from="0" to="10" begin="0s;anir14.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir12" attributeName="r" from="10" to="10" begin="anir11.end" dur="1.25s" fill="freeze"></animate>
<animate id="anir13" attributeName="r" from="10" to="0" begin="anir12.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir14" attributeName="r" from="0" to="0" begin="anir13.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix11" attributeName="cx" from="16" to="16" begin="0s;anix18.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix12" attributeName="cx" from="16" to="16" begin="anix11.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix13" attributeName="cx" from="16" to="50" begin="anix12.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix14" attributeName="cx" from="50" to="50" begin="anix13.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix10" attributeName="cx" from="50" to="84" begin="anix14.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix16" attributeName="cx" from="84" to="84" begin="anix10.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix17" attributeName="cx" from="84" to="84" begin="anix16.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix18" attributeName="cx" from="84" to="16" begin="anix17.end" dur="0.25s" fill="freeze"></animate>
</circle>
<circle cx="50" cy="50" r="10" fill="#f0f0f0" transform="rotate( 50 50)">
<animate id="anir21" attributeName="r" from="10" to="10" begin="0s;anir25.end" dur="1s" fill="freeze"></animate>
<animate id="anir22" attributeName="r" from="10" to="0" begin="anir21.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir23" attributeName="r" from="0" to="0" begin="anir22.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir24" attributeName="r" from="0" to="10" begin="anir23.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir25" attributeName="r" from="10" to="10" begin="anir24.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix21" attributeName="cx" from="16" to="50" begin="0s;anix28.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix22" attributeName="cx" from="50" to="50" begin="anix21.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix23" attributeName="cx" from="50" to="84" begin="anix22.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix24" attributeName="cx" from="84" to="84" begin="anix23.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix25" attributeName="cx" from="84" to="84" begin="anix24.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix26" attributeName="cx" from="84" to="16" begin="anix25.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix27" attributeName="cx" from="16" to="16" begin="anix26.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix28" attributeName="cx" from="16" to="16" begin="anix27.end" dur="0.25s" fill="freeze"></animate>
</circle>
<circle cx="84" cy="50" r="10" fill="#ffffff" transform="rotate( 50 50)">
<animate id="anir31" attributeName="r" from="10" to="10" begin="0s;anir35.end" dur="0.5s" fill="freeze"></animate>
<animate id="anir32" attributeName="r" from="10" to="0" begin="anir31.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir33" attributeName="r" from="0" to="0" begin="anir32.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir34" attributeName="r" from="0" to="10" begin="anir33.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir35" attributeName="r" from="10" to="10" begin="anir34.end" dur="0.75s" fill="freeze"></animate>
<animate id="anix31" attributeName="cx" from="50" to="84" begin="0s;anix38.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix32" attributeName="cx" from="84" to="84" begin="anix31.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix33" attributeName="cx" from="84" to="84" begin="anix32.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix34" attributeName="cx" from="84" to="16" begin="anix33.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix35" attributeName="cx" from="16" to="16" begin="anix34.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix36" attributeName="cx" from="16" to="16" begin="anix35.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix37" attributeName="cx" from="16" to="50" begin="anix36.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix38" attributeName="cx" from="50" to="50" begin="anix37.end" dur="0.25s" fill="freeze"></animate>
</circle>
<circle cx="84" cy="50" r="10" fill="#f0f0f0" transform="rotate( 50 50)">
<animate id="anir41" attributeName="r" from="10" to="0" begin="0s;anir44.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir42" attributeName="r" from="0" to="0" begin="anir41.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir43" attributeName="r" from="0" to="10" begin="anir42.end" dur="0.25s" fill="freeze"></animate>
<animate id="anir44" attributeName="r" from="10" to="10" begin="anir43.end" dur="1.25s" fill="freeze"></animate>
<animate id="anix41" attributeName="cx" from="84" to="84" begin="0s;anix48.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix42" attributeName="cx" from="84" to="16" begin="anix41.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix43" attributeName="cx" from="16" to="16" begin="anix42.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix44" attributeName="cx" from="16" to="16" begin="anix43.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix45" attributeName="cx" from="16" to="50" begin="anix44.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix46" attributeName="cx" from="50" to="50" begin="anix45.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix47" attributeName="cx" from="50" to="84" begin="anix46.end" dur="0.25s" fill="freeze"></animate>
<animate id="anix48" attributeName="cx" from="84" to="84" begin="anix47.end" dur="0.25s" fill="freeze"></animate>
</circle>
</svg>
</div>
<div id="birdAudio"></div>
<button id="startOverButton" type="button">Search Again</button>
</div>
<div id="map"></div>
<script src="js/script.js"></script>
</body>
</html>