modulplaner-frontend/src/components/pages/404Page.vue

<template>
  <div class="w-full flex justify-center my-10">
    <div class="w-full md:w-1/2 flex flex-wrap justify-center text-center">
      <div class="mb-10">
        <h1 class="text-3xl font-extrabold">
          You found the swallow that carries coconuts!
        </h1>
        <span class="text-gray-500">But probably not the page you are looking for...</span>
      </div>
      <a
        href="https://www.youtube.com/watch?v=w8Rn_f75UHs"
        target="_blank"
        rel="noreferrer noopener"
        class="w-1/2"
      >
        <img
          src="../../assets/coconuts.svg"
          alt="Coconuts"
          width="300"
          height="500"
          class="mb-10"
        >
      </a>
      <h1 class="mx-10 md:text-2xl font-medium mb-10">
        {{ randomQuote }}
      </h1>
      <router-link
        class="action-button text-xl"
        to="/"
      >
        Zum Modulplaner
        <font-awesome-icon
          class="ml-2"
          icon="fa-solid fa-arrow-right"
        />
      </router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
// https://www.quoteambition.com/monty-python-and-the-holy-grail-quotes/

import { computed } from "vue";

const quotes = [
  `"Every time I try to talk to someone it's 'sorry this' and 'forgive me that' and 'I'm not worthy." - God`,
  `"Please! This is supposed to be a happy occasion. Let's not bicker and argue over who killed who."`,
  `"Listen, strange women lyin' in ponds distributin' swords is no system for a basis of government. Supreme executive power derives from a mandate from the masses, not from some farcical aquatic ceremony."`,
  `"On second thought, let's not go to Camelot. It is a silly place." - King Arthur`,
  `"Stop. Who would cross the Bridge of Death must answer me these questions three, ere the other side he see." - Bridgekeeper`,
  `"We dine well here in Camelot. We eat ham and jam and Spam a lot." - Knights of Camelot`,
  `"We are the knights who say—Ni!" - Knight`,
  `"What do you mean, an African or European swallow?" - King Arthur`,
  `"Oh, but you can't expect to wield supreme executive power just because some watery tart threw a sword at you." - Dennis`,
  `"Are you suggesting coconuts migrate?" - Soldier`,
  `Sir Bedevere: "Good. Now, why do witches burn?", Peasant 3: "Because they're made of—wood?", Sir Bedevere: "Good. So how do you tell whether she is made of wood?", Peasant 1: "Build a bridge out of her."`,
  `Swamp King: "One day all this will be yours!", Herbert: "What, the curtains?"`,
  `"That, my liege, is how we know the earth to be banana-shaped." - Sir Bedevere `,
  `"It's just a flesh wound." - The Black Knight`,
  `"She turned me into a newt!" - Angry Villager`,
  `"There are those who call me—Tim." - Tim The Enchanter`,
  `"What are you going to do, bleed on me?" - King Arthur`,
  `"The Black Knights always triumph!" - Black Knight`,
  `"It's not a question of where he grips it! It's a simple question of weight ratios! A five-ounce bird could not carry a one-pound coconut.” - Soldier With a Keen Interest in Birds`,
  `"Listen. In order to maintain air-speed velocity, a swallow needs to beat its wings 43 times every second, right?” - Soldier With a Keen Interest in Birds`,
  `"This new learning amazes me, Sir Bedevere. Explain to me again how sheep's bladders may be employed to prevent earthquakes.” - King Arthur`,
];

const randomQuote = computed(() => {
  const rnd = Math.floor(Math.random() * quotes.length);
  return quotes[rnd];
});
</script>

<style scoped>
.action-button {
  @apply text-center
    text-gray-700
    bg-gray-200
    hover:bg-gray-300
    active:bg-gray-400
    dark:text-gray-300
    dark:bg-gray-600
    dark:hover:bg-gray-700
    dark:active:bg-gray-900
    rounded
    cursor-pointer
    py-2
    px-5
    transition-all
    duration-200;
}
</style>