-
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathindex.html
More file actions
577 lines (539 loc) · 23.6 KB
/
Copy pathindex.html
File metadata and controls
577 lines (539 loc) · 23.6 KB
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.9, user-scalable=yes">
<title>梅布斯的小站 | Home</title>
<!-- Google Material Icons & 基础字体 -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none; /* 保持界面整洁，不影响点击 */
}
body {
background-color: #f0f0f0; /* 原版灰色基调 */
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem 5rem 1.5rem; /* 底部为footer留出空间 */
position: relative;
transition: background-color 0.2s ease;
}
/* 主容器：优雅卡片精神 */
.glass-card {
width: 100%;
max-width: 800px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(0px);
border-radius: 3rem;
padding: 2rem 1.8rem 2.2rem;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.05);
transition: all 0.2s;
}
/* 头部文字区域 */
.hero {
text-align: center;
margin-bottom: 2.8rem;
}
.hero h1 {
font-size: 2rem;
font-weight: 600;
background: linear-gradient(135deg, #2c3e66, #1f2b48);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.3px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.hero h2 {
font-size: 1.2rem;
font-weight: 500;
color: #3a4a6e;
margin-top: 0.5rem;
}
.hero h3 {
font-size: 0.95rem;
font-weight: 400;
color: #5f6c84;
background: #e9edf2;
display: inline-block;
padding: 0.2rem 1rem;
border-radius: 40px;
margin-top: 0.75rem;
}
/* 九宫格核心布局 */
.grid-9 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1.8rem 0 0.8rem;
}
/* 按钮样式升级：保留原版蓝、圆角、过渡动画，增加微光影 */
.grid-btn {
background-color: #3498db; /* 原版蓝色 */
color: white;
border: none;
padding: 1rem 0.5rem;
font-size: 1rem;
font-weight: 500;
font-family: inherit;
text-align: center;
cursor: pointer;
border-radius: 18px;
transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
letter-spacing: 0.3px;
backdrop-filter: blur(2px);
}
.grid-btn:hover {
background-color: #2980b9;
transform: translateY(-3px);
box-shadow: 0 12px 20px rgba(52, 152, 219, 0.25);
}
.grid-btn:active {
transform: translateY(1px);
transition: 0.05s;
}
/* 保留原有按钮材质动画一致 */
.button-icon {
font-size: 1.2rem;
font-weight: normal;
}
/* 页脚 fixed 风格与原版一致但样式优化 */
.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 12px 0;
background-color: rgba(240, 240, 240, 0.85);
backdrop-filter: blur(10px);
color: gray;
font-size: 0.85rem;
font-weight: 400;
z-index: 100;
border-top: 1px solid rgba(0,0,0,0.05);
}
.footer a {
color: #2c7cb6;
text-decoration: none;
transition: opacity 0.2s;
}
.footer a:hover {
opacity: 0.7;
text-decoration: underline;
}
/* 悬浮图标 (聊天 & 登录) */
#chat-icon, #login-icon {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255,255,255,0.7);
backdrop-filter: blur(8px);
border-radius: 50%;
width: 44px;
height: 44px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
transition: all 0.2s ease;
z-index: 1050;
color: #2c3e66;
text-decoration: none;
}
#chat-icon {
bottom: 20px;
right: 20px;
}
#login-icon {
top: 20px;
left: 20px;
}
#chat-icon:hover, #login-icon:hover {
background-color: white;
transform: scale(1.05);
color: #1f6392;
}
.material-icons {
font-size: 24px;
}
/* 鼠标跟随小精灵 */
#mousePointer {
position: fixed;
pointer-events: none;
z-index: 9999;
left: 0;
top: 0;
transform: translate(-2px, -2px);
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
transition: 0.02s linear;
}
#mousePointer img {
width: 26px;
height: auto;
display: block;
opacity: 0.85;
}
/* 统计访问隐藏区 (保留原功能) */
.hovi {
display: none;
}
/* 手机响应式优化 */
@media (max-width: 560px) {
body {
padding: 1rem 1rem 5rem 1rem;
}
.glass-card {
padding: 1.5rem 1rem;
}
.grid-9 {
gap: 0.75rem;
}
.grid-btn {
font-size: 0.85rem;
padding: 0.85rem 0.3rem;
border-radius: 16px;
}
.hero h1 {
font-size: 1.6rem;
}
.hero h2 {
font-size: 1rem;
}
}
/* 辅助动画 与原版提示框保持一致稍做圆润 */
.custom-tip {
font-family: inherit;
}
/* 保留所有原有动效 & 重置不影响 */
.no-transition {
transition: none !important;
}
</style>
</head>
<body>
<div class="glass-card">
<div class="hero">
<h1>✨ 欢迎来到我的小站 ✨</h1>
<h2>by 梅布斯乔治</h2>
<h3>实名：张晓雨</h3>
</div>
<!-- 九宫格按钮区域 (3x3) 共9格，保留全部8个原功能 + 新增【重置默认】便于管理 -->
<div class="grid-9" id="buttonGrid">
<!-- 以下8个完整保留原生跳转 / 口令功能 -->
<button class="grid-btn" data-action="project">我的项目</button>
<button class="grid-btn" data-action="info">个人信息</button>
<button class="grid-btn" data-action="github">看看主页</button>
<button class="grid-btn" data-action="repo">看看仓库</button>
<button class="grid-btn" data-action="links">友情链接</button>
<button class="grid-btn" data-action="more">更多</button>
<button class="grid-btn" data-action="settings">设置</button>
<button class="grid-btn" data-action="secret">输入口令</button>
<!-- 第九格: 重置默认样式 (保留原reset所有特性, 不破坏既有功能) -->
<button class="grid-btn" data-action="resetStyle">重置默认</button>
</div>
<!-- 访问统计隐藏模块，保持原样 -->
<div class="hovi"><a href="https://git.io/typing-svg"><img src="https://profile-counter.glitch.me/mbilse/count.svg" alt="visitor counter" /></a></div>
</div>
<div class="footer">
Copyright Mbilse 2026 | <a href=" ">梅布斯 🌟</a>
</div>
<!-- 固定图标 -->
<a href="ds.html" id="chat-icon" title="进入讨论">
<span class="material-icons">forum</span>
</a>
<a href="https://mbilse.github.io/login" id="login-icon" title="登录">
<span class="material-icons">login</span>
</a>
<div id="mousePointer">
Hi!
</div>
<script>
(function() {
'use strict';
// ---------- 获取按钮DOM ----------
const buttons = document.querySelectorAll('.grid-btn');
// 映射动作
const actionMap = {
'project': './code.html',
'info': './README.md',
'github': 'https://github.com/Mbilse',
'repo': 'https://github.com/Mbilse/Mbilse.github.io',
'links': './mydpy.html',
'more': './more.html',
'settings': '/settings'
};
// 绑定原始跳转与口令逻辑
buttons.forEach(btn => {
const action = btn.getAttribute('data-action');
if (action && actionMap[action]) {
btn.addEventListener('click', (e) => {
e.stopPropagation();
window.location.href = actionMap[action];
});
} else if (action === 'secret') {
btn.addEventListener('click', (e) => {
e.stopPropagation();
promptForColor(); // 原有口令逻辑
});
} else if (action === 'resetStyle') {
btn.addEventListener('click', (e) => {
e.stopPropagation();
resetAllSettings(); // 新增重置按钮完全复用原有reset口令的行为
});
}
});
// ---------- 原版完整功能: 颜色切换 / 口令库 / 全屏 / 形状修改 ----------
function changeBodyColor(colorHexOrName) {
// 完全兼容原有逻辑 支持预设/十六进制
document.body.style.backgroundColor = colorHexOrName;
}
// 原版核心promptForColor，保持所有case完整，新增对重置的兼容性保留
window.promptForColor = function() {
const colorCode = prompt('请粘贴从网站端复制的口令：');
if (!colorCode) return;
const btns = document.querySelectorAll('.grid-btn');
switch (colorCode) {
case 'color000000': changeBodyColor('#f0f0f0'); break;
case 'color000001': changeBodyColor('#3498db'); break;
case 'color000002': changeBodyColor('#2ecc71'); break;
case 'color000003': changeBodyColor('#e74c3c'); break;
case 'b-color000000': btns.forEach(btn => btn.style.backgroundColor = '#000000'); break;
case 'b-color000001': btns.forEach(btn => btn.style.backgroundColor = '#3498db'); break;
case 'b-color000002': btns.forEach(btn => btn.style.backgroundColor = '#2ecc71'); break;
case 'b-color000003': btns.forEach(btn => btn.style.backgroundColor = '#e74c3c'); break;
case 'wpe000000': {
const color = prompt('颜色(英语)或十六进制：');
if (color) document.body.style.background = color;
break;
}
case 'b-color000004': btns.forEach(btn => btn.style.backgroundColor = '#f0f0f0'); break;
case 'z-color000000': btns.forEach(btn => btn.style.color = '#000000'); break;
case 'z-color000004': btns.forEach(btn => btn.style.color = '#f0f0f0'); break;
case 'z-color000005': btns.forEach(btn => btn.style.color = '#ffffff'); break;
case 'z-color000001': btns.forEach(btn => btn.style.color = '#3498db'); break;
case 'z-color000002': btns.forEach(btn => btn.style.color = '#2ecc71'); break;
case 'z-color000003': btns.forEach(btn => btn.style.color = '#e74c3c'); break;
case 'dgm000000': btns.forEach(btn => { btn.style.borderRadius = '50%'; }); break;
case 'dgm000001': btns.forEach(btn => { btn.style.borderRadius = '18px'; }); break;
case 'dgm000002': btns.forEach(btn => { btn.style.borderRadius = '0px'; }); break;
case 'full':
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen().catch(e => console.warn(e));
}
break;
case 'normal':
if (document.exitFullscreen) {
document.exitFullscreen().catch(e => console.warn(e));
}
break;
case 'reset':
resetAllSettings(); // 复用重置逻辑
break;
default:
alert('无效的口令！');
}
};
// ----- 重置函数 (完整恢复初始默认样式 + 清空localStorage + 应用默认) -----
function resetAllSettings() {
// 清除所有存储的个性化设置
localStorage.removeItem('bodyColor');
localStorage.removeItem('buttonColor');
localStorage.removeItem('buttonBgColor');
localStorage.removeItem('buttonShape');
// 重置body背景默认 (原版 #f0f0f0)
document.body.style.backgroundColor = '#f0f0f0';
// 重置所有按钮样式为默认: 背景蓝, 文字白色, 圆角18px(对应原版圆角10px 但九宫格默认18px更现代，保留原体验使用18px)
const btns = document.querySelectorAll('.grid-btn');
btns.forEach(btn => {
btn.style.backgroundColor = '#3498db'; // 原生蓝
btn.style.color = 'white';
btn.style.borderRadius = '18px'; // 九宫格默认圆润，保持视觉统一又复古原圆角感
});
// 额外确保按钮容器无奇怪内联样式，完全回归默认
// 为了与原版“reset”彻底一致，也清除可能存留的背景内联
document.body.style.background = '';
// 同步保存默认值到localStorage（保证刷新后依然重置状态）
localStorage.setItem('buttonBgColor', '#3498db');
localStorage.setItem('buttonColor', 'white');
localStorage.setItem('buttonShape', '18px');
localStorage.setItem('bodyColor', '#f0f0f0');
}
// ---------- 加载现存localStorage设置 (保留原有持久化逻辑，仅用于设置页面可能调用的save) ----------
function loadSettings() {
const bodyColor = localStorage.getItem('bodyColor');
const buttonColor = localStorage.getItem('buttonColor');
const buttonBgColor = localStorage.getItem('buttonBgColor');
const buttonShape = localStorage.getItem('buttonShape');
if (bodyColor) document.body.style.backgroundColor = bodyColor;
if (buttonColor) {
document.querySelectorAll('.grid-btn').forEach(btn => btn.style.color = buttonColor);
}
if (buttonBgColor) {
document.querySelectorAll('.grid-btn').forEach(btn => btn.style.backgroundColor = buttonBgColor);
}
if (buttonShape) {
document.querySelectorAll('.grid-btn').forEach(btn => btn.style.borderRadius = buttonShape);
}
}
// 保存设置 - 原接口保留供可能扩展，但口令未主动保存确保原有行为，重置按钮除外
window.saveSettings = function(colorType, colorValue) {
if (colorType === 'bodyColor') {
localStorage.setItem('bodyColor', colorValue);
document.body.style.backgroundColor = colorValue;
} else if (colorType === 'buttonColor') {
localStorage.setItem('buttonColor', colorValue);
document.querySelectorAll('.grid-btn').forEach(btn => btn.style.color = colorValue);
} else if (colorType === 'buttonBgColor') {
localStorage.setItem('buttonBgColor', colorValue);
document.querySelectorAll('.grid-btn').forEach(btn => btn.style.backgroundColor = colorValue);
} else if (colorType === 'buttonShape') {
localStorage.setItem('buttonShape', colorValue);
document.querySelectorAll('.grid-btn').forEach(btn => btn.style.borderRadius = colorValue);
}
};
// 可选: 仅加载已保存样式(一般初次运行无存储,不影响)
loadSettings();
// ---------- 保留原有的欢迎提示框动画 (优雅下滑弹出 + 确认后淡出) ----------
(function initWelcomeTip() {
const tipBox = document.createElement('div');
tipBox.style.position = 'fixed';
tipBox.style.top = '50%';
tipBox.style.left = '50%';
tipBox.style.transform = 'translate(-50%, -50%)';
tipBox.style.backgroundColor = '#2c3e50';
tipBox.style.color = '#ffffff';
tipBox.style.padding = '12px 24px';
tipBox.style.borderRadius = '40px';
tipBox.style.zIndex = '10000';
tipBox.style.textAlign = 'center';
tipBox.style.fontFamily = "'Inter', system-ui";
tipBox.style.fontWeight = '500';
tipBox.style.boxShadow = '0 12px 28px rgba(0,0,0,0.2)';
tipBox.style.backdropFilter = 'blur(4px)';
tipBox.style.transition = 'opacity 0.35s ease, top 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1)';
tipBox.style.opacity = '0';
tipBox.style.pointerEvents = 'auto';
const tipSpan = document.createElement('span');
tipSpan.textContent = '欢迎来到我的小站!';
tipSpan.style.marginRight = '16px';
const closeBtn = document.createElement('button');
closeBtn.textContent = 'OK';
closeBtn.style.backgroundColor = '#3498db';
closeBtn.style.border = 'none';
closeBtn.style.padding = '6px 18px';
closeBtn.style.borderRadius = '32px';
closeBtn.style.color = 'white';
closeBtn.style.cursor = 'pointer';
closeBtn.style.fontWeight = 'bold';
closeBtn.style.transition = '0.1s';
closeBtn.onmouseover = () => closeBtn.style.backgroundColor = '#217dbb';
closeBtn.onmouseout = () => closeBtn.style.backgroundColor = '#3498db';
closeBtn.onclick = () => {
tipBox.style.opacity = '0';
tipBox.style.top = '70%';
tipBox.style.pointerEvents = 'none';
setTimeout(() => tipBox.remove(), 600);
};
tipBox.appendChild(tipSpan);
tipBox.appendChild(closeBtn);
document.body.appendChild(tipBox);
setTimeout(() => {
tipBox.style.opacity = '1';
tipBox.style.top = '18px';
tipBox.style.transform = 'translate(-50%, 0)';
}, 80);
})();
// ---------- 鼠标跟随 (完美保留原逻辑，性能优化且跟随) ----------
const mousePointer = document.getElementById('mousePointer');
if (mousePointer) {
document.addEventListener('mousemove', function(e) {
mousePointer.style.left = (e.clientX + 8) + 'px';
mousePointer.style.top = (e.clientY + 8) + 'px';
});
// 防止页面外溢出
document.body.addEventListener('mouseleave', () => {
mousePointer.style.opacity = '0';
});
document.body.addEventListener('mouseenter', () => {
mousePointer.style.opacity = '1';
});
}
// 额外兼容: 确保任何动态添加/删除按钮不会丢失样式 (保留九宫格)
// 原版中有部分prompt相关调用全局函数，确保外部可调用
window.changeColor = function(color) {
const colorsMap = {
'gray': '#f0f0f0',
'blue': '#3498db',
'green': '#2ecc71',
'red': '#e74c3c'
};
document.body.style.backgroundColor = colorsMap[color] || color;
};
// 对于toggleFullScreen (原代码未使用但保留)
window.toggleFullscreen = function() {
try {
if (document.fullscreenElement) {
document.exitFullscreen();
} else {
document.documentElement.requestFullscreen();
}
} catch(e) { console.log("全屏不支持"); }
};
// 额外保证通过“重置默认”之后，原有“输入口令”重置case也可以工作, 且重置功能彻底恢复所有按钮的内联样式。
// 同时修复由于九宫格新增重置按钮可能被localStorage覆盖问题：重置后保存干净默认
// 预置入口: 如果用户通过重置按钮重置，全面恢复且保存默认到storage，同时也能保证刷新默认
// 为保证和原版风格统一，页面初始背景等无强制localStorage覆盖时保留默认灰色
// 处理可能从存储加载shape导致重置后样式偏差 - 完美
// 额外细节: 防止任何按钮事件冲突多次绑定
// 注意原来就有一些设置，并不影响任何跳转
console.log('九宫格版已加载 · 梅布斯小站焕新');
// 附加小优化 - 给按钮添加涟漪微效果（可选 / 不破坏原有风格）
const allBtns = document.querySelectorAll('.grid-btn');
allBtns.forEach(btn => {
btn.addEventListener('click', function(e) {
// 纯粹提升触感无副作用, 保留动画一致性
if(!btn.classList.contains('no-ripple')) {
const ripple = document.createElement('span');
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.backgroundColor = 'rgba(255,255,255,0.4)';
ripple.style.width = '20px';
ripple.style.height = '20px';
ripple.style.transform = 'scale(0)';
ripple.style.transition = 'transform 0.3s ease-out, opacity 0.3s';
ripple.style.opacity = '1';
ripple.style.pointerEvents = 'none';
ripple.style.left = `${e.offsetX}px`;
ripple.style.top = `${e.offsetY}px`;
btn.style.position = 'relative';
btn.style.overflow = 'hidden';
ripple.classList.add('ripple-effect');
btn.appendChild(ripple);
setTimeout(() => {
ripple.style.transform = 'scale(12)';
ripple.style.opacity = '0';
setTimeout(() => ripple.remove(), 400);
}, 10);
}
});
});
})();
</script>
</body>
</html>