boku7-venom/client/agent.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#1e1e1e">
  <meta name="msapplication-navbutton-color" content="#1e1e1e">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Agent Terminal</title>
  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Fira Code', monospace;
      margin: 0;
      padding: 20px 20px 20px 20px;
      background-color: #1e1e1e;
      color: #c5c5c5;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden; /* Prevent body from scrolling */
      box-sizing: border-box;
    }
    h1 {
      font-size: 24px;
      color: #06883e;
      margin: 0 0 20px 0;
    }
    .console {
      /* background-image: url('./assets/images/agent.png'); */
      background-size: contain; /* Fit the image within the element */
      background-repeat: no-repeat; /* Prevent repeating */
      background-position: center; /* Center the image */
      height: 100vh; /* Full viewport height */
      width: 100%;
      background-color: transparent;
      color: #ffffff;
      padding: 10px 10px 10px 10px;
      flex-grow: 1;
      overflow: auto;
      border-radius: 4px;
      display: flex;
      font-family: 'Fira Code', monospace;
      flex-direction: column;
      position: relative;
      white-space: pre-wrap;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      box-sizing: border-box;
    }
    .console::-webkit-scrollbar {
      width: 12px;
    }
    .console::-webkit-scrollbar-track {
      background: #1a1a1a;
      border-radius: 6px;
    }
    .console::-webkit-scrollbar-thumb {
      background: #333333;
      border-radius: 6px;
      border: 2px solid #1a1a1a;
    }
    .console::-webkit-scrollbar-thumb:hover {
      background: #555555;
    }
    .input {
      display: flex;
      flex-direction: column;
      position: relative;
      margin: 10px 0px 0px 0px;
    }
    .input-line {
      display: flex;
      width: 100%;
    }
    .input-line span {
      color: #ffffff;
    }
    #consoleInput {
      background-color: #2e2e2e;
      color: #c5c5c5;
      border: 1px solid #555;
      font-size: 16px;
      width: 100%;
      outline: none;
      padding: 10px;
      border-radius: 4px;
      font-family: 'Fira Code', monospace;
      box-sizing: border-box;
      resize: none;                /* no user resizing */
      overflow-y: hidden;          /* fixed height, no scrollbar */
      height: 36px;                /* fixed single-line feel */
      min-height: 36px;
      max-height: 36px;
    }
    #commandDropdown {
      position: absolute;
      background-color: #333;
      color: #c5c5c5;
      border: 1px solid #555;
      border-radius: 4px;
      z-index: 1000;
      max-height: 220px;
      overflow-y: auto;
      font-size: 14px;
      white-space: nowrap; /* Prevent wrapping */
      box-shadow: 0 6px 14px rgba(0,0,0,0.45);
      backdrop-filter: blur(2px);
    }
    #commandDropdown div {
      padding: 6px 10px;
      cursor: pointer;
      line-height: 1.2;
    }
    #commandDropdown div:hover {
      background-color: #555;
      color: #ffffff;
    }
    table.vampire-matrix {
      width: 100%; /* Make the table consume the entire window width */
      border-collapse: collapse;
      background-color: #030303;
      box-shadow: none;
    }

    table.vampire-matrix th,
    table.vampire-matrix td {
      border: 1px solid #333;
      padding: 10px 15px;
      text-align: left;
      vertical-align: middle;
      word-wrap: break-word; /* Ensure content wraps within the cell */
    }

    table.vampire-matrix thead th {
      background-color: #0a0a0a;
      color: #fff;
      font-size: 1.1em;
    }

    table.vampire-matrix tbody tr {
      transition: background-color 0.3s;
    }

    table.vampire-matrix tbody tr:hover {
      background-color: #080808;
    }

    table.vampire-matrix tbody tr:nth-child(even) {
      background-color: #050505;
    }

    table.vampire-matrix tbody tr:nth-child(odd) {
      background-color: #020202;
    }

    table.vampire-matrix td {
      color: #fff; /* Change text color to white */
    }

    table.vampire-matrix th {
      border-bottom: 2px solid #444;
    }

    table.vampire-matrix tbody td:first-child {
      border-left: 2px solid #444;
    }

    table.vampire-matrix tbody td:last-child {
      border-right: 2px solid #444;
    }

    tr {
      height: 20px;
      max-height: 20px; /* Set your desired max-height here */
      overflow: hidden;
    }
    tr > td {
      max-height: inherit; /* Apply max height to each cell */
      overflow: hidden; /* Ensure content overflow is hidden in each cell */
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: #0a0a0a;
      }
    }
  </style>
</head>
<body>
  <!-- <h1>Agent Terminal</h1> -->
  
  <div class="agentstatus" id="agentstatus">
    <table id="agentTable" class="vampire-matrix" height="20px">
      <tbody>
        <tr id="agentDataRow">
          <td>Loading..</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="console" id="consoleOutput"></div>
  <div class="input">
    <div class="input-line" style="position: relative;">
      <textarea id="consoleInput" autocomplete="off" rows="1"></textarea>
    </div>
    <div id="commandDropdown"></div>
  </div>
  <script src="agent.js"></script>
</body>
</html>