-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
117 lines (103 loc) · 5.47 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="keywords" content="3D Globe Viewer, Seismic Tomography Visualization, Particle Motion Tracking,
Geophysical Data Visualization, 3D Earth Model,
Interactive Globe Viewer, Seismic Imaging, Global Seismology, Tomographic Seismic Images,
Seismic Data Exploration, 3D Geophysical Mapping, Seismology Visual Tool,
Geodynamic Visualization, Mantle Convection Visualization, Seismic Particle Trajectories,
Geological Data Viewer, Global Earthquake Model, Crustal and Mantle Imaging,
Spherical Data Visualization, Interactive Geophysics Tool">
<meta name="description" content="interactive 3D Earth web viewer for global seismic tomography models" />
<meta name="title" content="magma earth :: a tomographic model viewer" />
<title>magma earth :: a tomographic model viewer</title>
<!-- responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- stylesheet -->
<link href="default.css" rel="stylesheet" type="text/css" />
<!-- iOS icon -->
<link rel="apple-touch-icon" href="./earth_icon.png"/>
<link rel="icon" sizes="152x152" href="./earth_icon.png"/>
<!-- library scripts -->
<script src="./js/lib/d3.v7.min.js"></script>
<script src="./js/lib/topojson.v3.min.js"></script>
<script src="./js/lib/versor.v0.2.js"></script>
</head>
<body>
<div class="content">
<!-- main map view -->
<div id="map">
<canvas id="globe" class="fill-screen"></canvas>
<canvas id="animation" class="fill-screen"></canvas>
<svg id="navigation" class="fill-screen"></svg>
</div>
<!-- menu -->
<div id="nav">
<div class="hamburger" id="hamburger">☰</div>
<div class="cross" id="cross">✕</div>
<!-- Hidden menu items -->
<ul class="menu" id="menu">
<p><span class="menu-title">Model</span><br>
<span class="menu-item" id="nav-model-sglobe-rani">SGLOBE-rani</span> |
<span class="menu-item" id="nav-model-s40rts">S40RTS</span> |
<span class="menu-item" id="nav-model-savani">SAVANI</span> |
<span class="menu-item" id="nav-model-spani-s">SPani-S</span> |
<span class="menu-item" id="nav-model-tx2015">TX2015</span> |
<span class="menu-item" id="nav-model-none">none</span>
</p>
<p><span class="menu-title">Colors</span><br>
<span class="menu-item" id="nav-color-Magma">Magma</span> |
<span class="menu-item" id="nav-color-RdYlBu">RdYlBu</span> |
<span class="menu-item" id="nav-color-GnBu">GnBu</span> |
<span class="menu-item" id="nav-color-none">none</span>
</p>
<!-- checkboxes -->
<p><br></p>
<p>
<input type="checkbox" id="check-contours" />
<label for="check-contours" id="check-contours-label">Contours</label>
</p>
<p>
<input type="checkbox" id="check-earthquakes" />
<label for="check-earthquakes" id="check-earthquakes-label">Earthquake locations</label>
</p>
<p>
<input type="checkbox" id="check-streamlines" />
<label for="check-streamlines" id="check-streamlines-label">Streamlines (static)</label>
</p>
<p><br></p>
<!-- icons -->
<p style="text-align: right; padding-right: 10px;">
<!-- info / question mark -->
<a href="https://github.com/danielpeter/magma-earth">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 1024 1024">
<path d="M512.5 829C337.702 829 196 687.298 196 512.5S337.702 196 512.5 196 829 337.702 829 512.5 687.298 829 512.5 829z m0-60C654.161 769 769 654.161 769 512.5S654.161 256 512.5 256 256 370.839 256 512.5 370.839 769 512.5 769zM483 622h46a7 7 0 0 1 7 7v46a7 7 0 0 1-7 7h-46a7 7 0 0 1-7-7v-46a7 7 0 0 1 7-7z m53.042-57.45v30h-60v-30c0-4.463 0.027-7.062 0.155-10.328 0.303-7.719 0.946-13.36 2.901-19.091 1.649-4.832 2.855-7.873 4.802-11.425 2.952-5.385 6.803-9.983 11.75-13.847 6.844-5.346 13.437-8.17 28.196-13.239 7.959-2.733 19.842-10.089 28.818-18.845C562.774 467.912 568 457.827 568 448.5c0-30.652-24.848-55.5-55.5-55.5S457 417.848 457 448.5v30h-60v-30c0-63.789 51.711-115.5 115.5-115.5S628 384.711 628 448.5c0 27.488-12.696 51.989-33.439 72.224-15.298 14.924-34.823 27.01-51.228 32.644-3 1.03-5.325 1.857-7.153 2.544-0.117 2.906-0.138 4.933-0.138 8.638z" />
</svg>
</a>
<!-- home icon -->
<a href="https://specfem.org">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 50 50">
<path fill-rule="evenodd" d="m25 9.0937l-17.719 16.281h5.563v15.531h24.312v-15.531h5.563l-17.719-16.281z"/>
</svg>
</a>
</p>
</ul>
</div>
<!-- footer -->
<div class="footer">
<p>
© 2025 <a href="https://specfem.org" target="_blank">SPECFEM</a><!-- . open-source. -->
</p>
</div>
</div>
<!-- This will only show if JavaScript is disabled -->
<noscript>
<div class="no-js-message">
JavaScript is disabled in your browser. Please enable JavaScript to use all features of this website.
</div>
</noscript>
<!-- main javascript -->
<script src="./main.js" type="module"></script>
</body>
</html>