404.html

<!doctype html>
<html lang="nl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#ffffff" />
    <title>404 - Pagina niet gevonden | Klascal</title>

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght,ROND@6..144,1..1000,100&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=error"
    />
    <link rel="stylesheet" href="material.css" />

    <style>
      :root {
        --primary-background: #faf9ff;
        --primary-foreground: #f0eff7;
        --primary-foreground-faded: #e9e8f0;
        --primary-accent: #dfe7ff;
        --primary-light: #526da8;
        --primary-dark: #263858;
        --primary-border: #777780;
        --accent-text: #171b25;
        --accent-text-light: #464954;
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: var(--primary-background);
        color: var(--accent-text);
      }

      body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-family:
          Google Sans Flex,
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          sans-serif;
        font-variation-settings: "ROND" 100;
        user-select: none;
      }

      .error {
        width: min(100%, 560px);
        text-align: center;
      }

      .error-icon {
        width: 96px;
        height: 96px;
        margin: 0 auto 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2rem;
        background: var(--primary-accent);
        color: var(--primary-light);
        font-family: "Material Symbols Rounded";
        font-size: 48px;
        font-weight: 600;
      }

      .error-code {
        font-size: clamp(4rem, 16vw, 7rem);
        line-height: 0.9;
        font-weight: 600;
        letter-spacing: -0.05rem;
        color: var(--primary-light);
      }

      h1 {
        font-size: 1.75rem;
        font-weight: 600;
      }

      p {
        margin: 0 auto;
        max-width: 420px;
        font-size: 1.25rem;
        font-weight: 500;
        font-variation-settings: "opsz" 100;
        line-height: 1.5;
        color: var(--accent-text-light);
      }

      .actions {
        margin-top: 28px;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
      }

      .btn {
        border: 0;
        padding: 1.25rem 1.75rem;
        border-radius: 4rem;
        background: var(--primary-accent);
        color: var(--accent-text);
        font-size: 1.3rem;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition:
          border-radius 0.2s ease-in-out,
          filter 0.2s ease-in-out;
        font-family: inherit;
      }

      .btn:hover {
        filter: brightness(0.9);
        border-radius: 1rem;
      }

      .btn.primary {
        background: var(--primary-light);
        color: white;
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --primary-background: #111318;
          --primary-foreground: #1b1c20;
          --primary-foreground-faded: #202126;
          --primary-accent: #29354d;
          --primary-light: #b4c7ff;
          --primary-dark: #d8e2ff;
          --accent-text: #e4e2e9;
          --accent-text-light: #c5c5ce;
        }

        .btn.primary {
          color: #182033;
        }

        .btn:hover {
          filter: brightness(1.1);
        }
      }
    </style>
  </head>

  <body>
    <main class="error">
      <div>
        <div class="error-icon">error</div>

        <p class="error-code">404</p>
      </div>
      <h1>Pagina niet gevonden</h1>

      <p>
        Deze pagina bestaat niet of is verplaatst. Misschien is de link niet
        goed gespeld?
      </p>

      <div class="actions">
        <a class="btn primary" href="/">Naar Klascal</a>
        <button class="btn" onclick="history.back()">Ga terug</button>
      </div>
    </main>
    <script> (() => { const theme = localStorage.getItem("theme") || "blue"; const monochrome = localStorage.getItem("mono") === "true" ? " monochrome" : ""; document.body.setAttribute( "data-theme", `${theme}${monochrome}` ); const updateThemeColor = () => { const meta = document.querySelector('meta[name="theme-color"]'); if (!meta) return; const background = getComputedStyle(document.body) .getPropertyValue("--primary-background") .trim(); if (background) { meta.setAttribute("content", background); } }; updateThemeColor(); new MutationObserver(updateThemeColor).observe(document.body, { attributes: true, attributeFilter: ["data-theme"], }); })(); </script>
  </body>
</html>