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="jam:team" content="b79917fc-80c6-4de1-9047-c98fa5db0aff" />
    <link rel="stylesheet" href="/src/index.css" />
    <script src="/src/bootstrap.ts" type="module"></script>
    <!-- The shell for app routes. scripts/prerender.mjs writes the public pages
         from it with their own title, description, canonical URL and JSON-LD. -->
    <title>DebateOwl</title>
    <meta name="description" content="DebateOwl helps students and debaters prepare cases, rebuttals and evidence with AI, then practice timed rounds against an AI opponent." />
    <meta name="author" content="DebateOwl" />
    <meta name="msvalidate.01" content="8FC8FD530126287EF8AD3977BFB24C17" />
    <!-- The shell for /app, /login and /share. Prerender replaces this with the
         public index directive on pages that have a canonical URL. -->
    <meta name="robots" content="noindex, nofollow" />
    <meta name="theme-color" content="#F7FAFE" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#0B1426" media="(prefers-color-scheme: dark)" />
    <link rel="icon" href="/favicon.ico" sizes="48x48" />
    <link rel="icon" type="image/png" href="/favicon.png" sizes="48x48" />
    <link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="DebateOwl" />
    <meta property="og:title" content="DebateOwl: AI debate prep and practice" />
    <meta property="og:description" content="DebateOwl helps students and debaters prepare cases, rebuttals and evidence with AI, then practice timed rounds against an AI opponent." />
    <meta property="og:image" content="https://debateowl.com/hero-visual.jpg?v=2" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="DebateOwl wordmark with the owl, for AI debate prep and practice" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="DebateOwl: AI debate prep and practice" />
    <meta name="twitter:description" content="DebateOwl helps students and debaters prepare cases, rebuttals and evidence with AI, then practice timed rounds against an AI opponent." />
    <meta name="twitter:image" content="https://debateowl.com/hero-visual.jpg?v=2" />
    <meta name="twitter:image:alt" content="DebateOwl wordmark with the owl, for AI debate prep and practice" />
    <script src="/theme-init.js"></script>
    <style>
      body {
        margin: 0;
        background: #F7FAFE;
        color: #1F2B40;
      }

      html.dark body {
        background: #0B1426;
        color: #EEF4FF;
      }

      #root > .app-startup-shell,
      #root > .app-bootstrap-error {
        display: grid;
        align-items: center;
        justify-content: center;
        min-height: 100dvh;
        padding: 24px;
        box-sizing: border-box;
        font-family: ui-rounded, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }

      .app-startup-shell__card {
        width: min(100%, 24rem);
        padding: 28px;
        border: 2px solid #E2E9F2;
        border-radius: 24px;
        background: #FFFFFF;
        box-shadow: 0 1px 2px rgb(11 42 110 / 0.06), 0 2px 6px rgb(11 42 110 / 0.06);
        text-align: center;
      }

      html.dark .app-startup-shell__card {
        border-color: #24324D;
        background: #131E33;
        box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
      }

      .app-startup-shell__mark {
        display: block;
        width: 56px;
        height: 56px;
        margin: 0 auto 12px;
        border-radius: 16px;
        animation: startup-bob 2.4s cubic-bezier(0.2, 0, 0, 1) infinite;
      }

      .app-startup-shell__brand {
        color: #0B2A6E;
        font-size: 1.125rem;
        font-weight: 800;
        letter-spacing: -0.01em;
      }

      html.dark .app-startup-shell__brand {
        color: #FFFFFF;
      }

      .app-startup-shell__status {
        margin: 6px 0 0;
        color: #526380;
        font-size: 0.9375rem;
        font-weight: 600;
      }

      html.dark .app-startup-shell__status {
        color: #A9B7C9;
      }

      @keyframes startup-bob {
        50% {
          transform: translateY(-4px);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .app-startup-shell__mark {
          animation: none;
        }
      }

      #root > .app-bootstrap-error {
        display: grid;
      }

      .app-bootstrap-error h1 {
        margin: 12px 0 0;
        font-size: 1.25rem;
      }

      .app-bootstrap-error p {
        margin: 8px 0 20px;
      }

      .app-bootstrap-error button {
        border: 0;
        border-radius: 18px;
        padding: 12px 20px;
        background: #0A6FF0;
        box-shadow: 0 4px 0 #0342A8;
        color: #FFFFFF;
        cursor: pointer;
        font: inherit;
        font-weight: 700;
      }

      .app-bootstrap-error button:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 #0342A8;
      }
    </style>
  </head>

  <body>
    <div id="root">
      <main class="app-startup-shell" data-startup-shell aria-busy="true" aria-label="DebateOwl is loading">
        <div class="app-startup-shell__card">
          <img class="app-startup-shell__mark" src="/owl-mark.svg" alt="" width="56" height="56" />
          <span class="app-startup-shell__brand">DebateOwl</span>
          <p class="app-startup-shell__status" data-startup-status role="status">Loading DebateOwl</p>
        </div>
      </main>
    </div>
    <noscript>
      <main style="max-width: 40rem; margin: 0 auto; padding: 48px 20px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6;">
        <h1>DebateOwl</h1>
        <p>DebateOwl needs JavaScript to run. Read about it on the <a href="/">home page</a> or in the <a href="/ai-debate-practice">AI debate practice guide</a>.</p>
      </main>
    </noscript>
  </body>
</html>