| <!DOCTYPE html> |
| <html><head> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Style Variants — Grandma Scene</title> |
| <style> |
| body{margin:0;padding:16px;background:#111;font-family:sans-serif;color:#fff} |
| h1{font-size:1.3em;margin:0 0 12px} |
| .grid{display:grid;grid-template-columns:1fr;gap:16px} |
| .card{background:#1a1a1a;border-radius:8px;overflow:hidden} |
| .card img{width:100%;display:block} |
| .card .label{padding:8px 12px;font-size:0.95em;color:#ccc} |
| .card .num{color:#fff;font-weight:bold} |
| @media(min-width:600px){.grid{grid-template-columns:1fr 1fr}} |
| </style> |
| </head><body> |
| <h1>Style Variants — Grandma Reunion Scene</h1> |
| <p style="color:#888;margin:0 0 16px;font-size:0.85em">Tap any image to view full size. Which styles look best?</p> |
| <div class="grid"> |
| <div class="card"><a href="1_film_portra400.png"><img src="1_film_portra400.png" loading="lazy"></a><div class="label"><span class="num">1.</span> Film Stock — Portra 400</div></div> |
| <div class="card"><a href="2_muted_lowcontrast.png"><img src="2_muted_lowcontrast.png" loading="lazy"></a><div class="label"><span class="num">2.</span> Muted Low Contrast</div></div> |
| <div class="card"><a href="3_ghibli_watercolor.png"><img src="3_ghibli_watercolor.png" loading="lazy"></a><div class="label"><span class="num">3.</span> Ghibli Watercolor</div></div> |
| <div class="card"><a href="4_pixar_3d.png"><img src="4_pixar_3d.png" loading="lazy"></a><div class="label"><span class="num">4.</span> Pixar 3D</div></div> |
| <div class="card"><a href="5_anime_shinkai.png"><img src="5_anime_shinkai.png" loading="lazy"></a><div class="label"><span class="num">5.</span> Anime — Makoto Shinkai</div></div> |
| <div class="card"><a href="6_oil_painting.png"><img src="6_oil_painting.png" loading="lazy"></a><div class="label"><span class="num">6.</span> Oil Painting — Rembrandt</div></div> |
| <div class="card"><a href="7_storybook.png"><img src="7_storybook.png" loading="lazy"></a><div class="label"><span class="num">7.</span> Storybook — Jon Klassen</div></div> |
| <div class="card"><a href="8_laika_stopmotion.png"><img src="8_laika_stopmotion.png" loading="lazy"></a><div class="label"><span class="num">8.</span> Laika Stop-Motion</div></div> |
| <div class="card"><a href="9_charcoal_wash.png"><img src="9_charcoal_wash.png" loading="lazy"></a><div class="label"><span class="num">9.</span> Charcoal Wash</div></div> |
| <div class="card"><a href="10_cinematic_natural.png"><img src="10_cinematic_natural.png" loading="lazy"></a><div class="label"><span class="num">10.</span> Cinematic Natural — Lubezki</div></div> |
| </div> |
| </body></html> |
|
|
