404.html

---
title: 404
permalink: /404.html
layout: default
jquery: true
---

<style type="text/css" media="screen">
  .container {
    text-align: center;
  }
  h1 {
    margin: 30px 0;
    font-size: 4em;
    line-height: 1;
    letter-spacing: -1px;
  }
  ul li {
    padding-top: 0.4em;
  }
  #move {
    position: relative;
  }
</style>

<div class="card container">
  <h1 id="text"><i class="fa-solid fa-triangle-exclamation"></i>
    4<span id="move">0</span>4 Page not found!</h1>

  <p>您查找的网页链接不存在 :(</p>
  <p>The requested page could not be found :(</p>
  <p>如果您通过超链接到达此页面，请<a href="mailto:{{site.email}}">联系作者</a>以报告错误</p>
  <p>If you get here by a hyperlink, please <a href="mailto:{{site.email}}">contact me</a> to report the problem</p>
  <ul class="react">
    <li><a href="/"><strong><i class="fa-solid fa-house"></i> BACK TO MAINPAGE 回到主页</strong></a></li>
    <li><a href="/blog-zh/"><strong><i class="fa-solid fa-newspaper"></i> VISIT MY BLOG 访问博客</strong></a></li>
    <li><a href="/app/"><strong><i class="fa-solid fa-cubes"></i> INTERESTING APPS 有意思的小应用</strong></a></li>
    <li><a href="/aboutme/"><strong><i class="fa-solid fa-user"></i> ABOUT ME 关于我</strong></a></li>
  </ul>
</div>

<script>
  // linear interpolation
  function lInterp(v1, v2, t) {
    return v1 * (1 - t) + v2 * t;
  }
  $(document).ready(function() {
    const offset = parseFloat($("#move").css("font-size")) / 2;
    const color = [56, 200, 123]
    $("body").on('mousemove', (e) => {
      var bx = (e.clientX / window.outerWidth) * 2 - 1;
      var by = (e.clientY / window.outerHeight) * 2 - 1;
      var t = Math.hypot(bx, by) / 2;
      $("#move").css({
        "top": by * offset,
        "left": bx * offset
      });
      $("#text").css("color", `rgb(${lInterp(color[0], 0, t)}, ${lInterp(color[1], 0, t)}, ${lInterp(color[2], 0, t)})`)
    });
  });
</script>