-
Notifications
You must be signed in to change notification settings - Fork 0
/
encyclopedia.html
592 lines (496 loc) · 22.7 KB
/
encyclopedia.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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>人物与名词 Encyclopedia</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
* {
padding: 0;
margin: 0;
font-family: HarmonyOS Sans SC;
color: #1d1d1f;
text-overflow: ellipsis;
font-display: block;
}
html {
scroll-behavior: smooth;
}
@font-face {
font-family: HarmonyOS Sans SC;
src: url(static/HarmonyOS_Sans_SC_Regular.ttf);
font-display: block;
}
@keyframes uprise{
from {
transform: translateX(100px);
opacity: 0.1;
}
to {
transform: translateX(0);
opacity: 1;
}
}
::selection {
background-color: #C20C0C;
color: #f5f5f7;
}
body {
display: flex;
justify-content: center;
background-color: #f5f5f7;
min-width: 1510px;
}
div.content {
display: flex;
align-items: center;
width: 39%;
margin: 0;
flex-direction: column;
margin-bottom: 40vh;
animation: uprise 1.2s forwards ease-out;
}
.titlebar {
text-align: center;
margin: 30px 0 40px;
letter-spacing: 3px;
user-select: none;
text-wrap: nowrap;
overflow: hidden;
display: flex;
flex-direction: row;
}
.titlebar>img.title-img-xicon {
height: 100.5px;
width: 65px;
margin-right: 15px;
-webkit-user-drag: none;
}
.titlebar>.title {
display: flex;
justify-content: center;
flex-direction: column;
}
div.subject {
width: 100%;
text-align: start;
margin: 20px 0;
}
div.subject>div.header>h2 {
font-size: 1.9em;
letter-spacing: .25px;
line-height: 1.25;
overflow-wrap: break-word;
word-break: break-word;
font-family: 宋体;
font-weight: 700;
}
hr {
opacity: .7;
margin: 3px 0 10px;
width: 100%;
}
div.subject>p {
font-family: 宋体, HarmonyOS Sans SC;
font-size: 19px;
font-weight: 500;
text-indent: 2em;
line-height: 1.3;
}
strong, strike {
font-family: 宋体;
}
div.grid-wrapper {
display: -moz-inline-grid;
display: -ms-inline-grid;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
text-align: center;
column-gap: 10px;
row-gap: 12px;
}
div.grid-wrapper>a {
padding: 3px;
overflow: hidden;
text-overflow: clip;
text-wrap: nowrap;
}
a {
font-family: HarmonyOS Sans SC, 宋体;
color: #C20C0C;
text-decoration: none;
opacity: 1;
transition: .1s linear;
font-weight: normal;
user-select: none;
}
a:hover, a:focus-visible {
text-decoration: underline;
opacity: .6;
}
:focus {
outline: .6px dashed #181818;
}
a:active {
background-color: #961313;
color: #fff;
font-weight: 600;
opacity: 1;
}
div.navi-wrapper {
display: flex;
height: 100vh;
align-items: center;
position: fixed;
left: 7vw;
}
.navi-wrapper>div.navigator {
border: solid rgba(85, 84, 84, 0.4) 2px;
border-radius: 10px;
padding: 10px 7px 36px;
height: 38vh;
width: 11vw;
font-family: HarmonyOS Sans SC;
user-select: none;
overflow-y: auto;
overflow-x: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
opacity: .4;
transition: opacity 0.3s linear;
}
.navi-wrapper>div.navigator:hover {
opacity: 1;
}
.navigator>#title {
font-size: 19px;
}
.navigator a {
display: block;
padding: 2px 0;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
}
.navigator>hr {
margin: 3px 0;
}
.navigator>.navi-category>a {
color: #1d1d1f;
font-size: 12px;
}
.navigator>.navi-category>a:active {
color: #fff;
}
.subject>p>a {
padding: 0 3px;
margin: 0 3px;
}
div.volume-control {
--onVolume: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zIDl2Nmg0bDUgNVY0TDcgOUgzem0xMy41IDNjMC0xLjc3LTEuMDItMy4yOS0yLjUtNC4wM3Y4LjA1YzEuNDgtLjczIDIuNS0yLjI1IDIuNS00LjAyek0xNCAzLjIzdjIuMDZjMi44OS44NiA1IDMuNTQgNSA2Ljcxcy0yLjExIDUuODUtNSA2LjcxdjIuMDZjNC4wMS0uOTEgNy00LjQ5IDctOC43N3MtMi45OS03Ljg2LTctOC43N3oiLz4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4KPC9zdmc+);
--muted: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJXaW5kb3dUZXh0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNi41IDEyYzAtMS43Ny0xLjAyLTMuMjktMi41LTQuMDN2Mi4yMWwyLjQ1IDIuNDVjLjAzLS4yLjA1LS40MS4wNS0uNjN6bTIuNSAwYzAgLjk0LS4yIDEuODItLjU0IDIuNjRsMS41MSAxLjUxQzIwLjYzIDE0LjkxIDIxIDEzLjUgMjEgMTJjMC00LjI4LTIuOTktNy44Ni03LTguNzd2Mi4wNmMyLjg5Ljg2IDUgMy41NCA1IDYuNzF6TTQuMjcgM0wzIDQuMjcgNy43MyA5SDN2Nmg0bDUgNXYtNi43M2w0LjI1IDQuMjVjLS42Ny41Mi0xLjQyLjkzLTIuMjUgMS4xOHYyLjA2YzEuMzgtLjMxIDIuNjMtLjk1IDMuNjktMS44MUwxOS43MyAyMSAyMSAxOS43M2wtOS05TDQuMjcgM3pNMTIgNEw5LjkxIDYuMDkgMTIgOC4xOFY0eiIvPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPgo8L3N2Zz4=);
background-image: var(--muted);
background-repeat: no-repeat;
background-position: center;
width: 24px;
height: 24px;
padding: 3px;
position: fixed;
right: 30px;
top: 30px;
cursor: pointer;
opacity: 1;
transition: opacity .2s ease-out;
}
div.volume-control:hover {
opacity: 0.3;
}
img {
-webkit-user-drag: none;
}
.article-img-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px 0;
}
.article-img-wrapper>img {
display: block;
max-width: 90%;
max-height: 460px;
user-select: none;
}
.article-img-wrapper>span {
color: #505050;
font-size: 12px;
margin-top: 6px;
}
</style>
</head>
<body>
<div class="content">
<div class="titlebar">
<img src="static/encyclopedia.png" alt="encyclopedia" class="title-img-xicon">
<div class="title">
<h1 style="font-size: 40px;">人物与名词</h1>
<h2 style="font-size: 18px; font-weight: normal; margin-top: 2px;">Encyclopedia</h2>
</div>
</div>
<div class="subject" id="intro">
<div class="header">
<h2>介绍</h2>
</div>
<p>此页面显示收集到的生活中的人物与名词，它们由一个个词条地整齐地展示在此页。浏览内容目录以查看这些词条。</p>
</div>
<div class="subject" id="category">
<div class="header">
<h2>内容目录</h2>
</div>
<div class="grid-wrapper"></div>
</div>
<div class="subject">
<div class="header">
<h2>洋葱拌瘦肉</h2>
</div>
<p>土耳其球经常做的一道难吃的菜。干瘪瘪的肉被拧成了麻花，让人看着就没有食欲。不知道这道菜的人就会被排挤。</p>
</div>
<div class="subject">
<div class="header">
<h2>全素斋</h2>
</div>
<p>指一桌子菜全是素的，没有一点荤腥。土耳其球和素食主义者们偏爱的晚餐类型。</p>
</div>
<div class="subject">
<div class="header">
<h2>宫保鸡丁</h2>
</div>
<p>土耳其球做的唯二好吃的其中一道菜，另一道是<a href="">糖醋里脊</a>。法国球的餐车上就有售卖这道菜的快餐，有时还会有免费品尝的鸡丁。</p>
<p>不过这两道菜都得看着菜谱才能做得美味。</p>
</div>
<div class="subject">
<div class="header">
<h2>糖醋里脊</h2>
</div>
<p>土耳其球做的唯二好吃的其中一道菜，另一道是<a href="">宫保鸡丁</a>。</p>
<p>精选优质里脊肉，由使用纯天然无公害饲料散养的农家上等黑土猪产出。里脊肉经过双次煎炸，多重匠心工艺，6小时反复蒸煮；爆汁里脊被烤得外焦里嫩，香酥爽滑；以及各种能从字典里找到的可以用于形容美味的词汇；肉质口感看得见！闻得到！吃得香！</p>
<p>不过这两道菜都得看着菜谱才能做得美味。</p>
</div>
<div class="subject">
<div class="header">
<h2>看飞碟（消歧义）</h2>
</div>
<p>本词条有两种解释：</p>
<p><strong>Minecraft 基岩版服务器：</strong>一个 Minecraft 基岩版服务器，纯生存玩法。法国球喜爱的服务器。在夜晚好像会关服。地址：mc.kanfeidie.com:19132。</p>
<p><strong>骗人开溜的俏皮话：</strong>据说想要逃避对方的追问，只要说出这句话就能轻松达到骗人开溜的目的。不过在很多人眼里已经成为了老掉牙的把戏。</p>
<p>警告！此技巧有风险，请视具体对象使用，任何受到的伤害此页面作者概不负责。</p>
</div>
<div class="subject">
<div class="header">
<h2>泡面</h2>
</div>
<p>又称方便面、白象方便面。</p>
<p>在土耳其球做<a href="">全素斋</a>时大家会吃的食物。作为替代品，泡面虽然味道单一，但至少比全素斋好。</p>
</div>
<div class="subject">
<div class="header">
<h2>榛子巧克力</h2>
</div>
<p>巧克力的一种，因内含坚果、榛子等籽类食品而得名。是世界卫生组织公认的开心食品。但是没有情人节的味道。</p>
</div>
<div class="subject">
<div class="header">
<h2>采蝶轩面包店</h2>
</div>
<p>一家土耳其球和法国球经常去消费的面包店，本身生意也很好。已知店铺分布在东门店、湖滨路店、假日广场店、逢源路店、白水井店和悦来中路店等地。</p>
<p>出售的商品中法国球喜爱的有：黑椒鸡扒三文治、肉松披萨、元气小汉堡、豆浆、烟肉芝士条等等</p>
</div>
<div class="subject">
<div class="header">
<h2>暗夜生物防护乳霜</h2>
</div>
<p>来自法国球喜爱的动画《朱利安国王万岁》中的菲尔法斯出售的商品。</p>
<p>“你害怕会成为暗夜生物的下一个目标吗？是该害怕没错！快来我们位于芒果大街角落的菲尔法斯怪物生物和其它种种野兽杂货店吧！说是菲尔法斯叫你来的，就可以在首次购买暗夜生物防护乳霜时打八二折！（-18%！！）♪就这么简单~菲尔法斯~让你准备周全~♪”</p>
<p>这就是菲尔法斯推销此商品的广告词。但是在说完它以后还有一段快速的宇宙通用免责声明：</p>
<p>“本产品会导致部分失明胃溃疡腹泻霍乱痔疮乳糖不耐症，严重时甚至导致完全失明严重湿疹或死亡。”</p>
<div class="article-img-wrapper">
<img src="static/encyclopedia/暗夜生物防护乳霜宣传剧照.png" alt="">
<span>暗夜生物防护乳霜宣传剧照</span>
</div>
</div>
<div class="subject">
<div class="header">
<h2>我的小鲨鱼</h2>
</div>
<p>法国球喜爱的一款以喂养电子宠物为主题的游戏。作者是B站编程新手<a href="https://space.bilibili.com/53456" title="查看TA的bilibili主页" class="no-anchor">@Warma<img class="external-link"></a>。以下是此游戏的信息：</p>
<p>介绍视频：<a href="https://www.bilibili.com/video/BV1fb4y1P7Y1" class="no-anchor">站外播放<img class="external-link"></a></p>
<p>Steam 平台页面：<a href="https://store.steampowered.com/app/2758540" class="no-anchor">跳转至 Steam<img class="external-link"></a></p>
<p>宣传视频：<a href="media/--encyclopedia-movie1.webm" class="no-anchor">站内播放</a></p>
<div class="article-img-wrapper">
<img src="static/encyclopedia/我的小鲨鱼.ico" alt="">
<span>我的小鲨鱼 图标</span>
</div>
<div class="article-img-wrapper">
<img src="static/encyclopedia/小鲨鱼-截图1.jpg" alt="">
<span>游戏截图1</span>
</div>
<div class="article-img-wrapper">
<img src="static/encyclopedia/小鲨鱼-截图5.jpg" alt="">
<span>游戏截图2</span>
</div>
<div class="article-img-wrapper">
<img src="static/encyclopedia/游戏宣传图.jpg" alt="">
<span>游戏宣传图</span>
</div>
<div class="article-img-wrapper">
<img src="static/encyclopedia/小鲨鱼-喜爱.png" alt="">
<span>小鲨鱼表情包</span>
</div>
</div>
<div class="subject">
<div class="header">
<h2>U盘</h2>
</div>
<p>21世纪初流行的可移动存储介质，又称USB存储器。</p>
<p>与光盘类似，经常出现在销售电脑应用程序的实体店中。可用于在不同设备间传输数据，将文件在另一台设备上读取、<strike>拷贝学习资料</strike>等。</p>
</div>
<div class="subject">
<div class="header">
<h2>奇怪的物件</h2>
</div>
<p>曾经流行的摆设。尽管外观廉价，却很受当时的人们欢迎。医院、商业设施、一般家庭都购买了大量这种摆设，装饰在房间里。现在很多地方还能看到这种风潮的残留。</p>
<div class="article-img-wrapper">
<img src="static/encyclopedia.png" width="65" height="100.5">
<span>奇怪的物件</span>
</div>
</div>
<div class="subject">
<div class="header">
<h2>即将成为历史的购物袋</h2>
</div>
<p>法国球从<a href="">采蝶轩面包店</a>带回来的一个购物袋，里面装着一盒黑椒鸡扒三文治和肉松披萨。</p>
<p>法国球在进入小区大堂的门前，不知为何做了一个欲将其甩出去飞到马路上的动作，并对土耳其球说：“看呐！这是一个即将成为历史的购物袋！”</p>
</div>
<div class="subject">
<div class="header">
<h2>来历不明的衣服</h2>
</div>
<p>某天突然出现在小区大堂门前旁的砖块上的衣服，一直在那呆了半个月左右，期间位置不断变化。有时在台阶上，有时在地板上、栏杆上、滑坡上等周围各种地方。</p>
<p>2024年4月28日以后，我们就再也没见过它。土耳其球说它被风吹到马路上了，并称之为“来历不明的衣服”。研究人员认为此现象十分诡异，衣服的出现、消失，这到底暗含着什么呢……</p>
</div>
<div class="subject">
<div class="header">
<h2>神秘的会议室</h2>
</div>
<p>小区二幢后门旁有一道神秘的门，隐蔽在角落中。门的上方贴着一张纸：“会议室区域，非工作人员勿入。”侧边墙上有一个密码锁，按下按钮的声音有些可爱。</p>
<p>一天法国球瞥见一人从二幢后门出来后径直走向会议室门，输入密码进去了。因为听到按钮响了四声，所以猜测密码是4位数。门后貌似有个较大且宽敞明亮的空间。</p>
<p>据此，研究人员推测这扇门直通小区大门外的售楼部，是其工作人员的会议室。不过此区域未经探索，且危险系数极高。</p>
</div>
</div>
<div class="navi-wrapper">
<div class="navigator">
<span id="title">目录&导航</span>
<hr>
<a href="/">返回索引页</a>
<a href="javascript:;" id="turn-to-top">返回顶部</a>
<a href="">清除锚点位置</a>
<hr>
<div class="navi-category"></div>
</div>
</div>
<div class="volume-control"></div>
<audio src="media/空木葵-LIFE.mp3" loop></audio>
<script data-comment="滚动到顶部链接点击事件" defer>
const turnToTopAnchor = document.querySelector('#turn-to-top');
turnToTopAnchor.addEventListener('click', () => {
window.scrollTo(0, 0);
});
</script>
<script data-comment="给header添加分割线" defer>
const headers = document.querySelectorAll('div.subject>.header');
console.log(headers);
headers.forEach(element => {
const separator = document.createElement('hr');
element.appendChild(separator);
});
</script>
<script data-comment="控制播放状态按钮逻辑代码" defer>
const toggle = document.querySelector('.volume-control');
const audio = document.querySelector('audio');
toggle.addEventListener('click', () => {
if (audio.paused) {
audio.play();
toggle.style.backgroundImage = 'var(--onVolume)';
} else { // !audio.paused
audio.pause();
toggle.style.backgroundImage = 'var(--muted)';
};
});
</script>
<script data-comment="给图片添加禁止拖动的属性" defer>
const imgs = document.querySelectorAll('img');
imgs.forEach(element => {
element.draggable = false;
});
</script>
<script data-comment="给词条中的外部链接添加图标" defer>
const external_link_icons = document.querySelectorAll('div.subject img.external-link');
external_link_icons.forEach(element => {
element.src = 'static/external-link-black.svg';
element.style.verticalAlign = 'text-top';
element.width = '13';
element.height = '14';
});
</script>
<script data-comment="给词条中的外部链接加上target=blank" defer>
const external_links = document.querySelectorAll('div.subject a');
external_links.forEach(element => {
if (element.className == 'no-anchor') { // 满足条件的元素就是external_link，而不是页内锚链接anchor
element.target = '_blank';
};
});
</script>
<script data-comment="给subject添加id用于锚点跳转和目录索引" defer>
const subjects = document.querySelectorAll('div.subject');
console.log(subjects);
subjects.forEach(element => {
const title = element.children[0].children[0].textContent;
element.id = title;
});
</script>
<script data-comment="根据.subject元素添加内容到目录" defer>
const category_wrapper = document.querySelector('div.grid-wrapper');
subjects.forEach(element => {
const anchor = document.createElement('a');
const title = element.children[0].children[0].textContent;
anchor.textContent = title;
category_wrapper.appendChild(anchor);
});
</script>
<script data-comment="给目录添加锚点跳转href" defer>
const category_anchors = document.querySelectorAll('div.grid-wrapper>a');
console.log(category_anchors);
category_anchors.forEach(element => {
element.href = '#' + element.textContent;
});
</script>
<script data-comment="把目录词条中的内容添加至导航栏" defer>
const navi_category = document.querySelector('div.navigator>.navi-category');
category_anchors.forEach(element => {
const anchor = document.createElement('a');
anchor.textContent = element.textContent;
anchor.href = element.href;
navi_category.appendChild(anchor);
});
</script>
<script data-comment="根据词条中的锚点跳转中的文本内容设置锚点id" defer>
const anchors_within_subjects = document.querySelectorAll('.subject>p>a');
anchors_within_subjects.forEach(element => {
if (element.className != 'no-anchor') {
element.href = '#' + element.textContent;
};
});
</script>
</body>
</html>