404.html

<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <link rel="icon" href="https://mcbcode.com/theme/favicon.png">
  <link rel="stylesheet" href="https://mcbcode.com/theme/site.css">
  <title>mcbCode | 404</title>
  <style>
    *, *::before, *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
html, body { 
  height: 100%; 
  color: #bebebe; 
  font-family: 'mcfont', sans-serif; 
  overflow: hidden; 
  position: relative;
}

  body::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://mcbcode.com/img/mc/end_pillar.png);
    background-repeat: no-repeat; 
    background-position: center center;
    filter: blur(12px);
    transform: scale(1.1);
  }

    g {
        color: #05ee93;
    }

    .topnav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: rgba(20,20,20,0.85);
        backdrop-filter: blur(8px);
        border-bottom: 1px solid #1f1f1f;
        display: flex;
        align-items: center;
        padding: 0 24px;
        z-index: 200;
    }
    .topnav-title {
        font-size: 20px;
        color: #ffffff;
        font-family: 'mcfontb', sans-serif;    
    }
    
    .blur-thing {
        z-index: -1;
        backdrop-filter: blur(6px;)
    }
    .scene {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        gap: 0;
        position: relative;
        backdrop-filter: blur(6px;)
    }

    .content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center; 
        gap: 16px;
        text-align: center;
        padding: 24px;    
    }

    .content {
        display: none;
    }
    
    .code {
        font-size: clamp(80px, 18vw, 160px);
        color: #05ee93;
        font-family: 'mcfontb', sans-serif;
        line-height: 1;
        letter-spacing: -4px;
        opacity: 0.15;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        user-select: none;
        pointer-events: none;
    }

    .icon {
        font-size: 48px;
        margin-bottom: 8px;
        filter: grayscale(0.3);
    }
    .headline {
        font-size: 22px;
        color: #ffffff;
        font-family: 'mcfontb', sans-serif;
    }
    .sub {
        font-size: 14px;
        color: #bebebe;
        max-width: 380px;
        line-height: 1.6;
        margin-top: 4px;
    }
    .sub g {
        color: #05ee93;
    }

    .actions {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .btn {
        background: #141414;
        border: 1px solid #2a2a2a;
        color: #bebebe;
        font-family: 'mcfont', sans-serif;
        font-size: 13px;
        padding: 8px 20px;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s, border-color 0.2s;
        display: inline-block;
    }
    .btn:hover {
        color: #05ee93;
        border-color: #05ee93;
    }
    .btn.primary {
        background: #05ee93;
        border-color: #05ee93;
        color: #0c0c0c;
    }
    .btn.primary:hover {
        background: #78e3a6;
        color: #0c0c0c;
    }
  </style>
</head>
<body>

  <div class="topnav">
    <a href="/" style="text-decoration:none;">
      <span class="topnav-title">mcb<g>Code</g></span>
    </a>
  </div>

  <div class="scene">
    <div class="content">
      <img src="https://mcbcode.com/img/diamond_pickaxe.png" style="width:48px; height:48px; image-rendering:pixelated;" alt="pickaxe">
      <div class="headline">this page suffocated in a wall</div>
      <div class="sub">This page doesn't exist | <c>404</c></div>
      <div class="actions">
        <a class="btn primary" href="https://mcbcode.com">home</a>
        <a class="btn" href="https://mcbcode.com/dashboard">dashboard</a>
        <a class="btn" href="https://mcbcode.com/search">search</a>
      </div>
    </div>
  </div>

<script>
const path = location.pathname;
const fullPath = path + location.hash;

let redirecting = false;

if (path.startsWith("/docs/")) {
  const parts = path.split("/docs/");
  const seg = parts[1] ? parts[1].split("/").filter(Boolean).pop() : null;
  const page = seg ? seg.replace(/\.html$/, "") : null;

  if (page) {
    redirecting = true;
    fetch(`https://mcbcode.com/docs/md/${page}.md`, { method: "HEAD" })
      .then(res => {
        if (res.ok) {
          location.replace(`/docs/index.html?page=${page}`);
        } else {
          showNotFound();
        }
      })
      .catch(() => {
        showNotFound();
      });
  }
} else if (path.startsWith("/project/") && path !== "/project/") {
  redirecting = true;
  sessionStorage.setItem("spa-redirect", fullPath);
  location.replace("/project/");
} else if (path.startsWith("/profile/") && path !== "/profile/") {
  redirecting = true;
  sessionStorage.setItem("spa-redirect", fullPath);
  location.replace("/profile");
} else if (path.startsWith("/s/") && path !== "/s/") {
  const slug = path.split("/s/")[1].split("/").filter(Boolean)[0];

  if (slug) {
    redirecting = true;
    fetch(`https://auth.mcbcode.com/project/resolve-slug?slug=${encodeURIComponent(slug)}`)
      .then(res => res.json())
      .then(data => {
        if (data.ok && data.share_code) {
          location.replace(`/project/${data.share_code}`);
        } else {
          showNotFound();
        }
      })
      .catch(() => {
        showNotFound();
      });
  }
} else if (path === "/post") {
  // someone hit /post with no trailing slash (or a query string tacked on).
  // /post/index.html is the real file — bounce there and keep ?id=... and any hash.
  redirecting = true;
  location.replace("/post/" + location.search + location.hash);
} else if (path === "/explore") {
  // same deal for /explore
  redirecting = true;
  location.replace("/explore/" + location.search + location.hash);
}

if (!redirecting) {
  showNotFound();
}

function showNotFound() {
  document.querySelector(".content").style.display = "flex";
}
</script>

</body>
</html>