adebaumann/44-Scale
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Paths/Text output mode toggle with descriptions

Browse Source
This commit is contained in:
Adrian A. Baumann
2026-07-12 14:44:17 +02:00
parent 6e9cd9109c
commit 624aa8828e
3 changed files with 126 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/templates/index.html
+68
View File
@@ -131,12 +131,42 @@
.field input:focus { border-color: var(--accent); }
/* ── Mode toggle ── */
.mode-toggle {
display: inline-flex;
border: 1px solid var(--rule);
border-radius: 1px;
overflow: hidden;
}
.mode-btn {
font-family: var(--f-mono);
font-size: 0.72rem;
padding: 0.35rem 0.85rem;
border: none;
background: var(--white);
color: var(--muted);
cursor: pointer;
transition: background 0.12s, color 0.12s;
line-height: 1;
}
.mode-btn + .mode-btn {
border-left: 1px solid var(--rule);
}
.mode-btn.active {
background: var(--ink);
color: var(--white);
}
/* ── Actions ── */
.actions {
display: flex;
gap: 0.75rem;
align-items: center;
padding-top: 1.75rem;
flex-wrap: wrap;
}
.btn {
@@ -220,6 +250,17 @@
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
.version-tag {
position: fixed;
bottom: 0.75rem;
right: 1rem;
font-family: var(--f-mono);
font-size: 0.65rem;
color: var(--rule);
pointer-events: none;
user-select: none;
}
</style>
</head>
<body>
@@ -284,6 +325,16 @@
<div class="actions">
<button type="submit" class="btn btn-primary">Generate</button>
<button type="button" id="btn-download" class="btn btn-outline" disabled>Download SVG</button>
<div style="display:flex;flex-direction:column;gap:0.3rem">
<div class="mode-toggle" role="group" aria-label="Output mode">
<button type="button" class="mode-btn active" data-mode="paths"
title="Text converted to outlines — opens correctly in Inkscape, Illustrator, and cutting plotters; no font required">Paths</button>
<button type="button" class="mode-btn" data-mode="text"
title="Live &lt;text&gt; nodes with the font embedded as base64 — smaller file, editable in SVG editors that support embedded fonts">Text</button>
</div>
<span id="mode-desc" style="font-family:var(--f-mono);font-size:0.65rem;color:var(--muted)">Glyphs as outlines — no font required</span>
</div>
<input type="hidden" name="output_mode" id="output-mode" value="paths">
<span id="status"></span>
</div>
@@ -295,6 +346,8 @@
</div>
</main>
<span class="version-tag">v{{ version }}</span>
<script>
let lastSvg = '';
@@ -322,6 +375,21 @@
doGenerate();
});
const modeDesc = {
paths: 'Glyphs as outlines — no font required',
text: 'Live text with embedded font — editable in SVG editors',
};
document.querySelectorAll('.mode-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.getElementById('output-mode').value = btn.dataset.mode;
document.getElementById('mode-desc').textContent = modeDesc[btn.dataset.mode];
doGenerate();
});
});
document.getElementById('btn-download').addEventListener('click', () => {
if (!lastSvg) return;
const a = Object.assign(document.createElement('a'), {