<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autonomous Test Agent</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(to right, #0f0c29, #302b63, #24243e);
    color: #ccc;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }

  .version {
    position: fixed;
    top: 0;
    right: 0;
    margin: 3px 5px;
    z-index: 1
  }

  .dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
  }

  .test-queue-title {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: space-between;
  }

  .logo {
    height: 40px;
    width: auto;
    object-fit: contain;
  }

  .screen-container {
    flex: 0 0 auto;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 100px; /* Changed from 220px to 100px */
    position: relative;
    overflow: hidden;
    margin-right: 10px;
  }

  #screen_image, #iphone_screen_image {
    height: 100px; /* Changed from 220px to 100px */
    width: auto;
    object-fit: contain;
    border-radius: 6px;
  }

  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
  }

  .queue-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 5px; /* 20px */
    height: 0;
    /*max-height: 800px;*/
    -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar for Firefox */
  }

  .queue-container::-webkit-scrollbar {
    display: none;  /* Hide scrollbar for Chrome, Safari and Opera */
  }

  /* Remove the old scrollbar styles */
  .queue-container::-webkit-scrollbar-track,
  .queue-container::-webkit-scrollbar-thumb {
    display: none;
  }

  .bugs-found {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
  }

  .testers-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 15px 0;
    flex-wrap: wrap; /* Allow items to wrap onto new lines */
  }

  .bot-profile {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    object-fit: cover;
    overflow: hidden; /* Hide any excess parts of the image */
    animation: gradientAnimation 5s infinite; /* Add dynamic gradient animation */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6); /* Optional: Added glowing effect */
  }

  .bot-profile.glow {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
  }

  .qItem {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  .qItem.typing {
    background: linear-gradient(
        270deg,
        rgba(255, 255, 255, 0.1),
        rgba(100, 100, 255, 0.2),
        rgba(255, 100, 255, 0.2),
        rgba(255, 255, 255, 0.1)
    );
    background-size: 400% 100%;
    animation: shimmer 3s linear infinite;
  }

  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .spin {
    animation: spin 2s linear infinite;
  }
  

  h3 {
    margin: 0;
    color: #fff;
  }

  .input-container {
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    gap: 10px;
    z-index: 1000;
    backdrop-filter: blur(5px);
  }

  .text-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    font-family: inherit;
    position: relative;
  }

  .submit-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    color: #fff;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .submit-button:hover {
    background: rgba(255, 255, 255, 0.2);
  }

  .arrow-up {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
  }

  .profile-section {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }

  .profile-image-container {
    position: relative;
    width: 40px;
    height: 40px;
  }

  .profile-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .ai-tag {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #4CAF50;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-weight: bold;
  }

  .profile-name {
    color: #fff;
    font-size: 14px;
  }

  /* Update scanning animation styles */
  .scanning::after,
  .scanning::before {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, 
      rgba(0, 255, 255, 0.5),
      rgba(0, 255, 255, 0.5) 50%,
      rgba(255, 0, 255, 0.5) 100%
    );
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .scanning::after {
    width: 100%;
    height: 2px;
    animation: scanVertical 2s linear infinite,
               scanColorVertical 6s linear infinite;
  }

  .scanning::before {
    width: 2px;
    height: 100%;
    animation: scanHorizontal 2s linear infinite,
               scanColorHorizontal 6s linear infinite;
  }

  @keyframes scanVertical {
    0% { top: 0; }
    100% { top: 100%; }
  }

  @keyframes scanHorizontal {
    0% { left: 0; }
    100% { left: 100%; }
  }

  @keyframes scanColorVertical {
    0% { 
      background: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5));
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }
    33% { 
      background: linear-gradient(90deg, rgba(255, 0, 255, 0.5), rgba(255, 0, 255, 0.5));
      box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    }
    66% { 
      background: linear-gradient(90deg, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0.5));
      box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
    }
    100% { 
      background: linear-gradient(90deg, rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5));
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }
  }

  @keyframes scanColorHorizontal {
    0% { 
      background: linear-gradient(0deg, rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5));
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }
    33% { 
      background: linear-gradient(0deg, rgba(255, 0, 255, 0.5), rgba(255, 0, 255, 0.5));
      box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
    }
    66% { 
      background: linear-gradient(0deg, rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0.5));
      box-shadow: 0 0 8px rgba(255, 255, 0, 0.5);
    }
    100% { 
      background: linear-gradient(0deg, rgba(0, 255, 255, 0.5), rgba(0, 255, 255, 0.5));
      box-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    }
  }

  @keyframes gradientBorder {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  @keyframes gradientText {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
  }
</style>
</head>
<body>

<div class="dashboard">
  <h6 class="version">Ver {{version}}</h6>
  <div class="test-queue-title">
    <div style="display: flex; align-items: center; gap: 15px;">
      <img src="{{brand_icon}}" alt="Logo" class="logo">
      <h3>AI Testing Agents</h3>
      <div style="display: flex;">
        <div class="screen-container" id="screen_container" style="display: none;">
          <img id="screen_image" src="" onerror="this.style.display = 'none'">
        </div>
        <div class="screen-container" id="iphone_screen_container" style="display: none;">
          <img id="iphone_screen_image" src="" onerror="this.style.display = 'none'">
        </div>
      </div>
    </div>
    <div style="display: None;" class="profile-section" onclick="addRandomText()">
      <span class="profile-name">Sundar [Automation]</span>
      <div class="profile-image-container">
        <img src="images/sundar.jpg" alt="Profile" class="profile-image">
        <span class="ai-tag">AI</span>
      </div>
    </div>
  </div>

  <div class="main-content">
    <div class="queue-container">
      <div id="queue" class="test-queue">
        <div><span id="checkStatus"></span></div>
        <div style="margin-top: 5px"><span id="checkDetail"></span></div>
      </div>
    </div>
    
    <!--div class="input-container">
      <input type="text" id="customText" class="text-input" placeholder="Add your test prompt here." onkeypress="handleKeyPress(event)">
      <button onclick="submitCustomText()" class="submit-button">
        <div class="arrow-up"></div>
      </button>
    </div-->
  </div>
</div>

<script>
function updateImage(image_url) {
    const container = document.getElementById("screen_container");
    const img = document.getElementById("screen_image");
    img.style.display = "block";
    container.style.display = "flex";
    img.src = image_url + '?t=' + new Date().getTime();
    
    // Add scanning effect
    container.classList.add('scanning');
}

function startImageUpdates() {
    setInterval(function() {
        updateImage('bionic_screenshot.png');
    }, 5000);
}

function addBug(title, page) {
    var bugElement = document.createElement('div');
    bugElement.style = "margin:3px;margin-top:29px;display:;";

    var bugSpan = document.createElement('span');
    bugSpan.innerText = "[" + page + "] " + title;

    bugElement.appendChild(bugSpan);
    document.getElementById("bugs").appendChild(bugElement);
    document.getElementById("bugs-found").style.display = "block";
}

function setStatus(status) {
    document.getElementById("checkStatus").innerText = status;
}

function setDetail(detail) {
    document.getElementById("checkDetail").innerText = detail;
}

function addTypingText(text, agent="sundar", color="dynamic-silver", agent_img_url=null, speed = 100, containerId = "queue") {
    const container = document.getElementById(containerId);
    const textElement = document.createElement('div');
    textElement.className = 'qItem typing';
    
    // Create gradient based on color parameter
    let gradientStyle;
    if (color === "dynamic-silver") {
        gradientStyle = `linear-gradient(-45deg, 
            #FFFFFF,
            #E8E8E8,
            #DFDFDF,
            #FFFFFF
        )`;
    } else {
        const gradientColor = color === "clear" ? "#23a6d5" : color;
        gradientStyle = `linear-gradient(-45deg, 
            #FFFFFF, 
            ${gradientColor}, 
            #FFFFFF, 
            ${gradientColor}
        )`;
    }
    
    textElement.style.background = gradientStyle;
    textElement.style.backgroundSize = '400% 400%';
    textElement.style.animation = 'gradientText 15s ease infinite';
    textElement.style.webkitBackgroundClip = 'text';
    textElement.style.webkitTextFillColor = 'transparent';
    textElement.style.backgroundClip = 'text';

    // Create wrapper for agent image and text
    const wrapper = document.createElement('div');
    wrapper.style.display = 'flex';
    wrapper.style.gap = '10px';
    wrapper.style.alignItems = 'center';
    
    // Create and style agent image
    const agentImg = document.createElement('img');
    // Use img_url if provided, otherwise fall back to default agent image
    agentImg.src = agent_img_url || `images/${agent}.jpg`;
    agentImg.style.width = '40px';
    agentImg.style.height = '40px';
    agentImg.style.borderRadius = '50%';
    agentImg.style.objectFit = 'cover';
    agentImg.style.border = '2px solid rgba(255, 255, 255, 0.2)';
    
    // Add image and text element to wrapper
    wrapper.appendChild(agentImg);
    wrapper.appendChild(textElement);
    
    container.appendChild(wrapper);
    
    // Ensure container is scrolled to bottom
    const queueContainer = document.querySelector('.queue-container');
    const isBottom = true;//queueContainer.scrollHeight - queueContainer.scrollTop <= queueContainer.clientHeight + 1;
    if (isBottom) { queueContainer.scrollTop = queueContainer.scrollHeight; }

    /*
    let index = 0;
    function typeNextChar() {
        if (index < text.length) {
            textElement.textContent += text.charAt(index);
            index++;
            // Keep scrolling to bottom while typing
            if (isBottom) { queueContainer.scrollTop = queueContainer.scrollHeight; }
            setTimeout(typeNextChar, speed);
        } else {
            textElement.classList.remove('typing');
        }
    }
    typeNextChar();
    */

    const lines = text.split(/\n/);
    let index = 0;
    function typeNext() {
        if (index < lines.length) {
            if (index > 0) { textElement.textContent += '\n'; }
            textElement.textContent += lines[index];
            if (isBottom) { queueContainer.scrollTop = queueContainer.scrollHeight; }
        }
        index++;
        if (index < lines.length) {
            setTimeout(typeNext, speed);
        } else {
            textElement.classList.remove('typing');
        }
    }
    typeNext();
}

function addRandomText() {
    const sampleTexts = [
        "Analyzing page structure and accessibility... Checking ARIA labels, semantic HTML elements, color contrast ratios, keyboard navigation, and screen reader compatibility. Ensuring all interactive elements are properly focusable and have appropriate roles.",
        "Testing responsive design breakpoints... Validating layout consistency across mobile, tablet, and desktop viewports. Checking for proper image scaling, text wrapping, and menu behavior. Verifying touch targets meet minimum size requirements.",
        "Checking form validation and user inputs... Testing all input fields for proper validation patterns, error messaging, and submission handling. Verifying required fields, input masks, and cross-browser compatibility. Ensuring proper handling of special characters and edge cases.",
        "Evaluating performance metrics and load times... Measuring First Contentful Paint, Time to Interactive, and Cumulative Layout Shift. Analyzing resource loading, caching strategies, and bundle sizes. Checking for render-blocking resources and optimization opportunities.",
        "Scanning for potential security vulnerabilities... Checking for XSS vulnerabilities, CSRF protections, and secure cookie handling. Validating input sanitization, checking for exposed sensitive information, and reviewing authentication mechanisms."
    ];
    const randomText = sampleTexts[Math.floor(Math.random() * sampleTexts.length)];
    addTypingText(randomText, "sundar");
}

function submitCustomText() {
    const input = document.getElementById('customText');
    const text = input.value.trim();
    if (text) {
        addTypingText(text, 'queue');
        input.value = ''; // Clear the input after submitting
    }
}

function handleKeyPress(event) {
    if (event.key === 'Enter') {
        submitCustomText();
    }
}

function updateLogoImage(newImageUrl) {
  const logoImg = document.querySelector('.logo');
  if (logoImg) {
    logoImg.src = newImageUrl;
  }
}

function updateBrandName(newBrandName) {
  const brandTitle = document.querySelector('.test-queue-title h3');
  if (brandTitle) {
    // Preserve the ": Testing Agents" suffix
    brandTitle.textContent = `${newBrandName}`;
  }
  document.title = `${newBrandName}: Autonomous Test Agent`
}

// Initialize
//startImageUpdates();
</script>

</body>
</html>
