Joshua KingandClaude Opus 5
d9ed1898b9
Tokens (light + dark, neumorphism, 54/54 WCAG AA contrast pairs), the self-hosted JetBrains Mono fonts, and interactive mockups of every screen across three iterations. Iteration 3 is final: phone, tablet and desktop tiers, device preview, and "empty spool weight" terminology. The build scripts regenerate the screens byte-identically from source. Implementation is tracked in Maestro feature UI Refresh - V3.0 (224b72a1-8d84-4970-97ea-5dafa4d8ea3b). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
73 lines
2.5 KiB
Python
73 lines
2.5 KiB
Python
"""Iteration 2: assemble self-contained pages.
|
|
|
|
Each screen = v3 tokens (fonts inlined as base64) + iteration-1 app.css
|
|
utilities + components.css + page CSS, then data.js + app.js + page script.
|
|
Run: python3 build.py (writes ../screens/*.html)
|
|
"""
|
|
import base64, pathlib, re
|
|
|
|
HERE = pathlib.Path(__file__).resolve().parent
|
|
ROOT = HERE.parent.parent # ~/Design/extrudex-v3
|
|
OUT = HERE.parent / 'screens'
|
|
OUT.mkdir(exist_ok=True)
|
|
|
|
tokens = (ROOT / 'design-system-v3.css').read_text()
|
|
tokens = re.sub(r"url\('\./fonts/([^']+)'\)",
|
|
lambda m: "url('data:font/woff2;base64," + base64.b64encode((ROOT / 'fonts' / m.group(1)).read_bytes()).decode() + "')",
|
|
tokens)
|
|
base_css = (ROOT / 'source' / 'app.css').read_text()
|
|
comp_css = (HERE / 'components.css').read_text()
|
|
data_js = (HERE / 'data.js').read_text()
|
|
app_js = (HERE / 'app.js').read_text()
|
|
|
|
THEME = """<script>
|
|
(function () { var t = null; try { t = localStorage.getItem('extrudex-v3-theme'); } catch (e) {}
|
|
var q = /[?&]theme=(light|dark)/.exec(location.search); if (q) t = q[1];
|
|
if (t !== 'light' && t !== 'dark') t = window.matchMedia && matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
|
|
document.documentElement.setAttribute('data-theme', t); })();
|
|
</script>"""
|
|
|
|
def build(slug, title, desc):
|
|
src = (HERE / 'pages' / f'{slug}.html').read_text()
|
|
css = ''.join(re.findall(r'<style>(.*?)</style>', src, re.S))
|
|
js = ''.join(re.findall(r'<script>(.*?)</script>', src, re.S))
|
|
html = f"""<!doctype html>
|
|
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{title}</title>
|
|
<meta name="description" content="{desc}">
|
|
{THEME}
|
|
<style>
|
|
{tokens}
|
|
{base_css}
|
|
{comp_css}
|
|
{css}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
{data_js}
|
|
{app_js}
|
|
</script>
|
|
<script>
|
|
{js}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|
|
(OUT / f'{slug}.html').write_text(html)
|
|
print(slug, len(html) // 1024, 'KB')
|
|
|
|
PAGES = [
|
|
('index', 'Extrudex Flow Map', 'How the iteration-2 screens connect, with guided flows.'),
|
|
('01-dashboard', 'Extrudex Dashboard', 'Attention-first dashboard, iteration 2.'),
|
|
('02-filament', 'Extrudex Filament', 'Filament inventory with drawer, filters and weigh session, iteration 2.'),
|
|
('03-prints', 'Extrudex Prints', 'Print history and attribution queue, iteration 2.'),
|
|
('04-printers', 'Extrudex Printers', 'Printers with holders, load flow and connection state, iteration 2.'),
|
|
]
|
|
for p in PAGES:
|
|
if (HERE / 'pages' / f'{p[0]}.html').exists():
|
|
build(*p)
|