index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="dark">
  <title>Iridescent shapes — procedural art</title>
  <style>
    :root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #141414; color: #eeeae4; }
    * { box-sizing: border-box; }
    body { margin: 0; }
    header, footer { max-width: 1036px; margin: auto; padding: 22px 32px; }
    header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    h1 { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: .025em; }
    a { color: inherit; font: inherit; }
    a:focus-visible { outline: 2px solid #eeeae4; outline-offset: 4px; }
    main { padding: 0 32px; }
    figure { max-width: 972px; margin: 0 auto; }
    img { display: block; width: 100%; height: auto; background: #f1ede8; }
    footer { display: flex; justify-content: space-between; gap: 20px; font-size: 11px; line-height: 1.6; color: #aaa7a2; }
    footer p { margin: 0; }
    .links { display: flex; flex-wrap: wrap; gap: 18px; }
    a { text-underline-offset: 3px; }
    nav { display: flex; flex-wrap: wrap; gap: 12px; }
    button { background: #28262b; color: inherit; padding: 9px 13px; border: 1px solid #57515d; border-radius: 20px; cursor: pointer; }
    button[aria-pressed="true"] { background: #eeeae4; color: #242029; }
    button:focus-visible { outline: 2px solid #d0b1ff; outline-offset: 3px; }
    figcaption { padding: 18px 0; color: #b8b1bf; line-height: 1.5; font-size: 13px; }
    @media (max-width: 600px) {
      header, footer { padding: 18px 16px; }
      header { align-items: flex-start; flex-direction: column; gap: 12px; }
      main { padding: 0 16px; }
      footer { flex-direction: column; gap: 12px; }
    }
  </style>
</head>
<body>
  <header>
    <h1>Iridescent shapes / procedural art</h1>
    <nav aria-label="Artwork gallery">
      <button data-art="library" aria-pressed="true">Shape library</button>
      <button data-art="refinements" aria-pressed="false">Refined shapes</button>
      <button data-art="heart" aria-pressed="false">Heart</button>
      <button data-art="outlines" aria-pressed="false">Contours</button>
      <button data-art="cutouts" aria-pressed="false">Cutouts</button>
      <button data-art="celestial" aria-pressed="false">Stars & moon</button>
      <button data-art="soft" aria-pressed="false">Soft forms</button>
      <button data-art="orchard" aria-pressed="false">Orchard</button>
      <button data-art="flowers" aria-pressed="false">Flowers</button>
    </nav>
  </header>
  <main>
    <figure>
      <img id="artwork" src="renders/shape-library.png" width="1440" height="1860" alt="Labeled sampler of sixteen iridescent silhouettes: stars, organic cutouts, fruits and soft forms.">
      <figcaption id="caption">Sixteen editable silhouettes rendered with the same glass finish. These are saved artwork previews; use the included Python generator to make your own combinations.</figcaption>
    </figure>
  </main>
  <footer>
    <p>Curves, color fields and grain · generated entirely from code</p>
    <div class="links">
      <a id="download" href="renders/shape-library.png">Open full-size image</a>
      <a href="renders/high-res.png">Flowers · 2×</a>
      <a href="README.md">Construction notes</a>
    </div>
  </footer>
<script>
const entries = {
  library: ['shape-library.png',1440,1860,'Sixteen editable silhouettes rendered with the same glass finish. These are saved artwork previews; use the included Python generator to make your own combinations.'],
  refinements: ['shape-refinements.png',720,1020,'A broad heart with a crisp notch and tapered point, plus butterfly, rounded bow and strawberry replacements.'],
  heart: ['shape-study-heart.png',972,1202,'Broad heart with smooth lobes, a crisp center notch, and a tapered bottom point.'],
  outlines: ['shape-outlines.png',1440,1860,'The same sixteen smooth outlines shown without lighting or texture.'],
  cutouts: ['shape-study-cutouts.png',972,1202,'Seaweed, branching coral and a rounded bow. Asymmetric cutouts overlap in pearl, cyan and warm glass.'],
  celestial: ['shape-study-celestial.png',972,1202,'A crescent, rounded five-point star and four-point sparkle. Three independent shapes, layered from back to front.'],
  soft: ['shape-study-soft-forms.png',972,1202,'A cloud, fused bubble cluster and pebble. Soft inflated silhouettes overlap in three glass finishes.'],
  orchard: ['shape-study-orchard.png',972,1202,'Apple, strawberry and lemon silhouettes in the original spectral glass palette.'],
  flowers: ['final.png',972,1202,'The flower composition rebuilt with smooth continuous contours.']
};
document.querySelectorAll('button[data-art]').forEach(button => button.addEventListener('click', () => {
  const [file,w,h,caption] = entries[button.dataset.art];
  const image = document.getElementById('artwork');
  image.src = 'renders/' + file; image.width = w; image.height = h; image.alt = caption;
  document.getElementById('caption').textContent = caption;
  document.getElementById('download').href = image.getAttribute('src');
  document.querySelectorAll('button[data-art]').forEach(item => item.setAttribute('aria-pressed', String(item === button)));
}));
</script>
</body>
</html>