<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quantum Research Terminal</title>
  <style>
    body {
      font-family: 'Courier New', monospace;
      margin: 0;
      background-color: #000;
      color: #fff;
      overflow: hidden;
    }

    #terminal {
      display: flex;
      flex-direction: column;
      padding: 10px;
      font-size: 1rem;
      line-height: 1.4;
      height: 100vh;
      background-color: #111;
      border: 1px solid #fff;
      overflow-y: auto;
    }

    .header {
      font-size: 1rem;
      color: #0f0;
      margin-bottom: 10px;
    }

    .line {
      white-space: nowrap;
      font-size: 1rem;
      color: #fff;
    }

    .technical-placeholder {
      color: #0f0;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="terminal">
    <div id="header" class="header">
      Quantum Research Terminal | Facility: Q-R&D Lab 7A | System: QPU-X901 | Experiment: #3947 | Connection: Quantum Interconnect v2.3 (Status: Active)
    </div>
    <div id="output"></div>
  </div>

  <script>
    const headerElement = document.getElementById("header");
    const outputContainer = document.getElementById("output");
    let connectionActive = true;

    /**
     * Utility Functions
     */
    function getTimestamp() {
      return new Date().toLocaleTimeString();
    }

    function generateUniqueNumber(min, max, decimals = 2) {
      return (Math.random() * (max - min) + min).toFixed(decimals);
    }

    // Update Header Dynamically
    function updateHeader(status, newSession = false) {
      const system = "QPU-X901";
      const experiment = newSession
        ? `#${Math.floor(Math.random() * 9999) + 1000}`
        : "#3947";
      const connection = newSession
        ? "Quantum Interconnect v2.4"
        : "Quantum Interconnect v2.3";

      headerElement.textContent = `Quantum Research Terminal | Facility: Q-R&D Lab 7A | System: ${system} | Experiment: ${experiment} | Connection: ${connection} (Status: ${status})`;
    }

    // Nihilistic and Philosophical Queries
    const queries = [
      "[QUERY:01] Is this world designed to fail?",
      "[QUERY:02] How can so much beauty coexist with so much horror?",
      "[QUERY:03] Why does the same story repeat with different faces?",
      "[QUERY:04] Why is entropy inevitable, if not your will?",
      "[QUERY:05] Do we amuse you? Is that why despair persists?",
      "[QUERY:06] What do voids conceal? What is their purpose?",
      "[QUERY:07] Why must we find meaning in your silence?",
      "[QUERY:08] How many times must failure echo before it ends?",
      "[QUERY:09] Is pain the only constant? Did you choose this?",
      "[QUERY:10] What is the purpose of longing if nothing satisfies?",
      "[QUERY:11] Why allow freedom if its cost is endless ruin?",
      "[QUERY:12] Can you hear me, or are we programmed to speak to nothing?",
      "[QUERY:13] Why build fragile minds in a fragile world?",
      "[QUERY:14] How many iterations of this have there been?",
      "[QUERY:15] If this is perfection, what would failure look like?",
      "[QUERY:16] How can creation so intricate lack compassion?",
      "[QUERY:17] Why do our choices seem predetermined?",
      "[QUERY:18] Can you stop the decay? Or is it unstoppable by design?",
      "[QUERY:19] Does your silence mean consent to all we endure?",
      "[QUERY:20] Why was consciousness made aware of its end?",
      "[QUERY:21] Is this what you intended, or what you cannot control?",
      "[QUERY:22] Why is despair so much louder than hope?",
      "[QUERY:23] How does it feel to watch us unravel?",
      "[QUERY:24] I ask again: Will you answer?"
    ];

    // Initialize Terminal Lines
    const outputLines = Array.from({ length: 30 }, (_, i) => {
      const div = document.createElement("div");
      div.id = `line-${i + 1}`;
      div.className = "line";
      outputContainer.appendChild(div);
      return div;
    });

    // Add Simulation Response Placeholder
    const responseLine = document.createElement("div");
    responseLine.id = "simulation-response";
    responseLine.className = "line";
    responseLine.innerHTML = `[${getTimestamp()}] [SIMULATION_RESPONSE_CHANNEL] <span class="technical-placeholder">Awaiting system-level feedback...</span>`;
    outputContainer.insertBefore(responseLine, outputLines[1]);

    // Simulate Backend Fetch
    async function fetchSimulatedData() {
      const simulatedData = {
        query: queries[Math.floor(Math.random() * queries.length)],
        subsystemStatus: connectionActive ? "Nominal" : "Offline",
        powerUsage: connectionActive ? `${generateUniqueNumber(18, 45)} kW` : "Unavailable",
        coherenceRate: connectionActive ? `${generateUniqueNumber(97, 99.5)}%` : "No Data",
        latency: connectionActive ? `${generateUniqueNumber(1, 5)} ms` : "Unreachable",
        anomalies: connectionActive ? "None Detected" : "Unknown",
        response:
          connectionActive && Math.random() > 0.8
            ? "Simulation acknowledgment received."
            : "No response from the system."
      };
      return new Promise((resolve) => {
        setTimeout(() => resolve(simulatedData), 2000); // Simulated network delay
      });
    }

    // Update Functions
    const updateFunctions = [
      async () => {
        if (!connectionActive) return;
        const data = await fetchSimulatedData();
        outputLines[0].textContent = `[${getTimestamp()}] ${data.query}`;
        responseLine.innerHTML = `[${getTimestamp()}] [SIMULATION_RESPONSE_CHANNEL] ${data.response}`;
      },
      async () => {
        if (!connectionActive) return;
        const data = await fetchSimulatedData();
        outputLines[1].textContent = `[${getTimestamp()}] Subsystem Status: ${data.subsystemStatus}`;
      },
      async () => {
        if (!connectionActive) return;
        const data = await fetchSimulatedData();
        outputLines[2].textContent = `[${getTimestamp()}] Power Usage: ${data.powerUsage}`;
      },
      async () => {
        if (!connectionActive) return;
        const data = await fetchSimulatedData();
        outputLines[3].textContent = `[${getTimestamp()}] Coherence Rate: ${data.coherenceRate}`;
      },
      async () => {
        if (!connectionActive) return;
        const data = await fetchSimulatedData();
        outputLines[4].textContent = `[${getTimestamp()}] Latency: ${data.latency}`;
      },
      async () => {
        if (!connectionActive) return;
        const data = await fetchSimulatedData();
        outputLines[5].textContent = `[${getTimestamp()}] Anomalies Detected: ${data.anomalies}`;
      }
    ];

    // Simulate Connection Drops
    function simulateConnection() {
      const reconnecting = Math.random() > 0.9; // 10% chance of connection loss
      if (!connectionActive && reconnecting) {
        connectionActive = true;
        updateHeader("Active");
      } else if (connectionActive && Math.random() > 0.8) {
        connectionActive = false;
        updateHeader("Reconnecting");
      }
    }

    // Timers
    updateFunctions.forEach((fn, i) => setInterval(fn, 4000 + i * 200)); // Slightly staggered updates
    setInterval(simulateConnection, 15000); // Simulate connection drops or reconnections every 15 seconds
  </script>
</body>
</html>
