1 files changed, 98 insertions, 0 deletions
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..3295630
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.Language.Locale }}" dir="{{ or .Site.Language.Direction `ltr` }}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#060b10">
+  <title>404 — {{ .Site.Title }}</title>
+
+  <script>
+    (function() {
+      const theme = localStorage.getItem('theme') || 'dark';
+      if (theme === 'light') {
+        document.documentElement.classList.add('theme-light');
+      }
+    })();
+  </script>
+
+  {{ partialCached "head/css.html" . }}
+  {{ partialCached "head/js.html" . }}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css">
+  {{ $notfound := resources.Get "css/components/404.css" | fingerprint }}
+  <link rel="stylesheet" href="{{ $notfound.RelPermalink }}">
+</head>
+<body>
+  <a href="#main-content" class="skip-link">Skip to content</a>
+  <canvas id="matrix-canvas" aria-hidden="true" data-mode="background"></canvas>
+
+  {{ partial "header.html" . }}
+
+  <main id="main-content" class="hero--404">
+    <div class="content-wrapper">
+      <!-- Left: Quote + Search -->
+      <div class="hero-left-404">
+        <div class="quote-section">
+          <div class="quote-mark">"</div>
+          <p class="quote-text" id="quote-text">The page you're looking for doesn't exist. But that's okay, nothing exists until you find it.</p>
+          <p class="quote-author" id="quote-author">— 404 Philosopher</p>
+        </div>
+
+        <div class="search-box">
+          <input type="text" placeholder="Search articles..." aria-label="Search">
+          <button aria-label="Search">
+            <svg data-feather="search"></svg>
+          </button>
+        </div>
+
+        <nav class="quick-nav">
+          <h3>Quick Links</h3>
+          <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/articles/">Articles</a></li>
+            <li><a href="/is/">About</a></li>
+            <li><a href="/is/here">Contact</a></li>
+          </ul>
+        </nav>
+      </div>
+
+      <!-- Right: Recent Articles + Terminal -->
+      <div class="hero-right-404">
+        <div class="recent-articles">
+          <h3>Recent Articles</h3>
+          <ul>
+            {{ range first 5 (.Site.RegularPages.ByDate.Reverse) }}
+              <li>
+                <a href="{{ .RelPermalink }}" class="article-link" data-type="{{ .Params.type }}">
+                  {{ .Title }}
+                </a>
+              </li>
+            {{ end }}
+          </ul>
+        </div>
+
+        <div class="terminal-widget">
+          <div class="terminal-bar">
+            <span class="terminal-dot" style="background: #ff6b6b;"></span>
+            <span class="terminal-dot" style="background: #ffd93d;"></span>
+            <span class="terminal-dot" style="background: #6bcf7f;"></span>
+          </div>
+          <div class="terminal-content">
+            <div>$ <span class="terminal-prompt">curl https://danix.xyz/lost</span></div>
+            <div>404: Not Found</div>
+            <div>$ <span class="terminal-prompt">ls /articles</span></div>
+            <div id="terminal-files"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+
+  {{ partial "footer.html" . }}
+
+  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+  <script>feather.replace();</script>
+
+  {{ $notFoundJS := resources.Get "js/404.js" | fingerprint }}
+  <script src="{{ $notFoundJS.RelPermalink }}"></script>
+</body>
+</html>