49 lines
2.0 KiB
Plaintext
49 lines
2.0 KiB
Plaintext
---
|
|
import Layout from '../layouts/Main.astro';
|
|
import StickyFilter from '../components/StickyFilter.astro';
|
|
|
|
const searchParams = Astro.url.searchParams;
|
|
const query = searchParams.get('q') || '*';
|
|
|
|
const randomNumber = Math.floor(Math.random() * 1025) + 1;
|
|
---
|
|
|
|
<Layout>
|
|
<StickyFilter />
|
|
<style>
|
|
.masked-image {
|
|
filter: brightness(0);
|
|
}
|
|
</style>
|
|
<div class="container">
|
|
<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 Pokémon.</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="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">
|
|
<img 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={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const maskedImage = document.querySelector('.masked-image');
|
|
maskedImage?.addEventListener('click', () => {
|
|
maskedImage.classList.remove('masked-image');
|
|
});
|
|
</script>
|
|
</Layout> |