<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Server Configuration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" />
    <style>
        body {
            background-color: #212529;
            color: #ffffff;
            font-family: 'Roboto', sans-serif;
        }

        .navbar-brand {
            font-size: 1.75rem;
        }

        .card {
            margin-top: 20px;
            border: none;
            border-radius: 8px;
        }

        .card-header {
            background-color: #343a40;
        }

        .card-body {
            background-color: #272b30;
        }

        pre {
            background-color: #1c1e22;
            color: #00ff00;
            padding: 15px;
            border-radius: 5px;
            height: 450px;
            overflow-y: auto;
            text-shadow: 0 0 10px rgba(0, 255, 0, 0.5), 0 0 20px rgba(0, 255, 0, 0.3), 0 0 30px rgba(0, 255, 0, 0.2);
        }

        .btn-primary,
        .btn-warning,
        .btn-danger {
            margin-right: 10px;
            transition: box-shadow 0.3s ease-in-out;
        }

        .btn-primary:hover,
        .btn-warning:hover,
        .btn-danger:hover {
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
        }

        .form-label {
            color: #b0b0b0;
            margin-bottom: 5px;
        }

        input.form-control {
            color: #ffffff;
            border-color: #6c757d;
        }

        input.form-control:focus {
            color: #ffffff;
            background-color: #343a40;
        }

        .form-label i {
            margin-right: 5px;
        }

        /* Add gradient to GeoIP labels */
        .geoip-gradient {
            background: -webkit-linear-gradient(45deg, #29b6f6, #ab47bc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <i class="fas fa-rocket"></i> Server Config
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>

    <div class="container mt-3">
        <div class="row g-4">
            <!-- Configuration Form -->
            <div class="col-12 col-lg-6">
                <div class="card shadow-lg">
                    <div class="card-header bg-secondary">
                        <h4 class="mb-0"><i class="fas fa-cogs"></i> Server Configuration</h4>
                    </div>
                    <div class="card-body">
                        <form action="/config" method="POST" novalidate>
                            <div class="mb-3">
                                <label for="ip" class="form-label"><i class="fas fa-network-wired"></i> IP Server</label>
                                <input type="text" class="form-control" id="ip" name="ip" value="<%= config.ip %>" required>
                                <div class="invalid-feedback">
                                    Please input the server IP!
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="port" class="form-label"><i class="fas fa-server"></i> Port</label>
                                <input type="number" class="form-control" id="port" name="port" value="<%= config.port %>" required>
                                <div class="invalid-feedback">
                                    Please input the port!
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="loginurl" class="form-label"><i class="fas fa-sign-in-alt"></i> Login URL</label>
                                <input type="url" class="form-control" id="loginurl" name="loginurl" value="<%= config.loginurl %>" required>
                                <div class="invalid-feedback">
                                    Make sure the loginurl input is valid!
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="cdn" class="form-label"><i class="fas fa-cloud"></i> CDN Path</label>
                                <input type="text" class="form-control" id="cdn" name="cdn" value="<%= config.cdn %>" required>
                                <div class="invalid-feedback">
                                    Input the CDN path!
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="username" class="form-label"><i class="fas fa-user"></i> Username (ADMIN LOGIN)</label>
                                <input type="text" class="form-control" id="username" name="username" value="<%= config.username %>" required>
                                <div class="invalid-feedback">
                                    Input username to change the admin username!
                                </div>
                            </div>

                            <div class="mb-3">
                                <label for="password" class="form-label"><i class="fas fa-lock"></i> Password (ADMIN LOGIN)</label>
                                <input type="text" class="form-control" id="password" name="password" value="<%= config.password %>" required>
                                <div class="invalid-feedback">
                                    Input password to change the admin password!
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label"><i class="fas fa-globe"></i> Allowed Countries (GeoIP)</label>
                                <div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="ID" <%= config.allowedCountries.includes('ID') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="id">
                                            Indonesia
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="SG" <%= config.allowedCountries.includes('SG') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="sg">
                                            Singapore
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="PH" <%= config.allowedCountries.includes('PH') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="ph">
                                            Philippines
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="US" <%= config.allowedCountries.includes('US') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="us">
                                            United States
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="GB" <%= config.allowedCountries.includes('GB') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="gb">
                                            United Kingdom
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="IN" <%= config.allowedCountries.includes('IN') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="in">
                                            India
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="AU" <%= config.allowedCountries.includes('AU') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="au">
                                            Australia
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="MY" <%= config.allowedCountries.includes('MY') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="my">
                                            Malaysia
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="TH" <%= config.allowedCountries.includes('TH') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="th">
                                            Thailand
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="TR" <%= config.allowedCountries.includes('TR') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="tr">
                                            Turkey
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="countries" value="MV" <%= config.allowedCountries.includes('MV') ? 'checked' : '' %>>
                                        <label class="form-check-label geoip-gradient" for="mv">
                                            Maldives
                                        </label>
                                    </div>

                                    <!-- Add more country checkboxes as needed -->
                                </div>
                            </div>

                            <div class="d-flex justify-content-end">
                                <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> Save configuration</button>
                                <button type="button" class="btn btn-warning" id="restartButton"><i class="fas fa-sync-alt"></i> Restart HTTP</button>
                                <button type="button" class="btn btn-danger" id="shutdownButton"><i class="fas fa-power-off"></i> Shutdown HTTP</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Server Logs Section -->
            <div class="col-12 col-lg-6">
                <div class="card shadow-lg">
                    <div class="card-header bg-secondary">
                        <h4 class="mb-0"><i class="fas fa-terminal"></i> Server Logs</h4>
                    </div>
                    <div class="card-body">
                        <pre id="serverLogs"></pre>
                    </div>
                </div>
            </div>

            <!-- System Stats Section with Charts -->
            <div class="col-12 col-lg-6">
                <div class="card shadow-lg">
                    <div class="card-header bg-secondary">
                        <h4 class="mb-0"><i class="fas fa-microchip"></i> System Statistics</h4>
                    </div>
                    <div class="card-body">
                        <ul id="systemStats" class="list-group mb-3">
                            <li class="list-group-item bg-dark text-light">
                                <strong>CPU Usage:</strong> <span id="cpuUsage">Loading...</span>%
                            </li>
                            <li class="list-group-item bg-dark text-light">
                                <strong>Memory Usage:</strong> <span id="memoryUsage">Loading...</span>
                            </li>
                        </ul>
                        <canvas id="networkChart" height="100"></canvas>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const networkChartCtx = document.getElementById('networkChart').getContext('2d');

        const networkChart = new Chart(networkChartCtx, {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                        label: 'Incoming Traffic (MB)',
                        data: [],
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 2,
                        fill: false
                    },
                    {
                        label: 'Outgoing Traffic (MB)',
                        data: [],
                        borderColor: 'rgba(255, 206, 86, 1)',
                        borderWidth: 2,
                        fill: false
                    }
                ]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                },
                plugins: {
                    legend: {
                        display: true
                    }
                }
            }
        });

        function stripAnsiCodes(text) {
            return text.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, '');
        }

        function fetchLogs() {
            fetch('/logs')
                .then(response => response.json())
                .then(data => {
                    const cleanLogs = data.logs.map(log => stripAnsiCodes(log));
                    document.getElementById('serverLogs').textContent = cleanLogs.join('\n');
                })
                .catch(error => console.error('Error while fetching logs:', error));
        }

        setInterval(fetchLogs, 5000);
        fetchLogs();

        document.getElementById('restartButton').addEventListener('click', function() {
            if (confirm('Are you sure you want to restart the server? This will temporarily disconnect all users.')) {
                fetch('/restart', {
                        method: 'POST'
                    })
                    .then(response => response.json())
                    .then(data => alert(data.message))
                    .catch(error => console.error('Error with restart request:', error));
            }
        });

        document.getElementById('shutdownButton').addEventListener('click', function() {
            if (confirm('Are you sure you want to shutdown the server?')) {
                fetch('/shutdown', {
                        method: 'POST'
                    })
                    .then(response => response.json())
                    .then(data => alert(data.message))
                    .catch(error => console.error('Error with shutdown request:', error));
            }
        });

        function formatBytes(bytes, decimals = 2) {
            if (bytes === 0) return '0 Bytes';
            const k = 1024;
            const dm = decimals < 0 ? 0 : decimals;
            const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
            const i = Math.floor(Math.log(bytes) / Math.log(k));
            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }

        function fetchStats() {
            fetch('/stats')
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        console.error('Error fetching stats:', data.error);
                        return;
                    }

                    console.log("Stats data:", data);

                    document.getElementById('cpuUsage').textContent = `${data.cpuUsage}%`;
                    document.getElementById('memoryUsage').textContent =
                        `${data.memoryUsage.usedPercent}% / ${formatBytes(data.memoryUsage.total)}`;

                    const now = new Date();
                    const timeLabel = now.toLocaleTimeString();

                    if (networkChart.data.labels.length > 10) {
                        networkChart.data.labels.shift();
                        networkChart.data.datasets[0].data.shift();
                        networkChart.data.datasets[1].data.shift();
                    }

                    networkChart.data.labels.push(timeLabel);
                    networkChart.data.datasets[0].data.push(data.network.inputMb);
                    networkChart.data.datasets[1].data.push(data.network.outputMb);

                    networkChart.update();
                })
                .catch(error => {
                    console.error('Error fetching stats:', error);
                });
        }

        fetchStats();
        setInterval(fetchStats, 5000);
    </script>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>

</html>


can you make the placement are professional and good (so no need to scroll, even server logs panel)