template-editor.html

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>OMS Template Editor</title>
<style>
:root{color-scheme:dark;--bg:#0b1828;--panel:#101f32;--line:#293b50;--muted:#a3b2c5;--accent:#5eead4}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f4f7fb;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}header{padding:20px 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}h1{font-size:23px;margin:0}h2{font-size:16px;margin:0 0 16px}.kicker{font-size:11px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-weight:750}header p{margin:4px 0 0;color:var(--muted)}a{color:var(--accent)}main{display:grid;grid-template-columns:350px minmax(0,1fr);gap:24px;max-width:1500px;margin:auto;padding:24px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;align-self:start}label.field{display:block;font-weight:650;margin-top:18px}input[type=text],textarea{display:block;width:100%;margin:7px 0 0;background:#091421;color:#fff;border:1px solid #43566e;border-radius:8px;padding:10px;font:inherit}textarea{resize:vertical;line-height:1.5}input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:2px}.hint{font-size:12px;color:var(--muted);margin:6px 0 0}.check{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}button{border:1px solid #43566e;border-radius:8px;padding:10px 14px;color:#f4f7fb;background:#172a40;font:inherit;font-weight:650;cursor:pointer}button.primary{background:#5eead4;color:#09241f;border-color:#5eead4}button:disabled{opacity:.45;cursor:not-allowed}button:hover:not(:disabled){filter:brightness(1.12)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.preview-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}.preview-head h2{margin:0}.paper{background:white;max-width:794px;margin:auto;box-shadow:0 12px 35px #0004;min-height:200px}.paper canvas{display:block;width:100%;height:auto}.preview{min-width:0}.status{margin-top:12px;font-size:13px;color:var(--muted);min-height:40px}.status.error{color:#fda4af}.meta{font-size:12px;color:var(--muted)}.notice{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:12px;color:var(--muted);margin-top:16px}#fieldFeedback{padding-left:18px;font-size:12px;color:#fda4af}#fieldFeedback:empty{display:none}dialog{color:#f4f7fb;background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:380px}dialog::backdrop{background:#0008}dialog .buttons{justify-content:flex-end}
@media(max-width:900px){main{grid-template-columns:1fr}.panel{max-width:none}header{align-items:start;padding:16px}main{padding:16px}.preview-head{flex-wrap:wrap}}
</style></head><body>
<header><div><div class="kicker">MarksCan</div><h1>Answer sheet editor</h1><p>Customise the title and instructions on your OMS template.</p></div><a href="index.html">Back to scanner</a></header>
<main><section class="panel" aria-labelledby="editHeading"><h2 id="editHeading">Sheet text</h2>
<label class="field" for="title">Sheet title</label><input id="title" type="text" maxlength="180" autocomplete="off">
<label class="field" for="school">School / department heading</label><input id="school" type="text" maxlength="180" autocomplete="off"><label class="check"><input id="showSchool" type="checkbox">Show school heading</label><p class="hint">The original template has a white, invisible school heading.</p>
<label class="field" for="instructions">Shading instructions</label><textarea id="instructions" rows="7" maxlength="1200" spellcheck="true" aria-describedby="wrapHelp"></textarea>
<label class="field" for="indexInstructions">Index number instructions</label><textarea id="indexInstructions" rows="10" maxlength="1600" spellcheck="true" aria-describedby="wrapHelp"></textarea>
<p class="hint" id="wrapHelp">Text wraps inside the original boxes. Blank lines separate paragraphs. Longer text is reduced to fit, down to 7 pt.</p>
<ul id="fieldFeedback" aria-live="polite"></ul>
<div class="buttons"><button class="primary" id="download" disabled>Download PDF</button><button id="reset" type="button">Restore original</button></div>
<div id="status" class="status" role="status">Preparing the original template…</div>
<div class="notice">Print the downloaded PDF at <strong>Actual size / 100%</strong>. The page size, registration marks, 45 questions, and all bubble positions match the source template.</div>
<p class="hint">Edits are saved in this browser. The editor works offline; no sheet data is uploaded.</p>
</section><section class="preview" aria-label="PDF preview"><div class="preview-head"><h2>Live print preview</h2><span class="meta">A4 · 1 page · Original geometry</span></div><div class="paper"><canvas id="preview" aria-label="Preview of the answer sheet"></canvas></div><p class="hint" id="previewNote">The preview shows the same PDF that will be downloaded.</p></section></main>
<dialog id="resetDialog" aria-labelledby="resetTitle"><h2 id="resetTitle">Restore original text?</h2><p>This replaces your current title and instructions with those in the supplied template.</p><form method="dialog" class="buttons"><button value="cancel" autofocus>Cancel</button><button value="restore">Restore original</button></form></dialog>
<script src="template-editor-assets/pdf-lib.min.js"></script><script src="template-editor-assets/fontkit.min.js"></script><script src="template-editor-assets/pdf.min.js"></script><script src="template-editor-assets/template-data.js"></script><script src="template-editor-assets/editor.js"></script>
</body></html>