pokemon/src/pages/404.astro

---
import Layout from '../layouts/Main.astro';
import PokedexHeader from '../components/PokedexHeader.astro';
import Image from 'astro/components/Image.astro';

const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';

const randomNumber = String(Math.floor(Math.random() * 151) + 1).padStart(4, "0");
const pokedexImage = `/404/pokedex/${randomNumber}.svg?raw`;
---

<Layout>
<PokedexHeader />
<div class="container pokedex-page">
    <div class="row col-10 mx-auto mt-5">
        <div class="col-12 col-md-5">
            <h1 class="mb-4 mt-0">404 - Page Not Found</h1>
            <h4 class="my-4">Sorry, the page you are looking for does not exist.</h4>
            <p class="copy-big my-4">Return to the <a href="/">home page</a> or search for another <a href="/pokemon">Pokémon</a>.</p>
        </div>
        <div class="col-12 col-md-6 offset-md-1 row">
            <div class="alert alert-warning border col-12" role="alert">
                <h4 class="alert-heading">Who's that Pokémon?</h4>
                <p class="mb-0">Click to reveal.</p>
            </div>
            <div class="p-0 mx-auto position-relative overflow-hidden d-flex">
                <img class="whos-that-pokemon position-absolute" src="/404/lines.gif">
                <div class="mx-auto d-flex flex-col-reverse flex-lg-row">
                    <div class="ratio ratio-1x1 relative">
                        <img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
                        <Image class="m-auto position-absolute w-75 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={pokedexImage} alt="Who is that Pokémon?" width={100} height={100}></Image>
                    </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</div>
<script>
    const maskedImage = document.querySelector('.masked-image');
    maskedImage?.addEventListener('click', () => {
        maskedImage.classList.remove('masked-image');
    });
</script>
</Layout>