﻿<!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://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0F4C81', // 企业蓝（更专业的深蓝色）
                        secondary: '#1A73E8',
                        accent: '#34A853', // 企业绿（代表稳定可靠）
                        neutral: '#F8FAFC',
                        dark: '#1E293B',
                        'gray-light': '#F1F5F9',
                        'gray-medium': '#94A3B8',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'Segoe UI', 'Roboto', '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.08);
            }
            .card-shadow {
                box-shadow: 0 10px 25px -5px rgba(15, 76, 129, 0.05), 0 8px 10px -6px rgba(15, 76, 129, 0.03);
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-spin-slow {
                animation: spin 10s linear infinite;
            }
        }
    </style>

    <style>
        /* 全局样式 */
        body {
            background: linear-gradient(120deg, #F8FAFC 0%, #EEF2F6 100%);
            background-attachment: fixed;
        }

        /* 进度条动画（更真实的进度模拟） */
        @keyframes progress {
            0% { width: 0%; }
            20% { width: 30%; }
            40% { width: 45%; }
            60% { width: 65%; }
            80% { width: 85%; }
            100% { width: 100%; }
        }

        .progress-bar {
            animation: progress 15s ease-in-out infinite;
        }

        /* 浮动动画 */
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-8px) rotate(2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }

        .float-animation {
            animation: float 4s ease-in-out infinite;
        }

        /* 数字跳动动画 */
        @keyframes count {
            from { opacity: 0; transform: translateY(5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .count-animation {
            animation: count 0.5s ease-out forwards;
        }
    </style>
</head>

<body class="font-sans min-h-screen flex flex-col items-center justify-center p-4 text-dark">
<!-- 顶部品牌区 -->
<div class="w-full max-w-5xl mx-auto mb-6 px-4">
    <div class="flex justify-center md:justify-start items-center">
        <!-- 公司LOGO占位（替换为实际LOGO） -->
        <div class="w-16 h-16 bg-primary rounded-lg flex items-center justify-center text-white text-2xl font-bold">
            节水
        </div>
        <div class="ml-3 hidden md:block">
            <h2 class="text-xl font-bold text-primary">节水公司门户</h2>
            <p class="text-xs text-gray-medium">高效 · 稳定 · 安全</p>
        </div>
    </div>
</div>

<!-- 主内容容器 -->
<div class="w-full max-w-2xl mx-auto bg-white rounded-2xl card-shadow p-6 md:p-10 transform transition-all duration-700 hover:shadow-lg">
    <div class="grid md:grid-cols-5 gap-8 items-center">
        <!-- 左侧图标区 -->
        <div class="md:col-span-2 flex justify-center">
            <div class="relative w-40 h-40">
                <!-- 主图标 -->
                <div class="absolute inset-0 flex items-center justify-center bg-primary/5 rounded-full">
                    <i class="fa fa-cogs text-primary text-7xl animate-spin-slow"></i>
                </div>
                <!-- 装饰元素 -->
                <div class="absolute -top-3 -right-3 bg-accent text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg float-animation">
                    <i class="fa fa-rocket"></i>
                </div>
                <!-- 进度圈装饰 -->
                <div class="absolute inset-0 rounded-full border-4 border-primary/10 border-t-primary animate-spin-slow"></div>
            </div>
        </div>

        <!-- 右侧信息区 -->
        <div class="md:col-span-3">
            <!-- 标题 -->
            <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-center md:text-left text-dark mb-3 text-shadow">系统升级维护中，敬请期待</h1>

            <!-- 副标题 -->
            <p class="text-gray-medium text-center md:text-left mb-6">为提供更优质、稳定的服务，我们正在进行系统升级优化</p>

            <!-- 进度条 -->
            <div class="w-full bg-gray-light rounded-full h-2 mb-4 overflow-hidden">
                <div id="progress-bar" class="progress-bar bg-primary h-2 rounded-full"></div>
            </div>
            <div class="flex justify-between text-xs text-gray-medium mb-8">
                <span>升级进度</span>
                <span id="progress-percent" class="font-medium text-primary">0%</span>
            </div>

            <!-- 倒计时卡片 -->
            <div class="bg-neutral rounded-xl p-4 mb-6 border border-gray-light">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-sm font-medium text-dark">预计完成时间</span>
                    <div id="countdown" class="flex space-x-1">
                        <span class="count-animation bg-primary/10 text-primary rounded px-2 py-1 text-sm font-bold" style="animation-delay: 0.1s">00</span>
                        <span class="text-primary">:</span>
                        <span class="count-animation bg-primary/10 text-primary rounded px-2 py-1 text-sm font-bold" style="animation-delay: 0.2s">00</span>
                        <span class="text-primary">:</span>
                        <span class="count-animation bg-primary/10 text-primary rounded px-2 py-1 text-sm font-bold" style="animation-delay: 0.3s">00</span>
                    </div>
                </div>

                <!-- 时间详情 -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs">
                    <div class="flex items-center">
                        <i class="fa fa-clock-o text-primary mr-1"></i>
                        <span class="text-gray-medium">开始时间: <span class="font-medium text-dark">2026-03-10 02:00</span></span>
                    </div>
                    <div class="flex items-center">
                        <i class="fa fa-calendar-check-o text-primary mr-1"></i>
                        <span class="text-gray-medium">预计结束: <span class="font-medium text-dark">2026-03-31 04:00</span></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 升级详情（展开式） -->
    <div class="mt-8 border-t border-gray-light pt-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="font-semibold text-dark flex items-center">
                <i class="fa fa-info-circle text-primary mr-2"></i>
                升级优化内容
            </h3>
            <span class="text-xs text-primary bg-primary/5 px-2 py-1 rounded-full">V3.2.0 版本</span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            <div class="bg-neutral p-4 rounded-lg border border-gray-light">
                <div class="flex items-center mb-2">
                    <i class="fa fa-bolt text-accent mr-2"></i>
                    <h4 class="font-medium text-dark">性能优化</h4>
                </div>
                <p class="text-xs text-gray-medium">系统响应速度提升30%，并发处理能力增强</p>
            </div>

            <div class="bg-neutral p-4 rounded-lg border border-gray-light">
                <div class="flex items-center mb-2">
                    <i class="fa fa-shield text-accent mr-2"></i>
                    <h4 class="font-medium text-dark">安全加固</h4>
                </div>
                <p class="text-xs text-gray-medium">修复潜在安全漏洞，数据加密机制升级</p>
            </div>

            <div class="bg-neutral p-4 rounded-lg border border-gray-light">
                <div class="flex items-center mb-2">
                    <i class="fa fa-puzzle-piece text-accent mr-2"></i>
                    <h4 class="font-medium text-dark">功能升级</h4>
                </div>
                <p class="text-xs text-gray-medium">新增3项实用功能，优化5处用户体验</p>
            </div>
        </div>

        <!-- 联系支持 -->
        <div class="bg-primary/5 rounded-xl p-5">
            <h3 class="font-semibold text-dark mb-3 flex items-center">
                <i class="fa fa-headphones text-primary mr-2"></i>
                紧急联系支持
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <a href="472586374@qq.com" class="flex flex-col items-center p-3 bg-white rounded-lg border border-gray-light hover:border-primary transition-colors">
                    <i class="fa fa-envelope text-primary text-xl mb-1"></i>
                    <span class="text-sm font-medium">在线客服</span>
                    <span class="text-xs text-gray-medium">472586374@qq.com</span>
                </a>

                <a href="tel:0931-8159290" class="flex flex-col items-center p-3 bg-white rounded-lg border border-gray-light hover:border-primary transition-colors">
                    <i class="fa fa-phone text-primary text-xl mb-1"></i>
                    <span class="text-sm font-medium">服务热线</span>
                    <span class="text-xs text-gray-medium">0931-8159290</span>
                </a>

                <a href="#" target="_blank" class="flex flex-col items-center p-3 bg-white rounded-lg border border-gray-light hover:border-primary transition-colors">
                    <i class="fa fa-weixin text-primary text-xl mb-1"></i>
                    <span class="text-sm font-medium">企业微信</span>
                    <span class="text-xs text-gray-medium">扫码咨询</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 自动刷新提示 -->
    <div class="mt-8 text-center text-xs text-gray-medium">
        <p>系统将在升级完成后自动刷新 <i class="fa fa-refresh ml-1 animate-spin-slow"></i></p>
        <p class="mt-1">您也可以尝试 <a href="#" class="text-primary hover:underline">手动刷新</a> 或 <a href="#" class="text-primary hover:underline">返回首页</a></p>
    </div>
</div>

<!-- 页脚 -->
<footer class="w-full max-w-5xl mx-auto mt-8 text-center text-xs text-gray-medium px-4">
    <div class="flex flex-col md:flex-row justify-between items-center">
        <div class="mb-3 md:mb-0">
            <p>&copy; 2025 甘肃水务节水科技发展有限责任公司 - 版权所有</p>
        </div>
        <div class="flex space-x-6">
            <a href="#" class="hover:text-primary transition-colors">关于我们</a>
            <a href="#" class="hover:text-primary transition-colors">服务条款</a>
            <a href="#" class="hover:text-primary transition-colors">隐私政策</a>
            <a href="#" class="hover:text-primary transition-colors">帮助中心</a>
        </div>
    </div>
</footer>

<!-- JavaScript 功能 -->
<script>
    // 倒计时功能（基于实际结束时间计算）
    function updateCountdown() {
        // 实际升级结束时间（可根据实际情况修改）
        const endTime = new Date('2025-11-28T04:00:00');
        const now = new Date();
        const diff = endTime - now;

        if (diff <= 0) {
            document.getElementById('countdown').innerHTML =
                '<span class="bg-accent/10 text-accent rounded px-2 py-1 text-sm font-bold">正在进行</span>';
            document.getElementById('progress-bar').style.width = '50%';
            document.getElementById('progress-percent').textContent = '50%';
            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').innerHTML = `
        <span class="bg-primary/10 text-primary rounded px-2 py-1 text-sm font-bold">${hours.toString().padStart(2, '0')}</span>
        <span class="text-primary">:</span>
        <span class="bg-primary/10 text-primary rounded px-2 py-1 text-sm font-bold">${minutes.toString().padStart(2, '0')}</span>
        <span class="text-primary">:</span>
        <span class="bg-primary/10 text-primary rounded px-2 py-1 text-sm font-bold">${seconds.toString().padStart(2, '0')}</span>
      `;

        // 更新进度百分比
        const totalDuration = 2 * 60 * 60 * 1000; // 总升级时长（2小时）
        const progressPercent = Math.min(100, Math.round((1 - diff / totalDuration) * 100));
        document.getElementById('progress-percent').textContent = `${progressPercent}%`;
        document.getElementById('progress-bar').style.width = `${progressPercent}%`;
    }

    // 初始化并每秒更新
    updateCountdown();
    setInterval(updateCountdown, 1000);

    // 页面加载动画
    document.addEventListener('DOMContentLoaded', () => {
        const container = document.querySelector('div[class*="max-w-2xl"]');
        container.classList.add('opacity-0', 'translate-y-8');

        setTimeout(() => {
            container.classList.remove('opacity-0', 'translate-y-8');
            container.classList.add('opacity-100', 'translate-y-0', 'transition-all', 'duration-700');
        }, 300);
    });

    // 模拟自动刷新（实际项目中可对接后端接口）
    setInterval(() => {
        const now = new Date();
        const endTime = new Date('2025-11-28T04:00:00');

        // 升级时间到后自动刷新
        if (now >= endTime) {
            window.location.reload();
        }
    }, 60000); // 每分钟检查一次
</script>
</body>
</html>
