Mbilse.github.io/project.html at main · Mbilse/Mbilse.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的展示台</title>
<style>
  body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
  }
  .header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
  }
  .header h1, .header h2, .header h3 {
    margin: 0 10px;
  }
  .button-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  .button {
    background-color: #3498db;
    color: white;
    border: none;
    padding: 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.3s;
  }
  .button:hover {
    background-color: #2980b9;
  }
    .footer {
            position: fixed; /* 固定在页面底部 */
            bottom: 0; /* 距离底部0 */
            width: 100%; /* 宽度为100% */
            text-align: center; /* 水平居中 */
            color: gray; /* 设置文字颜色为灰色 */
            font-size: 18px; /* 可选：设置文字大小 */
  }
  .footer a{
    color: cyan;
  }
</style>
</head>
<body>

  <h1>我的项目</h1>
  <h2>梅布斯乔治的小站</h2>
  <h3>一些大型和小型项目</h3>


<div class="button-container">
  <button class="button" onclick="location.href='https://Mbilse.github.io/qiandu/'">偶合千度</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/tapple/'">渐变</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/aideguang'">爱得光</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/mbilsedos'">DOS</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/copilot'">Copilot</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/newyear'">新年烟花</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/host.md'">Readme</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/wish'">许愿池</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/mofang'">魔方游戏</button>
  <button class="button" onclick="location.href='https://mbilse.github.io/conway'">康威游戏</button>
  <button class="button" onclick="location.href='index.html'">返回</button>
  <button class="button" onclick="location.href='code.html'">更多</button>
</div>
<div class="footer">
        Copyright Mbilse 2025 | <a href=" ">梅布斯</a>
</div>
<script>
  (function() {
    'use strict';

    // 创建提示框
    const tipBox = document.createElement('div');
    tipBox.style.position = 'fixed';
    tipBox.style.top = '50%'; // 初始位置在中间
    tipBox.style.left = '50%';
    tipBox.style.transform = 'translate(-50%, 0)'; // 水平居中
    tipBox.style.backgroundColor = '#333333';
    tipBox.style.color = '#ffffff';
    tipBox.style.padding = '10px 20px';
    tipBox.style.borderRadius = '5px';
    tipBox.style.zIndex = '999999';
    tipBox.style.textAlign = 'center';
    tipBox.style.transition = 'opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; // 添加过渡效果和弹性动画

    const tipText = document.createElement('span');
    tipText.textContent = '对不起，此页面已被迁移到其他页面了，点击右下角  更多  按钮查看一下吧！';
    tipText.style.marginRight = '10px';

    const closeButton = document.createElement('button');
    closeButton.textContent = '确定';
    closeButton.style.backgroundColor = '#0078D7';
    closeButton.style.color = '#ffffff';
    closeButton.style.border = 'none';
    closeButton.style.padding = '5px 10px';
    closeButton.style.borderRadius = '7px';
    closeButton.style.cursor = 'pointer';

    closeButton.addEventListener('click', () => {
        // 点击确定后虚化隐藏并向下移动
        tipBox.style.opacity = '0';
        tipBox.style.transform = 'translate(-50%, 0)'; // 保持水平居中
        tipBox.style.top = '30%'; // 向下移动到中间位置
        tipBox.style.pointerEvents = 'none'; // 防止再次点击
    });

    tipBox.appendChild(tipText);
    tipBox.appendChild(closeButton);

    document.body.appendChild(tipBox);

    // 动画效果：从中间往上滑到距顶10px位置并渐显
    setTimeout(() => {
        tipBox.style.opacity = '1';
        tipBox.style.top = '10px';
    }, 50); // 延迟50ms后开始动画，避免初始状态的闪烁
})();
</script>
</body>
</html>