-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
119 lines (105 loc) · 4.58 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emoticons Collect</title>
<link href="https://static.hzchu.top/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Artalk CSS -->
<link href="https://artalk.hzchu.top/dist/Artalk.css" rel="stylesheet">
<!-- Artalk JS -->
<script src="https://artalk.hzchu.top/dist/Artalk.js"></script>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Emoticons Collect</h1>
<p class="lead text-center"><a href="https://github.com/thun888/emoticons">View on Github</a></p>
<div class="row mt-5">
<div class="col-md-6">
<h2>可可爱爱</h2>
<p>一群小可爱</p>
</div>
<div class="col-md-6">
<h2>速度快快</h2>
<p>国内香港，国外Cloudflare</p>
</div>
</div>
<!-- 表情包展示容器 -->
<div class="container mt-5" id="emoticons-container">
<h4 class="text-center">一览</h4>
<div class="row" id="emoticons-list"></div>
</div>
<!-- Artalk -->
<div class="container mt-5">
<div id="Comments"></div>
<script>
Artalk.init({
el: '#Comments', // 绑定元素的 Selector
server: 'https://artalk.hzchu.top', // 后端地址
site: 'Emoticons', // 你的站点名
title: 'Emoticons',
placeholder: '这是一个demo...\n点击表情按钮查看所有表情(～￣▽￣)～',
emoticons: 'https://emoticons.hzchu.top/json/artalk_all.json',
useBackendConf: false,
locale: "zh-CN"
})
</script>
</div>
<!-- 读取并展示表情包的 JavaScript -->
<script>
// 读取 display_all.json 文件
fetch('/json/display_all.json')
.then(response => response.json())
.then(data => {
const emoticonsList = document.getElementById('emoticons-list');
// 遍历 JSON 数据并生成 HTML
for (const key in data) {
const emoticon = data[key];
const emoticonDiv = document.createElement('div');
emoticonDiv.className = 'col-md-4 mb-4';
emoticonsLink = `https://emoticons.hzchu.top/json/artalk/${emoticon.english_name}.json`
emoticonDiv.innerHTML = `
<div class="card">
<div class="card-body">
<h5 class="card-title">${emoticon.chinese_name} (${emoticon.english_name})</h5>
<p class="card-text">来源: <a href="${emoticon.source}" target="_blank">${emoticon.source}</a></p>
<p class="card-text">描述: ${emoticon.source_description}</p>
<p class="card-text">路径: /emoticons/${emoticon.english_name}/</p>
<p class="card-text">引用链接: <a href="${emoticonsLink}" target="_blank">${emoticonsLink}</a></p>
</div>
</div>
`;
emoticonsList.appendChild(emoticonDiv);
}
})
.catch(error => console.error('Error loading the emoticons:', error));
</script>
</div>
<!-- <script src="https://static.hzchu.top/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
<style>
.atk-grp-switcher {
display: flex;
overflow-x: auto;
overflow-y: hidden;
/* Hide vertical scrollbar */
white-space: nowrap;
height: 35px !important;
/* You can adjust this value */
}
/* Hide default scrollbar */
.atk-grp-switcher::-webkit-scrollbar {
height: 5px;
/* Height of scrollbar */
}
/* Customize scrollbar track */
.atk-grp-switcher::-webkit-scrollbar-track {
background: transparent;
}
/* Customize scrollbar thumb */
.atk-grp-switcher::-webkit-scrollbar-thumb {
background-color: var(--at-color-main);
border-radius: 3px;
}
</style>
</body>
</html>