`demo/output/index.html`

211 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HERMES vs QWEN3 — Costa Brava brief</title>
<style>
  :root { --bg:#0e0e10; --panel:#15151a; --ink:#f5f0e8; --mute:#9b9591; --rule:#272528; --gold:#c9a96a; }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,'SF Pro Text',sans-serif;padding:32px}
  h1{font:300 36px/1.1 'SF Pro Display',serif;letter-spacing:.02em;margin:0 0 4px}
  h1 b{color:var(--gold);font-weight:500}
  .lead{color:var(--mute);margin:0 0 28px;max-width:800px}
  .lead code{background:#1c1c20;padding:2px 6px;border-radius:3px;color:var(--gold);font-size:12px}
  .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .col{background:var(--panel);border:1px solid var(--rule);border-radius:6px;padding:20px}
  .col-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:18px;gap:12px;flex-wrap:wrap}
  .col-head h2{margin:0;font:500 20px 'SF Pro Display',sans-serif;letter-spacing:.04em}
  .stats{display:flex;gap:14px;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
  .stat b{color:var(--ink);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none}
  .stat.ok b{color:#7ad27a}
  .stat.bad b{color:#e26d6d}
  .grid{display:flex;flex-direction:column;gap:14px}
  .concept{display:grid;grid-template-columns:160px 1fr;border:1px solid var(--rule);border-radius:4px;overflow:hidden}
  .hero{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:10px}
  .palette{display:flex;gap:0;margin-bottom:auto;padding-top:6px}
  .palette span{flex:1;height:18px;display:block;border:1px solid rgba(0,0,0,.15)}
  .hex{font:600 11px/1 'SF Mono',monospace;letter-spacing:.05em;color:rgba(0,0,0,.65);background:rgba(255,255,255,.85);padding:3px 6px;border-radius:2px;align-self:flex-start}
  .meta{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
  .meta h3{margin:0;font:500 16px 'SF Pro Display',sans-serif;letter-spacing:.02em}
  .tier{display:inline-block;font:500 9px/1 'SF Pro Text';letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);padding:3px 6px;border-radius:2px;margin-left:6px;vertical-align:1px}
  .tag{margin:2px 0 0;font-style:italic;color:var(--ink)}
  .motif{margin:4px 0 0;color:var(--mute);font-size:13px}
  .room{margin:2px 0 0;font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
  .room span{color:var(--gold)}
  footer{margin-top:28px;padding-top:18px;border-top:1px solid var(--rule);color:var(--mute);font-size:12px}
</style>
</head>
<body>
  <h1>Costa Brava — <b>HERMES vs QWEN3</b></h1>
  <p class="lead">Same brief, same JSON schema, both models running locally on Mac2 Ollama. Strict-valid means the concept passed the entire schema gate (hex format, palette length, tagline ≤8 words, tier in {Studio, Atelier, Bespoke}). Run with <code>node demo/headtohead.mjs && node demo/render.mjs</code>.</p>
  <div class="cols">
    
  <section class="col">
    <header class="col-head">
      <h2>Hermes-3-Llama-3.1-8B</h2>
      <div class="stats">
        <span class="stat"><b>134943</b>ms</span>
        <span class="stat"><b>570</b> tok out</span>
        <span class="stat"><b>3/5</b> strict-valid</span>
        <span class="stat ok">JSON ✓</span>
      </div>
    </header>
    <div class="grid">
  <article class="concept" style="--hero:#FFA853">
    <div class="hero" style="background:#FFA853">
      <div class="palette">
        <span style="background:#8B4513" title="#8B4513"></span><span style="background:#F5DEB3" title="#F5DEB3"></span><span style="background:#CD853" title="#CD853"></span>
      </div>
      <div class="hex">#FFA853</div>
    </div>
    <div class="meta">
      <h3>Terra del Sol <span class="tier">Atelier</span></h3>
      <p class="tag">"Surrender to the golden hues of Spain's Mediterranean paradise."</p>
      <p class="motif">Sun-bleached terracotta and warm golden accents evoke the sun-soaked shores of Costa Brava.</p>
      <p class="room"><span>Best for:</span> Living Room</p>
    </div>
  </article>
  <article class="concept" style="--hero:#1E90FF">
    <div class="hero" style="background:#1E90FF">
      <div class="palette">
        <span style="background:#ADD8E6" title="#ADD8E6"></span><span style="background:#90EE90" title="#90EE90"></span><span style="background:#F5DEB3" title="#F5DEB3"></span>
      </div>
      <div class="hex">#1E90FF</div>
    </div>
    <div class="meta">
      <h3>Blue Horizons <span class="tier">Studio</span></h3>
      <p class="tag">"Escape to a haven of azure serenity."</p>
      <p class="motif">Luminous blues and soft greens capture the tranquility of Costa Brava's coastal skies.</p>
      <p class="room"><span>Best for:</span> Bedroom</p>
    </div>
  </article>
  <article class="concept" style="--hero:#8FBC8B">
    <div class="hero" style="background:#8FBC8B">
      <div class="palette">
        <span style="background:#FFFFE0" title="#FFFFE0"></span><span style="background:#7CFC00" title="#7CFC00"></span><span style="background:#32CD32" title="#32CD32"></span>
      </div>
      <div class="hex">#8FBC8B</div>
    </div>
    <div class="meta">
      <h3>Mediterranean Tapestry <span class="tier">Atelier</span></h3>
      <p class="tag">"Indulge in the lush tapestry of Spain's coastal jewel."</p>
      <p class="motif">Hand-blocked prints interweave vibrant flora and marina motifs in a celebration of Costa Brava's natural beauty.</p>
      <p class="room"><span>Best for:</span> Dining Room</p>
    </div>
  </article>
  <article class="concept" style="--hero:#A0522D">
    <div class="hero" style="background:#A0522D">
      <div class="palette">
        <span style="background:#8B0000" title="#8B0000"></span><span style="background:#FFDB58" title="#FFDB58"></span><span style="background:#F5DEB3" title="#F5DEB3"></span>
      </div>
      <div class="hex">#A0522D</div>
    </div>
    <div class="meta">
      <h3>Cobblestone Charm <span class="tier">Studio</span></h3>
      <p class="tag">"Embrace the warmth of Spain's cobblestone havens."</p>
      <p class="motif">Rich terracotta hues and warm accents mirror the charm of Costa Brava's quaint cobblestoned streets.</p>
      <p class="room"><span>Best for:</span> Entryway</p>
    </div>
  </article>
  <article class="concept" style="--hero:#0F52BA">
    <div class="hero" style="background:#0F52BA">
      <div class="palette">
        <span style="background:#ADD8E6" title="#ADD8E6"></span><span style="background:#B0E0E6" title="#B0E0E6"></span><span style="background:#87CEEB" title="#87CEEB"></span>
      </div>
      <div class="hex">#0F52BA</div>
    </div>
    <div class="meta">
      <h3>Sapphire Siesta <span class="tier">Atelier</span></h3>
      <p class="tag">"Dive into the depths of Spain's coastal tranquility."</p>
      <p class="motif">Deep sapphire blues and gentle pastels evoke the serene siestas of Costa Brava's shores.</p>
      <p class="room"><span>Best for:</span> Bathroom</p>
    </div>
  </article></div>
  </section>
    
  <section class="col">
    <header class="col-head">
      <h2>Qwen3:14b</h2>
      <div class="stats">
        <span class="stat"><b>141247</b>ms</span>
        <span class="stat"><b>591</b> tok out</span>
        <span class="stat"><b>4/5</b> strict-valid</span>
        <span class="stat ok">JSON ✓</span>
      </div>
    </header>
    <div class="grid">
  <article class="concept" style="--hero:#D2B48C">
    <div class="hero" style="background:#D2B48C">
      <div class="palette">
        <span style="background:#4A5568" title="#4A5568"></span><span style="background:#F8F9FA" title="#F8F9FA"></span><span style="background:#A06660" title="#A06660"></span>
      </div>
      <div class="hex">#D2B48C</div>
    </div>
    <div class="meta">
      <h3>Cala Blanca <span class="tier">Atelier</span></h3>
      <p class="tag">"Where the sea’s whisper meets the villa’s embrace."</p>
      <p class="motif">Sun-bleached terracotta tiles fractured by wave-like ripples in cobalt blue.</p>
      <p class="room"><span>Best for:</span> living room</p>
    </div>
  </article>
  <article class="concept" style="--hero:#B87333">
    <div class="hero" style="background:#B87333">
      <div class="palette">
        <span style="background:#E6E6FA" title="#E6E6FA"></span><span style="background:#D2B48C" title="#D2B48C"></span><span style="background:#8B4513" title="#8B4513"></span>
      </div>
      <div class="hex">#B87333</div>
    </div>
    <div class="meta">
      <h3>Plaza del Sol <span class="tier">Bespoke</span></h3>
      <p class="tag">"Feast where the Mediterranean pulses with life."</p>
      <p class="motif">Hand-blocked ochre and saffron patterns mimic wrought-iron balconies over sun-drenched cobblestones.</p>
      <p class="room"><span>Best for:</span> dining room</p>
    </div>
  </article>
  <article class="concept" style="--hero:#5E919D">
    <div class="hero" style="background:#5E919D">
      <div class="palette">
        <span style="background:#F5F5DC" title="#F5F5DC"></span><span style="background:#708090" title="#708090"></span><span style="background:#1E90FF" title="#1E90FF"></span>
      </div>
      <div class="hex">#5E919D</div>
    </div>
    <div class="meta">
      <h3>Caminito Azul <span class="tier">Studio</span></h3>
      <p class="tag">"Wake to the rhythm of the ocean’s breath."</p>
      <p class="motif">Driftwood silhouettes float across a teal-and-sand palette, evoking coastal footpaths.</p>
      <p class="room"><span>Best for:</span> bedroom</p>
    </div>
  </article>
  <article class="concept" style="--hero:#C19A6B">
    <div class="hero" style="background:#C19A6B">
      <div class="palette">
        <span style="background:#F0E68C" title="#F0E68C"></span><span style="background:#A0522D" title="#A0522D"></span><span style="background:#FFF8DC" title="#FFF8DC"></span>
      </div>
      <div class="hex">#C19A6B</div>
    </div>
    <div class="meta">
      <h3>Villa de la Luz <span class="tier">Atelier</span></h3>
      <p class="tag">"Step into a legend woven by centuries of light."</p>
      <p class="motif">Lace-like motifs in amber and terracotta echo Andalusian lacework on sun-faded walls.</p>
      <p class="room"><span>Best for:</span> entryway</p>
    </div>
  </article>
  <article class="concept" style="--hero:#2F4F4F">
    <div class="hero" style="background:#2F4F4F">
      <div class="palette">
        <span style="background:#87CEEB" title="#87CEEB"></span><span style="background:#F5DEB3" title="#F5DEB3"></span><span style="background:#FFFFFF" title="#FFFFFF"></span>
      </div>
      <div class="hex">#2F4F4F</div>
    </div>
    <div class="meta">
      <h3>Acantus Cliffs <span class="tier">Bespoke</span></h3>
      <p class="tag">"Bask in the luxury of a cliffside sanctuary."</p>
      <p class="motif">Bold cobalt acanthus leaves climb a limestone background, reimagined as a cliffside fresco.</p>
      <p class="room"><span>Best for:</span> bathroom</p>
    </div>
  </article></div>
  </section>
  </div>
  <footer>Generated 2026-05-10T20:44:09.112Z · ~/Projects/HERMES/demo · prompt + raw outputs in demo/output/</footer>
</body>
</html>