<!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;">About This App</h3></br><p><div class="item-card">

<p style="margin-left: 1.5rem;">
    psPodTester is a PowerShell 7 module for testing and debugging container deployments.</br>
        - GitHub Project: <a href="https://github.com/seabopo/psPodTester/blob/v2.x/README.md" target="_blank">github.com/seabopo/psPodTester/blob/v2.x/</a></br>
        - Docker Images: <a href="https://hub.docker.com/repository/docker/seabopo/pspodtester" target="_blank">hub.docker.com/repository/docker/seabopo/pspodtester</a></br>
</p></br>

<h4>Environment Information</h4></br>

    <p style="margin-left: 1.5rem;">
        <b>Container Properties</b></br>
        View container and host debugging information and environment variables.</br>
        Add custom information by setting "PSPOD_INFO_CUSTOMNAME" environment variables.</br></br>
        Example:
        <pre>
                env:
                - name: PSPOD_INFO_NODE_IP
                valueFrom:
                    fieldRef:
                    fieldPath: status.hostIP
        </pre>
    </p>

    <p style="margin-left: 1.5rem;">
        <b>HTTP Headers</b></br>
        View the request headers that make it to the container through CDN and other Cloud services.</br>
    </p></br>

    <p style="margin-left: 1.5rem;">
        <b>Perform an ECHO Test</b></br>
        Send a GET or POST to /echo to view all properties of the request.</br>
    </p></br>

    <p style="margin-left: 1.5rem;">
        <b>External Connectivity</b></br>
        See the results of a "www.cloudflare.com/cdn-cgi/trace" request from this container.</br>
        Use this to get the public/gateway IP used for traffic from this container or host.</br>
    </p></br>

<h4>Logs</h4></br>

    <p style="margin-left: 1.5rem;">
        <b>Application</b></br>
        View the application console logs (startup, tests progress, etc.).</br>
    </p></br>

    <p style="margin-left: 1.5rem;">
        <b>User Requests</b></br>
        View the user requests to the pod.</br>
        This shows both real user and healthz requests.</br>
    </p></br>

    <p style="margin-left: 1.5rem;">
        <b>Message Service</b></br>
        If the message service is enabled this will show every automatically generated console test message.</br>
        The send rate and a custom log message can be configured via environment variables. </br>
    </p></br>

</div><!-- item-card --></p></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>