tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

sliding modals, view transitions, accessibility, etc, etc

Browse Source
This commit is contained in:
zach
2026-03-11 15:21:43 -04:00
parent 7482cb9e9c
commit 3d46a48a7d
20 changed files with 708 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/404.astro
View File

@@ -1,10 +1,10 @@
---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
export const prerender = false;
import pokedexList from '../data/pokedex.json';
import Footer from '../components/Footer.astro';
import pokedexList from '../data/pokedex.json';
const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';
@@ -21,13 +21,13 @@ const pokemon = pokedexList.find(p => p["#"] === randomNumber);
// If not found (rare), fallback
const pokemonName = pokemon?.Name || "Unknown Pokémon";
---
<Layout>
<Layout title="404 - Page Not Found">
<NavBar slot="navbar">
<NavItems slot="navItems" />
</NavBar>
<div class="row mb-4" slot="page">
<div class="col-12 col-md-6">
<h1 class="mb-4">404 - Page Not Found</h1>
<h1 class="mb-4">404<br/>Page Not Found</h1>
<h4>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>.
@@ -40,14 +40,20 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
</div>
<div class="p-0 ratio ratio-1x1 position-relative overflow-hidden d-flex justify-items-center">
<img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif">
<img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif" alt="" />
<div class="d-flex flex-col-reverse flex-lg-row">
<div class="">
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
<div class="d-flex flex-column-reverse flex-lg-row">
<div>
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png" alt="" />
<!-- ✨ Name is placed in a data attribute for later use -->
<img class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={pokedexImage} alt={pokemonName} data-name={pokemonName} onclick="dataLayer.push({'event': '404reveal','pokemonName': this.getAttribute('data-name')});"/>
<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={pokedexImage}
alt={pokemonName}
data-name={pokemonName}
role="button"
tabindex="0"
/>
</div>
</div>
</div>
@@ -57,16 +63,44 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
<h3 id="pokemon-name" class="opacity-0 transition-opacity">???</h3>
</div>
</div>
<script>
const img = document.querySelector('.masked-image');
const nameEl = document.querySelector('#pokemon-name');
<script>
const img = document.querySelector('.masked-image') as HTMLImageElement | null;
const nameEl = document.querySelector('#pokemon-name');
img?.addEventListener('click', () => {
img.classList.remove('masked-image');
nameEl.textContent = img.dataset.name || "Unknown Pokémon";
nameEl.classList.remove('opacity-0');
function revealPokemon() {
if (!img || !nameEl) return;
const doReveal = () => {
img.classList.remove('masked-image');
nameEl.textContent = img.dataset.name || "Unknown Pokémon";
nameEl.classList.remove('opacity-0');
dataLayer.push({ event: '404reveal', pokemonName: img.dataset.name });
};
if (!document.startViewTransition) {
doReveal();
return;
}
img.style.viewTransitionName = 'pokemon-reveal';
document.startViewTransition(() => {
doReveal();
}).finished.then(() => {
img.style.viewTransitionName = '';
});
</script>
}
img?.addEventListener('click', revealPokemon);
img?.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
revealPokemon();
}
});
</script>
</div>
<Footer slot="footer" />
</Layout>