Keep quoted text and reading notes in separate fields

Use this small browser form to keep a quote beside its source URL, the date you checked it and the conditions you want to remember. Save the complete HTML below as source-note.html, then open that file in your browser.

Write a note you can check later

Enter the source title and its public URL. Set the checked date and copy the exact quoted text into its own field. Put location, model or included work in Scope and conditions. Use Your reading note for your interpretation.

Select Preview note to inspect the resulting JSON, a text format with named fields. Your note appears below the form. Check the quoted text before selecting Download JSON. Your browser saves the note as source-note.json.

The form requires a title, URL, checked date and quote. It accepts public HTTP or HTTPS source URLs. The scope and reading-note fields are optional. Keep a copy of the saved file if you want to retain your work after closing the page.

What this form checks

The form checks required fields and the URL format. It copies the text you enter into separate JSON fields. It does not visit the source URL, verify a quote, check a price or decide whether someone qualifies for a program.

The source code below contains the whole form. It uses browser controls and creates the download from the note you enter. There is no account, installation package or external script to load.

Publisher and source

Age in Place Cost publishes this source-note form. Keep the original license with any copy of the software.

Source: Source note builder; publisher: Age in Place Cost; date: 2026 copyright year. The complete authored HTML and MIT license follow.

Complete HTML

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Source note builder | Age in Place Cost</title><meta name="description" content="Keep a public source URL, checked date, quoted text and scope notes together. Preview and save the text you enter as a JSON source note."><style>
:root{color-scheme:light;--ink:#253329;--accent:#35664c;--paper:#faf8f3;--line:#d7dfd8}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.6 system-ui,sans-serif}main{max-width:820px;padding:30px 22px 60px;margin:auto}h1{font:700 clamp(30px,6vw,46px)/1.15 Georgia,serif;margin:15px 0}h2{font-size:24px}p{max-width:68ch}a{color:var(--accent);text-underline-offset:4px}.brand{font-weight:700}.panel{padding:24px;background:white;border:1px solid var(--line);border-radius:16px;margin-top:25px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}label{display:block;font-size:16px;font-weight:650}input,textarea{display:block;width:100%;font:inherit;padding:12px;margin:7px 0 20px;border:1px solid #a8b8aa;border-radius:7px;background:white;color:var(--ink)}textarea{min-height:110px;resize:vertical}.actions{display:flex;gap:12px;flex-wrap:wrap}button{font:650 17px/1.5 system-ui;padding:12px 20px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:white;cursor:pointer}button.secondary{background:white;color:var(--accent)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b27326;outline-offset:3px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/1.6 ui-monospace,monospace;background:#eef2ed;padding:16px;border-radius:8px}footer{margin-top:30px;border-top:1px solid var(--line);padding-top:20px}#status{font-size:16px}.help{font-size:16px}@media(max-width:560px){.grid{display:block}.panel{padding:18px}main{padding:22px 16px 45px}button{width:100%}}
</style></head><body><main>
<p class="brand">Age in Place Cost</p><h1>Source note builder</h1>
<p>Keep a published quote beside its source URL and the date you checked it. Save the quoted text, its conditions and your own reading note in separate fields.</p>
<section class="panel" aria-label="Build a source note"><form id="note-form">
<label for="title">Source title</label><input id="title" name="title" required maxlength="300">
<label for="url">Public source URL</label><input id="url" name="url" type="url" required placeholder="https://">
<label for="checked">Date checked</label><input id="checked" name="checked" type="date" required>
<label for="quote">Exact quoted text</label><textarea id="quote" name="quote" required maxlength="8000"></textarea>
<div class="grid"><div><label for="scope">Scope and conditions</label><textarea id="scope" name="scope" maxlength="4000"></textarea></div><div><label for="note">Your reading note</label><textarea id="note" name="note" maxlength="4000"></textarea></div></div>
<div class="actions"><button type="submit">Preview note</button><button type="button" class="secondary" id="download">Download JSON</button></div><p id="status" role="status" aria-live="polite"></p></form>
<p class="help">Keep the source's wording in Exact quoted text. Put your own interpretation in Your reading note. Keep conditions such as location, model and included work beside the quote.</p>
</section><section aria-labelledby="preview-title"><h2 id="preview-title">Your source note</h2><pre id="preview">Your note will appear here after you select Preview note.</pre></section>
<p class="help">The tool does not check price accuracy, installation scope or program eligibility.</p>
<footer><p>Published by Age in Place Cost, a reference publisher covering walk-in tub, stair lift and tub-to-shower conversion costs.</p><p><a href="https://ageinplacecost.com/" target="_blank" rel="noopener">Open Age in Place Cost</a></p></footer>
</main><script>
const form=document.getElementById('note-form');
function makeNote(){const url=document.getElementById('url').value.trim();if(!/^https?:\/\//i.test(url))throw new Error('Use an http or https public source URL.');return {source_title:document.getElementById('title').value.trim(),source_url:url,date_checked:document.getElementById('checked').value,quoted_text:document.getElementById('quote').value,scope_conditions:document.getElementById('scope').value,reading_note:document.getElementById('note').value};}
function preview(){if(!form.reportValidity())return null;try{const note=makeNote();document.getElementById('preview').textContent=JSON.stringify(note,null,2);document.getElementById('status').textContent='Note ready. Your quoted text and reading note remain separate.';return note;}catch(e){document.getElementById('status').textContent=e.message;return null;}}
form.addEventListener('submit',e=>{e.preventDefault();preview();});document.getElementById('download').addEventListener('click',()=>{const note=preview();if(!note)return;const blob=new Blob([JSON.stringify(note,null,2)+'\n'],{type:'application/json'});const url=URL.createObjectURL(blob);const a=document.createElement('a');a.href=url;a.download='source-note.json';document.body.appendChild(a);a.click();a.remove();setTimeout(()=>URL.revokeObjectURL(url),1000);});
</script></body></html>

License

MIT License

Copyright (c) 2026 Age in Place Cost

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.