forked from Dreamer-Paul/Navigation
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
230 lines (203 loc) · 6.9 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
<!----
# Navigation
# By: Dreamer-Paul
# Last Update: 2022.3.11
一个简单的个人首页，让你的朋友方便快捷的，找到你在各站点的社交链接
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
---->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蟹堡王餐厅</title>
<link href="static/32.ico" rel="icon" sizes="32x32"/>
<link href="static/192.ico" rel="icon" sizes="192x192"/>
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
<style>
html, body, main{
height: 100%;
}
body{
margin: 0;
user-select: none;
font: lighter 16px "微软雅黑";
}
body:before{
content: '';
z-index: -1;
width: 3000px;
height: 3000px;
display: block;
position: fixed;
top: calc(50% - 1500px);
left: calc(50% - 1500px);
animation: bg-rotate 5s infinite linear;
background: linear-gradient(45deg, var(--color1) 40%, var(--color2) 60%); /*引用我们在 JavaScript 中定义的颜色变量*/
}
body:after {
content: '';
display: block;
height: 60px; /* 这应该等于 footer 的总高度（包括内边距） */
}
@keyframes bg-rotate {
0%{ transform: rotate(0) }
100%{ transform: rotate(360deg) }
}
a{
text-decoration: none;
font-weight: bold;
}
main{
display: table;
margin: 0 auto;
}
.content{
padding-top: 50px;
padding-bottom: 70px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
.logo{
margin-bottom: 50px;
}
.logo img{
height: auto;
max-width: 100px;
border-radius: 100%;
border: 3px solid #fff;
transition: transform 0.3s;
}
.logo img:hover{
transform: scale(1.1, 1.1) rotate(1turn);
}
.links{
max-width: 300px;
}
.links a{
color: #fff;
display: block;
min-width: 80px;
padding: 1em 2em;
text-align: center;
margin-bottom: 1em;
border-radius: 10px;
border: #fff 1px solid;
transition: background 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
}
.links a:hover{
color: #258ec5;
background: #fff;
transform: scale(1.1, 1.1);
}
.links a:active{
opacity: 0.7;
transform: scale(0.9, 0.9);
}
.links a:last-child{
margin-bottom: 0;
}
footer{
left: 0;
right: 0;
bottom: 0;
color: #fff;
position: fixed;
text-align: center;
height: 50px; /* 添加一个固定的高度，如果你知道 footer 的高度 */
padding: 10px 0; /* 为了避免 footer 内部的内容与边缘接触，你可能需要增加一些内边距 */
}
footer a{
color: inherit;
}
h3 {
color: aliceblue;
}
</style>
</head>
<body>
<main class="container">
<div class="content">
<div class="logo">
<img id="randomAvatar" src="" alt="欢迎光临" />
<h3>欢迎光临蟹老板(QQ:3511318683)的导航</h3>
</div>
<div class="links">
<a href="#">主页</a>
<a href="https://home.spawnmc.xyz:4430" target="_blank">创世云</a>
<a href="https://home.spawnmc.net:2100" target="_blank">蟹黄堡</a>
</div>
</div>
</main>
<footer>
<p>© <script>document.write(new Date().getFullYear())</script> By <a href="#" target="_blank">蟹老板</a>.</p>
</footer>
<script>
// 随机生成颜色的函数
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
//自动隐藏页脚
function checkFooterVisibility() {
var footer = document.querySelector('footer');
var contentHeight = document.body.scrollHeight; // 页面内容总高度
var scrollHeight = window.pageYOffset; // 已经滚动的高度
var windowHeight = window.innerHeight; // 可视窗口的高度
var footerHeight = footer.offsetHeight; // 页脚的高度
var hideFooter = (scrollHeight + windowHeight < contentHeight - footerHeight);
footer.style.opacity = hideFooter ? '0' : '1';
footer.style.pointerEvents = hideFooter ? 'none' : 'auto';
}
// 随机生成色相和亮度的函数
function getRandomHueAndValue() {
let hue = Math.floor(Math.random() * 360);
let value = Math.random() * (1 - 0.5) + 0.5; // 生成0.3到0.6之间的随机亮度
return {hue, value};
}
// 将HSV颜色转换为RGB颜色的函数
function hsvToRgb(h, s, v) {
let r, g, b, i, f, p, q, t;
i = Math.floor(h * 6);
f = h * 6 - i;
p = v * (1 - s);
q = v * (1 - f * s);
t = v * (1 - (1 - f) * s);
switch (i % 6) {
case 0: r = v, g = t, b = p; break;
case 1: r = q, g = v, b = p; break;
case 2: r = p, g = v, b = t; break;
case 3: r = p, g = q, b = v; break;
case 4: r = t, g = p, b = v; break;
case 5: r = v, g = p, b = q; break;
}
return '#' + ((1 << 24) | ((r * 255) << 16) | ((g * 255) << 8) | (b * 255)).toString(16).slice(1);
}
// 在页面加载时设置随机颜色
let hueAndValue1 = getRandomHueAndValue();
let hueAndValue2 = getRandomHueAndValue();
hueAndValue2.hue = (hueAndValue1.hue + 100) % 360; // 确保第二个色相是明显的
document.documentElement.style.setProperty('--color1', hsvToRgb(hueAndValue1.hue / 360, 1, hueAndValue1.value));
document.documentElement.style.setProperty('--color2', hsvToRgb(hueAndValue2.hue / 360, 1, hueAndValue2.value));
//随即确定一个头像
window.onload = function() {
// 检查页脚
checkFooterVisibility();
// 获取logo元素
var logo = document.querySelector(".logo img");
// 生成1-29之间的随机数
var randomAvatarNumber = Math.floor(Math.random() * 29) + 1;
// 设置logo元素的src属性
logo.src = "static/avatar_" + randomAvatarNumber + ".jpeg";
}
// 当窗口滚动时执行检查页脚可见性的函数
window.onscroll = function() {
checkFooterVisibility();
}
</script>
</body>
</html>