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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VPS - ErtixNodes</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- SHELL -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">

  <style>
    body {
      background-color: #1F2937;
      color: #E5E7EB;
      font-family: 'Inter', sans-serif;
    }

    header {
      background-color: #111827;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      padding: 1rem 0;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 1rem;
    }

    nav ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    nav ul li {
      display: inline-block;
      margin-right: 1rem;
    }

    nav ul li a {
      color: #E5E7EB;
      padding: 0.5rem 1rem;
      border-radius: 0.375rem;
      transition: background-color 0.2s ease;
    }

    nav ul li a:hover {
      background-color: #374151;
    }

    h2 {
      font-size: 1.75rem;
      margin-bottom: 1rem;
      text-align: center;
    }

    .bg-white {
      background-color: #2D3748;
      transition: box-shadow 0.2s ease;
      color: #E5E7EB;
      padding: 2rem;
      /* Adjusted padding for scaling */
      border-radius: 0.5rem;
      /* Ensure rounded corners */
      width: 100%;
      /* Set to full width */
      max-width: 1200px;
      /* Set maximum width */
      margin: 1rem auto;
      /* Center with margin */
    }

    .bg-white:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .rounded-lg {
      border-radius: 0.5rem;
    }

    .main-content {
      max-width: 12000px;
      flex-direction: column;
      align-items: center;
      padding: 2rem;
    }

    .btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      /* Adjusted padding for button scaling */
      border-radius: 0.375rem;
      font-weight: bold;
      color: white;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease;
      border: none;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
      font-size: 0.875rem;
      /* Adjusted font size for better scaling */
    }

    .btn-gradient {
      background: linear-gradient(90deg, #3182ce, #2b6cb0);
    }

    .btn-gradient:hover {
      transform: scale(1.05);
    }

    input[type="text"],
    select {
      width: 100%;
      padding: 0.75rem;
      border-radius: 0.375rem;
      border: 1px solid #4A5568;
      background-color: #374151;
      color: #E5E7EB;
    }

    input[type="text"]:focus,
    select:focus {
      border-color: #3182ce;
      outline: none;
    }

    .ad-container {
      margin-top: 2rem;
      text-align: center;
    }

    .notification {
      background-color: #2C3E50;
      padding: 1rem;
      border-radius: 0.375rem;
      text-align: center;
      margin-bottom: 1rem;
    }
  </style>
</head>

<body>

  <header>
    <div class="container flex justify-between items-center px-4">
      <div class="text-xl font-bold text-white">ErtixNodes Dashboard</div>
      <nav>
        <ul class="flex space-x-4">
          <li><a href="/dash" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-house mr-1"></i>Home</a></li>
          <li><a href="/dash/create" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-plus mr-1"></i>Create</a></li>
          <li><a href="/dash/earn" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-money-bill-wave mr-1"></i>Earn</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main class="main-content container mx-auto">
    <h2 class="font-bold mb-6">Welcome, <%- req.session.user.global_name %>!</h2>

    <div id="frame" style="width: 100%;"><iframe data-aa='2312977' src='//acceptable.a-ads.com/2312977' style='border:0px; padding:0; width:100%; height:100%; overflow:hidden; background-color: transparent;'></iframe><a style="display: block; text-align: right; font-size: 12px" id="frame-link" href="https://aads.com/campaigns/new/?source_id=2312977&source_type=ad_unit&partner=2312977">Advertise
        here</a></div>

    <% if (vps.status=='active') { %>
    <% if (vps.canStartAgain == true) { %>
    <section id="earn">
      <div class="bg-white shadow transition-transform transform hover:scale-105">
        <div class="flex items-center justify-center">
          <i class="fas fa-server text-yellow-400 text-4xl mr-3"></i>
          <span class="text-lg font-semibold">STATUS: <span id="vpsstatus">Loading</span></span>
        </div>
      </div>

      <div class="bg-white shadow transition-transform transform hover:scale-105">
        <div class="flex items-center justify-center">
          <i class="fas fa-clock text-blue-400 text-4xl mr-3"></i>
          <span class="text-lg font-semibold">EXPIRY: in <%=
                                Math.floor((vps.expiry-Date.now())/1000/60/60) %> hours</span>
        </div>
      </div>

      <% if (vps.uptimeType=='spot' ) { %>
      <div class="<% if (vps.uptimeLeft >= 5) { %>bg-white<% } else { %>bg-red-600<% } %> shadow transition-transform transform hover:scale-105">
        <div class="flex items-center justify-center">
          <i class="fas fa-clock text-blue-400 text-4xl mr-3"></i>
          <span class="text-lg font-semibold">Daily time left: <%= parseFloat(vps.uptimeLeft/60).toFixed(2) %> / <%= (vps.defaultUptime/60) %> hours</span>
        </div>
      </div>
      <% } %>

      <div class="bg-white p-8 rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-6"><%- vps.name %></h2>

        <a class="bg-purple-600 hover:bg-purple-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>">Refresh</a>
        <a class="bg-green-600 hover:bg-green-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>/start">Start</a>
        <a class="bg-red-400 hover:bg-red-300 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>/stop">Stop</a>
        <a class="bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>/restart">Restart</a>
        <a class="bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>/kill">Kill</a>

        <br /><br />
        <a class="bg-purple-600 hover:bg-purple-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>/renew">Renew</a>
        <i>Renewal costs 10 credits per day.</i>

        <br /><br />
        <a class="bg-red-800 hover:bg-red-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="./<%- vps.proxID %>/delete?sure=yes">DELETE</a>

      </div>

      <div class="bg-white shadow transition-transform transform hover:scale-105">
        <h2 class="text-2xl font-bold mb-6 text-center sm:text-left">SSH Details</h2>
        <div class="resource-card bg-gray-800 p-4 rounded-lg items-center">
          <b>OS:</b> <%- vps.os %><br />
          <b>VPS IP:</b> 185.202.236.15<br />
          <b>SSH PORT:</b> <%- vps.sshPort %><br />
          <!-- <b>Root password:</b> <a href="#password" class="bg-blue-700 hover:bg-blue-600 text-white py-2 px-8 rounded-lg w-full sm:w-auto">View</a><br /> -->
          <b>Root password:</b>
          <pre style="display: inline;"><%- vps.password %></pre><br />
        </div>
      </div>

      <div class="bg-white shadow transition-transform transform hover:scale-105">
        <h2 class="text-2xl font-bold mb-6 text-center sm:text-left">Shell</h2>
        <div class="resource-card bg-gray-800 p-4 rounded-lg items-center">
          <div id="term" style="margin: 10px;"></div>
        </div>
      </div>

      <div class="bg-white shadow transition-transform transform hover:scale-105">
        <h2 class="text-2xl font-bold mb-6 text-center sm:text-left">Ports</h2>
        <div class="resource-card p-4 rounded-lg items-center">
          <ul>
            <% for(var i=0; i<vpsPorts.length; i++) { %>
            <li>185.202.236.15:<%= vpsPorts[i].port %> -> :<%= vpsPorts[i].intPort %>
              <% if (vpsPorts[i].intPort !=22) { %><a href="/dash/vps/<%- vps.proxID %>/removeport/<%= vpsPorts[i].port %>" class="back-button bg-red-600 hover:bg-red-500 text-white py-1 px-2 rounded-lg w-full sm:w-auto">Remove</a>
            </li>
            <% } %>
            <% } %>
          </ul>

          <br /><br />

          <a href="/dash/vps/<%- vps.proxID %>/addport" class="back-button bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto">Add
            port</a>
        </div>
      </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      async function time() {
        var res = await fetch('/dash/earn/cuty/time').then(r => r.text());
        // document.getElementById('cutytime').innerHTML = `(${res})`;
        document.querySelectorAll('.cutytime').forEach(section => {
          section.innerHTML = res;
        });

        var res = await fetch('/dash/vps/<%- vps.proxID %>/status').then(r => r.text());
        document.getElementById('vpsstatus').innerHTML = res;
      }

      time();

      setInterval(time, 60 * 1000);

      // SHELL
      var socket = io();

      socket.on('connect', () => {
        console.log('Connect');

        socket.emit('ID', parseInt('<%- vps.proxID %>'));

        var term = new Terminal();
        term.open(document.getElementById('term'));

        socket.on('data', (d) => {
          // d = String(d);
          // console.log('Received:', d);
          term.write(d);
        });

        term.onData((data) => {
          socket.emit('data', data);
        });

        term.onResize((data, data2) => {
          console.log(data, data2);
          socket.emit('resize', {
            cols: data.cols,
            rows: data.rows
          });

        });

        term.resize(64, 20);
      });
    </script>
    <% } %>
    <% } %>

    <% if (vps.status == 'active') { %>
    <% if (vps.uptimeType == 'spot' && vps.canStartAgain == false) { %>
    <div class="bg-white p-8 rounded-lg shadow">
    <h2 class="text-2xl font-bold mb-6">Your spot vps is out of time!</h2>
    <p>You can start your vps again next day.</p>

    <h3 class="mb-6">Options:</h3>
    <a class="bg-red-800 hover:bg-red-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="./<%- vps.proxID %>/delete?sure=yes">DELETE</a><br /><br />

    <a class="bg-blue-800 hover:bg-blue-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="./<%- vps.proxID %>/extend">[10 credits] Add 1 hour</a>
    </div>
    <% } %>
    <% } %>

    <% if (vps.status=='delete' ) { %>
    <section id="earn">
      <div class="bg-white p-8 rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-6">Deleting</h2>
        <p>Your vps will get deleted soon!</p>
      </div>
    </section>
    <% } %>

    <% if (vps.status=='error' ) { %>
    <section id="earn">
      <div class="bg-white p-8 rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-6">ERROR</h2>
        <p>Sorry, but your vps failed to create. We recommend joining the discord server.
        </p>
      </div>
    </section>
    <% } %>

    <% if (vps.status=='creating' ) { %>
    <section id="earn">
      <div class="bg-white p-8 rounded-lg shadow">
        <h2 class="text-2xl font-bold mb-6">VPS is creating...</h2>
        <a class="bg-purple-600 hover:bg-purple-500 text-white py-2 px-4 rounded-lg w-full sm:w-auto" href="/dash/vps/<%- vps.proxID %>">Refresh</a>

        <i>Reloading page in 10 seconds...</i>

        <script>
          setTimeout(() => {
            window.location.href = "/dash/vps/<%- vps.proxID %>";
          }, 10 * 1000);
        </script>
      </div>
    </section>
    <% } %>

    <div id="frame" style="width: 100%;"><iframe data-aa='2312977' src='//acceptable.a-ads.com/2312977' style='border:0px; padding:0; width:100%; height:100%; overflow:hidden; background-color: transparent;'></iframe><a style="display: block; text-align: right; font-size: 12px" id="frame-link" href="https://aads.com/campaigns/new/?source_id=2312977&source_type=ad_unit&partner=2312977">Advertise
        here</a></div>

  </main>

  <script>
    document.addEventListener('DOMContentLoaded', async () => {
      document.getElementById('cutytime').innerText = await fetch('/dash/earn/cuty/time').then(r => r.text());
    });
  </script>
</body>

</html>