chore: archive design handoff bundle for toolbar refresh

Stores SethMux_4-24-26.zip + extracted design_handoff_sethmux_toolbar/ so the spec, mockups, and reference jsx components stay in-repo for future reference. Not served in production — the only file that ships is static/toolbar.js, which already matches the design's toolbar.js byte-for-byte.
2026-04-24 19:51:48 -04:00
parent 2b375b0206
commit b8a7810bfd
8 changed files with 1340 additions and 0 deletions
@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>sethmux — toolbar preview</title>
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Roboto+Mono:wght@400&display=swap" rel="stylesheet">
+<style>
+  :root{
+    --bg:#1a1a1d;
+    --bg-toolbar:#202124;
+    --border:#3c4043;
+    --text:#e8eaed;
+    --text-2:#9aa0a6;
+    --accent:#D35400;
+  }
+  *{box-sizing:border-box;margin:0;padding:0}
+  html,body{height:100%}
+  body{
+    background:var(--bg);
+    color:var(--text);
+    font:12px/1.4 'Roboto','Helvetica Neue',Arial,sans-serif;
+    -webkit-font-smoothing:antialiased;
+    overflow:hidden;
+  }
+
+  /* Mock chrome strip so the preview reads like a phone-shell view */
+  .chrome{
+    height:44px;
+    background:var(--bg-toolbar);
+    border-bottom:1px solid var(--border);
+    display:flex;align-items:center;justify-content:space-between;
+    padding:0 14px;
+    color:var(--text-2);
+  }
+  .chrome .brand{
+    color:var(--accent);
+    font-weight:500;letter-spacing:.2px;font-size:13px;
+  }
+  .chrome .meta{
+    font-family:'Roboto Mono',ui-monospace,monospace;
+    font-size:11px;color:var(--text-2);
+  }
+  .chrome .meta b{color:var(--text);font-weight:400}
+
+  /* Mock xterm pane */
+  .xterm{
+    height:calc(100vh - 44px - 92px);
+    transition:height .15s ease;
+    padding:10px 12px;
+    overflow:hidden;
+    font-family:'Roboto Mono',ui-monospace,Menlo,Consolas,monospace;
+    font-size:13px;line-height:1.45;
+    color:#cfd2d6;
+  }
+  .xterm .ps1{color:#81c995}
+  .xterm .path{color:#8ab4f8}
+  .xterm .git{color:#fdd663}
+  .xterm .cmd{color:#e8eaed}
+  .xterm .dim{color:#5f6368}
+  .xterm .cursor{
+    display:inline-block;width:8px;height:15px;
+    background:#e8eaed;vertical-align:-2px;margin-left:1px;
+    animation:blink 1.1s steps(1) infinite;
+  }
+  @keyframes blink{50%{opacity:0}}
+  .xterm-screen{height:100%}
+</style>
+</head>
+<body>
+
+<div class="chrome">
+  <div class="brand">sethmux</div>
+  <div class="meta"><b>code</b> · <b>1</b>/4 · 80×24</div>
+</div>
+
+<div class="xterm">
+  <div class="xterm-screen">
+    <div><span class="ps1">seth@mux</span> <span class="path">~/sethmux</span> <span class="git">(main)</span> <span class="dim">$</span> <span class="cmd">tmux ls</span></div>
+    <div>sethmux: 4 windows (created Thu Apr 24 09:12:03 2026) (attached)</div>
+    <div class="dim">  code  git  run  logs</div>
+    <div>&nbsp;</div>
+    <div><span class="ps1">seth@mux</span> <span class="path">~/sethmux</span> <span class="git">(main)</span> <span class="dim">$</span> <span class="cmd">make build &amp;&amp; sethmux-notify "OK"</span></div>
+    <div class="dim">→ built in 2.31s</div>
+    <div>&nbsp;</div>
+    <div><span class="ps1">seth@mux</span> <span class="path">~/sethmux</span> <span class="git">(main)</span> <span class="dim">$</span> <span class="cursor"></span></div>
+  </div>
+</div>
+
+<!-- Force the toolbar visible in preview at any width -->
+<style>#mb{display:flex !important}</style>
+<script src="toolbar.js"></script>
+</body>
+</html>