<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        document.title = "河南艾美科技有限公司";
    </script>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap');
        body {
            font-family: 'Nunito', sans-serif;
            background: linear-gradient(135deg, #4A90E2, #5BA8FF, #7EC1FF, #A2D9FF);
            background-size: 400% 400%;
            animation: gradientBG 20s ease infinite;
            min-height: 100vh;
            margin: 0;
            padding: 0;
        }
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .maintenance-content {
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .progress-bar {
            height: 6px;
            background: linear-gradient(90deg, #4A90E2, #2C5AA0);
            border-radius: 3px;
            animation: progress 3s ease-in-out infinite;
        }
        @keyframes progress {
            0% { width: 0%; }
            50% { width: 70%; }
            100% { width: 100%; }
        }
        .feature-item {
            transition: all 0.3s ease;
        }
        .feature-item:hover {
            transform: translateY(-5px);
        }
        .btn-animate:hover {
            transform: scale(1.05);
        }
        .social-icon:hover {
            transform: translateY(-3px);
        }
        .countdown-timer {
            font-weight: 700;
            font-size: 1.2rem;
            margin-top: 10px;
        }
    </style>
</head>
<body class="text-white">
    <div class="maintenance-content bg-white bg-opacity-20 p-4 md:p-8">
        <div class="mb-8 md:mb-12">
            <div class="inline-flex items-center justify-center w-20 h-20 md:w-24 md:h-24 rounded-full bg-white bg-opacity-30 mb-6 md:mb-8">
                <i class="fas fa-tools text-4xl md:text-5xl"></i>
            </div>
            <h1 class="text-3xl md:text-5xl font-extrabold mb-3 md:mb-4">网站维护中</h1>
            <p class="text-lg md:text-2xl opacity-90 mb-2">我们正在为您优化网站体验</p>
            <p class="text-base md:text-lg opacity-80">预计完成时间：<span id="completion-time"></span></p>
            <div class="countdown-timer">
                剩余时间: <span id="countdown">计算中...</span>
            </div>
        </div>
        
        <div class="w-full max-w-2xl mb-8 md:mb-12">
            <div class="w-full bg-white bg-opacity-20 rounded-full h-2 mb-2">
                <div class="progress-bar rounded-full"></div>
            </div>
            <p class="text-sm md:text-base opacity-70">系统升级进行中...</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8 md:mb-12 w-full max-w-3xl">
            <div class="feature-item bg-white bg-opacity-10 rounded-lg p-4 md:p-6">
                <i class="fas fa-bolt text-2xl mb-2"></i>
                <p class="font-semibold">性能优化</p>
            </div>
            <div class="feature-item bg-white bg-opacity-10 rounded-lg p-4 md:p-6">
                <i class="fas fa-shield-alt text-2xl mb-2"></i>
                <p class="font-semibold">安全升级</p>
            </div>
            <div class="feature-item bg-white bg-opacity-10 rounded-lg p-4 md:p-6">
                <i class="fas fa-mobile-alt text-2xl mb-2"></i>
                <p class="font-semibold">界面优化</p>
            </div>
        </div>
        
        <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8 md:mb-12">
            <button class="btn-animate bg-white bg-opacity-20 hover:bg-opacity-30 backdrop-blur-sm py-3 px-6 rounded-full font-semibold transition duration-300" onclick="alert('请联系我们：support@example.com')">
                <i class="fas fa-envelope mr-2"></i>联系我们
            </button>
            <button class="btn-animate bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 py-3 px-6 rounded-full font-semibold transition duration-300" onclick="location.reload()">
                <i class="fas fa-redo mr-2"></i>刷新页面
            </button>
        </div>
        
        <div class="w-full max-w-2xl pt-6 md:pt-8 border-t border-white border-opacity-20">
            <p class="text-sm md:text-base opacity-70 mb-4">感谢您的耐心等待，我们很快回来</p>
            <footer class="mt-8 text-gray-500 text-sm">
                <div class="w-full max-w-2xl pt-6 md:pt-8 border-t border-white border-opacity-20">
                    <p class="text-sm md:text-base opacity-70 mb-4">© 2026 调律猫 <br>备案号：<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow" class="text-white opacity-70 hover:opacity-100">粤ICP备2021059001号-1</a></p>
                </div>
            </footer>
        </div>
        
        <div class="flex justify-center space-x-4">
            <a href="#" class="social-icon text-xl md:text-2xl hover:text-blue-300 transition duration-300"><i class="fab fa-weibo"></i></a>
            <a href="#" class="social-icon text-xl md:text-2xl hover:text-blue-300 transition duration-300"><i class="fab fa-weixin"></i></a>
            <a href="#" class="social-icon text-xl md:text-2xl hover:text-blue-300 transition duration-300"><i class="fab fa-twitter"></i></a>
        </div>
    </div>

    <script>
        function setCompletionTime() {
            const now = new Date();
            const completionTime = new Date(now.getTime() + 2 * 60 * 60 * 1000);
            const year = completionTime.getFullYear();
            const month = String(completionTime.getMonth() + 1).padStart(2, '0');
            const day = String(completionTime.getDate()).padStart(2, '0');
            const hours = String(completionTime.getHours()).padStart(2, '0');
            const minutes = String(completionTime.getMinutes()).padStart(2, '0');
            document.getElementById('completion-time').textContent = 
                `${year}年${month}月${day}日 ${hours}:${minutes}`;
            return completionTime;
        }
        
        function updateCountdown(completionTime) {
            const now = new Date();
            const diff = completionTime - now;
            if (diff <= 0) {
                document.getElementById('countdown').textContent = "维护即将完成...";
                return;
            }
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((diff % (1000 * 60)) / 1000);
            document.getElementById('countdown').textContent = 
                `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
        }
        
        const completionTime = setCompletionTime();
        updateCountdown(completionTime);
        setInterval(() => updateCountdown(completionTime), 1000);
    </script>
</body>
</html>