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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>skore-UI not found</title>
  <style>
    body {
      height: 100dvh;
      width: 100dvw;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      font-family: -apple-system,
        BlinkMacSystemFont,
        "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
      background-color: #f5f5f5;
      color: #333;
    }

    .not-found {
      width: 60dvw;
      text-wrap: balance;
      background: white;
      padding: 2rem;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
      animation: fadeIn 0.5s ease-out;
      text-align: center;
    }


    .command {
      position: relative;

      pre {
        background: #f0f0f0;
        padding: 1rem;
        border-radius: 4px;
        margin: 1rem 0;
        overflow-x: auto;
      }

      code {
        font-family: "SF Mono", Consolas, Monaco, monospace;
        color: #d63384;
      }

      .copy-button {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        border: none;
        transition: background-color linear 0.3s;
        background-color: #f0f0f0;
        padding: 0.1rem;

        &:hover {
          background-color: #e6e6e6;
        }
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @media (max-width: 768px) {
      .not-found {
        width: 80dvw;
      }
    }
  </style>
</head>

<body>
  <div class="not-found">
    <h1 style="margin-top: 0;">skore-UI Missing</h1>
    <p>skore-UI has not been built locally.</p>
    <p>To build it, you'll need to install
      <a href="https://nodejs.org/en/download">node</a>,
      then to run:
    </p>
    <div class="command">
      <pre><code>make build-skore-ui</code></pre>
      <button class="copy-button" onclick="copyCode()" title="copy">📑</button>
    </div>
    <p>and restart the server.</p>
  </div>

  <script>
    function copyCode() {
      const code = document.querySelector('code').textContent;
      navigator.clipboard.writeText(code);
    }
  </script>
</body>

</html>
