docs: product documentation, design working files, and the failed design review
Adds the required doc set under docs/mmd-pdf/ - PRD, feature backlog with status and sign-off per feature, screens with wireframes, test cases with the test data and the agent-tasking prompts, and the sign-off log. The sign-off log records the independent design review of 2026-08-27: DESIGN-FAIL, three blockers and five major findings, which is why every design feature in the backlog is blocked and the logo/token branch is unmerged. Design working files live in docs/mmd-pdf/design/ so the next agent can regenerate and re-render them. redplate.css there is the MMD shell design system lifted verbatim from the session that owns it - do not edit it. Also carries the session handover. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
Executable
BIN
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Executable
BIN
Binary file not shown.
Binary file not shown.
Executable
BIN
Binary file not shown.
@@ -0,0 +1,224 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600&display=swap">
|
||||
<style>
|
||||
|
||||
body{margin:0;background:#F3F3F0;font-family:"PP Neue Machina","Neue Machina",system-ui,-apple-system,"Segoe UI",sans-serif;color:#3C3A34;-webkit-font-smoothing:antialiased}
|
||||
a{color:#C8102E} a:hover{color:#8E0B20}
|
||||
*{box-sizing:border-box}
|
||||
.root{padding:16px;background:#F3F3F0}
|
||||
.shell{width:1180px;display:flex;flex-direction:column;font-size:11.5px;background:#FFFFFF;border:1px solid #C7C6BD}
|
||||
.s-title{display:flex;align-items:center;gap:10px;padding:0 10px;height:30px;background:#C8102E;color:#fff;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12.5px}
|
||||
.s-title .mmd-logo{height:19px;width:auto;display:block;flex:none;fill:#fff}
|
||||
.spring{flex:1}
|
||||
.s-who{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;color:rgba(255,255,255,0.85)}
|
||||
.s-signout{font-size:10px;padding:1px 0;color:#fff;text-decoration:underline;text-underline-offset:2px}
|
||||
.s-bar{display:flex;align-items:stretch;gap:2px;padding:0 5px;background:#F7F7F3;border-bottom:1px solid #D7D6CE}
|
||||
.s-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;white-space:nowrap;border:1px solid transparent;color:#3C3A34}
|
||||
.s-item .cv{font-size:8px;opacity:0.5}
|
||||
.s-item .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;padding:0 4px;border:1px solid #23221E;color:#23221E;background:#FFFFFF;line-height:13px}
|
||||
.s-item.on{background:#FFFFFF;border-color:#D7D6CE;border-top:2px solid #C8102E;border-bottom-color:#FFFFFF;margin-bottom:-1px;font-weight:700;color:#23221E}
|
||||
.s-item.on .n{border-color:#23221E;color:#23221E}
|
||||
.s-tools{margin-left:auto;display:flex;align-items:center;gap:6px;padding-right:4px}
|
||||
.s-search{width:168px;padding:2px 7px;font-size:10.5px;background:#FFFFFF;border:1px solid #C7C6BD;color:#23221E}
|
||||
.s-btn{padding:2px 9px;font-size:10.5px;background:#FFFFFF;border:1px solid #C7C6BD;color:#23221E}
|
||||
.s-desk{position:relative;background:#D4D0C6;overflow:hidden}
|
||||
.s-desk.tiled{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:10px;padding:10px;align-items:start}
|
||||
.s-desk.stacked{height:492px}
|
||||
.s-desk.oneup{padding:10px}
|
||||
.s-task{display:flex;align-items:center;gap:10px;padding:4px 8px;font-size:10.5px;background:#F1F1EC;border-top:1px solid #D7D6CE}
|
||||
.s-task .lbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.s-group{display:inline-flex;align-items:stretch;border:1px solid #D7D6CE;background:#FFFFFF}
|
||||
.s-group .app{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368;padding:2px 7px;border-right:1px solid #D7D6CE;display:flex;align-items:center;background:#F7F7F3}
|
||||
.s-group .win{padding:2px 8px;font-size:10px;color:#23221E;border-right:1px solid #D7D6CE;display:flex;align-items:center;gap:5px;background:#F1F1EC}
|
||||
.s-group .win:last-child{border-right:0}
|
||||
.s-group .win.on{box-shadow:inset 3px 0 0 #C8102E;font-weight:700;background:#FFFFFF}
|
||||
.s-group .win.min{color:#3C3A34;background:#FFFFFF;outline:1px dashed #6B6A64;outline-offset:-3px}
|
||||
|
||||
.s-task .tile{font-size:10px;padding:1px 8px;border:1px solid #C7C6BD;background:#FFFFFF;color:#3C3A34}
|
||||
/* windows — title bar made visible: darker plate, ink name, clear border; front = red top edge + shadow */
|
||||
.win-frame{background:#FFFFFF;border:1px solid #B9B8AE;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(35,34,30,0.12)}
|
||||
.win-frame.front{border-color:#767368;box-shadow:0 6px 16px rgba(35,34,30,0.26)}
|
||||
.stacked .win-frame{position:absolute}
|
||||
.w-title{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 8px;background:#E4E3DC;border-bottom:1px solid #C9C6BC;font-size:11px;color:#3C3A34}
|
||||
.front .w-title{background:#FFFFFF;color:#23221E;border-top:3px solid #C8102E;height:31px}
|
||||
.w-title .app{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#23221E;font-weight:700}
|
||||
.w-title .app::after{content:"/";margin-left:8px;color:#6B6A64}
|
||||
.w-title .name{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:12px;color:#3C3A34}
|
||||
.front .w-title .name{color:#23221E;font-weight:700}
|
||||
.w-title .new{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:#23221E;background:#E4E3DC;padding:0 6px;line-height:15px}
|
||||
.w-title .ctl{display:flex;gap:8px}
|
||||
.w-title .ctl span{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#23221E;background:transparent;border:0}
|
||||
.w-body{padding:0;overflow:hidden}
|
||||
.w-toolbar{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#FAFAF8;border-bottom:1px solid #E6E5DF}
|
||||
.w-h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:-0.01em;margin:0;color:#23221E}
|
||||
.w-count{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#6B6A64}
|
||||
.w-count b{color:#C8102E;font-weight:600}
|
||||
.w-filters{margin-left:auto;display:flex;gap:4px}
|
||||
.w-chip{padding:1px 7px;font-size:9.5px;font-family:"JetBrains Mono",ui-monospace,monospace;border:1px solid #D7D6CE;background:#FFFFFF;color:#3C3A34}
|
||||
.w-chip.on{border-color:#767368;color:#23221E;font-weight:600}
|
||||
.w-cta{padding:2px 9px;font-size:10px;background:#C8102E;color:#FFFFFF;border:1px solid #C8102E;font-weight:600}
|
||||
table.w-tbl{width:100%;border-collapse:collapse;font-size:10.5px;background:#FFFFFF}
|
||||
.w-tbl th{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;text-align:left;padding:4px 8px;white-space:nowrap;background:#F1F1EC;color:#23221E;border-bottom:1px solid #D7D6CE;border-right:1px solid #E6E5DF}
|
||||
.w-tbl td{padding:4px 8px;border-bottom:1px solid #E6E5DF;border-right:1px solid #E6E5DF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
|
||||
.w-tbl td:last-child,.w-tbl th:last-child{border-right:0}
|
||||
.w-tbl tr:nth-child(even) td{background:#FAFAF8}
|
||||
.w-tbl td.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right}
|
||||
.w-tbl th.num{text-align:right}
|
||||
.w-tbl td.ref{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.03em}
|
||||
.w-tbl tr.sel td{background:#F7F7F3;box-shadow:inset 3px 0 0 #C8102E}
|
||||
.w-state{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.07em;text-transform:uppercase;padding:1px 5px;background:#F1F1EC;color:#23221E}
|
||||
.rec{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0}
|
||||
.rec .col{padding:6px 10px 8px;border-right:1px solid #E6E5DF}
|
||||
.rec .col:last-child{border-right:0}
|
||||
.rec h4{margin:4px 0 4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:#767368;font-weight:600;border-bottom:1px solid #E6E5DF;padding-bottom:3px}
|
||||
.kv{display:grid;grid-template-columns:96px 1fr;gap:2px 8px;font-size:10.5px;margin:0}
|
||||
.kv dt{color:#767368}
|
||||
.kv dd{margin:0;color:#23221E}
|
||||
.kv dd.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-variant-numeric:tabular-nums}
|
||||
.rec-actions{display:flex;gap:6px;padding:6px 10px;border-top:1px solid #E6E5DF;background:#FAFAF8}
|
||||
.rec-actions span{padding:2px 9px;font-size:10px;border:1px solid #C7C6BD;background:#FFFFFF;color:#23221E}
|
||||
.rec-actions span.primary{color:#FFFFFF;background:#C8102E;border:1px solid #C8102E;font-weight:600}
|
||||
.steps{display:flex;gap:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid #E6E5DF}
|
||||
.steps span{padding:3px 8px;border-right:1px solid #E6E5DF;color:#6B6A64}
|
||||
.steps span.done{color:#767368}
|
||||
.steps span.now{color:#C8102E;font-weight:700;box-shadow:inset 0 -2px 0 #C8102E}
|
||||
.rep{padding:6px 10px}
|
||||
.rep .row{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:4px 0;border-bottom:1px solid #E6E5DF;font-size:10.5px}
|
||||
.rep .row:last-child{border-bottom:0}
|
||||
.rep .name{color:#23221E;font-weight:600}
|
||||
.rep .name small{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;color:#6B6A64;font-weight:400}
|
||||
.rep .hl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#3C3A34;font-variant-numeric:tabular-nums}
|
||||
/* title-bar option closeups */
|
||||
.opt{width:600px;padding:16px;background:#D4D0C6}
|
||||
.opt .cap{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:#767368;margin:0 0 8px}
|
||||
.opt .win-frame{margin-bottom:14px}
|
||||
.opt .win-frame:last-child{margin-bottom:0}
|
||||
/* Option B: ink strip */
|
||||
.optB .front .w-title{background:#3C3A34;color:#fff;border-top:0;height:28px;border-bottom:1px solid #23221E}
|
||||
.optB .front .w-title .name{color:#fff}
|
||||
.optB .front .w-title .app{color:#fff}
|
||||
.optB .front .w-title .app::after{color:rgba(255,255,255,0.35)}
|
||||
.optB .front .w-title .ctl span{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6)}
|
||||
.optB .front .w-title .new{color:#fff;border-color:rgba(255,255,255,0.7)}
|
||||
/* Option C: ruled */
|
||||
.optC .w-title{background:#FFFFFF;border-bottom:2px solid #23221E;height:28px}
|
||||
.optC .front .w-title{background:#FFFFFF;border-top:3px solid #C8102E;height:31px;border-bottom:2px solid #23221E}
|
||||
.optC .win-frame{border-color:#23221E}
|
||||
|
||||
|
||||
/* ---- MMD PDF: the parts the shell system has no component for yet ------
|
||||
Named for adoption into the design system, not invented per screen.
|
||||
Every colour below is a red-plate value; nothing new is introduced. */
|
||||
.pdf{width:800px;height:600px;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #767368;box-shadow:0 6px 16px rgba(35,34,30,0.26);overflow:hidden}
|
||||
|
||||
/* tool strip */
|
||||
.pdf-tools{display:flex;align-items:stretch;background:#F1F1EC;border-bottom:1px solid #D7D6CE}
|
||||
.pdf-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:44px;color:#23221E;flex:none}
|
||||
.pdf-t .lb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:7.5px;letter-spacing:0.02em;text-transform:uppercase;line-height:1;white-space:nowrap}
|
||||
.pdf-t.on{background:#C8102E;color:#FFFFFF}
|
||||
.pdf-t.dim{color:#A9A69C}
|
||||
.pdf-rule{width:1px;background:#D7D6CE;margin:6px 3px;flex:none}
|
||||
.pdf-end{margin-left:auto;display:flex;align-items:center;gap:5px;padding:0 6px;flex:none}
|
||||
.pdf-zoom{display:flex;align-items:center;border:1px solid #C7C6BD;background:#FFFFFF}
|
||||
.pdf-zoom b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;font-weight:500;color:#23221E;padding:0 7px;line-height:19px}
|
||||
.pdf-zoom i{width:19px;line-height:19px;text-align:center;font-style:normal;font-size:11px;color:#23221E;border-left:1px solid #C7C6BD}
|
||||
.pdf-over{width:26px;display:flex;align-items:center;justify-content:center;color:#23221E;border-left:1px solid #D7D6CE;flex:none}
|
||||
|
||||
/* icon-only strip (direction B) */
|
||||
.pdf-tools--icons .pdf-t{width:28px}
|
||||
.pdf-tools--icons .pdf-t .lb{display:none}
|
||||
/* tab strip (direction C) */
|
||||
.pdf-tabs{display:flex;align-items:stretch;background:#E4E3DC;border-bottom:1px solid #D7D6CE;padding:0 4px}
|
||||
.pdf-tab{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#767368;padding:0 11px;line-height:21px}
|
||||
.pdf-tab.on{background:#FFFFFF;color:#23221E;font-weight:600;border-top:2px solid #C8102E;line-height:19px}
|
||||
|
||||
/* context bar — only present while a tool is armed */
|
||||
.pdf-ctx{display:flex;align-items:center;gap:9px;height:26px;padding:0 9px;background:#FAFAF8;border-bottom:1px solid #E6E5DF;font-size:10px;color:#3C3A34}
|
||||
.pdf-ctx .lbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.pdf-sw{display:flex;gap:3px}
|
||||
.pdf-sw i{width:12px;height:12px;display:block;border:1px solid #C7C6BD}
|
||||
.pdf-sw i.on{outline:1px solid #23221E;outline-offset:1px}
|
||||
.pdf-pick{border:1px solid #C7C6BD;background:#FFFFFF;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#23221E;padding:1px 6px}
|
||||
|
||||
/* work area */
|
||||
.pdf-work{flex:1;display:flex;min-height:0}
|
||||
.pdf-strip{width:26px;flex:none;background:#E4E3DC;border-right:1px solid #D7D6CE;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:7px}
|
||||
.pdf-strip .pn{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;color:#23221E;line-height:1.25;text-align:center}
|
||||
.pdf-rail{width:88px;flex:none;background:#E4E3DC;border-right:1px solid #D7D6CE;overflow:hidden}
|
||||
.pdf-rail-h{display:flex;gap:7px;padding:5px 7px 3px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.pdf-rail-h .on{color:#23221E;font-weight:700}
|
||||
.pdf-pg{margin:0 7px 5px;background:#FFFFFF;border:1px solid #C7C6BD}
|
||||
.pdf-pg.here{box-shadow:inset 3px 0 0 #C8102E}
|
||||
.pdf-pg .mini{height:64px;padding:5px 6px;overflow:hidden}
|
||||
.pdf-pg .mini i{display:block;background:#C9C7C0;height:2px;margin-bottom:3px}
|
||||
.pdf-pg .mini i.t{background:#23221E;height:3px;width:74%;margin-bottom:5px}
|
||||
.pdf-pg .mini i.s{width:52%}
|
||||
.pdf-pg .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8px;text-align:center;color:#3C3A34;line-height:14px;border-top:1px solid #E6E5DF}
|
||||
.pdf-canvas{flex:1;background:#F3F3F0;display:flex;justify-content:center;overflow:hidden;padding:9px 0 0}
|
||||
.pdf-page{width:100%;max-width:560px;background:#FFFFFF;border:1px solid #C7C6BD;padding:28px 34px}
|
||||
|
||||
/* status */
|
||||
.pdf-status{display:flex;align-items:center;gap:12px;height:20px;padding:0 8px;background:#F1F1EC;border-top:1px solid #D7D6CE;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;color:#3C3A34;flex:none}
|
||||
.pdf-status .sep{width:1px;height:11px;background:#C7C6BD}
|
||||
.pdf-status .r{margin-left:auto;color:#6B6A64}
|
||||
.pdf-status .warn{color:#C8102E}
|
||||
|
||||
/* document body */
|
||||
.pdf-h{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:14px;color:#23221E;margin:0 0 13px}
|
||||
.pdf-p{font-size:10.5px;color:#3C3A34;line-height:1.9;margin:0}
|
||||
.pdf-live{display:inline-block;padding:0 4px;border:1px solid #C8102E;background:#FBEEF0;color:#23221E}
|
||||
|
||||
/* dialog */
|
||||
.pdf-behind{position:absolute;inset:0}
|
||||
.pdf-behind::after{content:"";position:absolute;inset:0;background:rgba(35,34,30,0.28)}
|
||||
.pdf-over-scrim{position:relative;width:800px;height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||||
.pdf-over-scrim .pdf-dlg{position:relative;z-index:2}
|
||||
.pdf-dlg{width:404px;background:#FFFFFF;border:1px solid #767368;box-shadow:0 6px 16px rgba(35,34,30,0.26)}
|
||||
.pdf-dlg-t{display:flex;align-items:center;height:26px;padding:0 10px;background:#FFFFFF;color:#23221E;border-bottom:2px solid #23221E;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:11.5px}
|
||||
.pdf-dlg-b{padding:13px 15px;display:flex;flex-direction:column;gap:10px;font-size:10.5px;color:#3C3A34}
|
||||
.pdf-dlg-a{display:flex;justify-content:flex-end;gap:6px;padding:0 15px 13px}
|
||||
.pdf-kv{display:grid;grid-template-columns:82px 1fr;gap:4px 10px;align-items:baseline}
|
||||
.pdf-kv .k{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.09em;text-transform:uppercase;color:#767368}
|
||||
.pdf-in{border:1px solid #C7C6BD;background:#FFFFFF;padding:3px 7px;font-size:10.5px;color:#23221E;display:flex;align-items:center}
|
||||
.pdf-in .cv{margin-left:auto;font-size:8px;color:#767368}
|
||||
|
||||
/* direction board */
|
||||
.board{width:800px;background:#F3F3F0;padding:11px;display:flex;flex-direction:column;gap:11px}
|
||||
.board h3{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12.5px;color:#23221E;margin:0}
|
||||
.board .why{font-size:10px;color:#3C3A34;margin:0}
|
||||
.board .cost{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;color:#767368;margin:0}
|
||||
.board .card{background:#FFFFFF;border:1px solid #C7C6BD;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
|
||||
.board .strip{border:1px solid #D7D6CE}
|
||||
|
||||
</style>
|
||||
</helmet>
|
||||
<div class="board">
|
||||
<div class="card">
|
||||
<h3>A — one row, named tools</h3>
|
||||
<div class="strip"><div class="pdf-tools" style="height:40px"><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M2 6h6l2 2h8v9H2z"/></svg><span class="lb">Open</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 3h11l3 3v11H3z"/><path d="M6 3v5h7V3"/><path d="M6 17v-5h8v5"/></svg><span class="lb">Save</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 8V3h8v5"/><path d="M3 8h14v6h-3v4H6v-4H3z"/></svg><span class="lb">Print</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 5V3h4"/><path d="M17 5V3h-4"/><path d="M3 15v2h4"/><path d="M17 15v2h-4"/><path d="M2 10h16"/></svg><span class="lb">Scan</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 6V3h3"/><path d="M17 6V3h-3"/><path d="M3 14v3h3"/><path d="M17 14v3h-3"/><path d="M6 9h8"/><path d="M6 12h5"/></svg><span class="lb">OCR</span></div><span class="pdf-rule"></span><div class="pdf-t on"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-linecap="square"><path d="M5 3l11 8-5 1 3 5-2 1-3-5-4 3z"/></svg><span class="lb">Select</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 5h12"/><path d="M10 5v11"/></svg><span class="lb">Text</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 15l3-9h2l3 9"/><path d="M6 12h5"/><path d="M14 15h3"/></svg><span class="lb">Mark</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 17l3-1 9-9-2-2-9 9z"/></svg><span class="lb">Draw</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 8h8v8H3z"/><path d="M11 4h6v6h-6z"/></svg><span class="lb">Shape</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 14c3-6 5 3 7-2s4 2 7-3"/><path d="M3 17h14"/></svg><span class="lb">Sign</span></div><span class="pdf-rule"></span><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 3h8v14H4z"/><path d="M12 6h4v11H8"/></svg><span class="lb">Pages</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M13 13l4 4"/><path d="M4 9a5 5 0 1010 0 5 5 0 10-10 0"/></svg><span class="lb">Search</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M7 6L3 10l4 4"/><path d="M3 10h9a4 4 0 010 8"/></svg><span class="lb">Undo</span></div><div class="pdf-end"><span class="pdf-zoom"><b>FIT WIDTH</b><i>−</i><i>+</i></span></div><div class="pdf-over"><svg width="14" height="14" viewBox="0 0 14 14" fill="#23221E"><circle cx="3" cy="7" r="1.2"/><circle cx="7" cy="7" r="1.2"/><circle cx="11" cy="7" r="1.2"/></svg></div></div></div>
|
||||
<p class="why">Fourteen tools carry their name. Everything else — stamp, image, crop, merge, flatten, redo — lives behind the three dots on the right.</p>
|
||||
<p class="cost">40px of chrome · 512px left for the page · 16 of 30 tools hidden</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>B — icons only, nothing hidden</h3>
|
||||
<div class="strip"><div class="pdf-tools pdf-tools--icons" style="height:30px"><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M2 6h6l2 2h8v9H2z"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 3h11l3 3v11H3z"/><path d="M6 3v5h7V3"/><path d="M6 17v-5h8v5"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 8V3h8v5"/><path d="M3 8h14v6h-3v4H6v-4H3z"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 5V3h4"/><path d="M17 5V3h-4"/><path d="M3 15v2h4"/><path d="M17 15v2h-4"/><path d="M2 10h16"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 6V3h3"/><path d="M17 6V3h-3"/><path d="M3 14v3h3"/><path d="M17 14v3h-3"/><path d="M6 9h8"/><path d="M6 12h5"/></svg></div><div class="pdf-t on"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-linecap="square"><path d="M5 3l11 8-5 1 3 5-2 1-3-5-4 3z"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 5h12"/><path d="M10 5v11"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 15l3-9h2l3 9"/><path d="M6 12h5"/><path d="M14 15h3"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 17l3-1 9-9-2-2-9 9z"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 8h8v8H3z"/><path d="M11 4h6v6h-6z"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 14c3-6 5 3 7-2s4 2 7-3"/><path d="M3 17h14"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 16h8"/><path d="M7 13h6l-1-5a2 2 0 10-4 0z"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 4h14v12H3z"/><path d="M3 13l4-4 3 3 3-3 4 4"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 2v12h12"/><path d="M2 6h12v12"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 5h6v4H3z"/><path d="M11 11h6v4h-6z"/><path d="M6 9v3h5"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 3h8v7H6z"/><path d="M3 13h14"/><path d="M3 16h14"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 3h8v14H4z"/><path d="M12 6h4v11H8"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M13 13l4 4"/><path d="M4 9a5 5 0 1010 0 5 5 0 10-10 0"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M7 6L3 10l4 4"/><path d="M3 10h9a4 4 0 010 8"/></svg></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M13 6l4 4-4 4"/><path d="M17 10H8a4 4 0 000 8"/></svg></div><div class="pdf-end"><span class="pdf-zoom"><b>FIT WIDTH</b><i>−</i><i>+</i></span></div></div></div>
|
||||
<p class="why">All thirty fit, name on hover. Fastest once someone knows the icons; a plant clerk opening it for the first time has to guess.</p>
|
||||
<p class="cost">30px of chrome · 522px left for the page · nothing hidden</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>C — three tabs, named tools, nothing hidden</h3>
|
||||
<div class="strip"><div class="pdf-tabs"><span class="pdf-tab">Document</span><span class="pdf-tab on">Edit</span><span class="pdf-tab">Pages</span></div><div class="pdf-tools" style="height:34px"><div class="pdf-t on"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-linecap="square"><path d="M5 3l11 8-5 1 3 5-2 1-3-5-4 3z"/></svg><span class="lb">Select</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 5h12"/><path d="M10 5v11"/></svg><span class="lb">Text</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 15l3-9h2l3 9"/><path d="M6 12h5"/><path d="M14 15h3"/></svg><span class="lb">Mark</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 17l3-1 9-9-2-2-9 9z"/></svg><span class="lb">Draw</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 8h8v8H3z"/><path d="M11 4h6v6h-6z"/></svg><span class="lb">Shape</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 14c3-6 5 3 7-2s4 2 7-3"/><path d="M3 17h14"/></svg><span class="lb">Sign</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 16h8"/><path d="M7 13h6l-1-5a2 2 0 10-4 0z"/></svg><span class="lb">Stamp</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 4h14v12H3z"/><path d="M3 13l4-4 3 3 3-3 4 4"/></svg><span class="lb">Image</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 2v12h12"/><path d="M2 6h12v12"/></svg><span class="lb">Crop</span></div><div class="pdf-end"><span class="pdf-zoom"><b>FIT WIDTH</b><i>−</i><i>+</i></span></div></div></div>
|
||||
<p class="why">Document, Edit, Pages. Every tool keeps its name and every tool is reachable, at the price of one click to change tab and a second bar of chrome.</p>
|
||||
<p class="cost">56px of chrome · 496px left for the page · nothing hidden, one click deeper</p>
|
||||
</div>
|
||||
</div></x-dc>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,205 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600&display=swap">
|
||||
<style>
|
||||
|
||||
body{margin:0;background:#F3F3F0;font-family:"PP Neue Machina","Neue Machina",system-ui,-apple-system,"Segoe UI",sans-serif;color:#3C3A34;-webkit-font-smoothing:antialiased}
|
||||
a{color:#C8102E} a:hover{color:#8E0B20}
|
||||
*{box-sizing:border-box}
|
||||
.root{padding:16px;background:#F3F3F0}
|
||||
.shell{width:1180px;display:flex;flex-direction:column;font-size:11.5px;background:#FFFFFF;border:1px solid #C7C6BD}
|
||||
.s-title{display:flex;align-items:center;gap:10px;padding:0 10px;height:30px;background:#C8102E;color:#fff;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12.5px}
|
||||
.s-title .mmd-logo{height:19px;width:auto;display:block;flex:none;fill:#fff}
|
||||
.spring{flex:1}
|
||||
.s-who{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;color:rgba(255,255,255,0.85)}
|
||||
.s-signout{font-size:10px;padding:1px 0;color:#fff;text-decoration:underline;text-underline-offset:2px}
|
||||
.s-bar{display:flex;align-items:stretch;gap:2px;padding:0 5px;background:#F7F7F3;border-bottom:1px solid #D7D6CE}
|
||||
.s-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;white-space:nowrap;border:1px solid transparent;color:#3C3A34}
|
||||
.s-item .cv{font-size:8px;opacity:0.5}
|
||||
.s-item .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;padding:0 4px;border:1px solid #23221E;color:#23221E;background:#FFFFFF;line-height:13px}
|
||||
.s-item.on{background:#FFFFFF;border-color:#D7D6CE;border-top:2px solid #C8102E;border-bottom-color:#FFFFFF;margin-bottom:-1px;font-weight:700;color:#23221E}
|
||||
.s-item.on .n{border-color:#23221E;color:#23221E}
|
||||
.s-tools{margin-left:auto;display:flex;align-items:center;gap:6px;padding-right:4px}
|
||||
.s-search{width:168px;padding:2px 7px;font-size:10.5px;background:#FFFFFF;border:1px solid #C7C6BD;color:#23221E}
|
||||
.s-btn{padding:2px 9px;font-size:10.5px;background:#FFFFFF;border:1px solid #C7C6BD;color:#23221E}
|
||||
.s-desk{position:relative;background:#D4D0C6;overflow:hidden}
|
||||
.s-desk.tiled{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:10px;padding:10px;align-items:start}
|
||||
.s-desk.stacked{height:492px}
|
||||
.s-desk.oneup{padding:10px}
|
||||
.s-task{display:flex;align-items:center;gap:10px;padding:4px 8px;font-size:10.5px;background:#F1F1EC;border-top:1px solid #D7D6CE}
|
||||
.s-task .lbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.s-group{display:inline-flex;align-items:stretch;border:1px solid #D7D6CE;background:#FFFFFF}
|
||||
.s-group .app{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368;padding:2px 7px;border-right:1px solid #D7D6CE;display:flex;align-items:center;background:#F7F7F3}
|
||||
.s-group .win{padding:2px 8px;font-size:10px;color:#23221E;border-right:1px solid #D7D6CE;display:flex;align-items:center;gap:5px;background:#F1F1EC}
|
||||
.s-group .win:last-child{border-right:0}
|
||||
.s-group .win.on{box-shadow:inset 3px 0 0 #C8102E;font-weight:700;background:#FFFFFF}
|
||||
.s-group .win.min{color:#3C3A34;background:#FFFFFF;outline:1px dashed #6B6A64;outline-offset:-3px}
|
||||
|
||||
.s-task .tile{font-size:10px;padding:1px 8px;border:1px solid #C7C6BD;background:#FFFFFF;color:#3C3A34}
|
||||
/* windows — title bar made visible: darker plate, ink name, clear border; front = red top edge + shadow */
|
||||
.win-frame{background:#FFFFFF;border:1px solid #B9B8AE;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(35,34,30,0.12)}
|
||||
.win-frame.front{border-color:#767368;box-shadow:0 6px 16px rgba(35,34,30,0.26)}
|
||||
.stacked .win-frame{position:absolute}
|
||||
.w-title{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 8px;background:#E4E3DC;border-bottom:1px solid #C9C6BC;font-size:11px;color:#3C3A34}
|
||||
.front .w-title{background:#FFFFFF;color:#23221E;border-top:3px solid #C8102E;height:31px}
|
||||
.w-title .app{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#23221E;font-weight:700}
|
||||
.w-title .app::after{content:"/";margin-left:8px;color:#6B6A64}
|
||||
.w-title .name{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:12px;color:#3C3A34}
|
||||
.front .w-title .name{color:#23221E;font-weight:700}
|
||||
.w-title .new{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:#23221E;background:#E4E3DC;padding:0 6px;line-height:15px}
|
||||
.w-title .ctl{display:flex;gap:8px}
|
||||
.w-title .ctl span{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#23221E;background:transparent;border:0}
|
||||
.w-body{padding:0;overflow:hidden}
|
||||
.w-toolbar{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#FAFAF8;border-bottom:1px solid #E6E5DF}
|
||||
.w-h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:-0.01em;margin:0;color:#23221E}
|
||||
.w-count{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#6B6A64}
|
||||
.w-count b{color:#C8102E;font-weight:600}
|
||||
.w-filters{margin-left:auto;display:flex;gap:4px}
|
||||
.w-chip{padding:1px 7px;font-size:9.5px;font-family:"JetBrains Mono",ui-monospace,monospace;border:1px solid #D7D6CE;background:#FFFFFF;color:#3C3A34}
|
||||
.w-chip.on{border-color:#767368;color:#23221E;font-weight:600}
|
||||
.w-cta{padding:2px 9px;font-size:10px;background:#C8102E;color:#FFFFFF;border:1px solid #C8102E;font-weight:600}
|
||||
table.w-tbl{width:100%;border-collapse:collapse;font-size:10.5px;background:#FFFFFF}
|
||||
.w-tbl th{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;text-align:left;padding:4px 8px;white-space:nowrap;background:#F1F1EC;color:#23221E;border-bottom:1px solid #D7D6CE;border-right:1px solid #E6E5DF}
|
||||
.w-tbl td{padding:4px 8px;border-bottom:1px solid #E6E5DF;border-right:1px solid #E6E5DF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
|
||||
.w-tbl td:last-child,.w-tbl th:last-child{border-right:0}
|
||||
.w-tbl tr:nth-child(even) td{background:#FAFAF8}
|
||||
.w-tbl td.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right}
|
||||
.w-tbl th.num{text-align:right}
|
||||
.w-tbl td.ref{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.03em}
|
||||
.w-tbl tr.sel td{background:#F7F7F3;box-shadow:inset 3px 0 0 #C8102E}
|
||||
.w-state{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.07em;text-transform:uppercase;padding:1px 5px;background:#F1F1EC;color:#23221E}
|
||||
.rec{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0}
|
||||
.rec .col{padding:6px 10px 8px;border-right:1px solid #E6E5DF}
|
||||
.rec .col:last-child{border-right:0}
|
||||
.rec h4{margin:4px 0 4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:#767368;font-weight:600;border-bottom:1px solid #E6E5DF;padding-bottom:3px}
|
||||
.kv{display:grid;grid-template-columns:96px 1fr;gap:2px 8px;font-size:10.5px;margin:0}
|
||||
.kv dt{color:#767368}
|
||||
.kv dd{margin:0;color:#23221E}
|
||||
.kv dd.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-variant-numeric:tabular-nums}
|
||||
.rec-actions{display:flex;gap:6px;padding:6px 10px;border-top:1px solid #E6E5DF;background:#FAFAF8}
|
||||
.rec-actions span{padding:2px 9px;font-size:10px;border:1px solid #C7C6BD;background:#FFFFFF;color:#23221E}
|
||||
.rec-actions span.primary{color:#FFFFFF;background:#C8102E;border:1px solid #C8102E;font-weight:600}
|
||||
.steps{display:flex;gap:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid #E6E5DF}
|
||||
.steps span{padding:3px 8px;border-right:1px solid #E6E5DF;color:#6B6A64}
|
||||
.steps span.done{color:#767368}
|
||||
.steps span.now{color:#C8102E;font-weight:700;box-shadow:inset 0 -2px 0 #C8102E}
|
||||
.rep{padding:6px 10px}
|
||||
.rep .row{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:4px 0;border-bottom:1px solid #E6E5DF;font-size:10.5px}
|
||||
.rep .row:last-child{border-bottom:0}
|
||||
.rep .name{color:#23221E;font-weight:600}
|
||||
.rep .name small{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;color:#6B6A64;font-weight:400}
|
||||
.rep .hl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#3C3A34;font-variant-numeric:tabular-nums}
|
||||
/* title-bar option closeups */
|
||||
.opt{width:600px;padding:16px;background:#D4D0C6}
|
||||
.opt .cap{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:#767368;margin:0 0 8px}
|
||||
.opt .win-frame{margin-bottom:14px}
|
||||
.opt .win-frame:last-child{margin-bottom:0}
|
||||
/* Option B: ink strip */
|
||||
.optB .front .w-title{background:#3C3A34;color:#fff;border-top:0;height:28px;border-bottom:1px solid #23221E}
|
||||
.optB .front .w-title .name{color:#fff}
|
||||
.optB .front .w-title .app{color:#fff}
|
||||
.optB .front .w-title .app::after{color:rgba(255,255,255,0.35)}
|
||||
.optB .front .w-title .ctl span{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6)}
|
||||
.optB .front .w-title .new{color:#fff;border-color:rgba(255,255,255,0.7)}
|
||||
/* Option C: ruled */
|
||||
.optC .w-title{background:#FFFFFF;border-bottom:2px solid #23221E;height:28px}
|
||||
.optC .front .w-title{background:#FFFFFF;border-top:3px solid #C8102E;height:31px;border-bottom:2px solid #23221E}
|
||||
.optC .win-frame{border-color:#23221E}
|
||||
|
||||
|
||||
/* ---- MMD PDF: the parts the shell system has no component for yet ------
|
||||
Named for adoption into the design system, not invented per screen.
|
||||
Every colour below is a red-plate value; nothing new is introduced. */
|
||||
.pdf{width:800px;height:600px;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #767368;box-shadow:0 6px 16px rgba(35,34,30,0.26);overflow:hidden}
|
||||
|
||||
/* tool strip */
|
||||
.pdf-tools{display:flex;align-items:stretch;background:#F1F1EC;border-bottom:1px solid #D7D6CE}
|
||||
.pdf-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:44px;color:#23221E;flex:none}
|
||||
.pdf-t .lb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:7.5px;letter-spacing:0.02em;text-transform:uppercase;line-height:1;white-space:nowrap}
|
||||
.pdf-t.on{background:#C8102E;color:#FFFFFF}
|
||||
.pdf-t.dim{color:#A9A69C}
|
||||
.pdf-rule{width:1px;background:#D7D6CE;margin:6px 3px;flex:none}
|
||||
.pdf-end{margin-left:auto;display:flex;align-items:center;gap:5px;padding:0 6px;flex:none}
|
||||
.pdf-zoom{display:flex;align-items:center;border:1px solid #C7C6BD;background:#FFFFFF}
|
||||
.pdf-zoom b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;font-weight:500;color:#23221E;padding:0 7px;line-height:19px}
|
||||
.pdf-zoom i{width:19px;line-height:19px;text-align:center;font-style:normal;font-size:11px;color:#23221E;border-left:1px solid #C7C6BD}
|
||||
.pdf-over{width:26px;display:flex;align-items:center;justify-content:center;color:#23221E;border-left:1px solid #D7D6CE;flex:none}
|
||||
|
||||
/* icon-only strip (direction B) */
|
||||
.pdf-tools--icons .pdf-t{width:28px}
|
||||
.pdf-tools--icons .pdf-t .lb{display:none}
|
||||
/* tab strip (direction C) */
|
||||
.pdf-tabs{display:flex;align-items:stretch;background:#E4E3DC;border-bottom:1px solid #D7D6CE;padding:0 4px}
|
||||
.pdf-tab{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#767368;padding:0 11px;line-height:21px}
|
||||
.pdf-tab.on{background:#FFFFFF;color:#23221E;font-weight:600;border-top:2px solid #C8102E;line-height:19px}
|
||||
|
||||
/* context bar — only present while a tool is armed */
|
||||
.pdf-ctx{display:flex;align-items:center;gap:9px;height:26px;padding:0 9px;background:#FAFAF8;border-bottom:1px solid #E6E5DF;font-size:10px;color:#3C3A34}
|
||||
.pdf-ctx .lbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.pdf-sw{display:flex;gap:3px}
|
||||
.pdf-sw i{width:12px;height:12px;display:block;border:1px solid #C7C6BD}
|
||||
.pdf-sw i.on{outline:1px solid #23221E;outline-offset:1px}
|
||||
.pdf-pick{border:1px solid #C7C6BD;background:#FFFFFF;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#23221E;padding:1px 6px}
|
||||
|
||||
/* work area */
|
||||
.pdf-work{flex:1;display:flex;min-height:0}
|
||||
.pdf-strip{width:26px;flex:none;background:#E4E3DC;border-right:1px solid #D7D6CE;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:7px}
|
||||
.pdf-strip .pn{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;color:#23221E;line-height:1.25;text-align:center}
|
||||
.pdf-rail{width:88px;flex:none;background:#E4E3DC;border-right:1px solid #D7D6CE;overflow:hidden}
|
||||
.pdf-rail-h{display:flex;gap:7px;padding:5px 7px 3px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.pdf-rail-h .on{color:#23221E;font-weight:700}
|
||||
.pdf-pg{margin:0 7px 5px;background:#FFFFFF;border:1px solid #C7C6BD}
|
||||
.pdf-pg.here{box-shadow:inset 3px 0 0 #C8102E}
|
||||
.pdf-pg .mini{height:64px;padding:5px 6px;overflow:hidden}
|
||||
.pdf-pg .mini i{display:block;background:#C9C7C0;height:2px;margin-bottom:3px}
|
||||
.pdf-pg .mini i.t{background:#23221E;height:3px;width:74%;margin-bottom:5px}
|
||||
.pdf-pg .mini i.s{width:52%}
|
||||
.pdf-pg .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8px;text-align:center;color:#3C3A34;line-height:14px;border-top:1px solid #E6E5DF}
|
||||
.pdf-canvas{flex:1;background:#F3F3F0;display:flex;justify-content:center;overflow:hidden;padding:9px 0 0}
|
||||
.pdf-page{width:100%;max-width:560px;background:#FFFFFF;border:1px solid #C7C6BD;padding:28px 34px}
|
||||
|
||||
/* status */
|
||||
.pdf-status{display:flex;align-items:center;gap:12px;height:20px;padding:0 8px;background:#F1F1EC;border-top:1px solid #D7D6CE;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;color:#3C3A34;flex:none}
|
||||
.pdf-status .sep{width:1px;height:11px;background:#C7C6BD}
|
||||
.pdf-status .r{margin-left:auto;color:#6B6A64}
|
||||
.pdf-status .warn{color:#C8102E}
|
||||
|
||||
/* document body */
|
||||
.pdf-h{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:14px;color:#23221E;margin:0 0 13px}
|
||||
.pdf-p{font-size:10.5px;color:#3C3A34;line-height:1.9;margin:0}
|
||||
.pdf-live{display:inline-block;padding:0 4px;border:1px solid #C8102E;background:#FBEEF0;color:#23221E}
|
||||
|
||||
/* dialog */
|
||||
.pdf-behind{position:absolute;inset:0}
|
||||
.pdf-behind::after{content:"";position:absolute;inset:0;background:rgba(35,34,30,0.28)}
|
||||
.pdf-over-scrim{position:relative;width:800px;height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||||
.pdf-over-scrim .pdf-dlg{position:relative;z-index:2}
|
||||
.pdf-dlg{width:404px;background:#FFFFFF;border:1px solid #767368;box-shadow:0 6px 16px rgba(35,34,30,0.26)}
|
||||
.pdf-dlg-t{display:flex;align-items:center;height:26px;padding:0 10px;background:#FFFFFF;color:#23221E;border-bottom:2px solid #23221E;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:11.5px}
|
||||
.pdf-dlg-b{padding:13px 15px;display:flex;flex-direction:column;gap:10px;font-size:10.5px;color:#3C3A34}
|
||||
.pdf-dlg-a{display:flex;justify-content:flex-end;gap:6px;padding:0 15px 13px}
|
||||
.pdf-kv{display:grid;grid-template-columns:82px 1fr;gap:4px 10px;align-items:baseline}
|
||||
.pdf-kv .k{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.09em;text-transform:uppercase;color:#767368}
|
||||
.pdf-in{border:1px solid #C7C6BD;background:#FFFFFF;padding:3px 7px;font-size:10.5px;color:#23221E;display:flex;align-items:center}
|
||||
.pdf-in .cv{margin-left:auto;font-size:8px;color:#767368}
|
||||
|
||||
/* direction board */
|
||||
.board{width:800px;background:#F3F3F0;padding:11px;display:flex;flex-direction:column;gap:11px}
|
||||
.board h3{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12.5px;color:#23221E;margin:0}
|
||||
.board .why{font-size:10px;color:#3C3A34;margin:0}
|
||||
.board .cost{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;color:#767368;margin:0}
|
||||
.board .card{background:#FFFFFF;border:1px solid #C7C6BD;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
|
||||
.board .strip{border:1px solid #D7D6CE}
|
||||
|
||||
</style>
|
||||
</helmet>
|
||||
<div class="pdf"><div class="w-title"><img class="mmd-logo" src="mmd-logo-red.svg" alt="MMD" style="height:13px"><span class="app">MMD PDF</span><span class="name">BON-2026-0847 delivery note.pdf</span><span class="spring"></span><span class="ctl"><span>−</span><span>◻</span><span>×</span></span></div><div class="pdf-tools" style="height:40px"><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M2 6h6l2 2h8v9H2z"/></svg><span class="lb">Open</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 3h11l3 3v11H3z"/><path d="M6 3v5h7V3"/><path d="M6 17v-5h8v5"/></svg><span class="lb">Save</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M6 8V3h8v5"/><path d="M3 8h14v6h-3v4H6v-4H3z"/></svg><span class="lb">Print</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 5V3h4"/><path d="M17 5V3h-4"/><path d="M3 15v2h4"/><path d="M17 15v2h-4"/><path d="M2 10h16"/></svg><span class="lb">Scan</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 6V3h3"/><path d="M17 6V3h-3"/><path d="M3 14v3h3"/><path d="M17 14v3h-3"/><path d="M6 9h8"/><path d="M6 12h5"/></svg><span class="lb">OCR</span></div><span class="pdf-rule"></span><div class="pdf-t on"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#FFFFFF" stroke-width="1.35" stroke-linecap="square"><path d="M5 3l11 8-5 1 3 5-2 1-3-5-4 3z"/></svg><span class="lb">Select</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 5h12"/><path d="M10 5v11"/></svg><span class="lb">Text</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 15l3-9h2l3 9"/><path d="M6 12h5"/><path d="M14 15h3"/></svg><span class="lb">Mark</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 17l3-1 9-9-2-2-9 9z"/></svg><span class="lb">Draw</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 8h8v8H3z"/><path d="M11 4h6v6h-6z"/></svg><span class="lb">Shape</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M3 14c3-6 5 3 7-2s4 2 7-3"/><path d="M3 17h14"/></svg><span class="lb">Sign</span></div><span class="pdf-rule"></span><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M4 3h8v14H4z"/><path d="M12 6h4v11H8"/></svg><span class="lb">Pages</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M13 13l4 4"/><path d="M4 9a5 5 0 1010 0 5 5 0 10-10 0"/></svg><span class="lb">Search</span></div><div class="pdf-t"><svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="#23221E" stroke-width="1.35" stroke-linecap="square"><path d="M7 6L3 10l4 4"/><path d="M3 10h9a4 4 0 010 8"/></svg><span class="lb">Undo</span></div><div class="pdf-end"><span class="pdf-zoom"><b>FIT WIDTH</b><i>−</i><i>+</i></span></div><div class="pdf-over"><svg width="14" height="14" viewBox="0 0 14 14" fill="#23221E"><circle cx="3" cy="7" r="1.2"/><circle cx="7" cy="7" r="1.2"/><circle cx="11" cy="7" r="1.2"/></svg></div></div><div class="pdf-work"><div class="pdf-strip"><svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="#23221E" stroke-width="1.3"><path d="M4 2l4 4-4 4"/></svg><span class="pn">1</span></div><div class="pdf-canvas"><div class="pdf-page"><h1 class="pdf-h">MMD STEEL GROUP — DELIVERY NOTE</h1><p class="pdf-p">Supplier: Fabrimetal SARL<br>Reference: BON-2026-0847<br>Quantity delivered: 12 tonnes<br>Vehicle: DK-4471-AB · Driver: M. Sow<br><br>Received by: ______________________<br><br>Dakar plant · corridor freight · weighbridge ticket WB-4471</p></div></div></div><div class="pdf-status"><span class="">Ready</span><span class="r">1 OF 1 · FIT WIDTH · 100%</span></div></div></x-dc>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,413 @@
|
||||
#!/usr/bin/env python3
|
||||
"""MMD PDF — design pages for the desktop editor at 800x600.
|
||||
|
||||
Stylesheet: the red-plate MMD shell design system, lifted verbatim from its
|
||||
own source (portal-redesign session, canvas/build.mjs). Not retyped.
|
||||
|
||||
The screen budget at 800x600 drives every decision here:
|
||||
600 - 28 title bar - 20 status bar = 552px for toolbar + document.
|
||||
800 - page rail = document width.
|
||||
A PDF editor carries about thirty tools. Thirty labelled tools need ~1400px.
|
||||
Three directions resolve that differently; A/B/C are real alternatives, not
|
||||
cosmetic variants of one answer.
|
||||
"""
|
||||
import json, os
|
||||
|
||||
OUT = os.path.dirname(os.path.abspath(__file__))
|
||||
RP = open(os.path.join(OUT, "redplate.css")).read()
|
||||
W, H = 800, 600
|
||||
|
||||
EXT = """
|
||||
/* ---- MMD PDF: the parts the shell system has no component for yet ------
|
||||
Named for adoption into the design system, not invented per screen.
|
||||
Every colour below is a red-plate value; nothing new is introduced. */
|
||||
.pdf{width:800px;height:600px;display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #767368;box-shadow:0 6px 16px rgba(35,34,30,0.26);overflow:hidden}
|
||||
|
||||
/* tool strip */
|
||||
.pdf-tools{display:flex;align-items:stretch;background:#F1F1EC;border-bottom:1px solid #D7D6CE}
|
||||
.pdf-t{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:44px;color:#23221E;flex:none}
|
||||
.pdf-t .lb{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.01em;text-transform:uppercase;line-height:1;white-space:nowrap}
|
||||
.pdf-t.on{background:#C8102E;color:#FFFFFF}
|
||||
.pdf-t.dim{color:#767368}
|
||||
.pdf-rule{width:1px;background:#D7D6CE;margin:6px 3px;flex:none}
|
||||
.pdf-end{margin-left:auto;display:flex;align-items:center;gap:5px;padding:0 6px;flex:none}
|
||||
.pdf-zoom{display:flex;align-items:center;border:1px solid #C7C6BD;background:#FFFFFF}
|
||||
.pdf-zoom b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;font-weight:500;color:#23221E;padding:0 7px;line-height:19px}
|
||||
.pdf-zoom i{width:19px;line-height:19px;text-align:center;font-style:normal;font-size:11px;color:#23221E;border-left:1px solid #C7C6BD}
|
||||
.pdf-over{width:26px;display:flex;align-items:center;justify-content:center;color:#23221E;border-left:1px solid #D7D6CE;flex:none}
|
||||
|
||||
/* icon-only strip (direction B) */
|
||||
.pdf-tools--icons .pdf-t{width:28px}
|
||||
.pdf-tools--icons .pdf-t .lb{display:none}
|
||||
/* tab strip (direction C) */
|
||||
.pdf-tabs{display:flex;align-items:stretch;background:#E4E3DC;border-bottom:1px solid #D7D6CE;padding:0 4px}
|
||||
.pdf-tab{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:#767368;padding:0 11px;line-height:21px}
|
||||
.pdf-tab.on{background:#FFFFFF;color:#23221E;font-weight:600;border-top:2px solid #C8102E;line-height:19px}
|
||||
|
||||
/* context bar — only present while a tool is armed */
|
||||
.pdf-ctx{display:flex;align-items:center;gap:9px;height:28px;padding:0 9px;background:#FAFAF8;border-bottom:1px solid #E6E5DF;font-size:10px;color:#3C3A34}
|
||||
.pdf-ctx .lbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.pdf-sw{display:flex;gap:3px}
|
||||
.pdf-sw i{width:12px;height:12px;display:block;border:1px solid #C7C6BD}
|
||||
.pdf-sw i.on{outline:1px solid #23221E;outline-offset:1px}
|
||||
.pdf-pick{border:1px solid #C7C6BD;background:#FFFFFF;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#23221E;padding:1px 6px}
|
||||
|
||||
/* work area */
|
||||
.pdf-work{flex:1;display:flex;min-height:0}
|
||||
.pdf-strip{width:26px;flex:none;background:#E4E3DC;border-right:1px solid #D7D6CE;display:flex;flex-direction:column;align-items:center;gap:7px;padding-top:7px}
|
||||
.pdf-strip .pn{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#23221E;line-height:1.25;text-align:center}
|
||||
.pdf-rail{width:88px;flex:none;background:#E4E3DC;border-right:1px solid #D7D6CE;overflow:hidden}
|
||||
.pdf-rail-h{display:flex;gap:8px;padding:6px 7px 4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.pdf-rail-h .on{color:#23221E;font-weight:700}
|
||||
.pdf-pg{margin:0 7px 5px;background:#FFFFFF;border:1px solid #C7C6BD}
|
||||
.pdf-pg.here{box-shadow:inset 3px 0 0 #C8102E}
|
||||
.pdf-pg .mini{height:64px;padding:5px 6px;overflow:hidden}
|
||||
.pdf-pg .mini i{display:block;background:#C7C6BD;height:2px;margin-bottom:3px}
|
||||
.pdf-pg .mini i.t{background:#23221E;height:3px;width:74%;margin-bottom:5px}
|
||||
.pdf-pg .mini i.s{width:52%}
|
||||
.pdf-pg .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;text-align:center;color:#3C3A34;line-height:16px;border-top:1px solid #E6E5DF}
|
||||
.pdf-canvas{flex:1;background:#F3F3F0;display:flex;justify-content:center;overflow:hidden;padding:9px 0 0}
|
||||
.pdf-page{width:100%;max-width:560px;background:#FFFFFF;border:1px solid #C7C6BD;padding:28px 34px}
|
||||
|
||||
/* status */
|
||||
.pdf-status{display:flex;align-items:center;gap:12px;height:23px;padding:0 8px;background:#F1F1EC;border-top:1px solid #D7D6CE;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#3C3A34;flex:none}
|
||||
.pdf-status .sep{width:1px;height:11px;background:#C7C6BD}
|
||||
.pdf-status .r{margin-left:auto;color:#6B6A64}
|
||||
.pdf-status .warn{color:#C8102E}
|
||||
|
||||
/* document body */
|
||||
.pdf-h{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:14px;color:#23221E;margin:0 0 13px}
|
||||
.pdf-p{font-size:10.5px;color:#3C3A34;line-height:1.9;margin:0}
|
||||
.pdf-live{display:inline-block;padding:0 4px;border:1px solid #C8102E;background:#FBEEF0;color:#23221E}
|
||||
|
||||
/* dialog */
|
||||
.pdf-behind{position:absolute;inset:0}
|
||||
.pdf-behind::after{content:"";position:absolute;inset:0;background:rgba(35,34,30,0.28)}
|
||||
.pdf-over-scrim{position:relative;width:800px;height:600px;display:flex;align-items:center;justify-content:center;overflow:hidden}
|
||||
.pdf-over-scrim .pdf-dlg{position:relative;z-index:2}
|
||||
.pdf-dlg{width:404px;background:#FFFFFF;border:1px solid #767368;box-shadow:0 6px 16px rgba(35,34,30,0.26)}
|
||||
.pdf-dlg-t{display:flex;align-items:center;height:26px;padding:0 10px;background:#FFFFFF;color:#23221E;border-bottom:2px solid #23221E;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:11.5px}
|
||||
.pdf-dlg-b{padding:13px 15px;display:flex;flex-direction:column;gap:10px;font-size:10.5px;color:#3C3A34}
|
||||
.pdf-dlg-a{display:flex;justify-content:flex-end;gap:6px;padding:0 15px 13px}
|
||||
.pdf-kv{display:grid;grid-template-columns:82px 1fr;gap:4px 10px;align-items:baseline}
|
||||
.pdf-kv .k{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.09em;text-transform:uppercase;color:#767368}
|
||||
.pdf-in{border:1px solid #C7C6BD;background:#FFFFFF;padding:3px 7px;font-size:10.5px;color:#23221E;display:flex;align-items:center}
|
||||
.pdf-in .cv{margin-left:auto;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;color:#767368}
|
||||
|
||||
/* direction board */
|
||||
.board{width:800px;background:#F3F3F0;padding:11px;display:flex;flex-direction:column;gap:11px}
|
||||
.board h3{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12.5px;color:#23221E;margin:0}
|
||||
.board .why{font-size:10px;color:#3C3A34;margin:0}
|
||||
.board .cost{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:#767368;margin:0}
|
||||
.board .card{background:#FFFFFF;border:1px solid #C7C6BD;padding:9px 10px;display:flex;flex-direction:column;gap:6px}
|
||||
.board .strip{border:1px solid #D7D6CE}
|
||||
"""
|
||||
|
||||
# ── icons: one 20px grid, stroke only ────────────────────────────────────────
|
||||
P = {
|
||||
"Open": ['M2 6h6l2 2h8v9H2z'],
|
||||
"Save": ['M3 3h11l3 3v11H3z', 'M6 3v5h7V3', 'M6 17v-5h8v5'],
|
||||
"Print": ['M6 8V3h8v5', 'M3 8h14v6h-3v4H6v-4H3z'],
|
||||
"Scan": ['M3 5V3h4', 'M17 5V3h-4', 'M3 15v2h4', 'M17 15v2h-4', 'M2 10h16'],
|
||||
"OCR": ['M3 6V3h3', 'M17 6V3h-3', 'M3 14v3h3', 'M17 14v3h-3', 'M6 9h8', 'M6 12h5'],
|
||||
"Select": ['M5 3l11 8-5 1 3 5-2 1-3-5-4 3z'],
|
||||
"Text": ['M4 5h12', 'M10 5v11'],
|
||||
"Mark": ['M4 15l3-9h2l3 9', 'M6 12h5', 'M14 15h3'],
|
||||
"Draw": ['M3 17l3-1 9-9-2-2-9 9z'],
|
||||
"Shape": ['M3 8h8v8H3z', 'M11 4h6v6h-6z'],
|
||||
"Sign": ['M3 14c3-6 5 3 7-2s4 2 7-3', 'M3 17h14'],
|
||||
"Stamp": ['M6 16h8', 'M7 13h6l-1-5a2 2 0 10-4 0z'],
|
||||
"Image": ['M3 4h14v12H3z', 'M3 13l4-4 3 3 3-3 4 4'],
|
||||
"Crop": ['M6 2v12h12', 'M2 6h12v12'],
|
||||
"Pages": ['M4 3h8v14H4z', 'M12 6h4v11H8'],
|
||||
"Search": ['M13 13l4 4', 'M4 9a5 5 0 1010 0 5 5 0 10-10 0'],
|
||||
"Undo": ['M7 6L3 10l4 4', 'M3 10h9a4 4 0 010 8'],
|
||||
"Redo": ['M13 6l4 4-4 4', 'M17 10H8a4 4 0 000 8'],
|
||||
"Merge": ['M3 5h6v4H3z', 'M11 11h6v4h-6z', 'M6 9v3h5'],
|
||||
"Flatten":['M6 3h8v7H6z', 'M3 13h14', 'M3 16h14'],
|
||||
}
|
||||
|
||||
|
||||
def ico(n, on=False, dim=False):
|
||||
col = "#FFFFFF" if on else ("#767368" if dim else "#23221E")
|
||||
d = "".join(f'<path d="{p}"/>' for p in P.get(n, ['M4 4h12v12H4z']))
|
||||
return (f'<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="{col}" '
|
||||
f'stroke-width="1.35" stroke-linecap="square">{d}</svg>')
|
||||
|
||||
|
||||
def T(n, on=False, dim=False):
|
||||
c = "pdf-t on" if on else ("pdf-t dim" if dim else "pdf-t")
|
||||
return f'<div class="{c}">{ico(n, on, dim)}<span class="lb">{n}</span></div>'
|
||||
|
||||
|
||||
ZOOM = ('<span class="pdf-zoom"><b>FIT WIDTH</b><i>−</i><i>+</i></span>')
|
||||
OVER = ('<div class="pdf-over"><svg width="14" height="14" viewBox="0 0 14 14" fill="#23221E">'
|
||||
'<circle cx="3" cy="7" r="1.2"/><circle cx="7" cy="7" r="1.2"/><circle cx="11" cy="7" r="1.2"/></svg></div>')
|
||||
|
||||
|
||||
def title(name="BON-2026-0847 delivery note.pdf", tag=""):
|
||||
t = f'<span class="new">{tag}</span>' if tag else ''
|
||||
return (f'<div class="w-title"><img class="mmd-logo" src="mmd-logo-red.svg" alt="MMD" '
|
||||
f'style="height:13px"><span class="app">MMD PDF</span>'
|
||||
f'<span class="name">{name}</span>{t}<span class="spring"></span>'
|
||||
f'<span class="ctl"><span>−</span><span>◻</span><span>×</span></span></div>')
|
||||
|
||||
|
||||
def strip_collapsed(n="1"):
|
||||
return (f'<div class="pdf-strip"><svg width="11" height="11" viewBox="0 0 12 12" fill="none" '
|
||||
f'stroke="#23221E" stroke-width="1.3"><path d="M4 2l4 4-4 4"/></svg>'
|
||||
f'<span class="pn">{n}</span></div>')
|
||||
|
||||
|
||||
def rail_open(pages=("1", "2", "3")):
|
||||
pg = "".join(
|
||||
f'<div class="pdf-pg{" here" if i == 0 else ""}"><div class="mini">'
|
||||
f'<i class="t"></i><i></i><i></i><i class="s"></i><i></i></div>'
|
||||
f'<div class="n">{p}</div></div>' for i, p in enumerate(pages))
|
||||
return (f'<div class="pdf-rail"><div class="pdf-rail-h"><span class="on">Pages</span>'
|
||||
f'<span>Marks</span></div>{pg}</div>')
|
||||
|
||||
|
||||
DOC = ('<h1 class="pdf-h">MMD STEEL GROUP — DELIVERY NOTE</h1>'
|
||||
'<p class="pdf-p">Supplier: Fabrimetal SARL<br>Reference: BON-2026-0847<br>'
|
||||
'Quantity delivered: 12 tonnes<br>Vehicle: DK-4471-AB · Driver: M. Sow<br><br>'
|
||||
'Received by: ______________________<br><br>'
|
||||
'Dakar plant · corridor freight · weighbridge ticket WB-4471</p>')
|
||||
|
||||
DOC_EDIT = ('<h1 class="pdf-h">MMD STEEL GROUP — DELIVERY NOTE</h1>'
|
||||
'<p class="pdf-p">Supplier: Fabrimetal SARL<br>Reference: BON-2026-0847<br>'
|
||||
'<span class="pdf-live">Quantity delivered: 19 tonnes</span><br>'
|
||||
'Vehicle: DK-4471-AB · Driver: M. Sow<br><br>'
|
||||
'Received by: ______________________<br><br>'
|
||||
'Dakar plant · corridor freight · weighbridge ticket WB-4471</p>')
|
||||
|
||||
|
||||
def status(left, right, warn=False):
|
||||
cls = "warn" if warn else ""
|
||||
return (f'<div class="pdf-status"><span class="{cls}">{left}</span>'
|
||||
f'<span class="r">{right}</span></div>')
|
||||
|
||||
|
||||
HEAD = """<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600&display=swap">
|
||||
<style>
|
||||
%s
|
||||
%s
|
||||
</style>
|
||||
</helmet>
|
||||
""" % (RP, EXT)
|
||||
TAIL = "</x-dc>\n</body>\n</html>\n"
|
||||
|
||||
|
||||
def w(name, inner):
|
||||
open(os.path.join(OUT, name), "w", encoding="utf-8").write(HEAD + inner + TAIL)
|
||||
|
||||
|
||||
# ── Direction A: one labelled strip, fourteen tools, rest behind overflow ────
|
||||
A_TOOLS = ["Open", "Save", "Print", "Scan", "OCR"]
|
||||
A_EDIT = ["Select", "Text", "Mark", "Draw", "Shape", "Sign"]
|
||||
A_DOC = ["Pages", "Search", "Undo"]
|
||||
|
||||
|
||||
def strip_A(active="Select", h=40):
|
||||
return (f'<div class="pdf-tools" style="height:{h}px">'
|
||||
+ "".join(T(t) for t in A_TOOLS) + '<span class="pdf-rule"></span>'
|
||||
+ "".join(T(t, t == active) for t in A_EDIT) + '<span class="pdf-rule"></span>'
|
||||
+ "".join(T(t) for t in A_DOC)
|
||||
+ f'<div class="pdf-end">{ZOOM}</div>{OVER}</div>')
|
||||
|
||||
|
||||
w("Main.dc.html",
|
||||
'<div class="pdf">' + title() + strip_A("Select") +
|
||||
'<div class="pdf-work">' + strip_collapsed() +
|
||||
'<div class="pdf-canvas"><div class="pdf-page">' + DOC + '</div></div></div>' +
|
||||
status("Ready", "1 OF 1 · FIT WIDTH · 100%") + '</div>')
|
||||
|
||||
# ── Editing text, context bar present ───────────────────────────────────────
|
||||
ctx = ('<div class="pdf-ctx"><span class="lbl">Colour</span>'
|
||||
'<span class="pdf-sw"><i class="on" style="background:#23221E"></i>'
|
||||
'<i style="background:#C8102E"></i><i style="background:#3C3A34"></i>'
|
||||
'<i style="background:#767368"></i><i style="background:#FFFFFF"></i></span>'
|
||||
'<span class="lbl">Size</span><span class="pdf-pick">11 pt</span>'
|
||||
'<span class="pdf-pick">B</span><span class="pdf-pick">I</span>'
|
||||
'<span class="spring"></span>'
|
||||
'<span class="lbl">Enter keeps it · Esc throws it away</span></div>')
|
||||
w("EditText.dc.html",
|
||||
'<div class="pdf">' + title(tag="Changed") + strip_A("Text") + ctx +
|
||||
'<div class="pdf-work">' + strip_collapsed() +
|
||||
'<div class="pdf-canvas"><div class="pdf-page">' + DOC_EDIT + '</div></div></div>' +
|
||||
status("The old quantity is removed from the file when you save",
|
||||
"1 OF 1 · FIT WIDTH · 100%", warn=True) + '</div>')
|
||||
|
||||
# ── Rail open, three pages ──────────────────────────────────────────────────
|
||||
w("PageRail.dc.html",
|
||||
'<div class="pdf">' + title("Weighbridge tickets week 34.pdf") + strip_A("Select") +
|
||||
'<div class="pdf-work">' + rail_open() +
|
||||
'<div class="pdf-canvas"><div class="pdf-page">' + DOC + '</div></div></div>' +
|
||||
status("Ready", "1 OF 3 · FIT WIDTH · 100%") + '</div>')
|
||||
|
||||
# ── Nothing open ────────────────────────────────────────────────────────────
|
||||
rows = "".join(
|
||||
f'<tr><td class="ref"{" style=box-shadow:inset~3px~0~0~#C8102E".replace(chr(126),chr(32)) if i == 0 else ""}>{r}</td>'
|
||||
f'<td>{d}</td><td class="num">{n}</td><td><span class="w-state">{s}</span></td></tr>'
|
||||
for i, (r, d, n, s) in enumerate([
|
||||
("BON-2026-0847", "Delivery note — Fabrimetal SARL", "1", "Changed"),
|
||||
("INV-4471", "Supplier invoice — Fabrimetal SARL", "3", "Signed"),
|
||||
("WB-4471", "Weighbridge ticket — Dakar plant", "1", "Scanned"),
|
||||
("INSP-0912", "Mill inspection — Kigali", "8", "Read"),
|
||||
("PO-AO-2231", "Refractory bricks — Vesuvius Angola", "2", "Read"),
|
||||
("BON-2026-0839", "Delivery note — Continental Sahel", "1", "Signed"),
|
||||
("INV-4402", "Freight invoice — corridor Dakar–Bamako", "2", "Read"),
|
||||
("WB-4468", "Weighbridge ticket — Dakar plant", "1", "Scanned"),
|
||||
("PO-SN-24099", "Diesel gensets — Groupe Sénégal Énergie", "4", "Read"),
|
||||
("BON-2026-0831", "Delivery note — SMS Concast", "1", "Read"),
|
||||
("INSP-0908", "Mill inspection — Dakar", "6", "Read"),
|
||||
("WB-4455", "Weighbridge ticket — Dakar plant", "1", "Scanned"),
|
||||
("INV-4377", "Supplier invoice — RHI Magnesita", "3", "Signed"),
|
||||
("PO-RW-24107", "Rolling mill rollers — Danieli Service", "2", "Read"),
|
||||
("BON-2026-0824", "Delivery note — Nexans Angola", "1", "Read"),
|
||||
]))
|
||||
w("Nothing.dc.html",
|
||||
'<div class="pdf">' + title("No document open") +
|
||||
f'<div class="pdf-tools" style="height:40px">'
|
||||
+ "".join(T(t) for t in A_TOOLS) + '<span class="pdf-rule"></span>'
|
||||
+ "".join(T(t, dim=True) for t in A_EDIT) + '<span class="pdf-rule"></span>'
|
||||
+ "".join(T(t, dim=True) for t in A_DOC)
|
||||
+ f'<div class="pdf-end">{ZOOM}</div>{OVER}</div>'
|
||||
+ '<div class="pdf-work"><div class="pdf-canvas" style="padding:0"><div style="width:100%">'
|
||||
'<div class="w-toolbar"><h2 class="w-h1">Recent</h2>'
|
||||
'<span class="w-count">on this machine</span>'
|
||||
'<span class="w-filters"><span class="w-chip">Open a file…</span>'
|
||||
'<span class="w-cta">Scan a document</span></span></div>'
|
||||
'<table class="w-tbl"><thead><tr><th>Reference</th><th>Document</th>'
|
||||
'<th class="num">Pages</th><th>State</th></tr></thead><tbody>' + rows +
|
||||
'</tbody></table></div></div></div>' +
|
||||
status("Pick a document, or scan one", "NOTHING OPEN") + '</div>')
|
||||
|
||||
# ── Saving over the original ────────────────────────────────────────────────
|
||||
|
||||
def behind(doc=DOC, active="Select", st=("Ready", "1 OF 1 · FIT WIDTH · 100%")):
|
||||
return ('<div class="pdf-behind"><div class="pdf" style="box-shadow:none;border:0">'
|
||||
+ title() + strip_A(active)
|
||||
+ '<div class="pdf-work">' + strip_collapsed()
|
||||
+ '<div class="pdf-canvas"><div class="pdf-page">' + doc + '</div></div></div>'
|
||||
+ status(*st) + '</div></div>')
|
||||
|
||||
|
||||
w("Save.dc.html",
|
||||
'<div class="pdf-over-scrim">' + behind(DOC_EDIT, "Text",
|
||||
("The old quantity is removed from the file when you save",
|
||||
"1 OF 1 · FIT WIDTH · 100%")) +
|
||||
'<div class="pdf-dlg">'
|
||||
'<div class="pdf-dlg-t">Save</div><div class="pdf-dlg-b">'
|
||||
'<div>Write the change into <b>BON-2026-0847 delivery note.pdf</b>?</div>'
|
||||
'<div class="pdf-kv">'
|
||||
'<span class="k">Was</span><span>Quantity delivered: 12 tonnes</span>'
|
||||
'<span class="k">Becomes</span><span>Quantity delivered: 19 tonnes</span>'
|
||||
'<span class="k">The old text</span><span>is taken out of the file, not covered over</span>'
|
||||
'</div></div><div class="pdf-dlg-a">'
|
||||
'<span class="w-chip">Cancel</span><span class="w-chip">Keep both</span>'
|
||||
'<span class="w-cta">Replace</span></div></div></div>')
|
||||
|
||||
# ── Scan ────────────────────────────────────────────────────────────────────
|
||||
def field(k, v, note=""):
|
||||
n = f'<span class="cv">{note}</span>' if note else ''
|
||||
return f'<span class="k">{k}</span><span class="pdf-in">{v}{n}</span>'
|
||||
|
||||
|
||||
w("Scan.dc.html",
|
||||
'<div class="pdf-over-scrim">' + behind() + '<div class="pdf-dlg">'
|
||||
'<div class="pdf-dlg-t">Scan</div><div class="pdf-dlg-b">'
|
||||
'<div>Pages arrive in the document you have open.</div>'
|
||||
'<div class="pdf-kv">'
|
||||
+ field("Copier", "Ricoh IM C3000 — Dakar plant", "ready")
|
||||
+ field("Feed", "Both sides")
|
||||
+ field("Colour", "Greyscale")
|
||||
+ field("Detail", "300 dpi", "print")
|
||||
+ '</div>'
|
||||
'<div><span class="w-state">Text search on</span> French and English</div>'
|
||||
'</div><div class="pdf-dlg-a">'
|
||||
'<span class="w-chip">Cancel</span><span class="w-cta">Scan</span></div></div></div>')
|
||||
|
||||
# ── The three directions ────────────────────────────────────────────────────
|
||||
def strip_B(active="Select"):
|
||||
tools = A_TOOLS + A_EDIT + ["Stamp", "Image", "Crop", "Merge", "Flatten"] + A_DOC + ["Redo"]
|
||||
return ('<div class="pdf-tools pdf-tools--icons" style="height:30px">'
|
||||
+ "".join(ico_t(t, t == active) for t in tools)
|
||||
+ f'<div class="pdf-end">{ZOOM}</div></div>')
|
||||
|
||||
|
||||
def ico_t(n, on=False):
|
||||
c = "pdf-t on" if on else "pdf-t"
|
||||
return f'<div class="{c}">{ico(n, on)}</div>'
|
||||
|
||||
|
||||
def strip_C(tab="Edit"):
|
||||
tabs = ("Document", "Edit", "Pages")
|
||||
row = {"Document": A_TOOLS + ["Merge", "Flatten"],
|
||||
"Edit": A_EDIT + ["Stamp", "Image", "Crop"],
|
||||
"Pages": ["Pages", "Search", "Undo", "Redo"]}[tab]
|
||||
return ('<div class="pdf-tabs">' + "".join(
|
||||
f'<span class="pdf-tab{" on" if t == tab else ""}">{t}</span>' for t in tabs)
|
||||
+ '</div><div class="pdf-tools" style="height:34px">'
|
||||
+ "".join(T(t, t == "Select") for t in row)
|
||||
+ f'<div class="pdf-end">{ZOOM}</div></div>')
|
||||
|
||||
|
||||
board = f'''<div class="board">
|
||||
<div class="card">
|
||||
<h3>A — one row, named tools</h3>
|
||||
<div class="strip">{strip_A("Select", 40)}</div>
|
||||
<p class="why">Fourteen tools carry their name. Everything else — stamp, image, crop, merge, flatten, redo — lives behind the three dots on the right.</p>
|
||||
<p class="cost">40px of chrome · 512px left for the page · 16 of 30 tools hidden</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>B — icons only, nothing hidden</h3>
|
||||
<div class="strip">{strip_B("Select")}</div>
|
||||
<p class="why">All thirty fit, name on hover. Fastest once someone knows the icons; a plant clerk opening it for the first time has to guess.</p>
|
||||
<p class="cost">30px of chrome · 522px left for the page · nothing hidden</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>C — three tabs, named tools, nothing hidden</h3>
|
||||
<div class="strip">{strip_C("Edit")}</div>
|
||||
<p class="why">Document, Edit, Pages. Every tool keeps its name and every tool is reachable, at the price of one click to change tab and a second bar of chrome.</p>
|
||||
<p class="cost">56px of chrome · 496px left for the page · nothing hidden, one click deeper</p>
|
||||
</div>
|
||||
</div>'''
|
||||
w("Directions.dc.html", board)
|
||||
|
||||
# ── canvas ──────────────────────────────────────────────────────────────────
|
||||
GX, GY = W + 90, H + 150
|
||||
canvas = {
|
||||
"artboards": [
|
||||
{"file": "Directions.dc.html", "x": 0, "y": 0, "w": W, "h": 470,
|
||||
"title": "Three ways to fit the toolbar — pick one"},
|
||||
{"file": "Main.dc.html", "x": GX, "y": 0, "w": W, "h": H, "title": "A document open"},
|
||||
{"file": "EditText.dc.html", "x": 2 * GX, "y": 0, "w": W, "h": H, "title": "Changing text on the page"},
|
||||
{"file": "PageRail.dc.html", "x": 0, "y": GY, "w": W, "h": H, "title": "Page list open"},
|
||||
{"file": "Nothing.dc.html", "x": GX, "y": GY, "w": W, "h": H, "title": "Nothing open yet"},
|
||||
{"file": "Save.dc.html", "x": 2 * GX, "y": GY, "w": W, "h": H, "title": "Saving over the original"},
|
||||
{"file": "Scan.dc.html", "x": GX, "y": 2 * GY, "w": W, "h": H, "title": "Scanning — not built yet"},
|
||||
],
|
||||
"annotations": [
|
||||
{"id": "brief", "x": 0, "y": -150, "w": 660,
|
||||
"text": "MMD PDF — the Windows PDF editor for staff.\nEvery frame is 800x600, the plant PC screen. Styling is the new MMD shell system, taken from its own source. Official MMD lockup only.\n600 minus 28 title bar minus 20 status bar leaves 552px for toolbar and page."},
|
||||
{"id": "decision", "x": 0, "y": 490, "w": 620,
|
||||
"text": "The one thing that needs your answer: a PDF editor has about thirty tools and thirty named tools need roughly 1400px. A, B and C give up different things. Mark the one you want and the rest follows from it."},
|
||||
{"id": "scan-note", "x": GX, "y": 2 * GY - 90, "w": 420,
|
||||
"text": "Scanning does not exist in the application yet. This is the design for it, not a picture of something that works."},
|
||||
{"id": "edit-note", "x": 2 * GX, "y": -90, "w": 430,
|
||||
"text": "This is the moment the old wording is destroyed. The status bar says so, and Enter/Esc are spelled out because both were guessed wrong during testing."},
|
||||
],
|
||||
"launch": {"view": "canvas"},
|
||||
}
|
||||
json.dump(canvas, open(os.path.join(OUT, "canvas.json"), "w"), indent=2)
|
||||
print("written 7 artboards")
|
||||
@@ -0,0 +1,93 @@
|
||||
{
|
||||
"artboards": [
|
||||
{
|
||||
"file": "Directions.dc.html",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"w": 800,
|
||||
"h": 470,
|
||||
"title": "Three ways to fit the toolbar \u2014 pick one"
|
||||
},
|
||||
{
|
||||
"file": "Main.dc.html",
|
||||
"x": 890,
|
||||
"y": 0,
|
||||
"w": 800,
|
||||
"h": 600,
|
||||
"title": "A document open"
|
||||
},
|
||||
{
|
||||
"file": "EditText.dc.html",
|
||||
"x": 1780,
|
||||
"y": 0,
|
||||
"w": 800,
|
||||
"h": 600,
|
||||
"title": "Changing text on the page"
|
||||
},
|
||||
{
|
||||
"file": "PageRail.dc.html",
|
||||
"x": 0,
|
||||
"y": 750,
|
||||
"w": 800,
|
||||
"h": 600,
|
||||
"title": "Page list open"
|
||||
},
|
||||
{
|
||||
"file": "Nothing.dc.html",
|
||||
"x": 890,
|
||||
"y": 750,
|
||||
"w": 800,
|
||||
"h": 600,
|
||||
"title": "Nothing open yet"
|
||||
},
|
||||
{
|
||||
"file": "Save.dc.html",
|
||||
"x": 1780,
|
||||
"y": 750,
|
||||
"w": 800,
|
||||
"h": 600,
|
||||
"title": "Saving over the original"
|
||||
},
|
||||
{
|
||||
"file": "Scan.dc.html",
|
||||
"x": 890,
|
||||
"y": 1500,
|
||||
"w": 800,
|
||||
"h": 600,
|
||||
"title": "Scanning \u2014 not built yet"
|
||||
}
|
||||
],
|
||||
"annotations": [
|
||||
{
|
||||
"id": "brief",
|
||||
"x": 0,
|
||||
"y": -150,
|
||||
"w": 660,
|
||||
"text": "MMD PDF \u2014 the Windows PDF editor for staff.\nEvery frame is 800x600, the plant PC screen. Styling is the new MMD shell system, taken from its own source. Official MMD lockup only.\n600 minus 28 title bar minus 20 status bar leaves 552px for toolbar and page."
|
||||
},
|
||||
{
|
||||
"id": "decision",
|
||||
"x": 0,
|
||||
"y": 490,
|
||||
"w": 620,
|
||||
"text": "The one thing that needs your answer: a PDF editor has about thirty tools and thirty named tools need roughly 1400px. A, B and C give up different things. Mark the one you want and the rest follows from it."
|
||||
},
|
||||
{
|
||||
"id": "scan-note",
|
||||
"x": 890,
|
||||
"y": 1410,
|
||||
"w": 420,
|
||||
"text": "Scanning does not exist in the application yet. This is the design for it, not a picture of something that works."
|
||||
},
|
||||
{
|
||||
"id": "edit-note",
|
||||
"x": 1780,
|
||||
"y": -90,
|
||||
"w": 430,
|
||||
"text": "This is the moment the old wording is destroyed. The status bar says so, and Enter/Esc are spelled out because both were guessed wrong during testing."
|
||||
}
|
||||
],
|
||||
"launch": {
|
||||
"view": "canvas"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 16 KiB |
@@ -0,0 +1,103 @@
|
||||
|
||||
body{margin:0;background:#F3F3F0;font-family:"PP Neue Machina","Neue Machina",system-ui,-apple-system,"Segoe UI",sans-serif;color:#3C3A34;-webkit-font-smoothing:antialiased}
|
||||
a{color:#C8102E} a:hover{color:#8E0B20}
|
||||
*{box-sizing:border-box}
|
||||
.root{padding:16px;background:#F3F3F0}
|
||||
.shell{width:1180px;display:flex;flex-direction:column;font-size:11.5px;background:#FFFFFF;border:1px solid #C7C6BD}
|
||||
.s-title{display:flex;align-items:center;gap:10px;padding:0 10px;height:30px;background:#C8102E;color:#fff;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:12.5px}
|
||||
.s-title .mmd-logo{height:19px;width:auto;display:block;flex:none;fill:#fff}
|
||||
.spring{flex:1}
|
||||
.s-who{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.07em;text-transform:uppercase;color:rgba(255,255,255,0.85)}
|
||||
.s-signout{font-size:10px;padding:1px 0;color:#fff;text-decoration:underline;text-underline-offset:2px}
|
||||
.s-bar{display:flex;align-items:stretch;gap:2px;padding:0 5px;background:#F7F7F3;border-bottom:1px solid #D7D6CE}
|
||||
.s-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:11px;white-space:nowrap;border:1px solid transparent;color:#3C3A34}
|
||||
.s-item .cv{font-size:8px;opacity:0.5}
|
||||
.s-item .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;padding:0 4px;border:1px solid #23221E;color:#23221E;background:#FFFFFF;line-height:13px}
|
||||
.s-item.on{background:#FFFFFF;border-color:#D7D6CE;border-top:2px solid #C8102E;border-bottom-color:#FFFFFF;margin-bottom:-1px;font-weight:700;color:#23221E}
|
||||
.s-item.on .n{border-color:#23221E;color:#23221E}
|
||||
.s-tools{margin-left:auto;display:flex;align-items:center;gap:6px;padding-right:4px}
|
||||
.s-search{width:168px;padding:2px 7px;font-size:10.5px;background:#FFFFFF;border:1px solid #C7C6BD;color:#23221E}
|
||||
.s-btn{padding:2px 9px;font-size:10.5px;background:#FFFFFF;border:1px solid #C7C6BD;color:#23221E}
|
||||
.s-desk{position:relative;background:#D4D0C6;overflow:hidden}
|
||||
.s-desk.tiled{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:10px;padding:10px;align-items:start}
|
||||
.s-desk.stacked{height:492px}
|
||||
.s-desk.oneup{padding:10px}
|
||||
.s-task{display:flex;align-items:center;gap:10px;padding:4px 8px;font-size:10.5px;background:#F1F1EC;border-top:1px solid #D7D6CE}
|
||||
.s-task .lbl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:#767368}
|
||||
.s-group{display:inline-flex;align-items:stretch;border:1px solid #D7D6CE;background:#FFFFFF}
|
||||
.s-group .app{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#767368;padding:2px 7px;border-right:1px solid #D7D6CE;display:flex;align-items:center;background:#F7F7F3}
|
||||
.s-group .win{padding:2px 8px;font-size:10px;color:#23221E;border-right:1px solid #D7D6CE;display:flex;align-items:center;gap:5px;background:#F1F1EC}
|
||||
.s-group .win:last-child{border-right:0}
|
||||
.s-group .win.on{box-shadow:inset 3px 0 0 #C8102E;font-weight:700;background:#FFFFFF}
|
||||
.s-group .win.min{color:#3C3A34;background:#FFFFFF;outline:1px dashed #6B6A64;outline-offset:-3px}
|
||||
|
||||
.s-task .tile{font-size:10px;padding:1px 8px;border:1px solid #C7C6BD;background:#FFFFFF;color:#3C3A34}
|
||||
/* windows — title bar made visible: darker plate, ink name, clear border; front = red top edge + shadow */
|
||||
.win-frame{background:#FFFFFF;border:1px solid #B9B8AE;display:flex;flex-direction:column;min-width:0;box-shadow:0 1px 2px rgba(35,34,30,0.12)}
|
||||
.win-frame.front{border-color:#767368;box-shadow:0 6px 16px rgba(35,34,30,0.26)}
|
||||
.stacked .win-frame{position:absolute}
|
||||
.w-title{display:flex;align-items:center;gap:8px;height:28px;padding:0 6px 0 8px;background:#E4E3DC;border-bottom:1px solid #C9C6BC;font-size:11px;color:#3C3A34}
|
||||
.front .w-title{background:#FFFFFF;color:#23221E;border-top:3px solid #C8102E;height:31px}
|
||||
.w-title .app{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.1em;text-transform:uppercase;color:#23221E;font-weight:700}
|
||||
.w-title .app::after{content:"/";margin-left:8px;color:#6B6A64}
|
||||
.w-title .name{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:12px;color:#3C3A34}
|
||||
.front .w-title .name{color:#23221E;font-weight:700}
|
||||
.w-title .new{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:#23221E;background:#E4E3DC;padding:0 6px;line-height:15px}
|
||||
.w-title .ctl{display:flex;gap:8px}
|
||||
.w-title .ctl span{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:#23221E;background:transparent;border:0}
|
||||
.w-body{padding:0;overflow:hidden}
|
||||
.w-toolbar{display:flex;align-items:center;gap:8px;padding:5px 8px;background:#FAFAF8;border-bottom:1px solid #E6E5DF}
|
||||
.w-h1{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:13px;letter-spacing:-0.01em;margin:0;color:#23221E}
|
||||
.w-count{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#6B6A64}
|
||||
.w-count b{color:#C8102E;font-weight:600}
|
||||
.w-filters{margin-left:auto;display:flex;gap:4px}
|
||||
.w-chip{padding:1px 7px;font-size:9.5px;font-family:"JetBrains Mono",ui-monospace,monospace;border:1px solid #D7D6CE;background:#FFFFFF;color:#3C3A34}
|
||||
.w-chip.on{border-color:#767368;color:#23221E;font-weight:600}
|
||||
.w-cta{padding:2px 9px;font-size:10px;background:#C8102E;color:#FFFFFF;border:1px solid #C8102E;font-weight:600}
|
||||
table.w-tbl{width:100%;border-collapse:collapse;font-size:10.5px;background:#FFFFFF}
|
||||
.w-tbl th{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;text-align:left;padding:4px 8px;white-space:nowrap;background:#F1F1EC;color:#23221E;border-bottom:1px solid #D7D6CE;border-right:1px solid #E6E5DF}
|
||||
.w-tbl td{padding:4px 8px;border-bottom:1px solid #E6E5DF;border-right:1px solid #E6E5DF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
|
||||
.w-tbl td:last-child,.w-tbl th:last-child{border-right:0}
|
||||
.w-tbl tr:nth-child(even) td{background:#FAFAF8}
|
||||
.w-tbl td.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right}
|
||||
.w-tbl th.num{text-align:right}
|
||||
.w-tbl td.ref{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.03em}
|
||||
.w-tbl tr.sel td{background:#F7F7F3;box-shadow:inset 3px 0 0 #C8102E}
|
||||
.w-state{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.07em;text-transform:uppercase;padding:1px 5px;background:#F1F1EC;color:#23221E}
|
||||
.rec{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0}
|
||||
.rec .col{padding:6px 10px 8px;border-right:1px solid #E6E5DF}
|
||||
.rec .col:last-child{border-right:0}
|
||||
.rec h4{margin:4px 0 4px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.12em;text-transform:uppercase;color:#767368;font-weight:600;border-bottom:1px solid #E6E5DF;padding-bottom:3px}
|
||||
.kv{display:grid;grid-template-columns:96px 1fr;gap:2px 8px;font-size:10.5px;margin:0}
|
||||
.kv dt{color:#767368}
|
||||
.kv dd{margin:0;color:#23221E}
|
||||
.kv dd.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;font-variant-numeric:tabular-nums}
|
||||
.rec-actions{display:flex;gap:6px;padding:6px 10px;border-top:1px solid #E6E5DF;background:#FAFAF8}
|
||||
.rec-actions span{padding:2px 9px;font-size:10px;border:1px solid #C7C6BD;background:#FFFFFF;color:#23221E}
|
||||
.rec-actions span.primary{color:#FFFFFF;background:#C8102E;border:1px solid #C8102E;font-weight:600}
|
||||
.steps{display:flex;gap:0;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.06em;text-transform:uppercase;border-bottom:1px solid #E6E5DF}
|
||||
.steps span{padding:3px 8px;border-right:1px solid #E6E5DF;color:#6B6A64}
|
||||
.steps span.done{color:#767368}
|
||||
.steps span.now{color:#C8102E;font-weight:700;box-shadow:inset 0 -2px 0 #C8102E}
|
||||
.rep{padding:6px 10px}
|
||||
.rep .row{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:4px 0;border-bottom:1px solid #E6E5DF;font-size:10.5px}
|
||||
.rep .row:last-child{border-bottom:0}
|
||||
.rep .name{color:#23221E;font-weight:600}
|
||||
.rep .name small{display:block;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:0.08em;text-transform:uppercase;color:#6B6A64;font-weight:400}
|
||||
.rep .hl{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;color:#3C3A34;font-variant-numeric:tabular-nums}
|
||||
/* title-bar option closeups */
|
||||
.opt{width:600px;padding:16px;background:#D4D0C6}
|
||||
.opt .cap{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:#767368;margin:0 0 8px}
|
||||
.opt .win-frame{margin-bottom:14px}
|
||||
.opt .win-frame:last-child{margin-bottom:0}
|
||||
/* Option B: ink strip */
|
||||
.optB .front .w-title{background:#3C3A34;color:#fff;border-top:0;height:28px;border-bottom:1px solid #23221E}
|
||||
.optB .front .w-title .name{color:#fff}
|
||||
.optB .front .w-title .app{color:#fff}
|
||||
.optB .front .w-title .app::after{color:rgba(255,255,255,0.35)}
|
||||
.optB .front .w-title .ctl span{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6)}
|
||||
.optB .front .w-title .new{color:#fff;border-color:rgba(255,255,255,0.7)}
|
||||
/* Option C: ruled */
|
||||
.optC .w-title{background:#FFFFFF;border-bottom:2px solid #23221E;height:28px}
|
||||
.optC .front .w-title{background:#FFFFFF;border-top:3px solid #C8102E;height:31px;border-bottom:2px solid #23221E}
|
||||
.optC .win-frame{border-color:#23221E}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Reference in New Issue
Block a user