index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  <meta name="description" content="DualMind - AI Battle Arena for comparing language models">
  <meta name="theme-color" content="#000000">

  <title>DualMind - Battle Arena</title>

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://arena.dualmindlab.tech/">
  <meta property="og:title" content="DualMind - AI Battle Arena">
  <meta property="og:description" content="An anonymous side-by-side comparison arena for LLMs. Vote on responses to build the open LLM leaderboard.">
  <meta property="og:image" content="https://arena.dualmindlab.tech/assets/og-image.png">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://arena.dualmindlab.tech/">
  <meta property="twitter:title" content="DualMind - AI Battle Arena">
  <meta property="twitter:description" content="An anonymous side-by-side comparison arena for LLMs. Vote on responses to build the open LLM leaderboard.">
  <meta property="twitter:image" content="https://arena.dualmindlab.tech/assets/og-image.png">

  <!-- Fonts: Outfit (UI) + JetBrains Mono (code). Only these two are loaded. -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
    rel="stylesheet">

  <!-- Syntax Highlighting CSS (non-blocking, loaded async) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css" media="print" onload="this.media='all'">

  <!-- Markdown & Syntax Highlighting JS — deferred: only needed after first AI response -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js" defer></script>

  <!-- Styles: tokens.css must be first (defines all CSS custom properties) -->
  <link rel="stylesheet" href="./css/tokens.css">
  <link rel="stylesheet" href="./css/styles.css">
  <link rel="stylesheet" href="./css/auth-styles.css">
  <link rel="stylesheet" href="./css/model-selector.css">
  <link rel="stylesheet" href="./css/sidebar-actions.css">
  <link rel="stylesheet" href="css/leaderboard-page.css">
  <link rel="stylesheet" href="css/ui-improvements.css">
  <link rel="stylesheet" href="css/voting-ui.css">
  <link rel="stylesheet" href="css/ai-input.css">
  <link rel="stylesheet" href="css/share-modal.css">
  <link rel="stylesheet" href="css/custom-modal.css">
  <link rel="stylesheet" href="css/user-profile.css">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'><rect width='9' height='9' rx='1' fill='%23577B87'/><rect x='12' width='9' height='9' rx='1' fill='%234AABC2'/><rect x='12' y='12' width='9' height='9' rx='1' fill='%23CB9275'/><rect y='12' width='9' height='9' rx='1' fill='%23FDF4CD'/></svg>">

  <!-- Config (must run synchronously before app) -->
  <script src="./config.js"></script>

  <!-- Global Error Handler - Prevents blank screen on JS failures -->
  <script>
    (function () {
      var errorShown = false;

      function showErrorBanner(message) {
        if (errorShown) return;
        errorShown = true;

        var banner = document.createElement('div');
        banner.id = 'app-error-banner';
        banner.style.cssText = 'position:fixed;top:0;left:0;right:0;background:#1a1a2e;border-bottom:2px solid #ef4444;padding:16px 24px;z-index:99999;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:Outfit,sans-serif;';
        banner.innerHTML =
          '<div style="color:#fff;font-size:14px;">' +
          '<strong style="color:#ef4444;">&#9888;&#65039; App Error:</strong> ' +
          '<span style="opacity:0.9;">' + message + '</span>' +
          '</div>' +
          '<button onclick="location.reload()" style="background:#4AABC2;color:#fff;border:none;padding:8px 16px;border-radius:8px;cursor:pointer;font-weight:600;">Retry</button>';

        document.body.insertBefore(banner, document.body.firstChild);

        var loading = document.getElementById('auth-loading-overlay');
        if (loading) loading.style.display = 'none';
      }

      window.onerror = function (message, source, lineno, colno, error) {
        console.error('Global error:', message, source, lineno);
        showErrorBanner('Failed to load the application. Click Retry to reload.');
        return false;
      };

      window.onunhandledrejection = function (event) {
        console.error('Unhandled rejection:', event.reason);
        if (event.reason && event.reason.message &&
          (event.reason.message.includes('Failed to fetch') ||
            event.reason.message.includes('NetworkError') ||
            event.reason.message.includes('import') ||
            event.reason.message.includes('module'))) {
          showErrorBanner('Network error occurred. Check your connection and click Retry.');
        }
      };

      window._DUALMIND_APP_READY = false;

      setTimeout(function () {
        if (!window._DUALMIND_APP_READY) {
          var loading = document.getElementById('auth-loading-overlay');
          if (loading && loading.style.display !== 'none') {
            showErrorBanner('App initialization timed out. Click Retry to reload.');
          }
        }
      }, 10000);
    })();
  </script>

  <!-- Supabase Auth Initialization (Auto-initializes if configured) -->
  <script src="./js/auth/supabase-init.js" defer></script>
</head>

<body>
  <a class="skip-link" href="#chat-input">Skip to chat input</a>
  <div class="bg-glow"></div>
  <!-- Background Image (decorative) -->
  <img src="./assets/background.png" class="app-background" alt="" aria-hidden="true">

  <!-- Main App Container -->
  <div id="app" style="display:none;">
    <!-- Sidebar -->
    <div id="sidebar-container" role="navigation" aria-label="Sidebar"></div>

    <!-- Header + Main Content Area -->
    <div class="main-wrapper">
      <!-- Header -->
      <div id="header-container" role="banner"></div>

      <!-- Content Area -->
      <main id="main-content" class="main-content scrollable" role="main" tabindex="-1"></main>

      <!-- Chat Input at Bottom -->
      <div id="chat-input-container" role="region" aria-label="Chat input"></div>
    </div>

    <!-- Floating Voting UI (appears above input after both responses) -->
    <div id="floating-voting" hidden></div>
  </div>

  <!-- Auth Loading Overlay - Shows until auth resolves -->
  <div id="auth-loading-overlay" style="
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: Outfit, sans-serif;
  ">
    <div style="text-align: center; color: #fff;">
      <div class="spinner" style="
        width: 40px;
        height: 40px;
        border: 4px solid rgba(255,255,255,0.1);
        border-top-color: #4AABC2;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin: 0 auto 16px;
      "></div>
      <p style="margin-top: 16px; opacity: 0.8; font-size: 14px; font-family: Outfit, sans-serif;">Loading...</p>
    </div>
  </div>

  <style>
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  </style>

  <!-- Scripts -->
  <script type="module" src="./js/ui/app.js"></script>
  <script src="./js/feature-flags.js?v=20260328-5" defer></script>

  <!-- Fallback for browsers without module support -->
  <script nomodule>
    document.body.innerHTML = `
      <div style="display:flex;align-items:center;justify-content:center;height:100vh;background:#000;color:#fff;font-family:Outfit,sans-serif;text-align:center;padding:20px;">
        <div>
          <h1>Browser Not Supported</h1>
          <p>Please use a modern browser like Chrome, Firefox, Safari, or Edge.</p>
        </div>
      </div>
    `;
  </script>
</body>

</html>