first-commit

2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
@@ -0,0 +1,113 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Image poster — example</title>
+    <style>
+      :root {
+        --bg: #f5efe5;
+        --ink: #1c1b1a;
+        --accent: #c96442;
+        --muted: #8b8579;
+        --paper: #efe7d7;
+      }
+      * { box-sizing: border-box; }
+      html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
+        font-family: 'Iowan Old Style', 'Charter', Georgia, serif; }
+      body { min-height: 100dvh; display: grid; place-items: center; padding: 32px; }
+      .poster {
+        width: min(640px, 92vw);
+        aspect-ratio: 3 / 4;
+        background: var(--paper);
+        border: 1px solid rgba(28, 27, 26, 0.08);
+        border-radius: 6px;
+        box-shadow: 0 16px 48px rgba(28, 27, 26, 0.12), 0 1px 2px rgba(28, 27, 26, 0.06);
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        padding: 38px 32px;
+        position: relative;
+        overflow: hidden;
+      }
+      .poster::after {
+        content: '';
+        position: absolute; inset: 0;
+        pointer-events: none;
+        background:
+          radial-gradient(circle at 30% 18%, rgba(255,255,255,0.7), transparent 60%),
+          repeating-linear-gradient(0deg, rgba(28,27,26,0.025) 0 1px, transparent 1px 2px);
+      }
+      .eyebrow {
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 11px;
+        letter-spacing: 0.18em;
+        text-transform: uppercase;
+        color: var(--muted);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .accent-dot {
+        width: 8px; height: 8px; border-radius: 50%;
+        background: var(--accent);
+      }
+      .silhouette {
+        align-self: center;
+        justify-self: center;
+        width: 70%;
+        aspect-ratio: 1 / 1;
+        position: relative;
+      }
+      .silhouette svg { width: 100%; height: 100%; display: block; }
+      .meta {
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+        font-size: 10.5px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: var(--muted);
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        gap: 12px;
+        align-items: end;
+      }
+      .meta strong { color: var(--ink); font-weight: 600; }
+      .title {
+        font-size: 44px;
+        line-height: 0.95;
+        margin: 18px 0 0;
+        letter-spacing: -0.01em;
+      }
+      .title em { font-style: italic; color: var(--accent); }
+      .footer {
+        margin-top: 12px;
+        font-size: 13px;
+        color: var(--muted);
+        font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="poster">
+      <div class="eyebrow">
+        <span>Open Design · Image</span>
+        <span class="accent-dot" aria-hidden></span>
+      </div>
+      <div class="silhouette" aria-hidden>
+        <svg viewBox="0 0 100 100">
+          <circle cx="50" cy="38" r="18" fill="#1c1b1a" />
+          <path d="M22 100 C 22 70, 78 70, 78 100 Z" fill="#1c1b1a" />
+          <circle cx="68" cy="22" r="6" fill="#c96442" />
+        </svg>
+      </div>
+      <div>
+        <h1 class="title">An <em>image</em> project<br />produced by the agent.</h1>
+        <div class="meta">
+          <span><strong>gpt-image-2</strong></span>
+          <span>·</span>
+          <span style="text-align:right">3:4 · poster</span>
+        </div>
+        <p class="footer">Saved as PNG into the project folder.</p>
+      </div>
+    </div>
+  </body>
+</html>