<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站升级通知 - 光科科技有限公司</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            background-size: 400% 400%;
            animation: gradientBG 15s ease infinite;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            padding: 20px;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 95%;
            max-width: 800px;
            padding: 30px 25px;
            text-align: center;
            backdrop-filter: blur(10px);
            animation: fadeIn 1s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .logo {
            margin-bottom: 20px;
        }
        
        .logo h1 {
            font-size: 1.5rem;
            color: #2c3e50;
            font-weight: 700;
            letter-spacing: 0.5px;
        }
        
        .logo i {
            color: #ff9d00;
            margin-right: 8px;
        }
        
        .status {
            display: inline-block;
            background: #ff9d00;
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-weight: 600;
            margin-bottom: 20px;
            font-size: 0.9rem;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 157, 0, 0.5); }
            70% { box-shadow: 0 0 0 10px rgba(255, 157, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 157, 0, 0); }
        }
        
        .message {
            margin-bottom: 25px;
        }
        
        .message h2 {
            font-size: 1.6rem;
            margin-bottom: 12px;
            color: #2c3e50;
            line-height: 1.3;
        }
        
        .message p {
            font-size: 1rem;
            line-height: 1.5;
            color: #555;
            margin-bottom: 10px;
        }
        
        .contact-info {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 20px;
            margin: 25px 0;
            border-left: 4px solid #3498db;
        }
        
        .contact-info h3 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .contact-details {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-top: 15px;
        }
        
        .contact-item {
            display: flex;
            align-items: center;
            background: white;
            padding: 12px 18px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .contact-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        }
        
        .contact-item i {
            font-size: 1.5rem;
            margin-right: 12px;
            color: #3498db;
            min-width: 30px;
            text-align: center;
        }
        
        .contact-text {
            text-align: left;
        }
        
        .contact-text .label {
            font-size: 0.85rem;
            color: #7f8c8d;
        }
        
        .contact-text .value {
            font-size: 1.1rem;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .countdown {
            margin: 25px 0;
            padding: 18px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
        
        .countdown h3 {
            margin-bottom: 12px;
            color: #2c3e50;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 1.3rem;
        }
        
        .timer {
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        
        .timer-item {
            background: #2c3e50;
            color: white;
            padding: 12px;
            border-radius: 8px;
            min-width: 70px;
        }
        
        .timer-value {
            font-size: 1.6rem;
            font-weight: 700;
        }
        
        .timer-label {
            font-size: 0.8rem;
            margin-top: 4px;
        }
        
        .footer {
            margin-top: 25px;
            color: #7f8c8d;
            font-size: 0.85rem;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .note {
            background: #fff8e1;
            padding: 12px;
            border-radius: 8px;
            margin: 15px 0;
            font-size: 0.95rem;
            color: #856404;
            border-left: 3px solid #ffc107;
        }
        
        /* 平板设备适配 */
        @media (min-width: 480px) {
            .container {
                padding: 30px;
            }
            
            .logo h1 {
                font-size: 2rem;
            }
            
            .message h2 {
                font-size: 1.8rem;
            }
            
            .contact-details {
                flex-direction: row;
                flex-wrap: wrap;
            }
            
            .contact-item {
                flex: 1;
                min-width: 200px;
            }
        }
        
        /* 桌面设备适配 */
        @media (min-width: 768px) {
            .container {
                padding: 40px;
            }
            
            .logo h1 {
                font-size: 2.2rem;
            }
            
            .message h2 {
                font-size: 2rem;
            }
            
            .message p {
                font-size: 1.1rem;
            }
            
            .contact-info h3 {
                font-size: 1.5rem;
            }
            
            .contact-text .value {
                font-size: 1.2rem;
            }
            
            .countdown h3 {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="logo">
            <h1><i class="fas fa-camera"></i>长春市奥艺科技有限公司</h1>
        </div>
        
        <div class="status">
            网站升级中
        </div>
        
        <div class="message">
            <h2>抱歉给您带来不便</h2>
            <p>我们的网站正在进行全面升级，以提供更好的服务体验。</p>
        </div>
        
        <div class="note">
            <i class="fas fa-exclamation-circle"></i> 升级期间业务正常进行，欢迎直接联系我们
        </div>
        
        <div class="contact-info">
            <h3><i class="fas fa-info-circle"></i> 业务联系</h3>
            <p>如有镜头定制、光学系统开发业务需求，请直接联系我们的负责人：</p>
            
            <div class="contact-details">
                <div class="contact-item">
                    <i class="fas fa-user"></i>
                    <div class="contact-text">
                        <div class="label">联系人</div>
                        <div class="value">韩东林</div>
                    </div>
                </div>
                
                <div class="contact-item">
                    <i class="fas fa-phone"></i>
                    <div class="contact-text">
                        <div class="label">电话/微信</div>
                        <div class="value">13341415307</div>
                    </div>
                </div>
                
                <div class="contact-item">
                    <i class="fas fa-briefcase"></i>
                    <div class="contact-text">
                        <div class="label">业务类型</div>
                        <div class="value">镜头定制、光学系统开发</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="countdown">
            <h3><i class="fas fa-clock"></i> 预计完成时间</h3>
            <p>我们正在努力工作中，预计将在以下时间内完成：</p>
            <div class="timer">
                <div class="timer-item">
                    <div class="timer-value">3</div>
                    <div class="timer-label">天</div>
                </div>
                <div class="timer-item">
                    <div class="timer-value">12</div>
                    <div class="timer-label">小时</div>
                </div>
                <div class="timer-item">
                    <div class="timer-value">45</div>
                    <div class="timer-label">分钟</div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 长春市奥艺科技有限公司 版权所有</p>
        </div>
    </div>

    <script>
        // 简单的倒计时动画效果
        function updateCountdown() {
            const days = document.querySelector('.timer-item:nth-child(1) .timer-value');
            const hours = document.querySelector('.timer-item:nth-child(2) .timer-value');
            const minutes = document.querySelector('.timer-item:nth-child(3) .timer-value');
            
            let d = parseInt(days.textContent);
            let h = parseInt(hours.textContent);
            let m = parseInt(minutes.textContent);
            
            m--;
            if (m < 0) {
                m = 59;
                h--;
                if (h < 0) {
                    h = 23;
                    d--;
                    if (d < 0) {
                        d = 0;
                        h = 0;
                        m = 0;
                    }
                }
            }
            
            days.textContent = d;
            hours.textContent = h;
            minutes.textContent = m;
        }
        
        setInterval(updateCountdown, 60000);
        
        // 点击电话号码自动复制功能
        const phoneElement = document.querySelector('.contact-item:nth-child(2) .value');
        phoneElement.style.cursor = 'pointer';
        phoneElement.title = '点击复制电话号码';
        
        phoneElement.addEventListener('click', function() {
            const phoneNumber = this.textContent;
            navigator.clipboard.writeText(phoneNumber).then(() => {
                const originalText = this.textContent;
                this.textContent = '已复制到剪贴板！';
                
                setTimeout(() => {
                    this.textContent = originalText;
                }, 2000);
            });
        });
    </script>
</body>
</html>