AI摘要
坤少博客
此页面只是一个简单的HTML没有任何技术难度
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>服务已停止</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap">
<style>
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
color: #fff;
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
}
.card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
transition: all 0.5s ease;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}
.service-icon {
position: relative;
width: 120px;
height: 120px;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
box-shadow: 0 0 30px rgba(255, 59, 48, 0.5);
}
.service-icon::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid rgba(255, 59, 48, 0.8);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(0.95);
opacity: 0.8;
}
70% {
transform: scale(1.1);
opacity: 0;
}
100% {
transform: scale(0.95);
opacity: 0;
}
}
.slide-up {
animation: slideUp 0.8s ease forwards;
opacity: 0;
transform: translateY(30px);
}
@keyframes slideUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.1) 100%);
}
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
10%, 90% {transform: translateX(-1px);}
20%, 80% {transform: translateX(2px);}
30%, 50%, 70% {transform: translateX(-4px);}
40%, 60% {transform: translateX(4px);}
}
.animate-pulse {
animation: pulse-fade 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-fade {
0%, 100% {opacity: 1;}
50% {opacity: .5;}
}
.badge {
position: relative;
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 1.5rem;
background: rgba(255, 59, 48, 0.2);
border: 1px solid rgba(255, 59, 48, 0.5);
color: #ff3b30;
}
.timeline {
position: relative;
padding-left: 2rem;
}
.timeline::before {
content: '';
position: absolute;
left: 0;
top: 6px;
height: calc(100% - 12px);
width: 2px;
background: rgba(156, 163, 175, 0.5);
}
.timeline-item {
position: relative;
padding-bottom: 1.5rem;
}
.timeline-item:last-child {
padding-bottom: 0;
}
.timeline-dot {
position: absolute;
left: -2rem;
top: 0.25rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #4f46e5;
border: 2px solid #fff;
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}
.service-status-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
border-radius: 9999px;
background: rgba(255, 59, 48, 0.2);
border: 1px solid rgba(255, 59, 48, 0.5);
color: #ff3b30;
font-weight: 500;
margin-bottom: 1.5rem;
}
.status-pulse {
width: 10px;
height: 10px;
background-color: #ff3b30;
border-radius: 50%;
margin-right: 0.5rem;
position: relative;
}
.status-pulse::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border-radius: 50%;
background-color: rgba(255, 59, 48, 0.5);
animation: status-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes status-ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
.service-feature {
display: flex;
align-items: flex-start;
margin-bottom: 1rem;
}
.feature-icon {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: rgba(79, 70, 229, 0.2);
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
flex-shrink: 0;
color: #818cf8;
}
</style>
</head>
<body>
<div class="container mx-auto px-4 py-8">
<div class="card p-6 md:p-8 slide-up" style="animation-delay: 0.1s;">
<div class="text-center">
<h1 class="text-3xl md:text-4xl font-bold mb-2 bg-gradient-to-r from-red-400 to-pink-600 bg-clip-text text-transparent">服务已停止</h1>
<p class="text-gray-300 mb-6">感谢您一直以来的支持与信任</p>
<div class="service-status-badge">
<span class="status-pulse"></span>
服务已永久关闭
</div>
<div class="service-icon">
<i class="fas fa-power-off text-5xl text-red-500"></i>
</div>
<div class="bg-gray-800 bg-opacity-50 rounded-lg p-5 mb-6 max-w-2xl mx-auto">
<h2 class="text-xl font-bold mb-3 text-yellow-300">
<i class="fas fa-exclamation-triangle mr-2"></i>重要通知
</h2>
<p class="text-gray-300 mb-4">
我们非常遗憾地通知您，本服务已于 <span class="font-semibold text-red-400">2025年05月06日</span> 永久停止运营。
</p>
<p class="text-gray-300">
请注意，所有账户数据将按照我们的数据处理规定进行安全处理。如您需要导出个人数据，请在 <span class="font-semibold text-yellow-300">30天内</span> 通过下方联系方式与我们联系。
</p>
</div>
<div class="timeline mx-auto text-left max-w-lg mb-6">
<h3 class="font-bold text-xl mb-4 text-center text-purple-300">服务关闭时间线</h3>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-medium text-purple-300">2025-04-01</div>
<div class="text-gray-300">服务关闭预告公告</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-medium text-purple-300">2025-05-06</div>
<div class="text-gray-300">服务完全停止</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="font-medium text-purple-300">2025-06-06</div>
<div class="text-gray-300">用户数据删除</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
<div class="service-feature">
<div class="feature-icon">
<i class="fas fa-database"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">数据备份</h3>
<p class="text-sm text-gray-400">所有用户可申请个人数据备份导出</p>
</div>
</div>
<div class="service-feature">
<div class="feature-icon">
<i class="fas fa-coins"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">退款申请</h3>
<p class="text-sm text-gray-400">未使用的服务将按比例退款</p>
</div>
</div>
<div class="service-feature">
<div class="feature-icon">
<i class="fas fa-headset"></i>
</div>
<div>
<h3 class="font-medium text-blue-300">客户支持</h3>
文章最后更新时间：2025-06-16 05:11:48，若有错误或已失效，请在下方
留言。
© 版权声明
版权声明
最后更新: 加载中...
© 2023 作者/坤少. 保留所有权利。
未经书面许可，禁止任何形式的复制、转载或修改。
联系方式: 3298980057
©
THE END
暂无评论内容