404.html

---
permalink: /404.html
layout: default
search_exclude: true
---

<style type="text/css" media="screen">
  @import url("https://fonts.googleapis.com/css?family=Raleway:900&display=swap");
  @import url("https://fonts.googleapis.com/css?family=Noto%20Sans%20TC:900&display=swap");
  .container {
    margin: 10px auto;
    max-width: 600px;
    text-align: center;
    font-size: 25px;
  }
  h1 {
    margin: 30px 0;
    font-size: 4em;
    line-height: 1;
    letter-spacing: -1px;
    animation-name: rhythm;
    animation-duration: 4s;
    animation-iteration-count: infinite;
  }
  h2 {
    color: white;
    text-align: center;
    margin: 30px 0;
    font-size: 4em;
    line-height: 1;
    letter-spacing: -1px;
    font-family: 'Initial Font', sans-serif;
    transition: font-family 1s ease;
  }
  .hindi {
  font-family: 'Hindi Font', sans-serif;
  }
  .error {
    font-size: 25px;
    color: green;
  }
  p {
    font-size: 30px;
    color: white;
  }
  img {
    width: 2000px;
    height: 100px;
  }
  body {
    margin: 0px;
    background-color: rgb(242, 160, 242);
    background-image: url('../../images/musicInfiniteLoop.gif');
    background-size: 405px;
  }
  #container {
    position: absolute;
    margin: auto;
    width: 100vw;
    height: 80pt;
    top: 0;
    bottom: 0;
    filter: url(#threshold) blur(0.6px);
  }
  #text1, #text2 {
    position: absolute;
    width: 100%;
    display: inline-block;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 80pt;
    text-align: center;
    user-select: none;
  }
  @keyframes rhythm {
    from {color: green;}
    to {color: yellow;}
  }
  @keyframes changeFont {
    0% {
      font-family: 'Initial Font', sans-serif;
    }
    50% {
      font-family: 'New Font', monospace;
    }
    100% {
      font-family: 'Initial Font', sans-serif;
    }
  }

</style>

<div class="container">
  <h1>404 ERROR</h1>
  <div class="error">
</div>
</div>
<div id="container">
  <span id="text1"></span>
  <span id="text2"></span>
</div>

<svg id="filters">
  <defs>
      <filter id="threshold">
          <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 255 -140" />
      </filter>
  </defs>
</svg>
<h2>Uh Oh!</h2>

<script>
const elts = {
  text1: document.getElementById("text1"),
  text2: document.getElementById("text2")
};

const texts = [
  "Classroom",
  "Jukebox",
  "searched",
  "but",
  "could",
  "not",
  "find",
  "the",
  "requested",
  "page",
];

const morphTime = 1;
const cooldownTime = 0.25;

let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;

elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];

function doMorph() {
  morph -= cooldown;
  cooldown = 0;

  let fraction = morph / morphTime;

  if (fraction > 1) {
      cooldown = cooldownTime;
      fraction = 1;
  }

  setMorph(fraction);
}

function setMorph(fraction) {
  elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

  fraction = 1 - fraction;
  elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;

  elts.text1.textContent = texts[textIndex % texts.length];
  elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}

function doCooldown() {
  morph = 0;

  elts.text2.style.filter = "";
  elts.text2.style.opacity = "100%";

  elts.text1.style.filter = "";
  elts.text1.style.opacity = "0%";
}

function animate() {
  requestAnimationFrame(animate);

  let newTime = new Date();
  let shouldIncrementIndex = cooldown > 0;
  let dt = (newTime - time) / 1000;
  time = newTime;

  cooldown -= dt;

  if (cooldown <= 0) {
      if (shouldIncrementIndex) {
          textIndex++;
      }

      doMorph();
  } else {
      doCooldown();
  }
}

animate();
</script>