api-response-time-simulator.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>API Response Time Simulator | tools.eliana.lol</title>
  <link rel="stylesheet" href="global.css" />
  <link rel="icon" type="image/x-icon" href="favicon.svg" />
  <style>
    .container {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .input-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .input-label {
      font-size: 0.85rem;
      font-weight: bold;
      text-transform: uppercase;
      color: var(--puny);
      letter-spacing: 0.05em;
    }

    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    button {
      flex: 0 1 auto;
      min-width: 120px;
      padding: 10px;
      cursor: pointer;
      font-family: monospace;
      border: 1px solid var(--text);
      background: var(--bg);
      color: var(--text);
      border-radius: 4px;
      transition: all 150ms;
    }

    button:hover {
      background-color: var(--hover);
      border-color: var(--accent);
    }

    button.primary {
      border-color: var(--accent);
      font-weight: bold;
      color: var(--accent);
    }

    button.danger {
      border-style: dashed;
      opacity: 0.7;
    }

    textarea,
    input[type="text"] {
      width: 100%;
      font-family: monospace;
      padding: 10px;
      border: 1px solid var(--puny);
      background: var(--bg);
      color: var(--text);
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 0.95rem;
    }

    .status {
      padding: 0.75rem 1rem;
      border-radius: 4px;
      margin: 0.5rem 0;
      display: none;
      font-size: 0.9rem;
    }

    .status.show {
      display: block;
    }

    .status.success {
      background-color: rgba(16, 185, 129, 0.1);
      border-left: 3px solid var(--accent);
      color: var(--accent);
    }

    .status.error {
      background-color: rgba(239, 68, 68, 0.1);
      border-left: 3px solid #ef4444;
      color: #ef4444;
    }

    .info-box {
      padding: 1rem;
      background-color: var(--highlight);
      border-left: 3px solid var(--accent);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    @media (max-width: 600px) {
      .button-group {
        flex-direction: column;
      }

      button {
        width: 100%;
      }
    }

    /* Tool-specific styles */
    .slider-row {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

    .slider-row input[type="range"] {
      flex: 1;
      width: auto;
      padding: 0;
      border: none;
      accent-color: var(--accent);
    }

    .slider-value {
      min-width: 4rem;
      text-align: right;
      font-size: 0.9rem;
      color: var(--puny);
    }

    select {
      width: 100%;
      font-family: monospace;
      padding: 10px;
      border: 1px solid var(--puny);
      background: var(--bg);
      color: var(--text);
      box-sizing: border-box;
      border-radius: 4px;
      font-size: 0.95rem;
    }

    .demo-ui {
      border: 1px solid var(--puny);
      border-radius: 4px;
      padding: 1.5rem;
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .spinner {
      width: 28px;
      height: 28px;
      border: 3px solid var(--hover);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    .demo-result {
      text-align: center;
      font-size: 0.9rem;
    }

    .demo-result.error-text {
      color: #ef4444;
    }

    .demo-result.success-text {
      color: var(--accent);
    }

    .log-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 220px;
      overflow-y: auto;
      font-family: monospace;
      font-size: 0.8rem;
    }

    .log-entry {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 4px 8px;
      border-bottom: 1px solid var(--hover);
    }

    .log-entry.fail { color: #ef4444; }
    .log-entry.ok { color: var(--accent); }

    .checkbox-row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .checkbox-row input {
      width: auto;
    }
  </style>
</head>
<body>
  <nav>
    <div class="left">
      <a href="index.html">home</a> | <a href="extra.html">extra</a> |
      <a href="credits.html">credits</a> |
      <a href="changelog.html">logs</a>
    </div>
    <div class="right">
      <button id="theme-toggle">[theme]</button> |
      <a href="https://eliana.lol">site</a>
    </div>
  </nav>

  <main>
    <h1>API Response Time Simulator</h1>
    <p class="puny">Mock API latency, jitter, and timeout scenarios — test how your UI handles slow or failed responses.</p>

    <div class="container">
      <div class="input-group">
        <span class="input-label">Base latency (ms)</span>
        <div class="slider-row">
          <input type="range" id="latency-slider" min="0" max="5000" value="600" step="50" />
          <span class="slider-value" id="latency-value">600ms</span>
        </div>
      </div>

      <div class="input-group">
        <span class="input-label">Jitter (± randomness, ms)</span>
        <div class="slider-row">
          <input type="range" id="jitter-slider" min="0" max="2000" value="200" step="50" />
          <span class="slider-value" id="jitter-value">200ms</span>
        </div>
      </div>

      <div class="input-group">
        <span class="input-label">Failure rate (%)</span>
        <div class="slider-row">
          <input type="range" id="failure-slider" min="0" max="100" value="15" step="5" />
          <span class="slider-value" id="failure-value">15%</span>
        </div>
      </div>

      <div class="input-group">
        <label class="puny" for="timeout-select">Client timeout</label>
        <select id="timeout-select">
          <option value="0">No timeout</option>
          <option value="1000">1000ms</option>
          <option value="3000" selected>3000ms</option>
          <option value="5000">5000ms</option>
        </select>
      </div>

      <div class="checkbox-row">
        <input type="checkbox" id="abort-check" />
        <label class="puny" for="abort-check">Simulate request abort/cancellation behavior</label>
      </div>

      <div class="input-group">
        <span class="input-label">Live demo</span>
        <div class="demo-ui" id="demo-ui">
          <span class="puny">Click "Send request" to simulate a call.</span>
        </div>
        <div class="button-group">
          <button class="primary" id="send-btn">Send request</button>
          <button id="send-many-btn">Send 10 requests</button>
          <button class="danger" id="clear-log-btn">Clear log</button>
        </div>
      </div>

      <div class="input-group">
        <span class="input-label">Request log</span>
        <div class="log-list" id="log-list"></div>
      </div>

      <div class="info-box">
        <strong>Tip:</strong> Use this to manually feel out how your loading states, skeleton screens, and error boundaries behave under realistic network conditions before shipping. High jitter with a tight client timeout is a great way to surface race conditions in your retry logic.
      </div>

      <div class="status" id="status"></div>
    </div>
  </main>

  <footer style="margin-top: 4rem; text-align: center" class="puny">
    © 2026 eliana.lol • <a href="credits.html">credits</a>
  </footer>

  <!-- Theme Toggle Script (Required for all tools) -->
  <script>
    const html = document.documentElement;
    const toggle = document.getElementById('theme-toggle');
    const saved =
      localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');

    html.setAttribute('data-theme', saved);
    if (toggle) toggle.innerText = saved === 'dark' ? '[light]' : '[dark]';

    if (toggle) {
      toggle.onclick = () => {
        const now = html.getAttribute('data-theme');
        const next = now === 'dark' ? 'light' : 'dark';
        html.setAttribute('data-theme', next);
        localStorage.setItem('theme', next);
        toggle.innerText = next === 'dark' ? '[light]' : '[dark]';
      };
    }
  </script>

  <!-- Tool-specific script -->
  <script>
    function showStatus(message, type = 'success') {
      const status = document.getElementById('status');
      status.textContent = message;
      status.className = `status show ${type}`;
      setTimeout(() => status.classList.remove('show'), 2000);
    }

    ['latency', 'jitter', 'failure'].forEach((id) => {
      const slider = document.getElementById(id + '-slider');
      const valueEl = document.getElementById(id + '-value');
      slider.addEventListener('input', () => {
        valueEl.textContent = slider.value + (id === 'failure' ? '%' : 'ms');
      });
    });

    function simulateRequest() {
      const baseLatency = parseInt(document.getElementById('latency-slider').value, 10);
      const jitter = parseInt(document.getElementById('jitter-slider').value, 10);
      const failureRate = parseInt(document.getElementById('failure-slider').value, 10);
      const timeout = parseInt(document.getElementById('timeout-select').value, 10);
      const simulateAbort = document.getElementById('abort-check').checked;

      const actualLatency = Math.max(0, baseLatency + (Math.random() * 2 - 1) * jitter);
      const willFail = Math.random() * 100 < failureRate;
      const willTimeout = timeout > 0 && actualLatency > timeout;

      return new Promise((resolve) => {
        const start = performance.now();
        const timer = setTimeout(() => {
          const elapsed = Math.round(performance.now() - start);
          if (willTimeout) {
            resolve({ status: 'timeout', elapsed: timeout, message: `Request exceeded ${timeout}ms client timeout` });
          } else if (willFail) {
            const codes = [500, 502, 503, 429];
            const code = codes[Math.floor(Math.random() * codes.length)];
            resolve({ status: 'error', elapsed, message: `HTTP ${code}` });
          } else {
            resolve({ status: 'success', elapsed, message: 'HTTP 200 OK' });
          }
        }, willTimeout ? timeout : actualLatency);

        if (simulateAbort && Math.random() < 0.1) {
          setTimeout(() => {
            clearTimeout(timer);
            resolve({ status: 'aborted', elapsed: Math.round(performance.now() - start), message: 'Request aborted by client' });
          }, Math.min(actualLatency, timeout || actualLatency) * 0.5);
        }
      });
    }

    function logEntry(result) {
      const log = document.getElementById('log-list');
      const entry = document.createElement('div');
      const cls = result.status === 'success' ? 'ok' : 'fail';
      entry.className = `log-entry ${cls}`;
      const time = new Date().toLocaleTimeString();
      entry.innerHTML = `<span>[${time}] ${result.status}</span><span>${result.message} — ${result.elapsed}ms</span>`;
      log.insertBefore(entry, log.firstChild);
    }

    async function runDemo() {
      const demoUi = document.getElementById('demo-ui');
      demoUi.innerHTML = '<div class="spinner"></div>';

      const result = await simulateRequest();
      logEntry(result);

      if (result.status === 'success') {
        demoUi.innerHTML = `<span class="demo-result success-text">✓ ${result.message} (${result.elapsed}ms)</span>`;
      } else if (result.status === 'timeout') {
        demoUi.innerHTML = `<span class="demo-result error-text">⏱ Timed out (${result.elapsed}ms)</span>`;
      } else if (result.status === 'aborted') {
        demoUi.innerHTML = `<span class="demo-result error-text">⊘ Aborted (${result.elapsed}ms)</span>`;
      } else {
        demoUi.innerHTML = `<span class="demo-result error-text">✕ ${result.message} (${result.elapsed}ms)</span>`;
      }
    }

    document.getElementById('send-btn').addEventListener('click', runDemo);

    document.getElementById('send-many-btn').addEventListener('click', async () => {
      showStatus('Sending 10 requests...', 'success');
      const promises = [];
      for (let i = 0; i < 10; i++) {
        promises.push(simulateRequest().then(logEntry));
      }
      await Promise.all(promises);
      showStatus('Done — check the log below.', 'success');
    });

    document.getElementById('clear-log-btn').addEventListener('click', () => {
      document.getElementById('log-list').innerHTML = '';
      showStatus('Log cleared.', 'success');
    });
  </script>
</body>
</html>