`data/mockups/design-page/05-tech-pattern-library.html`

173 lines
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>41542 · wallco/Studio · pattern library</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --bg:#0e1014; --panel:#141821; --panel-2:#191e29; --line:#252b38;
    --ink:#e8eaee; --muted:#7b8294; --accent:#54e0c7; --accent-2:#ffd166;
    --sans:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased}

  /* Top — IDE-style chrome */
  .chrome{display:flex;align-items:center;gap:12px;padding:0 16px;height:44px;border-bottom:1px solid var(--line);background:var(--panel)}
  .tab{display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg);border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;font-family:var(--mono);font-size:11px;margin-bottom:-1px;position:relative;top:2px}
  .tab.active{background:var(--bg);color:var(--ink)}
  .tab.inactive{background:var(--panel-2);color:var(--muted)}
  .tab .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
  .chrome-right{margin-left:auto;display:flex;gap:18px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
  .chrome-right kbd{font-family:var(--mono);font-size:10px;background:var(--bg);border:1px solid var(--line);padding:2px 6px;border-radius:3px;color:var(--ink)}

  /* Sidebar — file tree */
  .layout{display:grid;grid-template-columns:240px 1fr 320px;height:calc(100vh - 44px)}
  .sidebar{background:var(--panel);border-right:1px solid var(--line);padding:14px 12px;font-family:var(--mono);font-size:11.5px;overflow:auto}
  .sidebar h4{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:14px 0 6px;font-family:var(--sans)}
  .sidebar .row{padding:4px 6px;border-radius:3px;color:#b0b8c9;cursor:pointer;display:flex;align-items:center;gap:6px}
  .sidebar .row:hover{background:var(--panel-2)}
  .sidebar .row.active{background:var(--accent);color:#0c1015;font-weight:500}
  .sidebar .row span.arrow{opacity:.5}

  /* Main canvas — pattern preview */
  .canvas{background:radial-gradient(circle at 30% 20%,#1a2030,#0e1014 60%);overflow:auto;display:flex;flex-direction:column}
  .canvas-toolbar{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--panel)}
  .canvas-toolbar button{font-family:var(--mono);font-size:11px;padding:4px 10px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:4px;cursor:pointer}
  .canvas-toolbar button:hover{border-color:var(--accent);color:var(--accent)}
  .canvas-main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px;background:repeating-conic-gradient(#0e1014 0% 25%,#161a22 0% 50%) 0 0/24px 24px}
  .canvas-main .frame{background:var(--bg);padding:14px;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
  .canvas-main img{display:block;max-width:560px;width:100%;height:auto;border-radius:2px}

  /* Right — inspector panel */
  .inspector{background:var(--panel);border-left:1px solid var(--line);overflow:auto}
  .inspector h3{font-size:14px;font-weight:600;padding:18px 18px 4px;display:flex;align-items:center;gap:8px}
  .inspector h3 .id{font-family:var(--mono);font-size:11px;color:var(--accent);background:rgba(84,224,199,.12);padding:2px 8px;border-radius:3px}
  .inspector .sub{padding:0 18px 14px;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}

  .insp-section{padding:16px 18px;border-bottom:1px solid var(--line)}
  .insp-section h4{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 10px;font-family:var(--sans)}

  .prop-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;font-family:var(--mono);font-size:11.5px}
  .prop-row .k{color:var(--muted)}
  .prop-row .v{color:var(--ink)}

  .palette-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
  .chip{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px;border-radius:4px}
  .chip:hover{background:var(--panel-2)}
  .chip .sw{width:100%;aspect-ratio:1;border-radius:4px;border:1px solid #0006}
  .chip .hex{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.02em}
  .chip:hover .hex{color:var(--accent)}

  .tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .tag{font-family:var(--mono);font-size:10px;padding:3px 8px;background:rgba(84,224,199,.1);color:var(--accent);border:1px solid rgba(84,224,199,.3);border-radius:12px}

  .copy-btn{font-family:var(--mono);font-size:10.5px;padding:6px 10px;background:transparent;border:1px solid var(--line);color:var(--ink);border-radius:4px;cursor:pointer;display:flex;align-items:center;gap:6px;width:100%;justify-content:space-between;margin-top:4px}
  .copy-btn:hover{border-color:var(--accent);color:var(--accent)}

  .cta-block{padding:18px;background:var(--panel-2);border-top:1px solid var(--line)}
  .cta-block button{width:100%;padding:11px;background:var(--accent);color:#0c1015;border:0;border-radius:4px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.04em;cursor:pointer}
  .cta-block button.ghost{margin-top:8px;background:transparent;color:var(--ink);border:1px solid var(--line)}
  .cta-block button.ghost:hover{border-color:var(--accent);color:var(--accent)}

  @media (max-width:1100px){.layout{grid-template-columns:1fr}.sidebar,.inspector{display:none}}
</style></head>
<body>
<div class="chrome">
  <div class="tab active"><span class="dot"></span> 41542 · marine-heirloom.tile</div>
  <div class="tab inactive">41538 · marine-heirloom-base.tile</div>
  <div class="tab inactive">41544 · marine-heirloom-h120.tile</div>
  <div class="chrome-right"><span>⌘K to search</span><kbd>L</kbd><kbd>R</kbd><kbd>⌘S</kbd></div>
</div>

<div class="layout">
  <aside class="sidebar">
    <h4>Library</h4>
    <div class="row"><span class="arrow">▾</span>Damask <span style="margin-left:auto;color:var(--muted)">94</span></div>
    <div class="row" style="padding-left:24px">▸ marine-heirloom-base</div>
    <div class="row active" style="padding-left:24px">● marine-heirloom (#41542)</div>
    <div class="row" style="padding-left:24px">▸ marine-heirloom-h120</div>
    <div class="row" style="padding-left:24px">▸ marine-heirloom-h180</div>
    <div class="row" style="padding-left:24px">▸ marine-heirloom-h240</div>
    <h4>Adjacent collections</h4>
    <div class="row">▸ Florals <span style="margin-left:auto;color:var(--muted)">281</span></div>
    <div class="row">▸ Geometrics <span style="margin-left:auto;color:var(--muted)">157</span></div>
    <div class="row">▸ Drunk-animals <span style="margin-left:auto;color:var(--muted)">2,949</span></div>
    <div class="row">▸ Scenics <span style="margin-left:auto;color:var(--muted)">98</span></div>
    <h4>Recents</h4>
    <div class="row">▸ 41534 · Teal Soirée</div>
    <div class="row">▸ 41538 · Marine Heirloom</div>
    <div class="row">▸ 39286 · Cactus Pine Scenic</div>
  </aside>

  <main class="canvas">
    <div class="canvas-toolbar">
      <button>🔍 100%</button>
      <button>Fit</button>
      <button>3×3 Tile</button>
      <button>1× Repeat</button>
      <span style="margin-left:auto;font-family:var(--mono);font-size:11px">⌘+/− zoom · drag to pan</span>
    </div>
    <div class="canvas-main">
      <div class="frame">
        <img src="https://wallco.ai/designs/img/var_41538_hue-60_1779692961993.png" alt="41542">
      </div>
    </div>
  </main>

  <aside class="inspector">
    <h3>Marine Heirloom <span class="id">#41542</span></h3>
    <p class="sub">damask · hue-shift variant of #41538 (+60°)</p>

    <div class="insp-section">
      <h4>Properties</h4>
      <div class="prop-row"><span class="k">kind</span><span class="v">seamless_tile</span></div>
      <div class="prop-row"><span class="k">width</span><span class="v">24″ · 36″</span></div>
      <div class="prop-row"><span class="k">repeat</span><span class="v">27″ half-drop</span></div>
      <div class="prop-row"><span class="k">material</span><span class="v">paper · vinyl · p&amp;s</span></div>
      <div class="prop-row"><span class="k">generator</span><span class="v">wallco.ai</span></div>
      <div class="prop-row"><span class="k">parent</span><span class="v" style="color:var(--accent)">#41538 ↗</span></div>
    </div>

    <div class="insp-section">
      <h4>Palette</h4>
      <div class="palette-grid">
        <div class="chip"><div class="sw" style="background:#2b3838"></div><div class="hex">2B3838</div></div>
        <div class="chip"><div class="sw" style="background:#cfc6b3"></div><div class="hex">CFC6B3</div></div>
        <div class="chip"><div class="sw" style="background:#1a2424"></div><div class="hex">1A2424</div></div>
        <div class="chip"><div class="sw" style="background:#9aa19e"></div><div class="hex">9AA19E</div></div>
        <div class="chip"><div class="sw" style="background:#5e7b78"></div><div class="hex">5E7B78</div></div>
      </div>
      <button class="copy-btn">Copy palette as CSS vars <span>⌘C</span></button>
    </div>

    <div class="insp-section">
      <h4>Motifs &amp; tags</h4>
      <div class="tag-row">
        <span class="tag">damask</span>
        <span class="tag">rosette</span>
        <span class="tag">heirloom</span>
        <span class="tag">marine</span>
        <span class="tag">slate-teal</span>
        <span class="tag">half-drop</span>
      </div>
    </div>

    <div class="insp-section">
      <h4>Lineage</h4>
      <div style="font-family:var(--mono);font-size:11px;line-height:1.7;color:#b0b8c9">
        41538 <span style="color:var(--accent)">→</span> 41542<br>
        <span style="color:var(--muted)">hue +60°, sat unchanged, luma unchanged</span><br>
        <span style="color:var(--muted)">generated 2026-05-22 21:14 UTC</span>
      </div>
    </div>

    <div class="cta-block">
      <button>Order memo sample →</button>
      <button class="ghost">See in a room</button>
    </div>
  </aside>
</div>
</body></html>