-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
357 lines (346 loc) · 16.6 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
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lest-day的个人主页</title>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<link rel="shortcut icon" href="./public/favicon.ico">
<link rel="stylesheet" href="./public/style/index.css">
</head>
<body onload="getWeatherData()">
<noscript>
<div style="text-align: center">请开启 JavaScript</div>
</noscript>
<div id="setting-block" class="setting-block block" style="display:none">
<h2 class="settingblock-title">设置内容</h2>
<div class="setting">
<div class="setting-appearance">
<div class="setting-title">外观</div>
<div class="setting-item">
<strong>背景链接</strong>：<input type="url" id="background" name="background">
<div class="setting-item-info">
默认为随机的背景图，你可以通过添加链接来取消随机并自定义背景图片。
</div>
</div>
</div>
<div class="setting-function">
<div class="setting-title">功能</div>
</div>
<div class="setting-developers">
<div class="setting-title">开发</div>
</div>
<div class="setting-devlog">
<div class="setting-title">日志</div>
</div>
</div>
</div>
<div class="content-wrap">
<div class="info-block block">
<div class="infoblock-main">
<img src="./public/images/cropped.webp" class="avatar" alt="lest-day的头像" loading="lazy"
decoding="async"><br>
<div class="infoname">lest-day</div>
</div>
<hr>
<div class="profile">
lest-day（又称Marx或lestday233），计算机和信息技术爱好者，擅长HTML、CSS等前端Web技术，有强迫症的学生党。常活跃于Wikidot和国内外小众平台。<br>
<br>
lest-day有很多的爱好和特长，例如视频剪辑工作、图片和内容设计、网站基础搭建和互联网资源运用等等，同时也有很多的作品，在互联网上主要担任深林文学部和时间轴书店网站职员，而在现实生活中却是平平无奇且缺点不少的普通人。用户名为lest-day的Wikidot账号被盗。<br>
<br>
<strong>电子邮箱</strong>：<code>email@lestday233.eu.org</code><br>
<strong>个人从属</strong>：<code>lest-dayLAB | 深林文学部 时间轴书店 SCR-NJW 地下黑市</code><br>
<strong>个人成分</strong>：<code>双子座 | 双性恋 | 前端开发 | ESFJ | 低浓度乐子人</code><br>
</div>
</div>
<div class="meta-block block">
<div class="meta-item">
<a href="https://api.oioweb.cn/api/qq/joingroup?guin=883423270">
<img src="./public/images/qq.webp" alt="QQQun" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
<div class="meta-item">
<a href="mailto:email@lestday233.eu.org">
<img src="./public/images/email.webp" alt="Email" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
<div class="meta-item">
<a href="https://space.bilibili.com/1960746880/">
<img src="./public/images/bilibili.webp" alt="BiliBili" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
<div class="meta-item">
<a href="https://twitter.com/@lest_day">
<img src="./public/images/twitter.webp" alt="Twitter" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
<div class="meta-item">
<a href="https://github.com/lest-day">
<img src="./public/images/github.webp" alt="Github" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
<div class="meta-item">
<a href="https://youtube.com/@lestday233">
<img src="./public/images/youtube.webp" alt="Youtube" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
<div class="meta-item">
<a href="https://www.wikidot.com/user:info/lestday233">
<img src="./public/images/wikidot.webp" alt="BiliBili" class="account-img" decoding="async"
loading=lazy></img>
</a>
</div>
</div>
<div class="time-block block">
<div class="time" id="time"></div>
<div class="data" id="data"></div>
<div id="weather" class="weather"></div>
</div>
<div class="saying-block block">
<div id="jinrishici-sentence" class="jinrishici-sentence">正在加载今日诗词....</div>
<br>
<div id="jinrishici-info" class="jinrishici-info"></div>
<script type="text/javascript">
jinrishici.load(function (result) {
var sentence = document.querySelector("#jinrishici-sentence")
var info = document.querySelector("#jinrishici-info")
sentence.innerHTML = result.data.content
info.innerHTML = '【' + result.data.origin.dynasty + '】' + result.data.origin.author + '《' + result.data.origin.title + '》'
});
</script>
<script>
async function getWeatherData() {
// 获取API数据
const url = "https://api.vvhan.com/api/weather";
const response = await fetch(url);
const data = await response.json();
// 解析数据
const city = data.city;
const weatherData = data.info;
// 提取所需属性
const type = weatherData.type;
const low = weatherData.low;
const high = weatherData.high;
const fengxiang = weatherData.fengxiang;
// 显示数据
const displayText = `${city}，${type}，${high} ~ ${low}`;
// 更新HTML页面
document.getElementById("weather").innerText = displayText;
}
</script>
</div>
<div class="other block">
<div class="other-item">
<img src="./public/images/music.webp" alt="Music" id="Music" decoding="async" onclick="musicClick()"
class="other-img"></img>
</div>
<div class="other-item">
<img src="./public/images/darkadjust.webp" alt="Darkadjust" id="darkadjust" decoding="async"
class="other-img" loading=lazy></img>
</div>
<div class="other-item">
<img src="./public/images/setting.webp" alt="Setting" id="setting" decoding="async"
onclick="showHideElement()" class="other-img" loading=lazy></img>
</div>
</div>
<div class="site-block block">
<h2 class="siteblock-title">
我的网站
</h2>
<div class="site-my">
<div class="site-item">
<a class="site-bookmark" href="https://nav.lestday233.eu.org/">
<div>
<div class="site-bookmark-title">导航站</div>
<div class="site-bookmark-description">lest-day的私人导航</div>
</div>
</a>
</div>
<div class="site-item">
<a class="site-bookmark" href="https://blog.lestday233.eu.org/">
<div>
<div class="site-bookmark-title">博客站</div>
<div class="site-bookmark-description">lest-day的私人博客</div>
</div>
</a>
</div>
<div class="site-item">
<a class="site-bookmark" href="https://wd.lestday233.eu.org/">
<div>
<div class="site-bookmark-title">维基站</div>
<div class="site-bookmark-description">lest-day的私人网站</div>
</div>
</a>
</div>
<div class="site-item">
<a class="site-bookmark" href="https://files.lestday233.eu.org/">
<div>
<div class="site-bookmark-title">文件站</div>
<div class="site-bookmark-description">lest-day的文件存储</div>
</div>
</a>
</div>
</div>
<h2 class="siteblock-title">
常去网站
</h2>
<div class="site-often">
<div class="site-item">
<a class="site-bookmark" href="https://deep-forest-club.wikidot.com/">
<div>
<img src="https://theme.dfc.databasew.top/files/logo.webp"
class="site-icon" alt="深林文学部" decoding="async" loading=lazy>
<div class="site-bookmark-text">
<div class="site-bookmark-title">深林文学部</div>
<div class="site-bookmark-description">这是一片热爱文学的森林</div>
</div>
</div>
</a>
</div>
<div class="site-item">
<a class="site-bookmark" href="https://timeline-bookstore.wikidot.com/">
<div>
<img src="https://theme.dfc.databasew.top/tlbdata/img/tlb-logo.webp"
class="site-icon" alt="时间轴书店" decoding="async" loading=lazy>
<div class="site-bookmark-text">
<div class="site-bookmark-title">时间轴书店</div>
<div class="site-bookmark-description">这里是文学创作的好地方</div>
</div>
</div>
</a>
</div>
<div class="site-item">
<a class="site-bookmark" href="https://timeline-bookstore.wikidot.com/">
<div>
<img src="https://www.bilibili.com/favicon.ico?v=1" class="site-icon" alt="哔哩哔哩"
decoding="async" loading=lazy>
<div class="site-bookmark-text">
<div class="site-bookmark-title">哔哩哔哩</div>
<div class="site-bookmark-description">国内知名的视频弹幕网站</div>
</div>
</div>
</a>
</div>
<div class="site-item">
<a class="site-bookmark" href="https://www.bing.com/">
<div>
<img src="https://cn.bing.com/sa/simg/favicon-trans-bg-blue-mg-png.png" class="site-icon"
alt="必应搜索" decoding="async" loading=lazy>
<div class="site-bookmark-text">
<div class="site-bookmark-title">必应搜索</div>
<div class="site-bookmark-description">必应搜索更加方便快捷</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<audio id="musicPlayer" style="display:none;height:0;width:0" controls autoplay></audio>
<script>
// 访问信息存储
function setClientInfoCookie() {
const ua = navigator.userAgent;
const device = window.devicePixelRatio || 1;
const clientInfo = `UA:${ua},Device:${device}`;
const encodedClientInfo = btoa(clientInfo);
document.cookie = `info=${encodedClientInfo};expires=Thu,31 Dec 2099 23:59:59 UTC;path=/`
}
document.addEventListener('DOMContentLoaded', function () {
setClientInfoCookie()
});
// 时间日期功能
function updateTime() {
const timeElement = document.getElementById('time');
const now = new Date();
timeElement.textContent = now.toLocaleTimeString()
}
updateTime();
setInterval(updateTime, 1000);
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth() + 1;
const day = currentDate.getDate();
const dayOfWeek = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][currentDate.getDay()];
const formattedDate = `${year}-${month}-${day}${dayOfWeek}`;
document.getElementById('data')
.textContent = formattedDate;
// 开关音乐功能
function playMusic(url) {
const musicPlayer = document.getElementById('musicPlayer');
musicPlayer.src = url;
musicPlayer.play();
}
function pauseMusic() {
const musicPlayer = document.getElementById('musicPlayer');
musicPlayer.pause();
}
function musicClick() {
const musicPlayer = document.getElementById('musicPlayer');
if (musicPlayer.paused) {
playMusic('https://music.163.com/song/media/outer/url?id=1805304382.mp3');
} else {
pauseMusic();
}
}
// 暗色切换功能
let isAddingClass = true;
document.getElementById("darkadjust")
.addEventListener("click", function () {
if (isAddingClass) {
const blocks = document.getElementsByClassName("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].classList.add("bg-black");
document.cookie = "dark=true"
}
isAddingClass = false
} else {
const blocks = document.getElementsByClassName("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].classList.remove("bg-black");
document.cookie = "dark=false"
}
isAddingClass = true
}
});
document.addEventListener("DOMContentLoaded", function () {
const cookie = document.cookie;
if (cookie.includes("dark=true")) {
const blocks = document.getElementsByClassName("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].classList.add("bg-black")
}
} else {
const blocks = document.getElementsByClassName("block");
for (let i = 0; i < blocks.length; i++) {
blocks[i].classList.remove("bg-black")
}
}
setCookie()
});
function setCookie() {
const date = new Date();
date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = "dark=" + ((document.cookie.includes("dark=true")) ? "false" : "true") + ";" + expires + ";path=/"
}
// 设置相关功能
// | 显示设置方框
function showHideElement() {
const settingBlock = document.getElementById('setting-block');
if (settingBlock.style.display === 'none') {
settingBlock.style.display = 'block'
} else {
settingBlock.style.display = 'none'
}
}
// | 编辑更新日志
</script>
</body>
</html>