一个粉的宝塔默认页面系列

1.站点搭建成功提示#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>站点搭建成功 ✧(≖ ◡ ≖✿)</title>
7
    <style>
8
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei", "PingFang SC", sans-serif;}
9
        body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
10
        /* 可爱漂浮装饰 */
11
        .decor {position: absolute;pointer-events: none;z-index: 0;}
12
        .decor1 {top: 20%;left: 10%;font-size: 24px;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
13
        .decor2 {bottom: 15%;right: 15%;font-size: 18px;color: #ffb3c6;animation: float 8s infinite ease-in-out 2s;}
14
        .decor3 {top: 60%;left: 20%;font-size: 20px;color: #ff99cc;animation: float 7s infinite ease-in-out 1s;}
15
        @keyframes float {
16
            0% {transform: translateY(0) rotate(0deg);}
17
            50% {transform: translateY(-15px) rotate(5deg);}
18
            100% {transform: translateY(0) rotate(0deg);}
19
        }
20
        /* 宝塔原生风格容器 */
21
        .box {
22
            background: #fff;
23
            padding: 40px 20px;
24
            border-radius: 16px;
25
            box-shadow: 0 3px 15px rgba(255,153,204,0.2);
26
            text-align: center;
27
            max-width: 400px;
28
            width: 100%;
29
            position: relative;
30
            z-index: 1;
31
            border: 2px solid #ffd6e0;
32
        }
33
        /* 可爱成功图标（替换原svg） */
34
        .success-icon {
35
            width: 64px;
36
            height: 64px;
37
            margin: 0 auto 20px;
38
            position: relative;
39
        }
40
        .success-icon::before {
41
            content: "✧";
42
            font-size: 64px;
43
            color: #ff6699;
44
            animation: bounce 1.5s infinite alternate;
45
        }
46
        @keyframes bounce {
47
            from {transform: scale(1);}
48
            to {transform: scale(1.1);}
49
        }
50
        h1 {
51
            font-size: 22px; /* 手机端缩小字体 */
52
            color: #ff6699;
53
            margin: 0 0 16px;
54
            font-weight: 600;
55
            text-shadow: 0 1px 3px rgba(255,102,153,0.15);
56
            letter-spacing: 0.5px; /* 微调字间距，避免换行 */
57
        }
58
        /* 响应式标题优化：小屏幕进一步缩小颜文字占比 */
59
        @media (max-width: 375px) {
60
            h1 {
61
                font-size: 20px;
62
                padding: 0 10px; /* 增加左右内边距，给文字更多空间 */
63
            }
64
            h1 span {
65
                font-size: 18px; /* 颜文字单独缩小 */
66
            }
67
        }
68
        p {
69
            color: #999;
70
            font-size: 15px;
71
            line-height: 1.6;
72
            margin-bottom: 28px;
73
        }
74
        /* 按钮样式（粉嫩主题） */
75
        a {
76
            display: inline-block;
77
            padding: 12px 30px;
78
            background: #ff99cc;
79
            color: #fff;
80
            text-decoration: none;
81
            border-radius: 30px;
82
            font-size: 15px;
83
            transition: all 0.3s ease;
84
            box-shadow: 0 2px 8px rgba(255,153,204,0.2);
85
        }
86
        a:hover {
87
            background: #ff6699;
88
            box-shadow: 0 4px 12px rgba(255,102,153,0.3);
89
            transform: translateY(-2px);
90
        }
91
        /* 底部版权 */
92
        .footer {
93
            font-size: 12px;
94
            color: #ffb3c6;
95
            margin-top: 30px;
96
            letter-spacing: 0.5px;
97
        }
98
        .footer::after {
99
            content: " ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";
100
        }
101
    </style>
102
</head>
103
<body>
104
    <!-- 可爱漂浮装饰 -->
105
    <div class="decor decor1">✿</div>
106
    <div class="decor decor2">★</div>
107
    <div class="decor decor3">♡</div>
108

109
    <div class="box">
110
        <div class="success-icon"></div>
111
        <!-- 标题拆分颜文字，方便响应式调整 -->
112
        <h1>站点搭建成功啦 <span>✧(≖ ◡ ≖✿)</span></h1>
113
        <p>粉嫩小站已就绪，快去探索更多可爱玩法吧～</p>
114
        <a href="https://www.bt.cn/" target="_blank">官方文档</a>
115
        <div class="footer">© 宝塔面板 服务器管理工具</div>
116
    </div>
117
</body>
118
</html>

2.404提示页面#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>页面走丢啦 ✧(≖ ◡ ≖✿)</title>
7
    <style>
8
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei", "PingFang SC", sans-serif;}
9
        body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
10
        /* 可爱漂浮装饰 */
11
        .decor {position: absolute;pointer-events: none;z-index: 0;}
12
        .decor1 {top: 20%;left: 10%;font-size: 24px;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
13
        .decor2 {bottom: 15%;right: 15%;font-size: 18px;color: #ffb3c6;animation: float 8s infinite ease-in-out 2s;}
14
        .decor3 {top: 60%;left: 20%;font-size: 20px;color: #ff99cc;animation: float 7s infinite ease-in-out 1s;}
15
        .decor4 {top: 30%;right: 20%;font-size: 22px;color: #ffc2d1;animation: float 9s infinite ease-in-out 1.5s;}
16
        @keyframes float {
17
            0% {transform: translateY(0) rotate(0deg);}
18
            50% {transform: translateY(-15px) rotate(5deg);}
19
            100% {transform: translateY(0) rotate(0deg);}
20
        }
21
        /* 宝塔原生风格容器 */
22
        .box {
23
            background: #fff;
24
            padding: 40px 20px;
25
            border-radius: 16px;
26
            box-shadow: 0 3px 15px rgba(255,153,204,0.2);
27
            text-align: center;
28
            max-width: 400px;
29
            width: 100%;
30
            position: relative;
31
            z-index: 1;
32
            border: 2px solid #ffd6e0;
33
        }
34
        /* 404可爱图标 */
35
        .error-icon {
36
            width: 64px;
37
            height: 64px;
38
            margin: 0 auto 20px;
39
            position: relative;
40
        }
41
        .error-icon::before {
42
            content: "404";
43
            font-size: 64px;
44
            color: #ff6699;
45
            font-weight: 700;
46
            animation: bounce 1.5s infinite alternate;
47
        }
48
        @keyframes bounce {
49
            from {transform: scale(1);}
50
            to {transform: scale(1.1);}
51
        }
52
        h1 {
53
            font-size: 22px;
54
            color: #ff6699;
55
            margin: 0 0 16px;
56
            font-weight: 600;
57
            text-shadow: 0 1px 3px rgba(255,102,153,0.15);
58
            letter-spacing: 0.5px;
59
        }
60
        /* 手机小屏响应式优化 */
61
        @media (max-width: 375px) {
62
            h1 {
63
                font-size: 20px;
64
                padding: 0 10px;
65
            }
66
            h1 span {
67
                font-size: 18px;
68
            }
69
        }
70
        p {
71
            color: #999;
72
            font-size: 15px;
73
            line-height: 1.6;
74
            margin-bottom: 28px;
75
            padding: 0 10px;
76
        }
77
        /* 粉嫩返回按钮 */
78
        a {
79
            display: inline-block;
80
            padding: 12px 30px;
81
            background: #ff99cc;
82
            color: #fff;
83
            text-decoration: none;
84
            border-radius: 30px;
85
            font-size: 15px;
86
            transition: all 0.3s ease;
87
            box-shadow: 0 2px 8px rgba(255,153,204,0.2);
88
        }
89
        a:hover {
90
            background: #ff6699;
91
            box-shadow: 0 4px 12px rgba(255,102,153,0.3);
92
            transform: translateY(-2px);
93
        }
94
        /* 底部版权 */
95
        .footer {
96
            font-size: 12px;
97
            color: #ffb3c6;
98
            margin-top: 30px;
99
            letter-spacing: 0.5px;
100
        }
101
        .footer::after {
102
            content: " ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";
103
        }
104
    </style>
105
</head>
106
<body>
107
    <!-- 可爱漂浮装饰 -->
108
    <div class="decor decor1">✿</div>
109
    <div class="decor decor2">★</div>
110
    <div class="decor decor3">♡</div>
111
    <div class="decor decor4">🌸</div>
112

113
    <div class="box">
114
        <div class="error-icon"></div>
115
        <h1>页面走丢啦 <span>✧(≖ ◡ ≖✿)</span></h1>
116
        <p>糟糕！你访问的页面迷路了，快回到首页找找它吧～</p>
117
        <a href="/" target="_self">返回首页</a>
118
        <div class="footer">© 宝塔面板 服务器管理工具</div>
119
    </div>
120
</body>
121
</html>

3.没有页面提示#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>没有找到站点 - 宝塔面板</title>
7
    <style>
8
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei", "PingFang SC", sans-serif;}
9
        body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
10
        .decor {position: absolute;pointer-events: none;z-index: 0;}
11
        .decor1 {top: 20%;left: 10%;font-size: 24px;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
12
        .decor2 {bottom: 15%;right: 15%;font-size: 18px;color: #ffb3c6;animation: float 8s infinite ease-in-out 2s;}
13
        .decor3 {top: 60%;left: 20%;font-size: 20px;color: #ff99cc;animation: float 7s infinite ease-in-out 1s;}
14
        .decor4 {top: 30%;right: 20%;font-size: 22px;color: #ffc2d1;animation: float 9s infinite ease-in-out 1.5s;}
15
        @keyframes float {
16
            0% {transform: translateY(0) rotate(0deg);}
17
            50% {transform: translateY(-15px) rotate(5deg);}
18
            100% {transform: translateY(0) rotate(0deg);}
19
        }
20
        .box {
21
            background: #fff;
22
            padding: 40px 20px;
23
            border-radius: 16px;
24
            box-shadow: 0 3px 15px rgba(255,153,204,0.2);
25
            text-align: left;
26
            max-width: 480px;
27
            width: 100%;
28
            position: relative;
29
            z-index: 1;
30
            border: 2px solid #ffd6e0;
31
        }
32
        .error-icon {
33
            width: 64px;
34
            height: 64px;
35
            margin: 0 auto 20px;
36
            position: relative;
37
            text-align: center;
38
        }
39
        .error-icon::before {
40
            content: "！";
41
            font-size: 64px;
42
            color: #ff6699;
43
            font-weight: 700;
44
            animation: bounce 1.5s infinite alternate;
45
        }
46
        @keyframes bounce {
47
            from {transform: scale(1);}
48
            to {transform: scale(1.1);}
49
        }
50
        h1 {
51
            font-size: 22px;
52
            color: #ff6699;
53
            margin: 0 0 16px;
54
            font-weight: 600;
55
            text-shadow: 0 1px 3px rgba(255,102,153,0.15);
56
            letter-spacing: 0.5px;
57
            text-align: center;
58
        }
59
        @media (max-width: 375px) {
60
            h1 {font-size: 20px;padding: 0 10px;}
61
            .content p, .content li {font-size: 14px;}
62
        }
63
        .t1 {
64
            color: #999;
65
            font-size: 15px;
66
            line-height: 1.6;
67
            margin-bottom: 20px;
68
            padding: 0 10px;
69
            text-align: center;
70
        }
71
        .t2 {
72
            font-size: 16px;
73
            color: #ff6699;
74
            margin: 0 0 10px 10px;
75
            font-weight: 500;
76
        }
77
        .content ol {
78
            padding: 0 30px;
79
            margin-bottom: 20px;
80
        }
81
        .content li {
82
            color: #666;
83
            font-size: 15px;
84
            line-height: 1.8;
85
            margin-bottom: 6px;
86
        }
87
        a {
88
            display: inline-block;
89
            padding: 12px 30px;
90
            background: #ff99cc;
91
            color: #fff;
92
            text-decoration: none;
93
            border-radius: 30px;
94
            font-size: 15px;
95
            transition: all 0.3s ease;
96
            box-shadow: 0 2px 8px rgba(255,153,204,0.2);
97
            margin: 0 auto;
98
            display: block;
99
            width: fit-content;
100
        }
101
        a:hover {
102
            background: #ff6699;
103
            box-shadow: 0 4px 12px rgba(255,102,153,0.3);
104
            transform: translateY(-2px);
105
        }
106
        .footer {
107
            font-size: 12px;
108
            color: #ffb3c6;
109
            margin-top: 30px;
110
            letter-spacing: 0.5px;
111
            text-align: center;
112
        }
113
        .footer::after {
114
            content: " ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";
115
        }
116
    </style>
117
</head>
118
<body>
119
    <div class="decor decor1">✿</div>
120
    <div class="decor decor2">★</div>
121
    <div class="decor decor3">♡</div>
122
    <div class="decor decor4">🌸</div>
123

124
    <div class="box">
125
        <div class="error-icon"></div>
126
        <h1>没有找到站点 ✧(≖ ◡ ≖✿)</h1>
127
        <div class="content">
128
            <p class="t1">您的请求在Web服务器中没有找到对应的站点！</p>
129
            <p class="t2">可能原因：</p>
130
            <ol>
131
                <li>您没有将此域名或IP绑定到对应站点!</li>
132
                <li>配置文件未生效!</li>
133
            </ol>
134
            <p class="t2">如何解决：</p>
135
            <ol>
136
                <li>检查是否已经绑定到对应站点，若确认已绑定，请尝试重载Web服务；</li>
137
                <li>检查端口是否正确；</li>
138
                <li>若您使用了CDN产品，请尝试清除CDN缓存；</li>
139
                <li>普通网站访客，请联系网站管理员；</li>
140
            </ol>
141
        </div>
142
        <a href="/" target="_self">返回首页</a>
143
        <div class="footer">© 宝塔面板 服务器管理工具</div>
144
    </div>
145
</body>
146
</html>

4.服务已停止#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>服务已停止使用 - 宝塔面板</title>
7
    <style>
8
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei", "PingFang SC", sans-serif;}
9
        body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
10
        .decor {position: absolute;pointer-events: none;z-index: 0;}
11
        .decor1 {top: 20%;left: 10%;font-size: 24px;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
12
        .decor2 {bottom: 15%;right: 15%;font-size: 18px;color: #ffb3c6;animation: float 8s infinite ease-in-out 2s;}
13
        .decor3 {top: 60%;left: 20%;font-size: 20px;color: #ff99cc;animation: float 7s infinite ease-in-out 1s;}
14
        .decor4 {top: 30%;right: 20%;font-size: 22px;color: #ffc2d1;animation: float 9s infinite ease-in-out 1.5s;}
15
        @keyframes float {
16
            0% {transform: translateY(0) rotate(0deg);}
17
            50% {transform: translateY(-15px) rotate(5deg);}
18
            100% {transform: translateY(0) rotate(0deg);}
19
        }
20
        .box {
21
            background: #fff;
22
            padding: 40px 20px;
23
            border-radius: 16px;
24
            box-shadow: 0 3px 15px rgba(255,153,204,0.2);
25
            text-align: left;
26
            max-width: 480px;
27
            width: 100%;
28
            position: relative;
29
            z-index: 1;
30
            border: 2px solid #ffd6e0;
31
        }
32
        .error-icon {
33
            width: 64px;
34
            height: 64px;
35
            margin: 0 auto 20px;
36
            position: relative;
37
            text-align: center;
38
        }
39
        .error-icon::before {
40
            content: "⊗";
41
            font-size: 64px;
42
            color: #ff6699;
43
            font-weight: 700;
44
            animation: bounce 1.5s infinite alternate;
45
        }
46
        @keyframes bounce {
47
            from {transform: scale(1);}
48
            to {transform: scale(1.1);}
49
        }
50
        h1 {
51
            font-size: 22px;
52
            color: #ff6699;
53
            margin: 0 0 16px;
54
            font-weight: 600;
55
            text-shadow: 0 1px 3px rgba(255,102,153,0.15);
56
            letter-spacing: 0.5px;
57
            text-align: center;
58
        }
59
        @media (max-width: 375px) {
60
            h1 {font-size: 20px;padding: 0 10px;}
61
            .content p, .content li {font-size: 14px;}
62
        }
63
        .t1 {
64
            color: #999;
65
            font-size: 15px;
66
            line-height: 1.6;
67
            margin-bottom: 20px;
68
            padding: 0 10px;
69
            text-align: center;
70
        }
71
        .t2 {
72
            font-size: 16px;
73
            color: #ff6699;
74
            margin: 0 0 10px 10px;
75
            font-weight: 500;
76
        }
77
        .content ol {
78
            padding: 0 30px;
79
            margin-bottom: 20px;
80
        }
81
        .content li {
82
            color: #666;
83
            font-size: 15px;
84
            line-height: 1.8;
85
            margin-bottom: 6px;
86
        }
87
        a {
88
            display: inline-block;
89
            padding: 12px 30px;
90
            background: #ff99cc;
91
            color: #fff;
92
            text-decoration: none;
93
            border-radius: 30px;
94
            font-size: 15px;
95
            transition: all 0.3s ease;
96
            box-shadow: 0 2px 8px rgba(255,153,204,0.2);
97
            margin: 0 auto;
98
            display: block;
99
            width: fit-content;
100
        }
101
        a:hover {
102
            background: #ff6699;
103
            box-shadow: 0 4px 12px rgba(255,102,153,0.3);
104
            transform: translateY(-2px);
105
        }
106
        .footer {
107
            font-size: 12px;
108
            color: #ffb3c6;
109
            margin-top: 30px;
110
            letter-spacing: 0.5px;
111
            text-align: center;
112
        }
113
        .footer::after {
114
            content: " ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";
115
        }
116
    </style>
117
</head>
118
<body>
119
    <div class="decor decor1">✿</div>
120
    <div class="decor decor2">★</div>
121
    <div class="decor decor3">♡</div>
122
    <div class="decor decor4">🌸</div>
123

124
    <div class="box">
125
        <div class="error-icon"></div>
126
        <h1>服务已停止使用 ✧(≖ ◡ ≖✿)</h1>
127
        <div class="content">
128
            <p class="t1">当前站点/服务已正式停止使用，暂无法提供访问服务</p>
129
            <p class="t2">可能原因：</p>
130
            <ol>
131
                <li>站点到期未续费、主体信息变更导致服务终止；</li>
132
                <li>服务存在合规问题，按相关要求停止运营；</li>
133
                <li>管理员主动注销站点，相关资源已清理；</li>
134
                <li>功能迭代升级，原服务已下线并替换为新功能；</li>
135
            </ol>
136
            <p class="t2">相关建议：</p>
137
            <ol>
138
                <li>站点管理员可登录服务器面板，检查站点配置及资源状态；</li>
139
                <li>确认站点备案/主体信息是否有效，及时完成更新或续费；</li>
140
                <li>普通访客可联系站点运营方，获取服务最新动态；</li>
141
                <li>若为功能下线，可前往平台首页查看替代功能及使用指引；</li>
142
            </ol>
143
        </div>
144
        <a href="/" target="_self">返回首页</a>
145
        <div class="footer">© 宝塔面板 服务器管理工具</div>
146
    </div>
147
</body>
148
</html>

5.域名停靠待启用#

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>站点待启用 ✧(≖ ◡ ≖✿)</title>
7
    <style>
8
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei","PingFang SC",sans-serif;}
9
        body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
10
        .decor {position: absolute;pointer-events: none;z-index: 0;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
11
        .decor1 {top:20%;left:10%;font-size:24px;}
12
        .decor2 {bottom:15%;right:15%;font-size:18px;color:#ffb3c6;animation-delay:2s;animation-duration:8s;}
13
        .decor3 {top:60%;left:20%;font-size:20px;color:#ff99cc;animation-delay:1s;animation-duration:7s;}
14
        .decor4 {top:30%;right:20%;font-size:22px;color:#ffc2d1;animation-delay:1.5s;animation-duration:9s;}
15
        @keyframes float {0%{transform:translateY(0)rotate(0deg);}50%{transform:translateY(-15px)rotate(5deg);}100%{transform:translateY(0)rotate(0deg);}}
16
        .box {background:#fff;padding:40px 20px;border-radius:16px;box-shadow:0 3px 15px rgba(255,153,204,0.2);text-align:center;max-width:400px;width:100%;position:relative;z-index:1;border:2px solid #ffd6e0;}
17
        .error-icon {width:64px;height:64px;margin:0 auto 20px;}
18
        .error-icon::before {content:"♡";font-size:64px;color:#ff6699;font-weight:700;animation:bounce 1.5s infinite alternate;}
19
        @keyframes bounce {from{transform:scale(1);}to{transform:scale(1.1);}}
20
        h1 {font-size:22px;color:#ff6699;margin:0 0 16px;font-weight:600;text-shadow:0 1px 3px rgba(255,102,153,0.15);letter-spacing:0.5px;}
21
        p {color:#999;font-size:15px;line-height:1.6;margin-bottom:28px;padding:0 10px;}
22
        a {display:inline-block;padding:12px 30px;background:#ff99cc;color:#fff;text-decoration:none;border-radius:30px;font-size:15px;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(255,153,204,0.2);}
23
        a:hover {background:#ff6699;box-shadow:0 4px 12px rgba(255,102,153,0.3);transform:translateY(-2px);}
24
        .footer {font-size:12px;color:#ffb3c6;margin-top:30px;letter-spacing:0.5px;}
25
        .footer::after {content:" ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";}
26
        .cf-host {font-size:11px;color:#d8a8b8;margin-top:8px;}
27
        @media(max-width:375px){h1{font-size:20px;padding:0 10px;}h1 span{font-size:18px;}}
28
    </style>
29
</head>
30
<body>
31
    <div class="decor decor1">✿</div>
32
    <div class="decor decor2">★</div>
33
    <div class="decor decor3">♡</div>
34
    <div class="decor decor4">🌸</div>
35

36
    <div class="box">
37
        <div class="error-icon"></div>
38
        <h1>站点待启用 <span>✧(≖ ◡ ≖✿)</span></h1>
39
        <p>该域名暂未搭建站点服务，暂未正式启用哦～ 敬请期待后续更新呀～</p>
40
        <a href="javascript:history.back()" target="_self">返回上一页</a>
41
        <div class="footer">© 站点维护中 敬请期待</div>
42
        <div class="cf-host">托管在 Cloudflare | 由 Cloudflare CDN 提供加速与安全防护</div>
43
    </div>
44
</body>
45
</html>

直接Cloudflare Workers托管的版本

1
addEventListener('fetch', event => {
2
  event.respondWith(handleRequest(event.request))
3
})
4

5
async function handleRequest(request) {
6
  const html = `
7
<!DOCTYPE html>
8
<html lang="zh-CN">
9
<head>
10
    <meta charset="UTF-8">
11
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
    <title>站点待启用 ✧(≖ ◡ ≖✿)</title>
13
    <style>
14
        * {margin: 0;padding: 0;box-sizing: border-box;font-family: "Microsoft YaHei","PingFang SC",sans-serif;}
15
        body {min-height: 100vh;display: flex;align-items: center;justify-content: center;background: #fff5f8;padding: 20px;position: relative;overflow: hidden;}
16
        .decor {position: absolute;pointer-events: none;z-index: 0;color: #ffd6e0;animation: float 6s infinite ease-in-out;}
17
        .decor1 {top:20%;left:10%;font-size:24px;}
18
        .decor2 {bottom:15%;right:15%;font-size:18px;color:#ffb3c6;animation-delay:2s;animation-duration:8s;}
19
        .decor3 {top:60%;left:20%;font-size:20px;color:#ff99cc;animation-delay:1s;animation-duration:7s;}
20
        .decor4 {top:30%;right:20%;font-size:22px;color:#ffc2d1;animation-delay:1.5s;animation-duration:9s;}
21
        @keyframes float {0%{transform:translateY(0)rotate(0deg);}50%{transform:translateY(-15px)rotate(5deg);}100%{transform:translateY(0)rotate(0deg);}}
22
        .box {background:#fff;padding:40px 20px;border-radius:16px;box-shadow:0 3px 15px rgba(255,153,204,0.2);text-align:center;max-width:400px;width:100%;position:relative;z-index:1;border:2px solid #ffd6e0;}
23
        .error-icon {width:64px;height:64px;margin:0 auto 20px;}
24
        .error-icon::before {content:"♡";font-size:64px;color:#ff6699;font-weight:700;animation:bounce 1.5s infinite alternate;}
25
        @keyframes bounce {from{transform:scale(1);}to{transform:scale(1.1);}}
26
        h1 {font-size:22px;color:#ff6699;margin:0 0 16px;font-weight:600;text-shadow:0 1px 3px rgba(255,102,153,0.15);letter-spacing:0.5px;}
27
        p {color:#999;font-size:15px;line-height:1.6;margin-bottom:28px;padding:0 10px;}
28
        a {display:inline-block;padding:12px 30px;background:#ff99cc;color:#fff;text-decoration:none;border-radius:30px;font-size:15px;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(255,153,204,0.2);}
29
        a:hover {background:#ff6699;box-shadow:0 4px 12px rgba(255,102,153,0.3);transform:translateY(-2px);}
30
        .footer {font-size:12px;color:#ffb3c6;margin-top:30px;letter-spacing:0.5px;}
31
        .footer::after {content:" ✧ෆ◞◟˃̶̤⌄˂̶̤⋆biubiu";}
32
        .cf-host {font-size:11px;color:#d8a8b8;margin-top:8px;}
33
        @media(max-width:375px){h1{font-size:20px;padding:0 10px;}h1 span{font-size:18px;}}
34
    </style>
35
</head>
36
<body>
37
    <div class="decor decor1">✿</div>
38
    <div class="decor decor2">★</div>
39
    <div class="decor decor3">♡</div>
40
    <div class="decor decor4">🌸</div>
41

42
    <div class="box">
43
        <div class="error-icon"></div>
44
        <h1>站点待启用 <span>✧(≖ ◡ ≖✿)</span></h1>
45
        <p>该域名暂未搭建站点服务，暂未正式启用哦～ 敬请期待后续更新呀～</p>
46
        <a href="＃" target="_self">返回到主站</a>
47
        <div class="footer">© 站点维护中 敬请期待</div>
48
        <div class="cf-host">托管在 Cloudflare | 由 Cloudflare CDN 提供加速与安全防护</div>
49
    </div>
50
</body>
51
</html>
52
`;
53

54
  return new Response(html, {
55
    headers: {
56
      'Content-Type': 'text/html;charset=UTF-8',
57
      'Cache-Control': 'no-cache'
58
    }
59
  })
60
}

1.站点搭建成功提示#

2.404提示页面#

3.没有页面提示#

4.服务已停止#

5.域名停靠待启用#

评论区

音乐