<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="cache-control" content="max-age=0">
    <meta http-equiv="refresh" content="30">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NodeTester - c219a-p</title>
    <!--link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css"-->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
    <style>
      /* Importing Google Font - Open Sans */
      @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Open Sans", sans-serif;
      }
      /* Color variables for light theme */
      :root {
        --white-color: #fff;
        --black-color: #000;
        --light-white-color: #f0f0f0;
        --light-gray-color: #e5e5e5;
        --border-color: #ccc;
        --primary-color: #3b82f6;
        --secondary-color: #404040;
        --overlay-dark-color: rgba(0, 0, 0, 0.6);
      }
      /* Color variables for dark theme */
      .dark-mode {
        --white-color: #171717;
        --black-color: #d4d4d4;
        --light-white-color: #333;
        --light-gray-color: #404040;
        --border-color: #808080;
        --secondary-color: #d4d4d4;
      }
      body {
        background: var(--white-color);
      }
      .container {
        display: flex;
        overflow: hidden;
        max-height: 100vh;
        flex-direction: column;
      }
      header, .sidebar .nav-left, .category-list {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--white-color);
      }
      .navbar {
        display: flex;
        gap: 2rem;
        align-items: center;
        padding: 0.5rem 1rem;
        justify-content: space-between;
      }
      :where(.navbar, .sidebar) .nav-section {
        gap: 1rem;
      }
      :where(.navbar, .sidebar) :where(.nav-section, .nav-logo, .search-form) {
        display: flex;
        align-items: center;
      }
      :where(.navbar, .sidebar) :where(.logo-image, .user-image) {
        width: 32px;
        cursor: pointer;
        border-radius: 50%;
      }
      :where(.navbar, .sidebar) .nav-section .nav-button {
        border: none;
        height: 40px;
        width: 40px;
        cursor: pointer;
        background: none;
        border-radius: 50%;
      }
      :where(.navbar, .sidebar) .nav-section .nav-button:hover {
        background: var(--light-gray-color) !important;
      }
      :where(.navbar, .sidebar) .nav-button i {
        font-size: 1.5rem;
        display: flex;
        color: var(--black-color);
        align-items: center;
        justify-content: center;
      }
      :where(.navbar, .sidebar) .nav-logo {
        display: flex;
        gap: 0.5rem;
        text-decoration: none;
      }
      :where(.navbar, .sidebar) .nav-logo .logo-text {
        color: var(--black-color);
        font-size: 1.25rem;
      }
      .navbar .nav-center {
        gap: 0.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
      }
      .navbar .search-form {
        flex: 1;
        height: 40px;
        max-width: 550px;
      }
      .navbar .search-form .search-input {
        width: 100%;
        height: 100%;
        font-size: 1rem;
        padding: 0 1rem;
        outline: none;
        color: var(--black-color);
        background: var(--white-color);
        border-radius: 3.1rem 0 0 3.1rem;
        border: 1px solid var(--border-color);
      }
      .navbar .search-form .search-input:focus {
        border-color: var(--primary-color);
      }
      .navbar .search-form .search-button {
        height: 40px;
        width: auto;
        padding: 0 1.25rem;
        border-radius: 0 3.1rem 3.1rem 0;
        border: 1px solid var(--border-color);
        border-left: 0;
      }
      .navbar .nav-center .mic-button {
        background: var(--light-white-color);
      }
      .navbar .nav-right .search-button {
        display: none;
      }
      .main-layout {
        display: flex;
        overflow-y: auto;
        align-items: flex-start;
        scrollbar-color: #a6a6a6 transparent;
      }
      .main-layout .sidebar {
        width: 280px;
        overflow: hidden;
        padding: 0 0.7rem 0;
        background: var(--white-color);
      }
      .main-layout .sidebar .nav-left {
        display: none;
        padding: 0.5rem 0.3rem;
      }
      body.sidebar-hidden .main-layout .sidebar {
        width: 0;
        padding: 0;
      }
      .sidebar .links-container {
        padding: 0 0 2rem;
      }
      .sidebar .link-section .link-item {
        display: flex;
        color: var(--black-color);
        white-space: nowrap;
        align-items: center;
        font-size: 0.938rem;
        padding: 0.37rem 0.75rem;
        margin-bottom: 0.25rem;
        border-radius: 0.5rem;
        text-decoration: none;
      }
      .sidebar .link-section .link-item:hover {
        background: var(--light-gray-color);
      }
      .sidebar .link-section .link-item i {
        font-size: 1.4rem;
        margin-right: 0.625rem;
      }
      .sidebar .link-section .section-title {
        color: var(--black-color);
        font-weight: 600;
        font-size: 0.938rem;
        margin: 1rem 0 0.5rem 0.5rem;
      }
      .sidebar .section-separator {
        height: 1px;
        margin: 0.64rem 0;
        background: var(--light-gray-color);
      }
      .main-layout .content-wrapper {
        padding: 0 1rem;
        overflow-x: hidden;
        width: 100%;
      }
      .content-wrapper .category-list {
        display: flex;
        overflow-x: auto;
        gap: 0.75rem;
        padding: 0.75rem 0 0.7rem;
        scrollbar-width: none;
      }
      .category-list .category-button {
        border: none;
        cursor: pointer;
        font-weight: 500;
        font-size: 0.94rem;
        border-radius: 0.5rem;
        white-space: nowrap;
        color: var(--black-color);
        padding: 0.4rem 0.75rem;
        background: var(--light-gray-color);
      }
      .category-list .category-button.active {
        color: var(--white-color);
        background: var(--black-color);
        pointer-events: none;
      }
      .dark-mode .category-list .category-button.active {
        filter: brightness(120%);
      }
      .category-list .category-button:not(.active):hover {
        background: var(--border-color);
      }
      .content-wrapper .video-list {
        display: grid;
        gap: 1rem;
        padding: 1.25rem 0 4rem;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }
      .video-list .video-card {
        text-decoration: none;
      }
      .video-list .video-card .thumbnail-container {
        position: relative;
      }
      .video-list .video-card .thumbnail {
        width: 100%;
        object-fit: contain;
        border-radius: 0.5rem;
        aspect-ratio: 16 / 9;
        background: var(--light-white-color);
      }
      .video-list .video-card .duration {
        position: absolute;
        right: 0.65rem;
        bottom: 0.8rem;
        color: #fff;
        font-size: 0.875rem;
        padding: 0 0.3rem;
        border-radius: 0.3rem;
        background: var(--overlay-dark-color);
      }
      .video-list .video-card .video-info {
        display: flex;
        gap: 0.7rem;
        padding: 0.7rem 0.5rem;
      }
      .video-list .video-card .icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
      }
      .video-list .video-card .title {
        font-size: 1rem;
        color: var(--black-color);
        font-weight: 600;
        line-height: 1.375;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .video-list .video-card:hover .title {
        color: var(--primary-color);
      }
      .video-list .video-card p {
      /* font-size: 0.875rem; */
        color: var(--secondary-color);
      }
      .item-list .item-card pre {
      font-size: 0.95rem;
        color: var(--secondary-color);
      }
      .item-list .item-card td {
        font-size: 0.95rem;
        color: var(--secondary-color);
      }
      .item-list .item-card p {
        color: var(--secondary-color);
      }
      .item-list .item-card h3,
      .item-list .item-card h4 {
        color: var(--secondary-color);
      }
      .video-list .video-card .channel-name {
        margin: 0.25rem 0 0.15rem;
      }
      /* Responsive media code for small devices */
      @media (max-width: 768px) {
        .navbar .nav-center {
          display: none;
        }
        .navbar .nav-right .search-button {
          display: block;
        }
        .main-layout .screen-overlay {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 15;
          width: 100%;
          height: 100vh;
          background: var(--overlay-dark-color);
          transition: 0.2s ease;
        }
        body.sidebar-hidden .main-layout .screen-overlay {
          opacity: 0;
          pointer-events: none;
        }
        .main-layout .sidebar {
          position: absolute;
          left: 0;
          top: 0;
          z-index: 20;
          height: 100vh;
          transition: 0.2s ease;
        }
        body.sidebar-hidden .main-layout .sidebar {
          left: -280px;
        }
        .main-layout .sidebar .nav-left {
          display: flex;
        }
      }
    </style>
  </head>
<body class="sidebar-hidden">
  <div class="container">
    <!-- Header / Navbar -->
    <header>
      <nav class="navbar">
        <div class="nav-section nav-left">
          <button class="nav-button menu-button">
            <i class="uil uil-bars"></i>
          </button>
          <a href="/" class="nav-logo">
            <h2 class="logo-text">NodeTester - c219a-p</h2>
          </a>
        </div>
        <div class="nav-section nav-right">
          <button class="nav-button theme-button">
            <i class="uil uil-moon"></i>
          </button>
        </div>
      </nav>
    </header>

    <!-- Main Layout -->
    <main class="main-layout">
      <div class="screen-overlay"></div>

      <!-- Sidebar -->
      <!-- https://iconscout.com/unicons/free-line-icons/ -->
      <aside class="sidebar">

        <div class="links-container">

          <!--div class="link-section">
            <a href="#" class="link-item">
              <i class="uil uil-estate"></i> Home
            </a>
          </div>
          <div class="section-separator"></div-->

          <div class="link-section">
            <a href="/help" class="link-item">
            <i class="uil uil-question-circle"></i> Help
            </a>
          </div>
          <div class="section-separator"></div>

          <div class="link-section">
            <h4 class="section-title">Environment Information</h4>
            <a href="/podinfo" class="link-item">
              <i class="uil uil-info-circle"></i> Container Properties
            </a>
            <a href="/headers" class="link-item">
              <i class="uil uil-arrow"></i> HTTP Headers
            </a>
            <a href="/connectivity" class="link-item" title="See the results of a Cloudflare Trace" request from this container.">
              <i class="uil uil-server-network"></i> External Connectivity
            </a>
          </div>
          <div class="section-separator"></div>

          <div class="link-section">
            <h4 class="section-title">Logs</h4>
            <a href="/applog" class="link-item">
              <i class="uil uil-docker"></i> Application
            </a>
            <a href="/userlog" class="link-item">
              <i class="uil uil-user"></i> User Requests
            </a>
            <a href="/msglog" class="link-item">
              <i class="uil uil-history"></i> Message Service
            </a>
          </div>      <!-- CONTENT-HEADER-START -->
        </div><!-- Links Container -->
      </aside>
      <div class="content-wrapper">

        <!-- Action List -->
        <!-- <div class="category-list">
          <button class="category-button active">All</button>
          <button class="category-button">Website</button>
          <button class="category-button">Music</button>
          <button class="category-button">Gaming</button>
        </div> -->

        <div class="item-list">
      <!-- CONTENT-HEADER-END --><div class="item-card"><h3 style="margin-top: 0.5rem;">Application Log</h3></br><pre>Container started at: 2026-09-04 08:04:10

Container information display is enabled.

Environment variable display is enabled.

Automated container messages are enabled.

The web server is enabled.

The initialization process is now complete.

Logging test messages with prefix "AppleSubmarine" every 300 seconds ...

The Webserver preset was used to initialize this container.

Starting the web server ...
... Web server started on port 80.</pre></div>
        </div><!-- item-list -->
      </div><!-- content-wrapper -->
    </main>
</div><!-- div container-->

<!-- Linking custom script -->
<script>
const menuButtons   = document.querySelectorAll(".menu-button");
const screenOverlay = document.querySelector(".main-layout .screen-overlay");
const themeButton   = document.querySelector(".navbar .theme-button i");

// Toggle sidebar visibility when menu buttons are clicked
    menuButtons.forEach(button => {
        button.addEventListener("click", () => {
            document.body.classList.toggle("sidebar-hidden");
        });
    });

// Toggle sidebar visibility when screen overlay is clicked
    screenOverlay.addEventListener("click", () => {
        document.body.classList.toggle("sidebar-hidden");
    });

// Initialize dark mode based on localStorage
    if (localStorage.getItem("darkMode") === "enabled") {
        document.body.classList.add("dark-mode");
        themeButton.classList.replace("uil-moon", "uil-sun");
    } else {
        themeButton.classList.replace("uil-sun", "uil-moon");
    }

// Toggle dark mode when theme button is clicked
    themeButton.addEventListener("click", () => {
        const isDarkMode = document.body.classList.toggle("dark-mode");
        localStorage.setItem("darkMode", isDarkMode ? "enabled" : "disabled");
        themeButton.classList.toggle("uil-sun", isDarkMode);
        themeButton.classList.toggle("uil-moon", !isDarkMode);
    });
// Show sidebar on large screens by default
    if (window.innerWidth >= 768) {
        document.body.classList.remove("sidebar-hidden");
    }
</script>
</body>
</html>