-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
125 lines (114 loc) · 5.67 KB
/
index.html
File metadata and controls
125 lines (114 loc) · 5.67 KB
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
<!DOCTYPE html>
<html ng-app="BulgeApp">
<head>
<title>3dBulge</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<meta name="description" content="Real time 3d visualization of the seismic activity in Bárðarbunga" />
<meta name="keywords" content="bárðarbunga, bardarbunga, iceland, volcano, volcanoes, earthquakes, seismic activity, 3dbulge, bæring, baering, real time">
<meta property="og:title" content="3dBulge">
<meta property="og:description" content="Real time 3d visualization of the seismic activity in Bárðarbunga">
<meta property="og:image" content="http://baering.github.io/img/3dbulge_og.jpg">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="454">
<meta property="og:image:height" content="252">
<meta property="og:type" content="website" />
<meta property="og:url" content="http://baering.github.io/" />
<link rel="image_src" type="image/jpeg" href="http://baering.github.io/img/3dbulge_og.jpg" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css?v=2">
</head>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46047925-7', 'auto');
ga('send', 'pageview');
</script>
<div ng-include="'templates/navbar.html'"></div>
<div ng-controller="MapController" class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-12 col-xs-12">
<h2 ng-show="loading" class="text-center" style="color: #fff">Loading data</h2>
<div class="row">
<div class="col-md-4 col-xs-4">
<p>
Displaying
<span ng-show="graphDisplayOnlyVerified"><strong>verified</strong> earthquakes</span>
<span ng-show="!graphDisplayOnlyVerified"><strong>all</strong> earthquakes</span>
</p>
<button class="btn btn-sm btn-default" ng-click="graphDisplayOnlyVerified = !graphDisplayOnlyVerified; graphFilterChange()">
<span ng-show="graphDisplayOnlyVerified">Show all earthquakes</span>
<span ng-show="!graphDisplayOnlyVerified">Show verified earthquakes</span>
</button>
</div>
<div class="col-md-4 col-xs-4">
<p class="text-center" title="Move the slider below to change it">Graph displaying last <strong>{{ graphDisplayHours }}</strong> hours</p>
<input type="range" min="1" max="48" ng-model="graphDisplayHours" class="text-center graph-hours" ng-change="graphFilterChange()" />
</div>
<div class="col-md-4 col-xs-4">
<p class="text-center" title="Move the slider below to change it">Magnitude greater than <strong>{{ graphDisplayQuakeSize }}</strong></p>
<input type="range" min="0" max="4" step="0.2" ng-model="graphDisplayQuakeSize" class="text-center graph-hours" ng-change="graphFilterChange()" />
</div>
</div>
<div id="volcano-chart" style="width: 95%"></div>
</div>
<div class="col-lg-7 col-md-12 col-xs-12">
<div class="row" id="upper-top-right">
<div class="col-md-6 col-xs-6">
<p class="text-muted">Location of earthquakes (approximation)</p>
<div id="volcano-chart-satellite"></div>
</div>
<div class="col-md-6 col-xs-6">
<p class="text-muted">Showing last <strong>{{ numberOfEarthquakesDisplayedInTable }}</strong> below</p>
<div class="quake-list">
<table class="table table-condensed table-striped table-hover">
<thead>
<th>Verified</th>
<th>Magnitude</th>
<th>Time</th>
<th>Depth</th>
</thead>
<tbody>
<tr ng-repeat="earthquake in earthquakes | orderBy: 'occuredAt':true | limitTo: numberOfEarthquakesDisplayedInTable" class="{{ earthquakeTableColor(earthquake) }}" ng-mouseenter="mouseOverEarthquake(earthquake)" ng-mouseleave="mouseOutEarthquake(earthquake)">
<td>
<span class="glyphicon" ng-class="{ 'glyphicon-ok earthquake-verified': earthquake.verified, 'glyphicon-remove earthquake-not-verified': !earthquake.verified }"></span>
</td>
<td>{{ earthquake.size }}</td>
<td>{{ timeSince(earthquake.occuredAt) }}</td>
<td>{{ earthquake.depth }}km</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h3 ng-show="shaking" class="label label-warning pull-right">
New EQs
</h3>
</div>
</div>
</div>
<div class="new-version-banner">
<span>A new and improved version of this site is now available!</span>
<a href="https://earthquakes.is" target="_blank">Visit earthquakes.is →</a>
</div>
<frame-credit></frame-credit>
<script src="thirdparty/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="thirdparty/moment.js"></script>
<script src="thirdparty/angular.min.js"></script>
<script src="thirdparty/highcharts.js"></script>
<script src="thirdparty/highcharts-3d.js"></script>
<script src="thirdparty/ui-bootstrap.min.js"></script>
<script src="thirdparty/ui-bootstrap-tpls.min.js"></script>
<script src="src/classes/earthquake.js"></script>
<script src="src/app.js"></script>
<script src="src/services/earthquake.js"></script>
<script src="src/controllers/map.js"></script>
<script src="src/directives/webcam.js"></script>
<script src="src/directives/calderaDrop.js"></script>
<script src="src/directives/frameCredit.js"></script>
</body>
</html>