sirdave73/epub2pdf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): standalone render-mode toggle above upload box + version 2.1.0

Browse Source 
- Move High Quality / Fast segmented toggle out of the clickable upload
  zone into a standalone .render-control so clicking the drop box only uploads
- Update JS selector to .render-control; progressive disclosure keeps the
  toggle hidden for non-office files, visible for .docx/.odt/.rtf
- Version bump 2.0.0 -> 2.1.0 (dev-test branch save rule: bump version on save)
This commit is contained in:
sirdave73
2026-09-04 21:17:23 -04:00
parent e96661038d
commit 100c9af72d
2 changed files with 28 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+1 -1
View File
@@ -49,7 +49,7 @@ for _d in (UPLOAD_DIR, OUTPUT_DIR, WORK_DIR):
MAX_UPLOAD_MB = 400
# Semantic version exposed by /health so the UI can show "vX.Y.Z" in the footer.
APP_VERSION = "2.0.0"
APP_VERSION = "2.1.0"
# req 3 (health): supported formats advertised to clients. Additive key — the
# existing /health contract asserts only status + max_upload_mb.
templates/index.html
+27 -18
View File
@@ -177,6 +177,8 @@
.drop.over { border-color: transparent; transform: translateY(-2px); background: rgba(139, 92, 246, 0.08); }
.drop.over::before { opacity: 1; }
.drop input { display: none; }
.render-control { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 26px auto 0; }
.render-caption { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.drop-visual {
display: grid;
@@ -346,6 +348,30 @@
</header>
<main>
<div class="render-control">
<div class="render-caption">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
<span>Rendering style</span>
</div>
<div class="render-modes" role="radiogroup" aria-label="Rendering mode">
<label class="mode-seg">
<input type="radio" name="render_mode" value="rich" checked>
<span class="seg-track">
<span class="seg-main">High Quality</span>
<span class="seg-sub">keeps fonts, colors &amp; tables</span>
<span class="badge-rec">Recommended</span>
</span>
</label>
<label class="mode-seg">
<input type="radio" name="render_mode" value="standard">
<span class="seg-track">
<span class="seg-main">Fast</span>
<span class="seg-sub">simpler, quicker</span>
</span>
</label>
</div>
</div>
<section id="drop" class="drop" role="button" tabindex="0" aria-label="Upload a document">
<div class="drop-visual" aria-hidden="true">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 8 5-5 5 5"/><path d="M5 21h14"/></svg>
@@ -353,23 +379,6 @@
<h1>Drop a file to set it in type</h1>
<p class="drop-note">or <span class="browse">browse your files</span> &middot; up to <span id="maxmb">400</span>&nbsp;MB &middot; <code>.epub .docx .odt .md .html .txt .csv .svg .png .pdf</code></p>
<p id="droperr" class="drop-err" role="alert"></p>
<div class="render-modes" role="radiogroup" aria-label="Rendering mode">
<label class="mode-seg">
<input type="radio" name="render_mode" value="rich" checked>
<span class="seg-track">
<span class="seg-main">High Quality</span>
<span class="seg-sub">keeps fonts, colors &amp; tables</span>
<span class="badge-rec">Recommended</span>
</span>
</label>
<label class="mode-seg">
<input type="radio" name="render_mode" value="standard">
<span class="seg-track">
<span class="seg-main">Fast</span>
<span class="seg-sub">simpler, quicker</span>
</span>
</label>
</div>
<input type="file" id="file" accept=".epub,.html,.htm,.txt,.log,.md,.markdown,.csv,.tsv,.json,.xml,.svg,.png,.jpg,.jpeg,.webp,.tiff,.bmp,.pdf,.docx,.odt,.rtf,.tex,.latex,.org,.adoc,.rst">
</section>
@@ -480,7 +489,7 @@
if (!OKEXT.test(f.name)) { flashError('Unsupported file type &mdash; accepted: .epub .html .htm .txt .log .md .markdown .csv .tsv .json .xml .svg .png .jpg .jpeg .webp .tiff .bmp .pdf .docx .odt .rtf .tex .latex .org .adoc .rst'); return; }
// STEP 3: progressive disclosure — toggle only for the office trio (.docx/.odt/.rtf)
const isOffice = /\.(docx|odt|rtf)$/i.test(f.name);
const toggle = document.querySelector('.render-modes');
const toggle = document.querySelector('.render-control');
if (toggle) toggle.style.display = isOffice ? '' : 'none';
var form = new FormData();
form.append('file', f);