<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>All Pages</title>
    <link rel="stylesheet" href="assets/css/base.css" />
    <style>
      html, body { margin: 0; padding: 0; height: 100%; }
      body { background: #eeeeee; }
      .main { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; box-sizing: border-box; }
      .thumb { display: flex; flex-direction: column; align-items: center; }
      .label { font: 12px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: #555; margin: 0.25rem 0; }
      .thumb iframe { display:block; width: var(--page-w, 5.5in); height: var(--page-h, 8.5in); border: 0; background: white; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.18); }
    </style>
  </head>
  <body style="--page-w: 5.5in; --page-h: 8.5in;">
    <div class="main">
      {{ range .Pages }}
      <div class="thumb">
        <a class="label" href="{{ .Href }}">{{ .Name }}</a>
        <iframe src="{{ .Href }}" loading="lazy"></iframe>
      </div>
      {{ end }}
    </div>
  </body>
  </html>


