-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
143 lines (139 loc) · 5.26 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Game of Throne Interactive Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<script src="./assets/pace.min.js"></script>
<style>
body, html {
margin:0;
padding:0;
background-color: #333;
height: 100%;
}
#app-title {
font-family: "Spectral";
font-weight: 900;
font-size: 15px;
text-align: center;
color: #999;
}
.map-cont {
flex: 1;
position: relative;
height: 100%;
}
#map {
height: 100%;
}
#map span {
text-align: center;
font-family: "Quintessential";
font-weight: 900;
font-style: italic;
color: #ccc;
}
#height {
display: none;
}
.toggleBtn {
position: absolute;
left: 0;
top: 0;
font-size: 12px;
color: #eee;
display: flex;
align-items: center;
}
.map-overlay-container {
position: absolute;
width: 200px;
top: 30px;
left: 0;
padding: 10px;
z-index: 1;
}
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
border-radius: 3px;
padding: 10px;
box-shadow:0 1px 2px rgba(0,0,0,0.20);
}
.map-overlay h2,
.map-overlay p {
margin: 0 0 10px;
color: #333;
}
.map-overlay h2 {
color: #999;
font-family: "Spectral";
/* font-style: italic; */
}
.btn-container {
display: flex;
}
.m-flex {
flex: 2;
}
.btn {
flex: 1;
color: #999
}
.btn:hover {
cursor: pointer;
color: #666;
}
.audio-cont {
/* width: 200px; */
height: 18px;
}
#muteBtn {
cursor: pointer;
}
.icon-muted {
fill: rgb(63, 81, 181);
}
</style>
</head>
<body>
<!-- <h4 class="app-title">Game of Throne Interactive Map</h4> -->
<div class="map-cont">
<canvas id="height"></canvas>
<div id='map'></div>
<div class="toggleBtn">
<input type="checkbox" name="toggleTerrain" id="toggleTerrain"
onchange="toggleTerrain()" checked disabled>
<label for="toggleTerrain">toggle terrain</label>
<iframe src="assets/silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="player" autoplay loop muted
src="https://music.163.com/song/media/outer/url?id=32526653.mp3"></audio>
</div>
<div class='map-overlay-container'>
<div class='map-overlay'>
<div>
<span id='app-title'>Game of Throne Interactive Map</span>
<svg id="muteBtn" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1558261737436" class="icon" style="fill:rgb(63, 81, 181);" viewBox="0 0 1024 1024" version="1.1" p-id="2339" width="16" height="16"><defs><style type="text/css"/></defs><path d="M846.208 512 979.744 378.464C994.144 364.064 995.488 342.016 982.752 329.248 969.984 316.512 947.936 317.856 933.536 332.256L800 465.792 666.464 332.256C652.064 317.856 630.016 316.512 617.248 329.248 604.512 342.016 605.856 364.064 620.256 378.464L753.792 512 620.256 645.536C605.856 659.936 604.512 681.984 617.248 694.752 630.016 707.488 652.064 706.144 666.464 691.744L800 558.208 933.536 691.744C947.936 706.144 969.984 707.488 982.752 694.752 995.488 681.984 994.144 659.936 979.744 645.536L846.208 512 846.208 512ZM480 128 256 277.344 256 746.656 480 896C515.328 896 544 867.328 544 832L544 192C544 156.672 515.328 128 480 128L480 128ZM32 384 32 640C32 675.328 60.672 704 96 704L192 704 192 320 96 320C60.672 320 32 348.672 32 384L32 384Z" p-id="2340"/></svg>
</div>
<p id='location-description'>loading data...</p>
<div class="btn-container">
<span class="btn" id="preChapBtn"> < Pre </span>
<span class="btn" id="pauseBtn">Pause</span>
<span class="btn" id="nextChapBtn"> Next > </span>
</div>
<small>Text credit: <a target='_blank' href='https://asoiaf.fandom.com/zh/wiki/Portal:%E5%8E%86%E5%8F%B2'>https://asoiaf.fandom.com/zh/wiki</a></small>
</div>
</div>
</div>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<script src="./src/bundle.js"></script>
<script src='https://unpkg.com/[email protected]/build/three.min.js'></script>
<script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="./src/textureloader.js"></script>
<script src="./assets/timelines.js"></script>
<script src="./src/player.js"></script>
<script src="./src/index.js"></script>
</body>
</html>