<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, viewport-fit=cover"
    />
    <title>unison-tasks</title>
    <meta name="description" content="Unison Tasks, Automated For Business Systems" />
    <meta name="author" content="Unison Tasks" />

    <meta property="og:title" content="unison-tasks" />
    <meta property="og:description" content="Lovable Generated Project" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@lovable_dev" />
    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />

    <!-- Preview optimization -->
    <meta name="robots" content="index, follow" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />

    <style>
      /* Prevent flash of unstyled content during preview loading */
      #root {
        min-height: 100vh;
        background: #0f172a;
        color: #e2e8f0;
      }
      .loading-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      }
    </style>
    <script type="module" crossorigin src="/assets/index-B3Xj_e4y.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/radix-ui-BQCqNqg0.js">
    <link rel="modulepreload" crossorigin href="/assets/backend-api-kQU3vArc.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-CJ6O2IRs.js">
    <link rel="modulepreload" crossorigin href="/assets/syntax-highlighting-sYeC8ItL.js">
    <link rel="modulepreload" crossorigin href="/assets/syntax-languages-D-ZGtA6M.js">
    <link rel="modulepreload" crossorigin href="/assets/refractor-core-CjLOCPHb.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-DpQaz2px.js">
    <link rel="modulepreload" crossorigin href="/assets/monaco-editor-CvXpYteI.js">
    <link rel="modulepreload" crossorigin href="/assets/codemirror-CldM4hLo.js">
    <link rel="modulepreload" crossorigin href="/assets/react-core-DFipk5-f.js">
    <link rel="modulepreload" crossorigin href="/assets/toast-BAvURt8I.js">
    <link rel="stylesheet" crossorigin href="/assets/index-DRb8h53N.css">
  </head>

  <body>
    <div id="root">
      <div class="loading-placeholder">
        <div style="text-align: center; font-family: system-ui;">
          <div
            style="width: 48px; height: 48px; border: 4px solid #374151; border-radius: 50%; border-top: 4px solid #3b82f6; animation: spin 1s linear infinite; margin: 0 auto 16px;"
          ></div>
          <p style="color: #9ca3af; margin: 0;">Loading application...</p>
        </div>
      </div>
    </div>

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

    <script>
      // Prevent infinite loading with max timeout fallback
      setTimeout(() => {
        const placeholder = document.querySelector('.loading-placeholder');
        if (placeholder) {
          console.warn('Loading timeout - removing placeholder');
          placeholder.remove();
        }
      }, 3000);
    </script>
  </body>
</html>
