ranger
5e0ef5adf1
Single-file HTML RSVP reader for academic papers and long-form text. Released free / GPL v2+ as a replacement for subscription-based RSVP readers (SwiftRead, etc.) that cost ~$120/year for the same core functionality. v1.1.0 ships with three reading modes: - Word: classic RSVP with ORP focal-character coloring - Sentence: chunked reading, auto-advancing on word-count timing - Paragraph: skim mode Other features: WPM slider 200-1500, drag-drop .txt loading, localStorage persistence (text + WPM + mode + position), keyboard shortcuts, dark-mode WP-tone palette, sentence splitter that handles common academic abbreviations (Mr./Dr./e.g./i.e./et al./ Vol./Fig./decimals). Single self-contained HTML file. No install, no dependencies, no network calls. Runs in any modern browser, fully offline.
620 lines
19 KiB
HTML
620 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>◈ Ranger Reader — RSVP for thesis papers</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
:root {
|
||
--bg: #0e1a23;
|
||
--fg: #d6e1ea;
|
||
--accent: #2271b1;
|
||
--accent-hover: #135e96;
|
||
--orp: #ff5252;
|
||
--muted: #6b7c8a;
|
||
--panel: #1a2a36;
|
||
--border: #2a3a48;
|
||
--done: #00a32a;
|
||
}
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow-x: hidden;
|
||
}
|
||
.header {
|
||
padding: 14px 24px;
|
||
border-bottom: 1px solid var(--border);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
font-size: 13px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.header h1 {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--accent);
|
||
letter-spacing: 0.5px;
|
||
}
|
||
.header .meta { color: var(--muted); flex: 1; }
|
||
.header .version { color: var(--muted); font-size: 11px; }
|
||
|
||
.mode-toggle {
|
||
display: inline-flex;
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
.mode-toggle button {
|
||
background: transparent;
|
||
color: var(--muted);
|
||
border: none;
|
||
padding: 6px 12px;
|
||
font-family: inherit;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
border-right: 1px solid var(--border);
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
.mode-toggle button:last-child { border-right: none; }
|
||
.mode-toggle button:hover { color: var(--fg); }
|
||
.mode-toggle button.active {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
}
|
||
|
||
.stage {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px 40px;
|
||
min-height: 320px;
|
||
position: relative;
|
||
}
|
||
.stage::before, .stage::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 80px;
|
||
height: 1px;
|
||
background: var(--border);
|
||
opacity: 0;
|
||
transition: opacity 0.2s;
|
||
}
|
||
.stage.mode-word::before { top: 35%; opacity: 1; }
|
||
.stage.mode-word::after { bottom: 35%; opacity: 1; }
|
||
|
||
.word-display {
|
||
font-family: ui-monospace, "SF Mono", Consolas, Menlo, monospace;
|
||
font-size: 56px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.5px;
|
||
white-space: pre;
|
||
text-align: center;
|
||
line-height: 1.2;
|
||
min-height: 70px;
|
||
user-select: none;
|
||
}
|
||
.stage.mode-sentence .word-display {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
font-size: 24px;
|
||
font-weight: 400;
|
||
letter-spacing: normal;
|
||
white-space: normal;
|
||
line-height: 1.55;
|
||
max-width: 760px;
|
||
min-height: 110px;
|
||
}
|
||
.stage.mode-paragraph .word-display {
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||
font-size: 17px;
|
||
font-weight: 400;
|
||
letter-spacing: normal;
|
||
white-space: pre-wrap;
|
||
line-height: 1.65;
|
||
max-width: 880px;
|
||
min-height: 200px;
|
||
text-align: left;
|
||
}
|
||
|
||
.orp { color: var(--orp); }
|
||
|
||
.controls {
|
||
padding: 14px 24px;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--panel);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
flex-wrap: wrap;
|
||
}
|
||
button.ctrl {
|
||
background: var(--accent);
|
||
color: #fff;
|
||
border: none;
|
||
padding: 8px 14px;
|
||
border-radius: 4px;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
}
|
||
button.ctrl:hover { background: var(--accent-hover); }
|
||
button.ctrl.secondary {
|
||
background: transparent;
|
||
border: 1px solid var(--border);
|
||
color: var(--fg);
|
||
}
|
||
button.ctrl.secondary:hover {
|
||
background: rgba(34, 113, 177, 0.12);
|
||
border-color: var(--accent);
|
||
}
|
||
.slider-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 13px;
|
||
color: var(--muted);
|
||
}
|
||
.slider-group strong { color: var(--fg); min-width: 36px; text-align: right; }
|
||
input[type=range] {
|
||
width: 140px;
|
||
accent-color: var(--accent);
|
||
}
|
||
.input-area {
|
||
padding: 14px 24px;
|
||
border-top: 1px solid var(--border);
|
||
background: var(--panel);
|
||
}
|
||
textarea {
|
||
width: 100%;
|
||
height: 100px;
|
||
background: var(--bg);
|
||
color: var(--fg);
|
||
border: 1px solid var(--border);
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
font-family: inherit;
|
||
font-size: 13px;
|
||
resize: vertical;
|
||
}
|
||
textarea:focus {
|
||
outline: none;
|
||
border-color: var(--accent);
|
||
box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.25);
|
||
}
|
||
.progress {
|
||
flex: 1;
|
||
height: 4px;
|
||
background: var(--border);
|
||
border-radius: 2px;
|
||
overflow: hidden;
|
||
min-width: 100px;
|
||
}
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: var(--accent);
|
||
width: 0;
|
||
transition: width 0.2s;
|
||
}
|
||
.hint {
|
||
font-size: 11px;
|
||
color: var(--muted);
|
||
margin-top: 8px;
|
||
line-height: 1.6;
|
||
}
|
||
.kbd {
|
||
background: var(--bg);
|
||
border: 1px solid var(--border);
|
||
border-bottom-width: 2px;
|
||
border-radius: 3px;
|
||
padding: 1px 6px;
|
||
font-family: ui-monospace, monospace;
|
||
font-size: 10px;
|
||
color: var(--fg);
|
||
}
|
||
.done-state .word-display { color: var(--done); }
|
||
.dropzone-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(34, 113, 177, 0.20);
|
||
border: 3px dashed var(--accent);
|
||
display: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
color: var(--fg);
|
||
z-index: 1000;
|
||
pointer-events: none;
|
||
}
|
||
.dropzone-overlay.active { display: flex; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="header">
|
||
<h1>◈ Ranger Reader</h1>
|
||
|
||
<div class="mode-toggle" id="mode-toggle">
|
||
<button data-mode="word" class="active" title="Word-by-word RSVP (classic)">Word</button>
|
||
<button data-mode="sentence" title="One sentence at a time">Sentence</button>
|
||
<button data-mode="paragraph" title="One paragraph at a time">Paragraph</button>
|
||
</div>
|
||
|
||
<span class="meta" id="meta">Paste text below, drag a .txt file in, then press Play</span>
|
||
<span class="version">v1.1</span>
|
||
</div>
|
||
|
||
<div class="stage mode-word" id="stage">
|
||
<div class="word-display" id="word">ready</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<button class="ctrl" id="btn-play">▶ Play</button>
|
||
<button class="ctrl secondary" id="btn-back">◀ Back</button>
|
||
<button class="ctrl secondary" id="btn-forward">Forward ▶</button>
|
||
<button class="ctrl secondary" id="btn-reset">⟲ Reset</button>
|
||
|
||
<div class="slider-group">
|
||
<span>WPM</span>
|
||
<input type="range" id="wpm" min="200" max="1500" value="500" step="50">
|
||
<strong id="wpm-val">500</strong>
|
||
</div>
|
||
|
||
<div class="progress"><div class="progress-bar" id="progress"></div></div>
|
||
</div>
|
||
|
||
<div class="input-area">
|
||
<textarea id="text" placeholder="Paste the contents of one of your .txt files here, or drag a .txt file anywhere on the page..."></textarea>
|
||
<p class="hint">
|
||
<strong style="color:var(--fg)">Modes</strong> —
|
||
<span class="kbd">1</span> Word (RSVP, fast),
|
||
<span class="kbd">2</span> Sentence (chunked, easier comprehension),
|
||
<span class="kbd">3</span> Paragraph (skim mode).
|
||
·
|
||
<span class="kbd">Space</span> play/pause ·
|
||
<span class="kbd">←</span> <span class="kbd">→</span> skip ·
|
||
<span class="kbd">+</span> <span class="kbd">−</span> WPM ·
|
||
<span class="kbd">R</span> reset.
|
||
Text + WPM + mode + position auto-saved. Drag any <code>.txt</code> file onto the page.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="dropzone-overlay" id="dropzone">Drop .txt file here</div>
|
||
|
||
<script>
|
||
(() => {
|
||
const $ = id => document.getElementById(id);
|
||
const display = $('word');
|
||
const meta = $('meta');
|
||
const wpmSlider = $('wpm');
|
||
const wpmVal = $('wpm-val');
|
||
const progress = $('progress');
|
||
const textarea = $('text');
|
||
const stage = $('stage');
|
||
const dropzone = $('dropzone');
|
||
const btnPlay = $('btn-play');
|
||
const btnBack = $('btn-back');
|
||
const btnFwd = $('btn-forward');
|
||
const btnReset = $('btn-reset');
|
||
const modeToggle = $('mode-toggle');
|
||
|
||
let mode = 'word'; // 'word' | 'sentence' | 'paragraph'
|
||
let chunks = []; // array of strings — one word, one sentence, or one paragraph each
|
||
let pos = 0;
|
||
let timer = null;
|
||
let playing = false;
|
||
|
||
const STORAGE_KEY = 'ranger-reader-v1';
|
||
|
||
// ─── Persistence ───────────────────────────────────────────────
|
||
function load() {
|
||
try {
|
||
const s = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
|
||
if (s.text) textarea.value = s.text;
|
||
if (s.wpm) { wpmSlider.value = s.wpm; wpmVal.textContent = s.wpm; }
|
||
if (s.mode && ['word','sentence','paragraph'].includes(s.mode)) mode = s.mode;
|
||
if (typeof s.pos === 'number') pos = s.pos;
|
||
applyMode();
|
||
updateChunks();
|
||
if (pos > 0 && pos < chunks.length) renderChunk(chunks[pos]);
|
||
} catch (e) { /* ignore */ }
|
||
}
|
||
function save() {
|
||
try {
|
||
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
||
text: textarea.value,
|
||
wpm: wpmSlider.value,
|
||
mode: mode,
|
||
pos: pos
|
||
}));
|
||
} catch (e) { /* ignore quota errors */ }
|
||
}
|
||
|
||
// ─── Text → chunks (mode-dependent) ────────────────────────────
|
||
function splitWords(text) {
|
||
return text.split(/\s+/).filter(w => w.length > 0);
|
||
}
|
||
|
||
function splitSentences(text) {
|
||
// Guard common abbreviations + decimal numbers before splitting on .!?
|
||
let t = text
|
||
.replace(/\b(Mr|Mrs|Ms|Dr|Prof|Sr|Jr|St|vs|cf|etc|Vol|No|Fig|Eq|Ref|e\.g|i\.e|et al)\./g, '$1<P>')
|
||
.replace(/(\d)\.(\d)/g, '$1<P>$2');
|
||
// Split where punctuation is followed by whitespace + capital letter or whitespace + end-of-string
|
||
const parts = t.split(/(?<=[.!?])\s+(?=[A-Z“"\(])/);
|
||
return parts
|
||
.map(s => s.replace(/<P>/g, '.').trim())
|
||
.filter(s => s.length > 0);
|
||
}
|
||
|
||
function splitParagraphs(text) {
|
||
// Paragraphs separated by blank line OR repeated newlines
|
||
return text.split(/\n\s*\n/)
|
||
.map(p => p.replace(/\s+/g, ' ').trim())
|
||
.filter(p => p.length > 0);
|
||
}
|
||
|
||
function updateChunks() {
|
||
const text = textarea.value;
|
||
if (mode === 'word') chunks = splitWords(text);
|
||
else if (mode === 'sentence') chunks = splitSentences(text);
|
||
else chunks = splitParagraphs(text);
|
||
if (pos >= chunks.length) pos = Math.max(0, chunks.length - 1);
|
||
updateMeta();
|
||
updateProgress();
|
||
}
|
||
|
||
// ─── Meta + progress ───────────────────────────────────────────
|
||
function chunkUnitLabel() {
|
||
return mode === 'word' ? 'words' : mode === 'sentence' ? 'sentences' : 'paragraphs';
|
||
}
|
||
|
||
function totalWordsFromCurrent() {
|
||
// Approximate words remaining for accurate time estimate, in any mode
|
||
let n = 0;
|
||
for (let i = pos; i < chunks.length; i++) n += splitWords(chunks[i]).length;
|
||
return n;
|
||
}
|
||
|
||
function updateMeta() {
|
||
if (!chunks.length) {
|
||
meta.textContent = 'Paste text below, drag a .txt file in, then press Play';
|
||
return;
|
||
}
|
||
const total = chunks.length;
|
||
const wpm = parseInt(wpmSlider.value);
|
||
const wordsRemaining = totalWordsFromCurrent();
|
||
const minsRemaining = Math.ceil(wordsRemaining / wpm);
|
||
const unit = chunkUnitLabel();
|
||
meta.textContent = `${pos + 1} / ${total} ${unit} · ~${minsRemaining} min remaining at ${wpm} WPM`;
|
||
}
|
||
|
||
function updateProgress() {
|
||
progress.style.width = chunks.length ? `${(pos / chunks.length) * 100}%` : '0%';
|
||
}
|
||
|
||
// ─── Rendering ─────────────────────────────────────────────────
|
||
// ORP: Optimal Recognition Point. Pinning the focal char keeps eyes still.
|
||
function orpIndex(word) {
|
||
const n = word.length;
|
||
if (n <= 1) return 0;
|
||
if (n <= 4) return 1;
|
||
if (n <= 9) return 2;
|
||
if (n <= 13) return 3;
|
||
return 4;
|
||
}
|
||
function esc(s) {
|
||
return (s || '').replace(/[<>&]/g, c => ({'<':'<','>':'>','&':'&'}[c]));
|
||
}
|
||
|
||
function renderChunk(chunk) {
|
||
if (!chunk) { display.innerHTML = ''; return; }
|
||
if (mode === 'word') {
|
||
// Single word with ORP coloring
|
||
const i = Math.min(orpIndex(chunk), chunk.length - 1);
|
||
const before = chunk.slice(0, i);
|
||
const orp = chunk[i] || '';
|
||
const after = chunk.slice(i + 1);
|
||
display.innerHTML = `${esc(before)}<span class="orp">${esc(orp)}</span>${esc(after)}`;
|
||
} else {
|
||
// Sentence or paragraph — render as plain text (no ORP)
|
||
display.textContent = chunk;
|
||
}
|
||
}
|
||
|
||
// ─── Timing (mode-aware) ───────────────────────────────────────
|
||
// Pause longer at punctuation — gives the brain a beat to settle (word mode only)
|
||
function pauseMult(word) {
|
||
if (!word) return 1;
|
||
const last = word[word.length - 1];
|
||
if ('.!?'.includes(last)) return 2.5;
|
||
if (',;:'.includes(last)) return 1.7;
|
||
if (')]"”'.includes(last)) return 1.3;
|
||
return 1;
|
||
}
|
||
|
||
function chunkInterval(chunk) {
|
||
const wpm = parseInt(wpmSlider.value);
|
||
if (mode === 'word') {
|
||
const base = 60000 / wpm;
|
||
return base * pauseMult(chunk);
|
||
}
|
||
// Sentence / paragraph: time = words / WPM, with a comprehension multiplier
|
||
const wordCount = splitWords(chunk).length;
|
||
const baseMs = (wordCount / wpm) * 60000;
|
||
const multiplier = mode === 'sentence' ? 1.25 : 1.40; // brain needs more time on chunks
|
||
// Sensible bounds: 1.5s min, 12s max
|
||
return Math.max(1500, Math.min(12000, baseMs * multiplier));
|
||
}
|
||
|
||
function tick() {
|
||
if (pos >= chunks.length) {
|
||
stop();
|
||
display.textContent = '— done —';
|
||
stage.classList.add('done-state');
|
||
return;
|
||
}
|
||
const chunk = chunks[pos];
|
||
renderChunk(chunk);
|
||
updateMeta();
|
||
updateProgress();
|
||
save();
|
||
pos++;
|
||
timer = setTimeout(tick, chunkInterval(chunk));
|
||
}
|
||
|
||
function play() {
|
||
stage.classList.remove('done-state');
|
||
updateChunks();
|
||
if (!chunks.length) return;
|
||
if (pos >= chunks.length) pos = 0;
|
||
playing = true;
|
||
btnPlay.textContent = '⏸ Pause';
|
||
tick();
|
||
}
|
||
function stop() {
|
||
playing = false;
|
||
if (timer) { clearTimeout(timer); timer = null; }
|
||
btnPlay.textContent = '▶ Play';
|
||
}
|
||
function toggle() { playing ? stop() : play(); }
|
||
|
||
function skip(n) {
|
||
stop();
|
||
updateChunks();
|
||
pos = Math.max(0, Math.min(chunks.length - 1, pos + n));
|
||
if (chunks[pos]) renderChunk(chunks[pos]);
|
||
updateMeta();
|
||
updateProgress();
|
||
save();
|
||
}
|
||
// Skip distance: 1 in chunk modes, 10 in word mode
|
||
function skipDelta() { return mode === 'word' ? 10 : 1; }
|
||
|
||
function reset() {
|
||
stop();
|
||
stage.classList.remove('done-state');
|
||
pos = 0;
|
||
updateChunks();
|
||
if (chunks[0]) renderChunk(chunks[0]);
|
||
else display.textContent = 'ready';
|
||
updateMeta();
|
||
updateProgress();
|
||
save();
|
||
}
|
||
|
||
// ─── Mode switching ────────────────────────────────────────────
|
||
function applyMode() {
|
||
stage.className = `stage mode-${mode}`;
|
||
[...modeToggle.querySelectorAll('button')].forEach(b => {
|
||
b.classList.toggle('active', b.dataset.mode === mode);
|
||
});
|
||
}
|
||
function setMode(newMode) {
|
||
if (newMode === mode) return;
|
||
stop();
|
||
mode = newMode;
|
||
pos = 0;
|
||
applyMode();
|
||
updateChunks();
|
||
if (chunks[0]) renderChunk(chunks[0]);
|
||
else display.textContent = 'ready';
|
||
updateMeta();
|
||
updateProgress();
|
||
save();
|
||
}
|
||
|
||
// ─── Wire up controls ─────────────────────────────────────────
|
||
modeToggle.addEventListener('click', e => {
|
||
const btn = e.target.closest('button[data-mode]');
|
||
if (btn) setMode(btn.dataset.mode);
|
||
});
|
||
btnPlay.addEventListener('click', toggle);
|
||
btnBack.addEventListener('click', () => skip(-skipDelta()));
|
||
btnFwd.addEventListener('click', () => skip(skipDelta()));
|
||
btnReset.addEventListener('click', reset);
|
||
|
||
wpmSlider.addEventListener('input', () => {
|
||
wpmVal.textContent = wpmSlider.value;
|
||
updateMeta();
|
||
save();
|
||
});
|
||
|
||
textarea.addEventListener('input', () => {
|
||
pos = 0;
|
||
stage.classList.remove('done-state');
|
||
updateChunks();
|
||
save();
|
||
});
|
||
|
||
// Keyboard shortcuts (ignore when focused in textarea)
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.target === textarea) return;
|
||
const k = e.key;
|
||
if (k === ' ') { e.preventDefault(); toggle(); }
|
||
else if (k === 'ArrowLeft') { e.preventDefault(); skip(-skipDelta()); }
|
||
else if (k === 'ArrowRight') { e.preventDefault(); skip(skipDelta()); }
|
||
else if (k === '1') { setMode('word'); }
|
||
else if (k === '2') { setMode('sentence'); }
|
||
else if (k === '3') { setMode('paragraph'); }
|
||
else if (k === '+' || k === '=') {
|
||
wpmSlider.value = Math.min(1500, parseInt(wpmSlider.value) + 50);
|
||
wpmVal.textContent = wpmSlider.value;
|
||
updateMeta();
|
||
save();
|
||
}
|
||
else if (k === '-' || k === '_') {
|
||
wpmSlider.value = Math.max(200, parseInt(wpmSlider.value) - 50);
|
||
wpmVal.textContent = wpmSlider.value;
|
||
updateMeta();
|
||
save();
|
||
}
|
||
else if (k === 'r' || k === 'R') { reset(); }
|
||
});
|
||
|
||
// ─── Drag-and-drop .txt files ─────────────────────────────────
|
||
let dragCounter = 0;
|
||
document.addEventListener('dragenter', e => {
|
||
e.preventDefault();
|
||
dragCounter++;
|
||
dropzone.classList.add('active');
|
||
});
|
||
document.addEventListener('dragleave', e => {
|
||
dragCounter--;
|
||
if (dragCounter <= 0) dropzone.classList.remove('active');
|
||
});
|
||
document.addEventListener('dragover', e => e.preventDefault());
|
||
document.addEventListener('drop', e => {
|
||
e.preventDefault();
|
||
dragCounter = 0;
|
||
dropzone.classList.remove('active');
|
||
const file = e.dataTransfer.files[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = ev => {
|
||
textarea.value = ev.target.result;
|
||
pos = 0;
|
||
stage.classList.remove('done-state');
|
||
updateChunks();
|
||
save();
|
||
};
|
||
reader.readAsText(file);
|
||
});
|
||
|
||
// ─── Boot ─────────────────────────────────────────────────────
|
||
load();
|
||
})();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|