Potion/internal/templates/pages/notFound.templ
Hayden Hargreaves 5540daf6b6 (UI): Created a 404 not found page!
This loads whenever a page that does not exist is loaded. I would also
like to add some "coming soon" dialog to the few pages that don't exist
yet. Before deploying to the server.
2025-07-10 20:52:35 -07:00

33 lines
1.5 KiB
Plaintext

package templates
import "github.com/haydenhargreaves/Potion/internal/templates/components"
import "github.com/haydenhargreaves/Potion/internal/domain/server"
templ NotFoundPage() {
@components.Navbar("")
<div class="w-full h-screen flex justify-center">
<div
class="mx-2 md:mx-0 w-full md:w-1/2 flex items-center justify-center h-full border-l border-r border-gray-300 bg-white"
>
<div class="flex flex-col items-center justify-center gap-y-4">
<div class="flex flex-col items-center justify-center">
<svg
class="h-20 md:h-24 text-blue-700 motion-safe:animate-bounce ease-in-out"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="currentColor"
>
<path
d="M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z"
></path>
</svg>
<div class="bg-black size-10 md:size-12 blur rounded-full scale-x-150 scale-y-50 -mt-1 md:-mt-2 opacity-50"></div>
</div>
<h1 class="text-gray-500 text-6xl md:text-8xl font-sans">404</h1>
<p class="text-sm md:text-base text-gray-700">This page could not be found!</p>
<a class="underline text-sm md:text-base text-blue-700" href={ domain.WEB_HOME }>Back Home</a>
</div>
</div>
</div>
}