Hi, Let's code! introduce my server-side code : 
```
const https = require('https');
const httpProxy = require('http-proxy');
const url = require('url');
const path = require('path');
const fs = require('fs');
const os = require('os');
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const chalk = require('chalk');
const { EventEmitter } = require('events');
const axios = require('axios');
const geoip = require('geoip-lite');  // Importing geoip-lite for GeoIP blocking
const exec = require('child_process').exec; // For executing shell commands
const { spawn } = require('child_process');
const dgram = require('dgram'); // Importing dgram for UDP handling
const basicAuth = require('express-basic-auth');
const compression = require('compression');
const osu = require('os-utils');
const { netstat } = require('node-os-utils');  // Import netstat from node-os-utils
const mem = require('node-os-utils').mem;
// Create an Agent instance configured for keep-alive
const keepAliveAgent = new https.Agent({
    keepAlive: true,
    maxSockets: 100, // Control the number of sockets to handle concurrent connections
    maxFreeSockets: 10, // Control the number of free sockets to keep open
  });

  axios.defaults.httpsAgent = keepAliveAgent;

let logMessages = [];

const originalLog = console.log;
console.log = (...args) => {
  originalLog(...args);
  logMessages.push(args.join(' '));
};

const synFloodTracker = {};
const MAX_SYN_REQUESTS = 10; // Max allowed per minute
const SYN_BLOCK_TIME_MS = 60000; // Block time if SYN flood detected

// Rate Limiting Configurations
const rateLimit = {};
const MAX_REQUESTS_PER_MINUTE = 100; // Set your limit here (100)
const BLOCK_TIME_MS = 60000; // Time to block the IP (1 minute) (60000)

// DNS attack prevention configurations
const dnsWhitelist = ['8.8.8.8', '1.1.1.1']; // Trusted DNS resolvers (Google DNS and Cloudflare DNS)
const MAX_DNS_REQUESTS_PER_MINUTE = 50; // Limit DNS-related requests
const dnsRateLimit = {};

// UDP Rate Limiting Configurations
const udpRateLimit = {};
const MAX_UDP_REQUESTS_PER_MINUTE = 100; // Adjust as needed
const UDP_BLOCK_TIME_MS = 60000; // 1 minute

// Network Usage Limiting Configurations
const networkUsage = {};
const MAX_BYTES_PER_MINUTE = 1024 * 1024; // 1 MB per minute per IP (adjust as needed)
const NETWORK_BLOCK_TIME_MS = 60000; // 1 minute

// Cloud Server IP Ranges
const cloudServerIpRanges = ['35.', '52.', '169.', '198.', '199.', '200.', '216.', '47.'];

// Allowed Countries for GeoIP
const allowedCountries = ['ID', 'SG', 'PH']; // Add allowed countries by their ISO code

const configApp = express();
const CONFIG_PORT = 6969;

// Middleware
configApp.use(compression());
configApp.set('view engine', 'ejs');
configApp.use(bodyParser.urlencoded({ extended: true }));
configApp.use(express.static('public'));



// Function to check and update DNS rate limits
const isSuspiciousDNSRequest = (ip, requestUrl) => {
  if (!requestUrl.toLowerCase().includes('dns')) return false; // Only check DNS-related requests
  if (!dnsWhitelist.includes(ip)) {
    const now = Date.now();
    if (!dnsRateLimit[ip]) {
      dnsRateLimit[ip] = { count: 1, timestamp: now };
    } else {
      const timePassed = now - dnsRateLimit[ip].timestamp;
      if (timePassed > BLOCK_TIME_MS) {
        dnsRateLimit[ip] = { count: 1, timestamp: now };
      } else {
        dnsRateLimit[ip].count++;
      }
      
      if (dnsRateLimit[ip].count > MAX_DNS_REQUESTS_PER_MINUTE) {
        return true; // DNS request limit exceeded
      }
    }
  }
  return false;
};

// Function to check and update UDP rate limits
const isUdpRateLimited = (ip) => {
  const now = Date.now();
  if (!udpRateLimit[ip]) {
    udpRateLimit[ip] = { count: 1, timestamp: now };
    return false;
  } else {
    const timePassed = now - udpRateLimit[ip].timestamp;
    if (timePassed > UDP_BLOCK_TIME_MS) {
      udpRateLimit[ip] = { count: 1, timestamp: now };
      return false;
    } else {
      udpRateLimit[ip].count++;
      if (udpRateLimit[ip].count > MAX_UDP_REQUESTS_PER_MINUTE) {
        return true;
      }
    }
  }
  return false;
};

// Function to check and update network usage
const isNetworkUsageLimited = (ip, bytes) => {
  const now = Date.now();
  if (!networkUsage[ip]) {
    networkUsage[ip] = { sent: bytes, received: bytes, timestamp: now };
    return false;
  } else {
    const timePassed = now - networkUsage[ip].timestamp;
    if (timePassed > NETWORK_BLOCK_TIME_MS) {
      networkUsage[ip] = { sent: bytes, received: bytes, timestamp: now };
      return false;
    } else {
      networkUsage[ip].sent += bytes;
      networkUsage[ip].received += bytes;
      if (networkUsage[ip].sent > MAX_BYTES_PER_MINUTE || networkUsage[ip].received > MAX_BYTES_PER_MINUTE) {
        return true;
      }
    }
  }
  return false;
};

// Function to log blocked IPs
const logBlockedIP = (ip, protocol = 'TCP') => {
  fs.appendFile('blocked_ips.log', `${new Date().toISOString()} - Blocked IP: ${ip} [${protocol}]\n`, (err) => {
    if (err) console.error(chalk.red('Error logging blocked IP:'), err);
  });
};

// Function to normalize IP addresses
const normalizeIp = (ip) => {
  if (ip.startsWith("::ffff:")) {
    return ip.substring(7);
  }
  if (ip === "::1") {
    return "127.0.0.1";
  }
  return ip;
};

// Function to check if IP is from cloud/server ranges
const isCloudOrServerIp = (ip) => {
  return cloudServerIpRanges.some((range) => ip.startsWith(range));
};

// Helper function to check GeoIP blocking
const isBlockedGeoIp = (ip) => {
  const geo = geoip.lookup(ip);
  if (geo && !allowedCountries.includes(geo.country)) {
    return true;
  }
  return false;
};

const configPath = path.resolve(__dirname, './config/main.json');
const config = JSON.parse(fs.readFileSync(configPath, 'utf8'));

// Fungsi untuk membaca konfigurasi
const readConfig = () => {
  try {
    const data = fs.readFileSync(configPath, 'utf8');
    return JSON.parse(data);
  } catch (err) {
    console.error(chalk.red('Error membaca main.json:'), err);
    return {};
  }
};

// Fungsi untuk menulis konfigurasi
const writeConfig = (config) => {
  try {
    fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
    console.log(chalk.green('Configuration updated.'));
    console.clear();
  } catch (err) {
    console.error(chalk.red('Error writing to Config:'), err);
  }
};

// Middleware Autentikasi
configApp.use('/config', basicAuth({
  users: { [config.username]: config.password }, // Use credentials from config
  challenge: true,
  realm: 'Config Area'
}));

// Route untuk menampilkan form konfigurasi
configApp.get('/config', (req, res) => {
  const config = readConfig();
  res.render('config', { config });
});

// Route untuk memproses perubahan konfigurasi
configApp.post('/config', (req, res) => {
  const { ip, port, loginurl, cdn, username, password } = req.body;
  const newConfig = { ip, port: parseInt(port), loginurl, cdn, username, password };
  
  writeConfig(newConfig);
  
  res.redirect('/config');
});


configApp.get('/logs', (req, res) => {
  res.json({
    logs: logMessages
  });
});

// Endpoint to gather system stats
configApp.get('/stats', async (req, res) => {
    try {
      // Use os-utils or os for retrieving CPU and memory information
      const freeMemory = os.freemem();
      const totalMemory = os.totalmem();
      const usedMemory = totalMemory - freeMemory;
      const memoryUsagePercent = ((usedMemory) / totalMemory) * 100;

  
      osu.cpuUsage(async (cpuPercentage) => {
        
        const network = await netstat.inOut();
       
  
        res.json({
          memoryUsage: {
            free: freeMemory,
            total: totalMemory,
            usedPercent: memoryUsagePercent.toFixed(2),
          },
          cpuUsage: (cpuPercentage * 100).toFixed(2),
          network: {
            inputMb: network.inputMb,
            outputMb: network.outputMb
          }
        });
      });
    } catch (error) {
      console.error('Error fetching system statistics:', error);
      res.json({ error: 'Unable to fetch system statistics' });
    }
  });
configApp.post('/restart', (req, res) => {
  console.log('Restarting server...');
  res.send('Server restarting...');
  
 
  process.exit(1);
});


const isSynFlood = (ip) => {
  const now = Date.now();
  if (!synFloodTracker[ip]) {
    synFloodTracker[ip] = { count: 1, timestamp: now };
    return false;
  }

  const timePassed = now - synFloodTracker[ip].timestamp;
  if (timePassed > SYN_BLOCK_TIME_MS) {
    synFloodTracker[ip] = { count: 1, timestamp: now };
    return false;
  } else {
    synFloodTracker[ip].count++;
    if (synFloodTracker[ip].count > MAX_SYN_REQUESTS) {
      console.log(chalk.red(`SYN flood detected from IP: ${ip}`));
      logBlockedIP(ip, 'SYN Flood');
      return true;
    }
  }

  return false;
};

// Start UI Server
configApp.listen(CONFIG_PORT, () => {
  console.log(chalk.blue(`Admin dashboard is running on http://localhost:${CONFIG_PORT}/config`));
});


// Start Server Function
const startServer = async () => {
  const proxy = httpProxy.createProxyServer({});
  const pk = fs.readFileSync(path.join(__dirname, 'server.key'));
  const pc = fs.readFileSync(path.join(__dirname, 'server.crt'));
  const optss = { key: pk, cert: pc };
  const trustedIPs = ['127.0.0.1'];
  const port = process.argv[2] || 443;
  

  EventEmitter.defaultMaxListeners = 100;

  const packet = `server|${config.ip}\nport|${config.port}\ntype|1\n#maint|Server is currently initializing or re-syncing with sub servers. Please try again in a minute.\n\n\nloginurl|${config.loginurl}\nbeta_server|127.0.0.1\nbeta_port|17091\nbeta_type|1\nbeta2_server|127.0.0.1\nbeta2_port|17099\nbeta2_type|1\nmeta|${Math.floor(Date.now() / 1000)}\nRTENDMARKERBS1001`;

  const server = https.createServer(optss, function (req, res) {
    let ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
    const normalizedIp = normalizeIp(ip);
    const hostHeader = req.headers.host;

// Set keepAliveTimeout, which sets how long a connection should remain open in milliseconds.
server.keepAliveTimeout = 60 * 1000; // Keep alive for 60 seconds

// Set the headers timeout slightly longer than keepAliveTimeout to accommodate requests that arrive just before the keep alive timeout
server.headersTimeout = 65 * 1000; // 65 seconds

    console.log(chalk.green(`[DEVELOPER MODE]`, req.headers['user-agent']));
    console.log(chalk.green(`Request received from IP: ${normalizedIp}`));

    if (isSynFlood(ip)) {
        console.log(chalk.red(`SYN flood detected from IP: ${normalizedIp}`));
        logBlockedIP(normalizedIp, 'SYN Flood');
        
        // Use the underlying socket to destroy the connection
        req.socket.end(); // Gracefully end the connection
        req.socket.destroy(); // Forcefully close the connection, ignoring any pending data or errors
        return;
    }
    // Rate Limiting Logic
    if (!rateLimit[normalizedIp]) {
      rateLimit[normalizedIp] = { count: 1, timestamp: Date.now() };
    } else {
      const currentTime = Date.now();
      const timePassed = currentTime - rateLimit[normalizedIp].timestamp;
  
      // Reset count if more than 1 minute has passed
      if (timePassed > BLOCK_TIME_MS) {
        rateLimit[normalizedIp] = { count: 1, timestamp: currentTime };
      } else {
        rateLimit[normalizedIp].count++;
      }
  
      // Check if the limit is reached
      if (rateLimit[normalizedIp].count > MAX_REQUESTS_PER_MINUTE) {
        console.log(chalk.red(`Rate limit exceeded for IP: ${normalizedIp}`));
        logBlockedIP(normalizedIp, 'TCP');
        res.statusCode = 429; // Too Many Requests
        res.end('Too many requests. Your connection is being throttled.');
        return;
      }
    }
  
    // DNS attack protection
    if (isSuspiciousDNSRequest(normalizedIp, req.url)) {
      console.log(chalk.red(`DNS DDoS detected from IP: ${normalizedIp}`));
      logBlockedIP(normalizedIp, 'TCP-DNS');
      res.statusCode = 403; // Forbidden
      res.end('Forbidden: DNS DDoS attack detected.');
      return;
    }

    // Network Usage Limiting for TCP
    const requestBytes = Buffer.byteLength(req.url); // Approximate
    if (isNetworkUsageLimited(normalizedIp, requestBytes)) {
      console.log(chalk.red(`Network usage limit exceeded for IP: ${normalizedIp} (TCP)`));
      logBlockedIP(normalizedIp, 'TCP-NETWORK');
      res.statusCode = 429; // Too Many Requests
      res.end('Too many requests. Your connection is being throttled.');
      return;
    }
  
    // Check for cloud or server IP range
    if (!trustedIPs.includes(normalizedIp) && isCloudOrServerIp(normalizedIp)) {
      console.log(chalk.red(`Blocking cloud/server IP: ${normalizedIp}`));
      logBlockedIP(normalizedIp, 'TCP-Cloud');
      res.statusCode = 403;
      res.end('Forbidden: Access from cloud/server IP is blocked.');
      return;
    }
  
    // Check for GeoIP block
    if (isBlockedGeoIp(normalizedIp)) {
      console.log(chalk.red(`Blocking access from IP: ${normalizedIp} (GeoIP Block)`));
      logBlockedIP(normalizedIp, 'TCP-GeoIP');
      res.statusCode = 403;
      res.end('Forbidden: Access from your location is blocked.');
      return;
    }
  
    const parsedUrl = url.parse(req.url);
    const pathname = `.${parsedUrl.pathname}`;
    const ext = path.parse(pathname).ext;
  
    console.log(chalk.blue(`Connection Request from: ${normalizedIp} URL: ${req.url} Method: ${req.method}`));
  
    const map = {
      '.ico': 'image/x-icon',
      '.html': 'text/html',
      '.js': 'text/javascript',
      '.json': 'application/json',
      '.css': 'text/css',
      '.png': 'image/png',
      '.jpg': 'image/jpeg',
      '.wav': 'audio/wav',
      '.mp3': 'audio/mpeg',
      '.svg': 'image/svg+xml',
      '.pdf': 'application/pdf',
      '.doc': 'application/msword'
    };
  
    const allowedUserAgents = [
      'UbiServices_SDK_2022.Release.9_PC64_ansi_static',
      'UbiServices_SDK_2022.Release.9_PC32_ansi_static',
      'UbiServices_SDK_2022.Release.9_ANDROID64_static',
      'UbiServices_SDK_2022.Release.9_ANDROID32_static',
      'UbiServices_SDK_2022.Release.9_IOS64',
      'UbiServices_SDK_2022.Release.9_IOS32',
      'UbiServices_SDK_2022.Release.9_MAC64',
      'UbiServices_SDK_2022.Release.9_MAC32',
    ];
  
    const userAgent = req.headers['user-agent'];
  
    // Handle /growtopia/server_data.php - Only POST and allowed User-Agents
// Handle /growtopia/server_data.php - Only POST and allowed User-Agents
if (req.url === "/growtopia/server_data.php") {
    if (req.method !== 'POST' || hostHeader !== 'www.growtopia2.com') {
      console.log(chalk.red(`Mata mata :  ${req.url}`));
      res.statusCode = 403;
      res.end(`
server|${normalizedIp}
port|${Math.floor(Date.now() / 69)}
type|1
#maint|Server is currently initializing or re-syncing with sub servers. Please try again in a minute.
  
loginurl|http-king.com
beta_server|${normalizedIp}
beta_port|${Math.floor(Date.now() / 69)}
beta_type|1
beta2_server|${normalizedIp}
beta2_port|${Math.floor(Date.now() / 69)}
beta2_type|1
meta|69-SCP-PROTECTION
RTENDMARKERBS1001
      `);
      return;
    }
  
    res.write(packet, function (err) {
      if (err) console.log(chalk.red(err));
    });
    res.end();
  }
    // Handle /cache and /0098 - Only GET and allowed User-Agents
    else if (req.url.indexOf("/cache") !== -1 || req.url.indexOf("/0098") !== -1) {
      if (req.method !== 'GET' || !allowedUserAgents.includes(userAgent)) {
        console.log(chalk.red(`Blocked: Invalid method or User-Agent for ${req.url}`));
        res.statusCode = 403;
        res.end('Hello world');
        return;
      }
  
      console.log(chalk.blue(`[CACHE-SPEED] Connection from: ${normalizedIp}\n Downloading assets: ${req.url}`));
  
      fs.exists(pathname, function (exist) {
        if (!exist) {
          res.statusCode = 301;
          res.writeHead(301, {
            Location: `https://ubistatic-a.akamaihd.net/${config.cdn}${req.url}`
          }).end();
          return;
        }
  
        fs.readFile(pathname, function (err, data) {
          if (err) {
            res.statusCode = 404;
            res.end(`error`);
          } else {
            res.setHeader('Content-type', map[ext] || 'text/plain');
            res.end(data);
          }
        });
      });
    }
    // Block all other requests
    else {
      console.log(chalk.red(`🛡 [PROTECTION] Blocked request: ${req.method} ${req.url} from IP: ${normalizedIp}`));
      logBlockedIP(normalizedIp, 'TCP-Other');
      res.statusCode = 403;
      res.end('Hello world');
    }
  });

  server.listen(port, () => {
    console.log(chalk.green(`Server is running on port ${port}`));
  });

  // -------------------- UDP Server Setup --------------------
  
  const udpServer = dgram.createSocket('udp4');
  const UDP_PORT = 53; // DNS typically uses port 53

  udpServer.on('error', (err) => {
    console.error(`UDP server error:\n${err.stack}`);
    udpServer.close();
  });

  udpServer.on('message', (msg, rinfo) => {
    const ip = rinfo.address;
    const normalizedIp = normalizeIp(ip);
    console.log(chalk.yellow(`UDP request from IP: ${normalizedIp}, Port: ${rinfo.port}`));

    // Rate Limiting
    if (isUdpRateLimited(normalizedIp)) {
      console.log(chalk.red(`UDP Rate limit exceeded for IP: ${normalizedIp}`));
      logBlockedIP(normalizedIp, 'UDP');
      return; // Drop the packet silently or send a response indicating rate limiting
    }

    // GeoIP Blocking
    if (isBlockedGeoIp(normalizedIp)) {
      console.log(chalk.red(`Blocking UDP access from IP: ${normalizedIp} (GeoIP Block)`));
      logBlockedIP(normalizedIp, 'UDP-GeoIP');
      return; // Drop the packet silently or send a forbidden response
    }

    // Network Usage Limiting for UDP
    const messageBytes = msg.length;
    if (isNetworkUsageLimited(normalizedIp, messageBytes)) {
      console.log(chalk.red(`Network usage limit exceeded for IP: ${normalizedIp} (UDP)`));
      logBlockedIP(normalizedIp, 'UDP-NETWORK');
      return; // Drop the packet
    }

    // Implement your DNS handling logic here
    // For example, respond with a simple DNS response or forward the request to a legitimate DNS server

    // Example: Forward the DNS request to an external DNS server (e.g., Google DNS)
    const externalDns = '8.8.8.8';
    const externalDnsPort = 53;
    const externalClient = dgram.createSocket('udp4');

    externalClient.send(msg, 0, msg.length, externalDnsPort, externalDns, (error) => {
      if (error) {
        console.error(`Error forwarding UDP request: ${error}`);
        externalClient.close();
      }
    });

    externalClient.on('message', (response) => {
      udpServer.send(response, 0, response.length, rinfo.port, rinfo.address, (err) => {
        if (err) {
          console.error(`Error sending UDP response: ${err}`);
        }
        externalClient.close();
      });
    });

    // Optional: Implement timeouts to prevent hanging
    externalClient.on('error', (err) => {
      console.error(`External DNS client error: ${err}`);
      externalClient.close();
    });

    // Set a timeout for the external DNS response
    externalClient.setTimeout(5000, () => { // 5 seconds timeout
      console.error(`External DNS request timed out for IP: ${normalizedIp}`);
      externalClient.close();
    });
  });

  udpServer.on('listening', () => {
    const address = udpServer.address();
    console.log(chalk.green(`UDP Server listening on ${address.address}:${address.port}`));
  });

  udpServer.bind(UDP_PORT);
  const shutdown = () => {
    console.log('Shutting down the server...');
  
    // Stop the server from accepting new connections
    server.close(() => {
      console.log('HTTP server closed.');
  
      // Close the UDP server
      udpServer.close(() => {
        console.log('UDP server closed.');
  
        // Exit the process
        process.exit(0);
      });
    });
  
    // Ensure shutdown if connections remain
    setTimeout(() => {
      console.error('Forced shutdown due to open connections.');
      process.exit(1); // exit with error code if connections remain
    }, 5000).unref();
  };
  
  configApp.post('/shutdown', (req, res) => {
    res.send('Server is shutting down...');
    shutdown();
  });
  
  // Capture abort signals
  process.on('SIGINT', shutdown);
  process.on('SIGTERM', shutdown);
  
  console.log('')
  console.log(chalk.magenta('========================================================'));
  console.log(chalk.magenta(`- CONFIGURATION LOADS : `));
  console.log(chalk.magenta(`[@] Login URL : ${config.loginurl}`));
  console.log(chalk.magenta(`[@] HTTP Port ${port}`));
  console.log(chalk.magenta(`[@] ANTI-HOSTCHECK ${port}`));
  console.log(chalk.magenta(`[@] ANTI-SCAN SERVER DATA PHP STATUS : ENABLED [PENTEST-SECURITY]`));
  console.log(chalk.magenta(`[@] OPERATION SYSTEM : WINDOWS`));
  console.log(chalk.magenta(`[@] HTTP KING VERSION : 3.3.8`));
  console.log(chalk.greenBright(`[@] SUBSCRIPTION : VIP-SUPER`));
  console.log(chalk.greenBright(`[@] LAST HTTP UPDATE : 6/10/2024`));
  console.log(chalk.magenta('========================================================'));
  console.log('')
  console.log(chalk.green(`
  
  
      :::    ::: ::::::::::: ::::    :::  ::::::::       :::     :::     ::::::::       :::::::: 
     :+:   :+:      :+:     :+:+:   :+: :+:    :+:      :+:     :+:    :+:    :+:     :+:    :+: 
    +:+  +:+       +:+     :+:+:+  +:+ +:+             +:+     +:+           +:+            +:+  
   +#++:++        +#+     +#+ +:+ +#+ :#:             +#+     +:+        +#++:          +#++:    
  +#+  +#+       +#+     +#+  +#+#+# +#+   +#+#       +#+   +#+            +#+            +#+    
 #+#   #+#      #+#     #+#   #+#+# #+#    #+#         #+#+#          #+#    #+#     #+#    #+#  
###    ### ########### ###    ####  ########            ###          ########      ########

    `));
}

startServer();
```

And my config.ejs 
```
<!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: {
          x: {
            type: 'linear',
            position: 'bottom'
          },
          y: {
            beginAtZero: 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 => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    }).then(data => {
      if (data.error) {
        console.error('Error fetching stats:', data.error);
        return;
      }

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

      const now = Date.now();
      networkChart.data.labels.push(new Date(now).toLocaleTimeString());
      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);
    });
  }

  setInterval(fetchStats, 5000);
  fetchStats();
  </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>
```