<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>System Upgrade In Progress</title>
<script src=”https://cdn.tailwindcss.com”></script>
<link href=”https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css” rel=”stylesheet”>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: ‘#165DFF’,
warning: ‘#FF7D00’,
neutral: ‘#86909C’,
dark: ‘#1D2129’,
light: ‘#F2F3F5’
},
fontFamily: {
inter: [‘Inter’, ‘sans-serif’],
},
}
}
}
</script>
<style type=”text/tailwindcss”>
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}
.animate-pulse-slow {
animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.animate-progress {
background: linear-gradient(90deg, #165DFF 0%, #36BFFA 50%, #165DFF 100%);
background-size: 200% 100%;
animation: progress-animation 2s linear infinite;
}
}
@keyframes progress-animation {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
<link href=”https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap” rel=”stylesheet”>
</head>
<body class=”bg-gradient-to-br from-light to-primary/10 min-h-screen flex items-center justify-center font-inter overflow-hidden”>
<!– Background Elements –>
<div class=”absolute inset-0 overflow-hidden”>
<div class=”absolute -top-20 -right-20 w-80 h-80 bg-primary/10 rounded-full blur-3xl”></div>
<div class=”absolute -bottom-32 -left-32 w-96 h-96 bg-warning/5 rounded-full blur-3xl”></div>
</div>
<!– Main Container –>
<div class=”relative z-10 w-full max-w-4xl mx-4 bg-white/80 backdrop-blur-md rounded-2xl shadow-xl overflow-hidden transition-all duration-500 hover:shadow-2xl”>
<!– Decorative Top Bar –>
<div class=”h-2 bg-gradient-to-r from-primary to-warning”></div>
<!– Content –>
<div class=”p-8 md:p-12″>
<!– Maintenance Icon –>
<div class=”flex justify-center mb-8″>
<div class=”w-32 h-32 md:w-40 md:h-40 rounded-full bg-warning/10 flex items-center justify-center animate-pulse-slow”>
<i class=”fa fa-cogs text-8xl md:text-9xl text-warning”></i>
</div>
</div>
<!– Maintenance Message –>
<h1 class=”text-[clamp(2.5rem,8vw,5rem)] font-extrabold text-center text-dark mb-4 text-shadow”>
System Upgrade In Progress
</h1>
<!– Submessage –>
<h2 class=”text-[clamp(1.5rem,5vw,2.5rem)] font-bold text-center text-dark mb-6″>
Dear User, We’re Sorry
</h2>
<p class=”text-center text-neutral text-lg md:text-xl max-w-2xl mx-auto mb-8″>
The system is currently under maintenance. Please wait for the upgrade to complete.
</p>
<!– Progress Bar –>
<div class=”w-full bg-gray-200 rounded-full h-4 mb-10 overflow-hidden”>
<div class=”animate-progress h-full rounded-full” style=”width: 65%”></div>
</div>
<!– Action Buttons –>
<div class=”flex flex-col sm:flex-row justify-center gap-4 mb-8″>
<a href=”/” class=”px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 font-medium flex items-center justify-center”>
<i class=”fa fa-home mr-2″></i> Return to Homepage
</a>
<a href=”javascript:location.reload()” class=”px-8 py-4 bg-white hover:bg-gray-50 text-dark border border-gray-200 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 font-medium flex items-center justify-center”>
<i class=”fa fa-refresh mr-2″></i> Refresh Page
</a>
</div>
<!– Additional Info –>
<div class=”text-center text-sm text-neutral/70″>
<span id=”new-york-time”>Loading New York Time…</span>
<div class=”mt-2″>We appreciate your patience</div>
</div>
</div>
</div>
<script>
// Update New York time
function updateNewYorkTime() {
const now = new Date();
const options = {
timeZone: ‘America/New_York’,
year: ‘numeric’,
month: ‘long’,
day: ‘numeric’,
hour: ‘2-digit’,
minute: ‘2-digit’,
second: ‘2-digit’,
timeZoneName: ‘short’
};
const newYorkTime = now.toLocaleString(‘en-US’, options);
document.getElementById(‘new-york-time’).textContent = `New York Time: ${newYorkTime}`;
}
updateNewYorkTime();
setInterval(updateNewYorkTime, 1000);
// Add subtle animation to background
const bgElements = document.querySelectorAll(‘.absolute.bg-primary\\/10, .absolute.bg-warning\\/5’);
bgElements.forEach(el => {
const animateBg = () => {
const x = Math.random() * 50 – 25;
const y = Math.random() * 50 – 25;
el.style.transform = `translate(${x}px, ${y}px)`;
};
animateBg();
setInterval(animateBg, 5000);
});
</script>
</body>
</html>
本站资源有的自互联网收集整理，如果侵犯了您的合法权益，请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担。
本文链接：9开网-www.9k3w.comhttps://www.9k3w.com/4284.html
许可协议：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
评论0+