-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
163 lines (107 loc) · 6.62 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Global Environmental Change</title>
<link rel="icon" href="data:;base64,iVBORwOKGO=" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="viz.js"></script>
</head>
<body>
<div class="container-fluid">
<div id="map-container" class="col-xs-5">
<div href="#" class="glyphicon glyphicon-chevron-up gray1 gi-5x" id="modal-up" role="button"></div>
<div href="#" class="glyphicon glyphicon-chevron-down gray1 gi-5x" id="modal-down" role="button"></div>
<div id="map"></div>
</div>
<div id="information_pane" class="col-xs-7">
<div id="title">
<p>Global Environmental Change</p>
</div>
<div id="abstract">
<p align="left">Droughts and flooding, extreme weather, coral bleaching, melting ice sheets and glaciers... The impacts of climate change are predicted to be diverse and global. Satellite images show us that the consequences of fossil fuel consumption have already changed our planet.
<br><br>Click 'Start tour' to be guided through examples of climate change impacts across the globe.</p>
<br><p align="left">To navigate through the different locations use the up and down arrows on your keyboard. Then to view each location throughout time toggle between the left and right arrows on your keyboard. Scroll down within each location to learn more and explore the data sources.</p>
</div>
<div id="start-tour-container">
<a href="#" class="btn btn-info btn-lg btn-starttour" id="start_tour">
<span class="glyphicon glyphicon-triangle-right" id="startbutton"></span> Start tour
</a>
</div>
<div id="media-icons">
<!-- Facebook -->
<a href="https://www.facebook.com/sharer.php?u=https://cse512-16s.github.io/fp-shirleyswirley-michellejw-hmvantol-phvaillant/final_awesome/" target="_blank">
<img src="share_icons/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://cse512-16s.github.io/fp-shirleyswirley-michellejw-hmvantol-phvaillant/final_awesome/&text=Climate%20Change%20Visualization&hashtags=climateviz" target="_blank">
<img src="share_icons/twitter.png" alt="Twitter" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=https://cse512-16s.github.io/fp-shirleyswirley-michellejw-hmvantol-phvaillant/final_awesome/" target="_blank">
<img src="share_icons/google.png" alt="Google" />
</a>
<!-- Email -->
<a href="mailto:?Subject=Climate Change Visualization&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://cse512-16s.github.io/fp-shirleyswirley-michellejw-hmvantol-phvaillant/final_awesome/">
<img src="share_icons/email.png" alt="Email" />
</a>
</div>
<div id="github-icon">
<a href="https://github.com/CSE512-16S/fp-shirleyswirley-michellejw-hmvantol-phvaillant">
<img src="share_icons/github-logo.png" alt="Github repo" style="width:50px;height:50px;border:0;">
</a>
</div>
</div> <!-- end of information pane -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
<div class="modal-dialog">
<!-- Modal content -->
<div class="modal-content">
<!-- Modal header -->
<div class="modal-header" id="modal-title">
</div> <!-- end modal-header -->
<!-- Modal body -->
<div class="modal-body">
<div id="modal-main-view">
<div id="imgdiv-container" class="col-xs-12 svg-container">
<div id="imgdiv" class="col-xs-12">
</div>
</div>
<div id="above_plot" class="col-xs-12">
<div class="row" id="row_above_plot">
<div href="#" class="glyphicon glyphicon-triangle-left col-xs-1 gray1 gi-3x" id="left" role="button"></div>
<div id="annodiv" class=
"col-xs-10 svg-container">
</div>
<div href="#" class="glyphicon glyphicon-triangle-right col-xs-1 gray1 gi-3x" id="right" role="button"></div>
</div>
</div>
<div id="plotdiv" class="col-xs-12 svg-container"></div>
</div>
<div id="modal-secondary-view">
<div id = "imgsrcdiv" class="col-xs-12 svg-container">
<span>Imagery source:</span>
<a href="#" class="btn btn-link btn-source" id="imgsrc" role="button"></a>
</div>
<div id="datasrcdiv" class="col-xs-12 svg-container">
<a href="#" class="btn btn-info btn-sm btn-localdata svg-container pull-left" id="localsrc"></a>
<a href="#" class="btn btn-info btn-sm btn-globaldata svg-container pull-right" id="globalsrc"></a>
</div>
<div id="moreinfodiv" class="col-xs-12 svg-container">
</div>
</div>
</div> <!--end modal-body div-->
</div> <!--end modal-footer div-->
</div> <!-- end modal-content div -->
</div> <!-- end modal-dialog div -->
</div> <!-- end myModal div -->
</div>
</body>
</html>