```
<!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: #c7c7c7;
      padding: 15px;
      border-radius: 5px;
      height: 450px;
      overflow-y: auto;
    }
    .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;
    }
  </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 / 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="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)', // Blue
          borderWidth: 2,
          fill: false
        },
        {
          label: 'Outgoing Traffic (MB)',
          data: [],
          borderColor: 'rgba(255, 206, 86, 1)', // Yellow
          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(); // Remove the oldest label
            networkChart.data.datasets[0].data.shift(); // Remove old data
            networkChart.data.datasets[1].data.shift(); // Remove old data
          }

          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(); // Initial fetch
    setInterval(fetchStats, 5000); // Repeat every 5 seconds
  </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 SERVER LOGS TEXT ARE GREEN GLOW