forked from AyagawaSeirin/ThreebodySpace
-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
197 lines (182 loc) · 10.2 KB
/
home.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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/mdui/css/mdui.min.css">
<script src="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/mdui/js/mdui.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/css/main.css">
<script src="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/fullpage/fullpage.js"></script>
<script src="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/js/main.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/fullpage/fullpage.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/css/lightfont.css">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-162013750-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-162013750-4');
</script>
<title>三体·宇宙</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="music" id="music">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86
src="//music.163.com/outchain/player?type=2&id=1417540461&auto=0&height=66"></iframe>
</div>
<div id="fullpage">
<!--第一页 - 标题-->
<div class="section " id="section_index">
<div class="mdui-typo blue"><h1>三体 宇宙</h1></div>
<div class="mdui-typo"><h4 style="color:white;">ThreeBody.Space</h4></div>
<div class="mdui-typo"><h6 style="color:white;font-size: 0.85em;">一个《三体》迷以及《我的三体》粉丝制作的网站</h6></div>
<!-- <div class="mdui-typo"><h6 style="color:white;font-size: 0.85em;">↓鼠标滚轮往下↓</h6></div>-->
</div>
<!--第二页 - 介绍-->
<div class="section " id="section_introduce">
<div class="mdui-typo"><h1>介绍</h1></div>
<div class="mdui-typo"><h4 style="color:white;">《三体》是什么？</h4></div>
<div class="mdui-typo"><h6 style="color:white;">
刘慈欣创作的系列长篇科幻小说，由《三体》、《三体Ⅱ·黑暗森林》、《三体Ⅲ·死神永生》组成。<br>作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖。
</h6></div>
<div class="mdui-typo"><h4 style="color:white;">《我的三体》是什么？</h4></div>
<div class="mdui-typo"><h6 style="color:white;">
国产动画番剧，采用MC风格制作，改编自刘慈欣的科幻小说《三体》。旨在用方块游戏《Minecraft（我的世界）》作为引擎把《三体》的故事做成游戏动画。除正片外，制作团队还制作了一系列符合原著描写的角色歌。<br>《我的三体》现已更新至第三季《我的三体之章北海传》，Bilibili独播。与第一季相比，《我的三体之章北海传》动画效果有了较大的变化，但仍保留MC风格。
</h6></div>
<div class="mdui-typo"><h6 style="color:white;font-size: 0.9em;">摘自百度百科</h6></div>
<!-- <div class="mdui-typo"><h6 style="color:white;font-size: 0.85em;">↓鼠标滚轮往下↓</h6></div>-->
</div>
<!--第三页 - 视频-->
<div class="section" id="section1">
<!--第一个视频-->
<div class="slide" id="section_video_slide2" style="padding-top:15vh;">
<div class="video_div">
<div class="mdui-video-container">
<iframe src="//player.bilibili.com/player.html?aid=75619050&cid=129360913&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
</div>
</div>
<!--第二个视频-->
<div class="slide" id="section_video_slide1" style="padding-top:15vh;">
<div class="video_div">
<div class="mdui-video-container">
<iframe src="//player.bilibili.com/player.html?aid=89811464&cid=153392221&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>
</div>
</div>
</div>
<div class="section" id="section_good_text">
<div class="mdui-typo"><h1>书中好句</h1></div>
<div class="mdui-typo"><h4 style="color:white;" id="good_text">
正在加载好句...
</h4></div>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-indigo" onclick="load_text();">换一句</button>
</div>
<div class="section" id="section_article">
<div class="mdui-typo"><h1>相关文章</h1></div>
<div class="mdui-typo"><h4 style="color:white;"><a href="http://cul.huanqiu.com/toutiao/2019-06/14995721.html"
target="_blank">环球网：《三体》雄霸畅销书榜引冷思考：科幻文学能靠一人独撑？</a></h4></div>
<div class="mdui-typo"><h4 style="color:white;"><a href="https://baijiahao.baidu.com/s?id=1636311942384205245"
target="_blank">叶文洁的女儿杨冬为何要自杀？刘慈欣《三体》中隐含的逆火效应</a></h4></div>
<div class="mdui-typo"><h4 style="color:white;"><a href="http://fun.youth.cn/gnzx/201904/t20190418_11930008.htm"
target="_blank">中国青年网：《三体》为什么不能交给好莱坞拍？刘慈欣这样说</a></h4></div>
<div class="mdui-typo"><h4 style="color:white;"><a
href="http://www.bjnews.com.cn/culture/2018/11/30/526402.html"
target="_blank">新京报：刘慈欣：我也不知道为什么《三体》那么火</a>
</h4></div>
<div class="mdui-typo"><h4 style="color:white;"><a href="https://www.huxiu.com/article/270963.html?h_s=f2"
target="_blank">虎嗅网：《三体》再获奖，刘慈欣的变与不变</a></h4></div>
</div>
<div class="section" id="section_about">
<div class="mdui-typo"><h1>关于本站</h1></div>
<div class="mdui-typo"><h4 style="color:white;">
首先，欢迎你访问本站噢~
</h4></div>
<div class="mdui-typo about"><h5 style="color:white;">
注册了这个有趣的域名，便有了这个网站。<br>
在前一段时间网站由于各种问题导致各种BUG且无法正常浏览，现在都解决了<br>
目前这个网站托管在Github Pages上，源码开源供大家修改以及提建议(代码写的比较乱，仓促赶完的)<br>
空间有限，<a href="https://owomoe.net/other/94.html">点击这里</a> 查看详情~<br>
联系站长请<a href="https://owomoe.net/other/94.html">点击这里</a>寻找联系方式~<br>
另外，站长个人博客：<a href="https://owomoe.net">owomoe.net</a>，欢迎参观~
</h5></div>
<div class="mdui-typo"><h5 style="color:white;">
-友情链接-<br>
<a href="https://owomoe.net/" target="_blank">皮皮凛の家(站长个人博客)</a><br>
<br>
© 2018 - 2020 Seirin | Made with love by Seirin
</h5></div>
</div>
</div>
<script type="text/javascript">
var myFullpage = new fullpage('#fullpage', {
verticalCentered: false
});
get_text();
function randomNum(minNum, maxNum) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
break;
default:
return 0;
break;
}
}
function get_text() {
var $$ = mdui.JQ;
$$.ajax({
url: "https://cdn.jsdelivr.net/gh/AyagawaSeirin/ThreebodySpace@latest/sentence/sentence.json",
async: true,
type: 'GET',
dataType: "json",
success: function (data) {
text_data = data;
load_text();
}
});
}
function load_text() {
var $$ = mdui.JQ;
var text = "正在加载好句...";
do
text = text_data[randomNum(0, text_data.length - 1)];
while (text.length > 200 && ismobile == 1)
text = text.replace(new RegExp("~","g"),"<br>");
$$('#good_text').html(text);
}
</script>
<script>
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
ismobile = 0;
if (browser.versions.mobile) {
var $$ = mdui.JQ;
ismobile = 1;
$$("#section1").attr("style", "display:none");
$$("#music").attr("style", "display:none");
alert('欢迎来到三体·宇宙！\n目前已经开发完毕，并全部上线！\n推荐使用电脑访问，手机访问内容有删减\n若有相关建议可在网页最后寻找作者联系方式~');
}
</script>
</body>
</html>