-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
executable file
·112 lines (90 loc) · 4.28 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
<!DOCTYPE html>
<html>
<head>
<title>人类火星探索地图 | 星际移民中心</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/leaflet.css"/>
<link rel="stylesheet" href="assets/css/leaflet.label.css"/>
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/leaflet.extra-markers.min.css">
<script src="assets/js/leaflet.js"></script>
<script src="assets/js/leaflet.label.js"></script>
<script src="assets/js/leaflet.extra-markers.min.js"></script>
<link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/style.css"/>
<!-- Core JS Files -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<!-- Bootstrap Translation Plugins -->
<script src="assets/js/bootstrap-transition.js"></script>
<!-- Bootstrap Collapse Plugins -->
<script src="assets/js/bootstrap-collapse.js"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!-- ICONS -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="./favicons/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="./favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="./favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="./favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="./favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="./favicons/mstile-144x144.png">
</head>
<style>
html, body, #map {
width:100%; height:100%; padding:0px; margin:0px;
}
</style>
<body>
<div id="map">
</div>
<div class="intro overlay btn-group-vertical" role="group">
<button class="overlay btn sharpbtn" type="button" data-toggle="collapse" data-target="#collapseIntro" aria-expanded="false" aria-controls="collapseIntro" style="background:black;color:white;">
关于
</button>
</div>
<div class="intro collapse" id="collapseIntro" style="max-width:300px;">
<div class="well">
<p>
人类对于火星的关心,体现在了往火星发射的探测器数量上。而最近的洞察号,也又一次刺激了人类对于火星的好奇心。<a href="http://interimm.org">星际移民中心</a>制作了这份地图,来展示人类在火星着陆的探测器。
</p>
<p>
地图右上角可以选择不同的探测器分组。地图上的每个图标都可以点开查看相应的火星任务简介。
</p>
<p>
本地图参考了 Wikipedia. 感谢 <a href="https://www.zhihu.com/people/haibaraemily/activities">@haibaraemily</a> 提供的建议。
</p>
<p>
<span>
源代码?错误?更多的探测器?<a href="http://github.com/interimm/mars-exploration-map" target="_blank">请戳 <i class="fa fa-github" aria-hidden="true"></i></a>
</span>
</p>
</div>
</div>
<script src="assets/js/the-map.js"></script>
<style>
.legend {
line-height: 12px;
color: #555;
padding: 2px 2px 2px 2px;
font-size: 70%;
}
.legend i {
width: 12px;
height: 10px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
</style>
</body>
</html>