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 flowers — 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[hidden] { display: none; }
    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; }
    @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 flowers / procedural art</h1>
  </header>
  <main>
    <figure>
      <p id="render-help">Generate the artwork with <code>python renderer.py</code>, then reload this viewer. See the <a href="README.md">reproduction guide</a> for setup. Uno does not store the generated PNG files.</p>
      <img id="artwork" src="renders/final.png" width="972" height="1202" alt="Three distinct overlapping five-petal glass-like flowers with bubbly rounded silhouettes and iridescent cyan, violet, pink and pearlescent illumination on an off-white background.">
    </figure>
  </main>
  <footer>
    <p>Three glass flowers · generated entirely from code</p>
    <div class="links">
      <a href="renders/high-res.png">High-resolution art</a>
      <a href="README.md">Construction notes</a>
    </div>
  </footer>
<script>
const artwork=document.getElementById("artwork");
const help=document.getElementById("render-help");
function showRender(){if(artwork.naturalWidth>0){help.hidden=true;artwork.hidden=false;}else{help.hidden=false;artwork.hidden=true;}}
artwork.addEventListener("load",showRender);artwork.addEventListener("error",showRender);showRender();
</script>
</body>
</html>