Mortdecai
b8a7810bfd
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.
97 lines
3.1 KiB
HTML
97 lines
3.1 KiB
HTML
<!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> </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 && sethmux-notify "OK"</span></div>
|
||
<div class="dim">→ built in 2.31s</div>
|
||
<div> </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>
|