<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCSManager 实例管理</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',
                        secondary: '#36D399',
                        danger: '#F87272',
                        warning: '#FBBD23',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .stat-card {
                transition: all 0.3s ease;
            }
            .stat-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
            @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .server-card {
                @apply bg-white rounded-lg shadow-md p-4 mb-4 transition-all duration-300 hover:shadow-lg;
            }
            .server-status {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
            .btn {
                @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 focus:ring-primary/50;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90 focus:ring-secondary/50;
            }
            .btn-danger {
                @apply bg-danger text-white hover:bg-danger/90 focus:ring-danger/50;
            }
            .btn-warning {
                @apply bg-warning text-white hover:bg-warning/90 focus:ring-warning/50;
            }
            .btn-outline {
                @apply border-gray-300 text-gray-700 hover:bg-gray-50 focus:ring-primary/50;
            }
            .badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
            .badge-online {
                @apply bg-green-100 text-green-800;
            }
            .badge-offline {
                @apply bg-gray-100 text-gray-800;
            }
            .badge-starting {
                @apply bg-blue-100 text-blue-800;
            }
            .badge-stopping {
                @apply bg-yellow-100 text-yellow-800;
            }
            .console-line {
                @apply whitespace-pre font-mono text-sm;
            }
            .console-line-info {
                @apply text-gray-300;
            }
            .console-line-warning {
                @apply text-yellow-300;
            }
            .console-line-error {
                @apply text-red-400;
            }
            .console-line-command {
                @apply text-green-400;
            }
            .console-line-player {
                @apply text-blue-300;
            }
            .loading-overlay {
                @apply fixed inset-0 bg-black/50 flex items-center justify-center z-50;
            }
            .notification {
                @apply fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-y-20 opacity-0;
            }
            .notification-visible {
                @apply translate-y-0 opacity-100;
            }
            .notification-success {
                @apply bg-green-500 text-white;
            }
            .notification-error {
                @apply bg-red-500 text-white;
            }
            .notification-info {
                @apply bg-blue-500 text-white;
            }
            .hidden {
                display: none;
            }
        }

        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-primary text-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa fa-server text-xl"></i>
                <h1 class="text-xl font-bold">CCS实例管理</h1>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 实例信息头部 -->
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-lg p-6 mb-6">
                <div class="flex flex-col md:flex-row md:items-center justify-between mb-4">
                    <div>
                        <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800" id="instanceName">加载中...</h2>
                        <p class="text-gray-500 mt-1" id="instanceDescription">加载中...</p>
                    </div>
                    <div class="flex items-center mt-4 md:mt-0 space-x-3">
                        <span id="instanceStatus" class="px-3 py-1 rounded-full text-sm font-medium bg-gray-200 text-gray-700">
                            <i class="fa fa-circle-o-notch fa-spin mr-1"></i>加载中
                        </span>
                        <div class="flex space-x-2">
                            <button id="startBtn" class="px-4 py-2 bg-secondary text-white rounded-lg shadow hover:bg-secondary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                                <i class="fa fa-play mr-1"></i>启动
                            </button>
                            <button id="stopBtn" class="px-4 py-2 bg-danger text-white rounded-lg shadow hover:bg-danger/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed hidden">
                                <i class="fa fa-stop mr-1"></i>停止
                            </button>
                            <button id="restartBtn" class="px-4 py-2 bg-warning text-white rounded-lg shadow hover:bg-warning/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed hidden">
                                <i class="fa fa-refresh mr-1"></i>重启
                            </button>
                            <button id="killBtn" class="px-4 py-2 bg-gray-700 text-white rounded-lg shadow hover:bg-gray-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed hidden">
                                <i class="fa fa-power-off mr-1"></i>强制停止
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 基本信息卡片 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-500">CPU 使用率</p>
                                <p class="text-2xl font-bold mt-1" id="cpuUsage">--%</p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                                <i class="fa fa-microchip text-primary text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
                            <div id="cpuUsageBar" class="bg-primary h-2 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-500">内存使用率</p>
                                <p class="text-2xl font-bold mt-1" id="memoryUsage">-- MB / -- MB</p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
                                <i class="fa fa-memory text-secondary text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
                            <div id="memoryUsageBar" class="bg-secondary h-2 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-500">网络带宽</p>
                                <p class="text-2xl font-bold mt-1" id="networkUsage">-- KB/s</p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center">
                                <i class="fa fa-wifi text-warning text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-3 w-full bg-gray-200 rounded-full h-2">
                            <div id="networkUsageBar" class="bg-warning h-2 rounded-full" style="width: 0%"></div>
                        </div>
                    </div>
                    
                    <div class="stat-card bg-gray-50 rounded-lg p-4 border border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm text-gray-500">在线时间</p>
                                <p class="text-2xl font-bold mt-1" id="uptime">--</p>
                            </div>
                            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center">
                                <i class="fa fa-clock-o text-primary text-xl"></i>
                            </div>
                        </div>
                        <div class="mt-3 flex items-center text-sm text-gray-500">
                            <i class="fa fa-calendar-o mr-1"></i>
                            <span id="lastUpdate">最后更新: --</span>
                        </div>
                    </div>
                </div>
            </div>
                <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-semibold">服务器控制台</h3>
                    <div class="flex space-x-2">
                        <button class="btn btn-outline text-sm" id="clearTerminalBtn">
                            <i class="fa fa-trash mr-1"></i> 清空
                        </button>
                        <button class="btn btn-outline text-sm" id="action-refresh-console">
                            <i class="fa fa-refresh mr-1"></i> 刷新
                        </button>
                        <button class="btn btn-outline text-sm" id="copyTerminalBtn">
                            <i class="fa fa-expand mr-1"></i> 复制
                        </button>
                    </div>
                </div>

                <!-- 控制台输出 -->
                <div class="bg-gray-900 text-gray-100 rounded-t-md p-3 h-64 overflow-y-auto" id="terminalOutput">
                    <pre class="font-mono text-sm">[CCSNetwork]: 正在获取终端 
                </div>
                <div class="flex bg-gray-800 rounded-b-md w-full">
                <div class="flex items-center px-3 text-gray-400">
                     <span class="font-mono">&gt;</span>
                </div>
                <input type="text" id="commandInput" placeholder="输入命令..." class="flex-grow bg-gray-800 text-gray-100 px-2 py-3 focus:outline-none font-mono w-full">
                <button class="px-4 py-3 bg-primary text-white hover:bg-primary/90 transition-colors" id="sendCommandBtn">
                <i class="fa fa-paper-plane"></i>
                </button>
                </div>

                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 加载遮罩层 -->
    <div class="loading-overlay hidden" id="loading-overlay">
        <div class="bg-white p-6 rounded-lg shadow-xl flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mb-4"></div>
            <p class="text-lg font-medium" id="loading-message">正在处理...</p>
        </div>
    </div>

    <!-- 通知组件 -->
    <div class="notification notification-info" id="notification">
        <p id="notification-message">这是一条通知消息</p>
    </div>
    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-6">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <div class="flex items-center space-x-2">
                        <i class="fa fa-server"></i>
                        <span class="font-bold">CCS实例管理</span>
                    </div>
                    <p class="text-gray-400 text-sm mt-1">CCS实例管理面板</p>
                </div>
            </div>
            <div class="mt-6 pt-6 border-t border-gray-700 text-center text-gray-400 text-sm">
                © 2025 圆周云境 | 版本 2.1.3
            </div>
        </div>
    </footer>
    <script>
// DOM 元素
const instanceNameEl = document.getElementById('instanceName');
const instanceDescriptionEl = document.getElementById('instanceDescription');
const instanceStatusEl = document.getElementById('instanceStatus');
const cpuUsageEl = document.getElementById('cpuUsage');
const cpuUsageBarEl = document.getElementById('cpuUsageBar');
const memoryUsageEl = document.getElementById('memoryUsage');
const memoryUsageBarEl = document.getElementById('memoryUsageBar');
const networkUsageEl = document.getElementById('networkUsage');
const networkUsageBarEl = document.getElementById('networkUsageBar');
const uptimeEl = document.getElementById('uptime');
const lastUpdateEl = document.getElementById('lastUpdate');
const terminalOutputEl = document.getElementById('terminalOutput');
const commandInputEl = document.getElementById('commandInput');
const sendCommandBtn = document.getElementById('sendCommandBtn');
const clearTerminalBtn = document.getElementById('clearTerminalBtn');
const copyTerminalBtn = document.getElementById('copyTerminalBtn');

// 从URL获取参数
const urlParams = new URLSearchParams(window.location.search);
const uuid = urlParams.get('uuid') || '5f8b4c2a-3d7e-4b1a-9c5d-6e7f8a9b0c1d';
const daemonId = urlParams.get('daemonId') || 'daemon-1';

// 按钮
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const restartBtn = document.getElementById('restartBtn');
const killBtn = document.getElementById('killBtn');

// 标志变量，控制加载遮罩的显示
let isFirstLoad = true;

// 初始化
document.addEventListener('DOMContentLoaded', () => {
    showLoading("正在加载服务器信息...");
    
    // 加载服务器详情
    loadServerDetails();
    fetchConsoleLog();
    
    // 添加事件监听器
    startBtn.addEventListener('click', startServer);
    stopBtn.addEventListener('click', stopServer);
    restartBtn.addEventListener('click', restartServer);
    killBtn.addEventListener('click', killServer);
    sendCommandBtn.addEventListener('click', sendCommand);
    commandInputEl.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            sendCommand();
        }
    });
    if (clearTerminalBtn) {
        clearTerminalBtn.addEventListener('click', clearTerminal);
    }
    if (copyTerminalBtn) {
        copyTerminalBtn.addEventListener('click', copyTerminal);
    }
    
    // 定时刷新服务器状态和控制台
    setInterval(loadServerDetails, 5000);
    setInterval(fetchConsoleLog, 2000);
});

function loadServerDetails() {
    fetch(`proxy.php?path=instance&uuid=${uuid}&daemonId=${daemonId}`)
        .then(response => {
            if (!response.ok) {
                throw new Error(`请求失败，状态码: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('后端返回的数据:', data); // 打印返回的数据
            if (!data || !data.data) {
                throw new Error('无效的服务器数据');
            }
            
            const server = data.data;
            
            // 更新基本信息
            instanceNameEl.textContent = server.config.nickname || '未知服务器';
            instanceDescriptionEl.textContent = server.config.description || '无描述';
            
            instanceStatusEl.textContent = server.status === 1 ? '在线' : '离线';
            instanceStatusEl.className = `px-3 py-1 rounded-full text-sm font-medium bg-${server.status === 1 ? 'success' : 'danger'}-500 text-white`;
            
            cpuUsageEl.textContent = `${server.processInfo.cpu || 0}%`;
            cpuUsageBarEl.style.width = `${server.processInfo.cpu || 0}%`;
            
            const memoryUsed = server.processInfo.memory || 0;
            const memoryTotal = 1024; // 假设总内存为1024MB
            const memoryPercent = Math.round((memoryUsed / memoryTotal) * 100);
            
            memoryUsageEl.textContent = `${memoryUsed} MB / ${memoryTotal} MB`;
            memoryUsageBarEl.style.width = `${memoryPercent}%`;
            
            const networkIn = (server.processInfo.networkIn || 0).toFixed(1);
            const networkOut = (server.processInfo.networkOut || 0).toFixed(1);
            const networkPercent = Math.round(((networkIn + networkOut) / 10) * 100); // 假设最大10MB/s
            
            networkUsageEl.textContent = `${networkIn} MB/s 入 / ${networkOut} MB/s 出`;
            networkUsageBarEl.style.width = `${Math.min(100, networkPercent)}%`;
            
            uptimeEl.textContent = server.processInfo.elapsed || '未知运行时间';
            lastUpdateEl.textContent = `最后更新: ${new Date().toLocaleString()}`;
            
            if (isFirstLoad) {
                hideLoading(); // 隐藏加载遮罩
                isFirstLoad = false; // 设置标志变量为false
            }
        })
        .catch(error => {
            console.error('获取服务器详情失败:', error);
            showNotification('获取服务器详情失败', 'error');
            if (isFirstLoad) {
                hideLoading(); // 隐藏加载遮罩
                isFirstLoad = false; // 设置标志变量为false
            }
        });
}
let isFirstFetch = true; // 添加一个标志变量，用于控制第一次加载

async function fetchConsoleLog() {
    try {
        const response = await fetch(`proxy.php?path=protected_instance/outputlog&uuid=${uuid}&daemonId=${daemonId}&size=4096`);
        if (!response.ok) {
            throw new Error(`请求失败，状态码: ${response.status}`);
        }
        const data = await response.json();
        if (data && data.data) {
            terminalOutputEl.innerHTML = '';
            
            const lines = data.data.split('\n');
            
            lines.forEach(line => {
                const lineEl = document.createElement('div');
                lineEl.className = 'console-line font-mono text-sm';
                
                if (line.includes('[INFO]')) {
                    lineEl.classList.add('text-gray-700');
                } else if (line.includes('[WARNING]')) {
                    lineEl.classList.add('text-yellow-600');
                } else if (line.includes('[ERROR]')) {
                    lineEl.classList.add('text-red-600');
                } else if (line.includes('issued server command')) {
                    lineEl.classList.add('text-blue-600');
                } else if (line.includes('joined the game') || line.includes('left the game')) {
                    lineEl.classList.add('text-green-600');
                }
                
                lineEl.textContent = line;
                terminalOutputEl.appendChild(lineEl);
            });

            // 只在第一次加载时滚动到最底部
            if (isFirstFetch) {
                terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
                isFirstFetch = false; // 设置标志变量为false
            }
        }
    } catch (error) {
        console.error('获取控制台日志失败:', error);
    } finally {
        if (isFirstLoad) {
            hideLoading(); // 确保在所有情况下都隐藏加载遮罩
            isFirstLoad = false; // 设置标志变量为false
        }
    }
}

function startServer() {
    showLoading("正在启动服务器...");
    
    fetch(`proxy.php?path=protected_instance/open&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            // 获取并打印终端日志
            fetchConsoleLog();

            // 如果有终端输出，无论状态如何都打印
            console.log('服务器启动响应:', data); 

            if (data.code === 500) {
                // 处理服务器返回500错误的情况
                console.error('服务器返回错误: ', data.message);
                hideLoading();
            }

            showNotification('启动命令已发送', 'success');
            const checkInterval = setInterval(() => {
                fetch(`proxy.php?path=instance&uuid=${uuid}&daemonId=${daemonId}`)
                    .then(res => res.json())
                    .then(res => {
                        // 获取并打印终端日志
                        fetchConsoleLog();
                        terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
                        hideLoading();
                        console.log('服务器状态响应:', res);

                        if (res.data?.status !== 2) { // 不是启动中状态
                            clearInterval(checkInterval);
                            loadServerDetails();
                            hideLoading();
                        }
                    });
            }, 2000);
        })
        .catch(error => {
            // 获取并打印终端日志
            fetchConsoleLog();
            terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
            console.error('启动失败错误:', error);
            showNotification(`启动失败: ${error.message}`, 'error');
            hideLoading();
        });
}

function stopServer() {
    if (!confirm('确定要停止服务器吗？')) return;
    
    showLoading("正在停止服务器...");
    
    fetch(`proxy.php?path=protected_instance/stop&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                showNotification('服务器停止请求已发送', 'success');
                setTimeout(loadServerDetails, 2000); // 延迟刷新状态
                fetchConsoleLog();
            } else {
                throw new Error(data.message || '停止失败');
            }
        })
        .catch(error => {
            console.error('停止服务器失败:', error);
            showNotification('停止服务器失败: ' + error.message, 'error');
            fetchConsoleLog();
            hideLoading();
        });
}

function restartServer() {
    if (!confirm('确定要重启服务器吗？')) return;
    
    showLoading("正在重启服务器...");
    
    fetch(`proxy.php?path=protected_instance/restart&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                showNotification('服务器重启请求已发送', 'success');
                setTimeout(loadServerDetails, 2000); // 延迟刷新状态
            } else {
                throw new Error(data.message || '重启失败');
            }
        })
        .catch(error => {
            console.error('重启服务器失败:', error);
            showNotification('重启服务器失败: ' + error.message, 'error');
            hideLoading();
        });
}

function killServer() {
    if (!confirm('确定要强制停止服务器吗？')) return;
    
    showLoading("正在强制停止服务器...");
    
    fetch(`proxy.php?path=protected_instance/kill&uuid=${uuid}&daemonId=${daemonId}`, {
        method: 'POST'
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                showNotification('服务器强制停止请求已发送', 'success');
                setTimeout(loadServerDetails, 2000); // 延迟刷新状态
            } else {
                throw new Error(data.message || '强制停止失败');
            }
        })
        .catch(error => {
            console.error('强制停止服务器失败:', error);
            showNotification('强制停止服务器失败: ' + error.message, 'error');
            hideLoading();
        });
}

function sendCommand() {
    const command = commandInputEl.value.trim();
    if (!command) return;
    
    showLoading("正在发送命令...");
    
    const formData = new FormData();
    formData.append('uuid', uuid);
    formData.append('daemonId', daemonId);
    formData.append('command', command);
    fetch(`proxy.php?path=protected_instance/command&uuid=${uuid}&daemonId=${daemonId}&command=${command}`, {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.code === 200) {
                commandInputEl.value = '';
                showNotification('命令已发送', 'success');
                fetchConsoleLog();terminalOutputEl.scrollTop = terminalOutputEl.scrollHeight;
            } else {
                throw new Error(data.message || '命令发送失败');
                fetchConsoleLog();
            }
        })
        .catch(error => {
            console.error('发送命令失败:', error);
            showNotification('错误: ' + error.message, 'error');
            fetchConsoleLog();
            hideLoading();
        });
}

function clearTerminal() {
    terminalOutputEl.innerHTML = '';
}

function copyTerminal() {
    navigator.clipboard.writeText(terminalOutputEl.textContent)
        .then(() => {
            showNotification('终端内容已复制', 'success');
        })
        .catch(err => {
            console.error('复制失败', err);
            showNotification('复制失败', 'error');
        });
}

function showLoading(message) {
    const loadingOverlay = document.getElementById('loading-overlay');
    const loadingMessage = document.getElementById('loading-message');
    
    if (loadingOverlay && loadingMessage) {
        loadingMessage.textContent = message;
        loadingOverlay.classList.remove('hidden'); // 显示遮罩
    }
}

function hideLoading() {
    const loadingOverlay = document.getElementById('loading-overlay');
    if (loadingOverlay) {
        loadingOverlay.classList.add('hidden'); // 隐藏遮罩
    }
}
function showNotification(message, type = 'info') {
    const notification = document.getElementById('notification');
    const notificationMessage = document.getElementById('notification-message');

    if (!notification || !notificationMessage) {
        console.error('Notification elements not found');
        return;
    }

    // 设置通知内容
    notificationMessage.textContent = message;

    // 设置通知类型
    notification.classList.remove('notification-success', 'notification-error', 'notification-info');
    notification.classList.add(`notification-${type}`);

    // 显示通知
    notification.classList.add('notification-visible');

    // 3秒后隐藏通知
    setTimeout(() => {
        notification.classList.remove('notification-visible');
    }, 3000);
}
    </script>
</body>
</html>