openclawd/SnapAPI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add WCAG 2.1 AA accessibility landmarks and skip-to-content link
Some checks failed
Build & Deploy to Staging / Build & Deploy to Staging (push) Has been cancelled
Details

Browse source 
- Wrap nav in <header> landmark on all pages
- Wrap content in <main id='main-content'> on all pages
- Add skip-to-content link (visually hidden, visible on focus)
- Add skip-link CSS styles
- Add 65 accessibility tests covering all 16 full-layout pages
- All 288 tests passing
This commit is contained in:
Hoid 2026-03-03 15:04:55 +01:00
parent e04d0bb283
commit 9fe59d4867
18 changed files with 399 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
public/404.html
View file

@ -26,9 +26,14 @@ nav{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-i
.btn-secondary{border:1px solid var(--border);color:var(--text-secondary)}
.btn-secondary:hover{border-color:var(--primary);color:var(--text)}
footer{padding:24px;text-align:center;color:var(--text-secondary);font-size:.8rem;border-top:1px solid var(--border)}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<a href="/" class="logo">📸 SnapAPI</a>
<div class="nav-links">
@ -37,7 +42,8 @@ footer{padding:24px;text-align:center;color:var(--text-secondary);font-size:.8re
<a href="/#pricing">Pricing</a>
</div>
</nav>
<main class="content">
</header>
<main id="main-content" class="content">
<div>
<div class="error-code">404</div>
<h1 class="error-title">Page Not Found</h1>

10
public/blog.html
View file

@ -60,10 +60,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr}}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"Blog","name":"SnapAPI Developer Blog","description":"Technical articles about screenshot APIs, web rendering, and performance optimization.","url":"https://snapapi.eu/blog","publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"}}</script>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -77,6 +82,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<div class="container">
<div class="page-header">
@ -101,6 +109,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</div>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

10
public/blog/screenshot-api-performance.html
View file

@ -65,10 +65,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr}}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Screenshot API Performance: Caching Strategies That Actually Work","description":"How we reduced p95 response times by 10x with intelligent caching, CDN integration, and browser pool management.","datePublished":"2026-03-02","author":{"@type":"Organization","name":"SnapAPI"},"publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"},"url":"https://snapapi.eu/blog/screenshot-api-performance","mainEntityOfPage":"https://snapapi.eu/blog/screenshot-api-performance"}</script>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -82,6 +87,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="breadcrumb"><a href="/">Home</a> / <a href="/blog">Blog</a> / Screenshot API Performance</div>
@ -165,6 +173,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

10
public/blog/why-screenshot-api.html
View file

@ -65,10 +65,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-col a:hover{color:var(--text)}
.footer-bottom{max-width:1180px;margin:0 auto;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted)}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr}}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Why You Need a Screenshot API (And Why Building Your Own Is Harder Than You Think)","description":"Self-hosting Puppeteer sounds easy until you're debugging zombie Chrome processes at 3 AM.","datePublished":"2026-03-02","author":{"@type":"Organization","name":"SnapAPI"},"publisher":{"@type":"Organization","name":"SnapAPI","url":"https://snapapi.eu"},"url":"https://snapapi.eu/blog/why-screenshot-api","mainEntityOfPage":"https://snapapi.eu/blog/why-screenshot-api"}</script>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -82,6 +87,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="breadcrumb"><a href="/">Home</a> / <a href="/blog">Blog</a> / Why You Need a Screenshot API</div>
@ -181,6 +189,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

10
public/changelog.html
View file

@ -90,9 +90,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-links.show{display:flex}
.nav-mobile{display:block}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -107,6 +112,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<section class="hero-section">
<div class="container">
@ -220,6 +228,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</div>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/compare.html
View file

@ -89,9 +89,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -105,6 +110,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -195,6 +203,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/guides/quick-start.html
View file

@ -88,9 +88,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -104,6 +109,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -203,6 +211,8 @@ screenshot = client.<span class="fn">take</span>(
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/impressum.html
View file

@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-grid{grid-template-columns:1fr}
.nav-links{display:none}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -84,6 +89,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</div>
</nav>
</header>
<main id="main-content">
<section class="legal-content">
<div class="legal-container">
@ -141,6 +149,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</section>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

10
public/index.html
View file

@ -199,6 +199,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-grid{grid-template-columns:1fr}
.trust-badges{flex-direction:column;align-items:center;gap:12px}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
<link rel="canonical" href="https://snapapi.eu/">
<meta property="og:title" content="SnapAPI — Screenshot API for Developers">
@ -234,6 +237,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="#" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -252,6 +257,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<section class="hero">
<div class="container">
@ -719,6 +727,8 @@ screenshot = snap.<span class="fn">capture</span>(
</div>
</section>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

10
public/pricing.html
View file

@ -111,9 +111,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-links.show{display:flex}
.nav-mobile{display:block}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -128,6 +133,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<section class="hero-section">
<div class="container">
@ -246,6 +254,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</div>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/privacy.html
View file

@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-grid{grid-template-columns:1fr}
.nav-links{display:none}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -84,6 +89,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</div>
</nav>
</header>
<main id="main-content">
<section class="legal-content">
<div class="legal-container">
@ -277,6 +285,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</section>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

10
public/terms.html
View file

@ -69,10 +69,15 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.footer-grid{grid-template-columns:1fr}
.nav-links{display:none}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -84,6 +89,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</div>
</nav>
</header>
<main id="main-content">
<section class="legal-content">
<div class="legal-container">
@ -358,6 +366,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</section>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand">

8
public/usage.html
View file

@ -59,9 +59,14 @@ button:disabled{opacity:.5;cursor:not-allowed}
.error-msg{background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:10px;padding:14px 18px;color:var(--red);font-size:.9rem;margin-bottom:16px;display:none}
footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-size:.8rem;color:var(--muted);margin-top:auto}
@media(max-width:480px){.stats{grid-template-columns:1fr}.input-row{flex-direction:column}}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav><div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
<div class="nav-links">
@ -69,8 +74,9 @@ footer{border-top:1px solid var(--border);padding:24px;text-align:center;font-si
<a href="/docs">API Docs</a>
</div>
</div></nav>
</header>
<main>
<main id="main-content">
<h1>Usage Dashboard</h1>
<p class="subtitle">Check your API usage for the current billing month.</p>

10
public/use-cases/pdf-reports.html
View file

@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -188,6 +196,8 @@ convert thumbnail.webp -resize 400x250 thumbnail-sm.webp</pre></div>
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/use-cases/social-media-previews.html
View file

@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -177,6 +185,8 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>

10
public/use-cases/website-monitoring.html
View file

@ -86,9 +86,14 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
.nav-mobile{display:block}
.footer-grid{grid-template-columns:1fr}
}
.skip-link{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:12px 24px;border-radius:0 0 8px 8px;font-weight:600;font-size:.9rem;z-index:1000;transition:top .2s}
.skip-link:focus{top:0}
</style>
</head>
<body>
<a href="#main-content" class="skip-link">Skip to content</a>
<header>
<nav>
<div class="nav-inner">
<a href="/" class="nav-logo">📸 <span>SnapAPI</span></a>
@ -102,6 +107,9 @@ footer{border-top:1px solid var(--border);padding:48px 24px 32px;background:var(
<button class="nav-mobile" onclick="document.querySelector('.nav-links').classList.toggle('show')" aria-label="Menu">☰</button>
</div>
</nav>
</header>
<main id="main-content">
<article class="article">
<div class="container">
@ -194,6 +202,8 @@ curl -X POST https://snapapi.eu/v1/screenshot \
</div>
</article>
</main>
<footer>
<div class="footer-grid">
<div class="footer-brand"><h4>📸 SnapAPI</h4><p>The EU-hosted screenshot API for developers. Convert any URL to a pixel-perfect image with a simple API call.</p></div>