-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
213 lines (193 loc) · 10.4 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
if (location.hostname !== 'localhost' && location.protocol !== 'file:') {
document.head.insertAdjacentHTML('beforeend', '<base href="/home/">');
}
</script>
<meta name="theme-color" id="theme-color-meta" content="">
<meta name="description" content="Fuling Chen - 个人主页">
<title>Fuling Chen - 个人主页</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css" />
<link rel="icon" type="image/webp" sizes="64x64"
href="https://gcore.jsdelivr.net/gh/0fuling0/mysource@main/img/favicon.webp">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/twikoo.all.min.js"></script>
<script defer src="https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script defer src="https://unpkg.com/meting@2/dist/Meting.min.js"></script>
<script async src="https://npm.elemecdn.com/[email protected]/bsz.js"></script>
</head>
<body class="light">
<div class="loading-container">
<div class="loading-spinner-wrapper">
<div class="loading-spinner"></div>
<div class="loading-text"></div>
</div>
</div>
<header>
<h1>Fuling's Homepage</h1>
<p class="motto">休言万事转头空，未转头时皆梦。</p>
<a href="https://www.fuling.me/"><i class="fa-solid fa-blog"></i>博客</a>
<a href="#home" onclick="showSection('homepage')"><i class="fa-solid fa-house"></i>主页</a>
<a href="#nav" onclick="showSection('navpage')"><i class="fa-solid fa-compass"></i>导航</a>
</header>
<main class="container">
<section id="homepage">
<section class="card">
<div class="clock"></div>
<div class="hitokoto-container"></div>
</section>
<section class="card profile">
<img src="https://gcore.jsdelivr.net/gh/0fuling0/source@main/img/avatar.webp" alt="头像">
<div class="profile-info">
<h2>Fuling Chen</h2>
<p>@迷宫猫</p>
</div>
<div class="buttons">
<a href="https://space.bilibili.com/620545781" target="_blank" class="button follow-button">
<i class="fas fa-heart"></i> 关 注
</a>
<a href="https://message.bilibili.com/?spm_id_from=333.999.0.0#/whisper/mid620545781"
target="_blank" class="button message-button">
<i class="fas fa-envelope"></i> 消 息
</a>
</div>
</section>
<section class="card">
<h3><i class="fas fa-info-circle"></i> 关于我</h3><br>
<p>这个人保持低调，热爱简单生活。对于各种事物持平和态度，注重个人空间和独立思考。喜欢追求兴趣爱好，追求内心宁静和平衡。</p>
</section>
<section class="card about">
<h3><i class="fas fa-id-card"></i> 个人信息</h3><br>
<ul>
<li>姓名: Fuling Chen</li>
<li>职业: ？？？</li>
<li>简介: 似乎没什么可说的。</li><br>
</ul>
</section>
<section class="card projects">
<h3><i class="fas fa-laptop-code"></i> 个人项目</h3><br>
<ul class="project-list">
<li class="project">
<a href="https://www.fuling.me/home/">
<i class="fab fa-github"></i>
<span>个人主页</span>
</a>
<p>项目描述: 具备加载效果、背景图轮播、PWA支持、深色模式、时钟、一言格言轮播以及响应式布局的卡片式个人主页。</p>
</li>
<li class="project">
<a href="https://www.fuling.me/">
<i class="fas fa-desktop"></i>
<span>个人博客</span>
</a>
<p>项目描述: 简单的Hexo博客，使用volantis主题。</p>
</li>
</ul>
</section>
<section class="card">
<h3><i class="fa-regular fa-image"></i> 图片展示</h3><br><br>
<div class="carousel-card">
<button class="next-btn" onclick="nextSlide()">❯</button>
<button class="prev-btn" onclick="prevSlide()">❮</button>
<div class="carousel-container">
<img class="carousel-img">
</div>
</div>
</section>
<section class="card about">
<h3><i class="fas fa-graduation-cap"></i> 教育背景</h3><br>
<ul>
<li>大学: 合肥工业大学</li>
<li>专业: 给排水科学与工程</li>
<li>年份: 2021 - 至今</li>
</ul>
</section>
<section class="card contact">
<h3><i class="fas fa-address-card"></i> 联系方式</h3><br>
<div class="contact-options">
<a href="mailto:[email protected]">
<i class="fas fa-at"></i>
<span>电子邮件</span><br>
</a>
<a href="https://github.com/0fuling0" target="_blank">
<i class="fab fa-github"></i>
<span>Github</span><br>
</a>
<a href="https://space.bilibili.com/620545781" target="_blank">
<i class="fab fa-bilibili"></i>
<span>Bilibili</span>
</a>
</div>
</section>
<section class="card about">
<h3><i class="fa-solid fa-award"></i> 网站信息</h3><br>
<ul>
<li><strong>本站总访问量：</strong><span id="busuanzi_value_site_pv"></span> 次</li>
<li><strong>本站总访客数：</strong><span id="busuanzi_value_site_uv"></span> 人</li>
<li>
<div id="runtime-info-container"></div>
</li>
</ul>
</section>
<section class="card music">
<h3><i class="fas fa-music"></i> 音乐</h3>
<br><br>
<div id="aplayer">
<meting-js id="8297186297" server="netease" type="playlist" mutex="true" preload="auto"
order="random"></meting-js>
</div>
</section>
<section class="card">
<h3><i class='fa-solid fa-comments'></i> 留言</h3><br>
<div id="tcomment"></div>
</section>
</section>
<section id="navpage" style="display:none;">
<section class="card">
<div class="clock"></div>
<div class="hitokoto-container"></div><br>
<div class="search-container">
<div class="custom-select">
<div class="select-styled" onclick="toggleOptions()">Google</div>
<div class="search-options" id="searchOptions">
<div class="search-option" onclick="selectOption('Google')">Google</div>
<div class="search-option" onclick="selectOption('Bing')">Bing</div>
<div class="search-option" onclick="selectOption('Yahoo')">Yahoo</div>
<div class="search-option" onclick="selectOption('DuckDuckGo')">DuckDuckGo</div>
<div class="search-option" onclick="selectOption('Baidu')">Baidu</div>
<div class="search-option" onclick="selectOption('Yandex')">Yandex</div>
<div class="search-option" onclick="selectOption('Ask')">Ask.com</div>
<div class="search-option" onclick="selectOption('AOL')">AOL</div>
<div class="search-option" onclick="selectOption('WolframAlpha')">Wolfram Alpha</div>
<div class="search-option" onclick="selectOption('Dogpile')">Dogpile</div>
</div>
</div>
<input type="text" class="search-input" placeholder="输入搜索词">
<button class="search-button" onclick="search()"><i
class="fa-solid fa-magnifying-glass"></i> </button>
</div>
<div class="cardContainer">
<div class="navButtons">
<div class="navButton" onclick="switchToCard(1)" onmouseover="startTimer(1)" onmouseout="clearTimer()" data-card="1">影视</div>
<div class="navButton" onclick="switchToCard(2)" onmouseover="startTimer(2)" onmouseout="clearTimer()" data-card="2">游戏</div>
<div class="navButton" onclick="switchToCard(3)" onmouseover="startTimer(3)" onmouseout="clearTimer()" data-card="3">工具</div>
<div class="navButton" onclick="switchToCard(4)" onmouseover="startTimer(4)" onmouseout="clearTimer()" data-card="4">服务</div>
</div>
</div>
</section>
</section>
</main>
<footer>
<p>© 2024 Fuling Chen. All rights reserved.</p>
</footer>
<button id="backToTop" class="back-to-top-button" aria-label="返回顶部"><i class="fas fa-arrow-up"></i></button>
<button id="backToBottom" class="back-to-bottom-button" aria-label="返回底部"><i class="fas fa-arrow-down"></i></button>
<button id="darkModeToggle" class="dark-mode-toggle" onclick="toggleDarkMode()" aria-label="切换夜间模式"><i class="fas fa-moon"></i></button>
<script src="js/script.js" defer></script>
<script src="js/cards.js" defer></script>
</body>
</html>