133 lines
5.5 KiB
HTML
133 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>Capture Fixture — vh, lazy-bg, marquee, SVG, IO reveal</title>
|
||
<link rel="stylesheet" href="./styles.css" />
|
||
</head>
|
||
<body>
|
||
<header class="nav">
|
||
<a href="#" class="logo">Fixture</a>
|
||
<nav>
|
||
<a href="#hero">Hero</a>
|
||
<a href="#features">Features</a>
|
||
<a href="#bg">Lazy BG</a>
|
||
<a href="#marquee">Marquee</a>
|
||
<a href="#footer">Footer</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<!-- Section A: vh-relative hero. 100vh - 64px nav. -->
|
||
<section id="hero" class="hero">
|
||
<h1>Full-fold hero</h1>
|
||
<p>
|
||
This section's height is <code>min-height: calc(100vh - 64px)</code>. At a 1280×720 capture it resolves to
|
||
656px; at 1280×1080 it resolves to 1016px. The <code>vh-flags.json</code> output should pick this up and set
|
||
<code>vh_value: 91</code>.
|
||
</p>
|
||
<a href="#" class="cta">Get started</a>
|
||
</section>
|
||
|
||
<!-- Section B: full-width gradient, content max-width inside -->
|
||
<section id="features" class="features">
|
||
<div class="inner">
|
||
<h2>Three cards</h2>
|
||
<ul class="grid">
|
||
<li class="card reveal">
|
||
<svg class="icon" viewBox="0 0 32 32">
|
||
<path d="M4 16 L14 26 L28 6" stroke="currentColor" stroke-width="3" fill="none" stroke-linecap="round" />
|
||
</svg>
|
||
<h3>Reveal me</h3>
|
||
<p>
|
||
I fade in via IntersectionObserver. A capture that doesn't trigger the IO callback will leave me at
|
||
opacity 0.
|
||
</p>
|
||
</li>
|
||
<li class="card reveal">
|
||
<svg class="icon" viewBox="0 0 32 32">
|
||
<circle cx="16" cy="16" r="12" stroke="currentColor" stroke-width="3" fill="none" />
|
||
</svg>
|
||
<h3>Reveal me too</h3>
|
||
<p>Same pattern. Stagger delay applied via inline style.</p>
|
||
</li>
|
||
<li class="card reveal">
|
||
<svg class="icon" viewBox="0 0 32 32">
|
||
<rect x="6" y="6" width="20" height="20" rx="3" stroke="currentColor" stroke-width="3" fill="none" />
|
||
</svg>
|
||
<h3>And me</h3>
|
||
<p>Three cards = repeated_pattern candidate.</p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section C: lazy-loaded background image. The CSS sets bg via a class that we toggle with IO. -->
|
||
<section id="bg" class="lazy-bg">
|
||
<div class="inner">
|
||
<h2>Background loads on scroll</h2>
|
||
<p>
|
||
Until I'm intersected, my background-image is "none". After IO fires I get a CSS-driven background. Capture
|
||
must either scroll into view or follow the CSS rule from
|
||
<code>css-rules/<vp>.json</code> to know the bg URL.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section D: Swiper-style marquee with offscreen items the response listener misses -->
|
||
<section id="marquee" class="marquee">
|
||
<h2>Marquee</h2>
|
||
<div class="track">
|
||
<!-- 8 logos; the first 4 are visible at the capture viewport, the rest drift in via translate -->
|
||
<div class="logo-tile" data-idx="1">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A1</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="2">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A2</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="3">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A3</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="4">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">A4</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="5">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B1</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="6">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B2</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="7">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B3</text></svg>
|
||
</div>
|
||
<div class="logo-tile" data-idx="8">
|
||
<svg viewBox="0 0 80 32"><text x="0" y="22" font-size="20" fill="currentColor">B4</text></svg>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section E: detailed SVG. Inline; the agent should preserve every path. -->
|
||
<section id="detailed-svg" class="detailed-svg">
|
||
<h2>Detailed SVG</h2>
|
||
<svg viewBox="0 0 200 100" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
<stop offset="0%" stop-color="#0ea5e9" />
|
||
<stop offset="100%" stop-color="#22c55e" />
|
||
</linearGradient>
|
||
</defs>
|
||
<rect x="0" y="0" width="200" height="100" fill="url(#g1)" rx="8" />
|
||
<path d="M10 80 Q 50 20, 100 50 T 190 30" stroke="#fff" stroke-width="3" fill="none" />
|
||
<circle cx="100" cy="50" r="6" fill="#fff" />
|
||
<text x="50%" y="92%" text-anchor="middle" font-size="12" fill="#fff">cluster</text>
|
||
</svg>
|
||
</section>
|
||
|
||
<footer id="footer" class="footer">
|
||
<p>© Fixture site — for capture-side regression testing only.</p>
|
||
</footer>
|
||
|
||
<script src="./reveal.js"></script>
|
||
</body>
|
||
</html>
|