![图片[1]|系统维护时临时html|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250606205337415-image-1024x822.png)
![图片[2]|系统维护时临时html|不死鸟资源网](https://www.busi.net/wp-content/uploads/2025/06/20250606205342266-image-1024x850.png)
用于网站服务器维护时新建页面解析过去，告知访客服务器正在维护。
维护中：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统维护通知</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
neutral: '#F8FAFC',
dark: '#1E293B'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient-blue {
background: linear-gradient(135deg, #165DFF 0%, #0A3CA0 100%);
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.fade-in {
animation: fadeIn 0.8s ease-in-out;
}
.slide-up {
animation: slideUp 0.8s ease-out;
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col items-center justify-center text-dark">
<!-- 顶部装饰条 -->
<div class="w-full h-2 bg-gradient-blue"></div>
<!-- 主容器 -->
<div class="container max-w-4xl mx-auto px-4 py-8 md:py-16">
<!-- 标志区域 -->
<div class="text-center mb-10 fade-in">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-primary/10 mb-4">
<i class="fa-solid fa-wrench text-primary text-4xl"></i>
</div>
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-2 text-shadow">系统维护中</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-2xl mx-auto">我们正在进行必要的系统维护，以提升您的使用体验</p>
</div>
<!-- 维护信息卡片 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl slide-up">
<div class="bg-gradient-blue p-6 md:p-8 text-white">
<div class="flex items-center justify-between">
<h2 class="text-2xl md:text-3xl font-bold">维护通知</h2>
<span class="bg-white/20 px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
<i class="fa-solid fa-clock-o mr-1"></i> 预计 30 分钟
</span>
</div>
</div>
<div class="p-6 md:p-8">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="fa-solid fa-info-circle text-primary mr-2"></i> 维护详情
</h3>
<p class="text-gray-700 leading-relaxed">
我们正在进行系统升级和性能优化，以提供更稳定、更高效的服务。在此期间，网站将暂时无法访问。
</p>
</div>
<!-- 倒计时区域 -->
<div class="bg-primary/5 rounded-xl p-6 mb-8">
<h3 class="text-xl font-semibold mb-4 text-center">
<i class="fa-solid fa-hourglass-half text-primary mr-2"></i> 维护剩余时间
</h3>
<div class="grid grid-cols-4 gap-2 md:gap-4">
<div class="text-center">
<div id="hours" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">00</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">小时</div>
</div>
<div class="text-center">
<div id="minutes" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">29</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">分钟</div>
</div>
<div class="text-center">
<div id="seconds" class="bg-white rounded-lg p-3 shadow-md text-2xl md:text-4xl font-bold text-primary">59</div>
<div class="text-xs md:text-sm text-gray-500 mt-2">秒</div>
</div>
<div class="text-center flex items-center justify-center">
<div class="pulse-animation">
<i class="fa-solid fa-circle text-primary"></i>
</div>
</div>
</div>
</div>
<!-- 预计完成时间 -->
<div class="bg-gray-50 rounded-xl p-4 mb-8">
<p class="text-center text-gray-700">
<i class="fa-solid fa-calendar-check-o text-primary mr-2"></i>
预计完成时间: <span id="completion-time" class="font-medium text-primary"></span>
</p>
</div>
<!-- 进度条 -->
<div class="mb-6">
<div class="flex justify-between mb-2">
<span class="text-sm font-medium text-gray-700">维护进度</span>
<span id="progress-percentage" class="text-sm font-medium text-primary">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2.5">
<div id="progress-bar" class="bg-primary h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
<!-- 联系信息 -->
<div class="text-center">
<p class="text-gray-600 mb-4">如有任何问题，请联系我们</p>
<a href="mailto:info@dalao.net" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors duration-300">
<i class="fa-solid fa-envelope mr-2"></i> info@dalao.net
</a>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-12 text-center text-gray-500 text-sm fade-in" style="animation-delay: 0.4s">
<p>© 2025 大佬论坛. 保留所有权利.</p>
</footer>
</div>
<script>
// 设置维护总时长（30分钟）
const totalMinutes = 30;
let totalSeconds = totalMinutes * 60;
// 计算预计完成时间
const now = new Date();
const completionTime = new Date(now.getTime() + totalSeconds * 1000);
// 更新完成时间显示
document.getElementById('completion-time').textContent =
`${completionTime.getHours().toString().padStart(2, '0')}:${completionTime.getMinutes().toString().padStart(2, '0')}`;
// 倒计时函数
function updateCountdown() {
totalSeconds--;
if (totalSeconds < 0) {
totalSeconds = 0;
clearInterval(countdownInterval);
document.getElementById('progress-bar').style.width = '100%';
document.getElementById('progress-percentage').textContent = '100%';
}
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
// 更新进度条
const progress = ((totalMinutes * 60 - totalSeconds) / (totalMinutes * 60)) * 100;
document.getElementById('progress-bar').style.width = `${progress}%`;
document.getElementById('progress-percentage').textContent = `${Math.round(progress)}%`;
}
// 每秒更新一次倒计时
updateCountdown(); // 立即更新一次
const countdownInterval = setInterval(updateCountdown, 1000);
</script>
</body>
</html>维护完成：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>系统维护已完成</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#36D399',
neutral: '#F8FAFC',
dark: '#1E293B'
},
fontFamily: {
inter: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.bg-gradient-blue {
background: linear-gradient(135deg, #165DFF 0%, #0A3CA0 100%);
}
.bg-gradient-green {
background: linear-gradient(135deg, #36D399 0%, #10B981 100%);
}
.pulse-animation {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.fade-in {
animation: fadeIn 0.8s ease-in-out;
}
.slide-up {
animation: slideUp 0.8s ease-out;
}
.bounce-in {
animation: bounceIn 0.6s cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
20% { transform: scale(1.1); }
40% { transform: scale(0.9); }
60% { transform: scale(1.03); opacity: 1; }
80% { transform: scale(0.97); }
100% { transform: scale(1); opacity: 1; }
}
</style>
</head>
<body class="font-inter bg-neutral min-h-screen flex flex-col items-center justify-center text-dark">
<!-- 顶部装饰条 -->
<div class="w-full h-2 bg-gradient-green"></div>
<!-- 主容器 -->
<div class="container max-w-4xl mx-auto px-4 py-8 md:py-16">
<!-- 标志区域 -->
<div class="text-center mb-10 fade-in">
<div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-secondary/10 mb-4 bounce-in">
<i class="fa-solid fa-check-circle text-secondary text-4xl"></i>
</div>
<h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-dark mb-2 text-shadow">系统维护已完成</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-2xl mx-auto">感谢您的耐心等待</p>
</div>
<!-- 维护信息卡片 -->
<div class="bg-white rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl slide-up">
<div class="bg-gradient-green p-6 md:p-8 text-white">
<div class="flex items-center justify-between">
<h2 class="text-2xl md:text-3xl font-bold">维护完成通知</h2>
<span class="bg-white/20 px-3 py-1 rounded-full text-sm font-medium backdrop-blur-sm">
<i class="fa-solid fa-check mr-1"></i> 已完成
</span>
</div>
</div>
<div class="p-6 md:p-8">
<div class="mb-8">
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="fa-solid fa-info-circle text-secondary mr-2"></i> 维护结果
</h3>
<p class="text-gray-700 leading-relaxed">
我们已顺利完成系统升级和性能优化，网站现已恢复正常访问。感谢您在此期间的理解与支持。
</p>
</div>
<!-- 成功状态区域 -->
<div class="bg-secondary/5 rounded-xl p-6 mb-8 flex flex-col md:flex-row items-center">
<div class="w-16 h-16 rounded-full bg-secondary/20 flex items-center justify-center mb-4 md:mb-0 md:mr-6">
<i class="fa-solid fa-thumbs-up text-secondary text-2xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold mb-2 text-secondary">维护工作顺利完成</h3>
<p class="text-gray-700">
系统已全面恢复，各项功能均已正常运行。我们对系统进行了全面检查，确保一切正常。
</p>
</div>
</div>
<!-- 提示信息 -->
<div class="bg-primary/5 rounded-xl p-6 mb-8">
<h3 class="text-xl font-semibold mb-3 flex items-center">
<i class="fa-solid fa-refresh text-primary mr-2"></i> 温馨提示
</h3>
<p class="text-gray-700 mb-4">
如果您仍然看到此页面或遇到任何问题，请尝试以下操作：
</p>
<ul class="list-disc pl-5 text-gray-700 space-y-2">
<li>刷新当前页面（按 F5 键或点击浏览器刷新按钮）</li>
<li>清除浏览器缓存和Cookie后重试</li>
<li>尝试使用其他浏览器访问</li>
</ul>
</div>
<!-- 联系信息 -->
<div class="text-center">
<p class="text-gray-600 mb-4">如有任何问题，请联系我们</p>
<a href="mailto:info@dalao.net" class="inline-flex items-center text-primary hover:text-primary/80 transition-colors duration-300">
<i class="fa-solid fa-envelope mr-2"></i> info@dalao.net
</a>
</div>
</div>
</div>
<!-- 页脚 -->
<footer class="mt-12 text-center text-gray-500 text-sm fade-in" style="animation-delay: 0.4s">
<p>© 2025 大佬论坛. 保留所有权利.</p>
</footer>
</div>
<script>
// 添加页面加载完成后的动画效果
document.addEventListener('DOMContentLoaded', function() {
// 可以添加更多的交互功能，如自动跳转等
});
</script>
</body>
</html>本站资源均为作者提供和网友推荐收集整理而来，仅供学习和研究使用，请在下载后24小时内删除，谢谢合作!
THE END
