TRV
Псалми 4:1-2
1
Для дириґе́нта хору. На струнних знаря́ддях. Псало́м Давидів. </div>
</div><div class="verse-block" id="v2">
<a href="/psalms/4-2" class="verse-num" title="Share/Study Verse 2">2</a>
<div class="verse-content">Коли кли́чу, — озвися до мене, Боже правди моєї, Ти про́стір для мене робив у тісноті́ ... Помилуй мене, і почу́й молитву мою! </div>
</div> </div>
<div class="reader-placeholder passage-reader-placeholder">
<a href="/chapter/uk/psalms/4#v1" class="read-chapter-cta">
Читати повний розділ 4 <i class="fas fa-arrow-right" aria-hidden="true"></i>
</a>
</div>
<nav class="notable-passage-nav" aria-label="Відомі уривки">
<div class="notable-steps">
<a href="/passage/uk/psalms/3/7-8" class="notable-step notable-prev" title="Псалми 3:7-8">
<i class="fas fa-chevron-left" aria-hidden="true"></i>
<span>Попередній уривок</span>
</a>
<a href="/passage/uk/psalms/4/3-5" class="notable-step notable-next" title="Псалми 4:3-5">
<span>Наступний уривок</span>
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</a>
</div>
</nav>
<div class="passage-actions-footer">
<button type="button" id="copy-btn" class="btn-text">
<i class="fas fa-copy"></i><span>Копіювати уривок</span>
</button>
<button type="button" id="image-btn" class="btn-text">
<i class="fas fa-image"></i><span>Створити зображення</span>
</button>
</div>
</div>
<!-- Settings Drawer (shared partial: templates/reader_settings_drawer.php) -->
<div id="drawer-settings" class="settings-drawer">
<div class="drawer-header">
<span class="drawer-title">Settings</span>
<button type="button" class="btn-icon" id="btn-close-drawer" aria-label="Close settings"><i class="fas fa-xmark"></i></button>
</div>
<div class="setting-group">
<h4>Reading Style</h4>
<div class="btn-group" id="view-mode-control">
<button type="button" data-val="mode-list"><i class="fas fa-list"></i> List</button>
<button type="button" data-val="mode-reader"><i class="fas fa-align-left"></i> Reader</button>
</div>
</div>
<div class="setting-group">
<h4>Typeface</h4>
<div class="btn-group" id="font-family-control">
<button type="button" data-val="var(--font-merri)">Merriweather</button>
<button type="button" data-val="var(--font-crimson)">Crimson Pro</button>
<button type="button" data-val="var(--font-garamond)">EB Garamond</button>
<button type="button" data-val="var(--font-libre)">Libre Baskerville</button>
<button type="button" data-val="var(--font-playfair)">Playfair Display</button>
<button type="button" data-val="var(--font-cardo)">Cardo</button>
<button type="button" data-val="var(--font-imfell)">IM Fell English</button>
<button type="button" data-val="var(--font-georgia)">Georgia</button>
<button type="button" data-val="var(--font-inter)">Inter</button>
</div>
</div>
<div class="setting-group">
<h4>Font Size <output id="font-size-display">19</output>px</h4>
<div class="font-size-preview" id="font-size-preview" aria-hidden="true"><div class="study-heading"><span>The Calling of Disciples</span></div><span class="verse-num" style="pointer-events:none;">19</span>And he saith unto them, <span class="red-letter">Follow me, and I will make you fishers of men.</span></div>
<input type="range" id="font-size-slider" min="14" max="28" step="1" value="19" aria-label="Font size">
</div>
<div class="setting-group">
<h4>Options</h4>
<div class="btn-group" id="options-control">
<button type="button" id="toggle-justify">Justify</button>
<button type="button" id="toggle-red-letter">Red Letter</button>
<button type="button" id="toggle-verse-nums">Verse Numbers</button>
<button type="button" id="toggle-sticky-nav">Sticky Toolbar</button>
</div>
</div>
<div class="drawer-reset">
<button type="button" class="btn-icon" id="btn-reset-settings">Reset to Defaults</button>
</div>
</div>
<div id="strongs-def-tooltip" role="tooltip" aria-hidden="true">
<button type="button" id="strongs-def-close" aria-label="Close tooltip">×</button>
<div id="strongs-def-content"></div>
</div>
<!-- Version Selector Modal -->
<div id="version-modal" class="version-modal-overlay" style="display:none;">
<div class="version-modal">
<div class="version-modal-header">
<span class="version-modal-title">Bible Version</span>
<button type="button" class="btn-icon" id="version-modal-close" aria-label="Close"><i class="fas fa-xmark"></i></button>
</div>
<div class="version-modal-list" id="version-modal-list">
<button type="button" class="version-modal-item" data-ver="kjv">
<span class="version-abbr">KJV</span>
<span class="version-name">King James Version</span>
</button>
<button type="button" class="version-modal-item" data-ver="kjv_strongs">
<span class="version-abbr">KJV w/Str</span>
<span class="version-name">King James Version with Strong's</span>
</button>
<button type="button" class="version-modal-item" data-ver="cjb">
<span class="version-abbr">CJB</span>
<span class="version-name">Complete Jewish Bible</span>
</button>
<button type="button" class="version-modal-item" data-ver="webm">
<span class="version-abbr">WEBM</span>
<span class="version-name">World English Bible</span>
</button>
<button type="button" class="version-modal-item" data-ver="bsb">
<span class="version-abbr">BSB</span>
<span class="version-name">Berean Standard Bible</span>
</button>
<button type="button" class="version-modal-item" data-ver="asv">
<span class="version-abbr">ASV</span>
<span class="version-name">American Standard Version</span>
</button>
<button type="button" class="version-modal-item" data-ver="geneva">
<span class="version-abbr">GNV</span>
<span class="version-name">Geneva Bible (1599)</span>
</button>
<button type="button" class="version-modal-item" data-ver="ylt">
<span class="version-abbr">YLT</span>
<span class="version-name">Young's Literal Translation</span>
</button>
<button type="button" class="version-modal-item" data-ver="drc">
<span class="version-abbr">DRC</span>
<span class="version-name">Douay-Rheims Bible</span>
</button>
<button type="button" class="version-modal-item" data-ver="sq">
<span class="version-abbr">ALB</span>
<span class="version-name">Shqip · Diodati</span>
</button>
<button type="button" class="version-modal-item" data-ver="ar">
<span class="version-abbr">SVD</span>
<span class="version-name">العربية · SVD</span>
</button>
<button type="button" class="version-modal-item" data-ver="bn">
<span class="version-abbr">BN-IRV</span>
<span class="version-name">বাংলা · IRV</span>
</button>
<button type="button" class="version-modal-item" data-ver="my">
<span class="version-abbr">Judson</span>
<span class="version-name">မြန်မာ · Judson</span>
</button>
<button type="button" class="version-modal-item" data-ver="zh_hans">
<span class="version-abbr">CUV-S</span>
<span class="version-name">简体中文 · CUV</span>
</button>
<button type="button" class="version-modal-item" data-ver="zh_hant">
<span class="version-abbr">CUV-T</span>
<span class="version-name">繁體中文 · CUV</span>
</button>
<button type="button" class="version-modal-item" data-ver="cs">
<span class="version-abbr">BKR</span>
<span class="version-name">Čeština · BKR</span>
</button>
<button type="button" class="version-modal-item" data-ver="nl">
<span class="version-abbr">STVE</span>
<span class="version-name">Nederlands · STVE</span>
</button>
<button type="button" class="version-modal-item" data-ver="fr">
<span class="version-abbr">LSG</span>
<span class="version-name">Français · Segond</span>
</button>
<button type="button" class="version-modal-item" data-ver="de">
<span class="version-abbr">SCH</span>
<span class="version-name">Deutsch · Schlachter</span>
</button>
<button type="button" class="version-modal-item" data-ver="el">
<span class="version-abbr">Vamvas</span>
<span class="version-name">Ελληνικά · Vamvas</span>
</button>
<button type="button" class="version-modal-item" data-ver="gu">
<span class="version-abbr">GU-IRV</span>
<span class="version-name">ગુજરાતી · IRV</span>
</button>
<button type="button" class="version-modal-item" data-ver="ha">
<span class="version-abbr">HCB</span>
<span class="version-name">Hausa · HCB</span>
</button>
<button type="button" class="version-modal-item" data-ver="he">
<span class="version-abbr">Hebrew</span>
<span class="version-name">עברית · Modern</span>
</button>
<button type="button" class="version-modal-item" data-ver="hi">
<span class="version-abbr">HCV</span>
<span class="version-name">हिन्दी · HCV</span>
</button>
<button type="button" class="version-modal-item" data-ver="hu">
<span class="version-abbr">KAROLI</span>
<span class="version-name">Magyar · Károli</span>
</button>
<button type="button" class="version-modal-item" data-ver="id">
<span class="version-abbr">INDO-TB</span>
<span class="version-name">Bahasa Indonesia · TB</span>
</button>
<button type="button" class="version-modal-item" data-ver="it">
<span class="version-abbr">Diodati</span>
<span class="version-name">Italiano · Diodati</span>
</button>
<button type="button" class="version-modal-item" data-ver="ja">
<span class="version-abbr">Kougo</span>
<span class="version-name">日本語 · 口語訳</span>
</button>
<button type="button" class="version-modal-item" data-ver="ko">
<span class="version-abbr">Korean</span>
<span class="version-name">한국어 · 개역한글</span>
</button>
<button type="button" class="version-modal-item" data-ver="ml">
<span class="version-abbr">MAL</span>
<span class="version-name">മലയാളം · SV</span>
</button>
<button type="button" class="version-modal-item" data-ver="mr">
<span class="version-abbr">MRCV</span>
<span class="version-name">मराठी · MRCV</span>
</button>
<button type="button" class="version-modal-item" data-ver="nb">
<span class="version-abbr">DNB</span>
<span class="version-name">Norsk · DNB</span>
</button>
<button type="button" class="version-modal-item" data-ver="fa">
<span class="version-abbr">OPV</span>
<span class="version-name">فارسی · OPV</span>
</button>
<button type="button" class="version-modal-item" data-ver="pl">
<span class="version-abbr">BG</span>
<span class="version-name">Polski · Gdańska</span>
</button>
<button type="button" class="version-modal-item" data-ver="pt">
<span class="version-abbr">Almeida</span>
<span class="version-name">Português · Almeida</span>
</button>
<button type="button" class="version-modal-item" data-ver="ro">
<span class="version-abbr">Cornilescu</span>
<span class="version-name">Română · Cornilescu</span>
</button>
<button type="button" class="version-modal-item" data-ver="ru">
<span class="version-abbr">Synodal</span>
<span class="version-name">Русский · Synodal</span>
</button>
<button type="button" class="version-modal-item" data-ver="es">
<span class="version-abbr">RVG</span>
<span class="version-name">Español · RVG</span>
</button>
<button type="button" class="version-modal-item" data-ver="sw">
<span class="version-abbr">Neno</span>
<span class="version-name">Kiswahili · Neno</span>
</button>
<button type="button" class="version-modal-item" data-ver="sv">
<span class="version-abbr">SV1917</span>
<span class="version-name">Svenska · 1917</span>
</button>
<button type="button" class="version-modal-item" data-ver="tl">
<span class="version-abbr">TAG-ADB</span>
<span class="version-name">Tagalog · ADB</span>
</button>
<button type="button" class="version-modal-item" data-ver="ta">
<span class="version-abbr">TCV</span>
<span class="version-name">தமிழ் · TCV</span>
</button>
<button type="button" class="version-modal-item" data-ver="te">
<span class="version-abbr">TSA</span>
<span class="version-name">తెలుగు · TSA</span>
</button>
<button type="button" class="version-modal-item" data-ver="th">
<span class="version-abbr">THAI-KJV</span>
<span class="version-name">ภาษาไทย · ThaiKJV</span>
</button>
<button type="button" class="version-modal-item is-active" data-ver="uk">
<span class="version-abbr">Ohienko</span>
<span class="version-name">Українська · Огієнко</span>
</button>
<button type="button" class="version-modal-item" data-ver="vi">
<span class="version-abbr">CADMAN</span>
<span class="version-name">Tiếng Việt · Cadman</span>
</button>
<button type="button" class="version-modal-item" data-ver="yo">
<span class="version-abbr">YCB</span>
<span class="version-name">Yorùbá · YCB</span>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- Data ---
const appData = {
verses: [{"verse":1,"text":"<title canonical=\"true\" type=\"psalm\">\u0414\u043b\u044f \u0434\u0438\u0440\u0438\u0491\u0435\u0301\u043d\u0442\u0430 \u0445\u043e\u0440\u0443. \u041d\u0430 \u0441\u0442\u0440\u0443\u043d\u043d\u0438\u0445 \u0437\u043d\u0430\u0440\u044f\u0301\u0434\u0434\u044f\u0445. \u041f\u0441\u0430\u043b\u043e\u0301\u043c \u0414\u0430\u0432\u0438\u0434\u0456\u0432. "},{"verse":2,"text":"\u041a\u043e\u043b\u0438 \u043a\u043b\u0438\u0301\u0447\u0443, \u2014 \u043e\u0437\u0432\u0438\u0441\u044f \u0434\u043e \u043c\u0435\u043d\u0435, \u0411\u043e\u0436\u0435 \u043f\u0440\u0430\u0432\u0434\u0438 \u043c\u043e\u0454\u0456\u0308, \u0422\u0438 \u043f\u0440\u043e\u0301\u0441\u0442\u0456\u0440 \u0434\u043b\u044f \u043c\u0435\u043d\u0435 \u0440\u043e\u0431\u0438\u0432 \u0443 \u0442\u0456\u0441\u043d\u043e\u0442\u0456\u0301 ... \u041f\u043e\u043c\u0438\u043b\u0443\u0438\u0306 \u043c\u0435\u043d\u0435, \u0456 \u043f\u043e\u0447\u0443\u0301\u0438\u0306 \u043c\u043e\u043b\u0438\u0442\u0432\u0443 \u043c\u043e\u044e! "}],
slug: "psalms",
bookName: "\u041f\u0441\u0430\u043b\u043c\u0438",
bookId: 19,
chapter: 4,
start: 1,
end: 2,
context: false,
version: "uk",
versionAbbr: "Ohienko",
apocryphaVersions: ['drc', 'sv']
};
const dom = {
app: document.getElementById('bible-reader-app'),
container: document.getElementById('bible-text-container'),
toolbar: document.getElementById('main-toolbar'),
drawers: {
settings: document.getElementById('drawer-settings')
}
};
// --- 1. Settings & State ---
const defaultSettings = {
mode: 'mode-list',
font: 'var(--font-merri)',
size: 19,
redLetter: true,
stickyNav: true,
verseNums: true,
justified: true
};
const LEGACY_FONT_MAP = {
'var(--font-lato)': 'var(--font-inter)',
'var(--font-slab)': 'var(--font-merri)',
'var(--font-lora)': 'var(--font-crimson)',
'var(--font-serif)': 'var(--font-crimson)',
'var(--font-open)': 'var(--font-inter)'
};
function getStoredSettings() {
const s = window.trvStorage?.getJSON('trv_reader_passage', {}) || {};
if (s.font && LEGACY_FONT_MAP[s.font]) s.font = LEGACY_FONT_MAP[s.font];
return s;
}
function saveSettings(s) {
window.trvStorage?.setJSON('trv_reader_passage', s);
}
function syncUI(s) {
const slider = document.getElementById('font-size-slider');
if (slider) slider.value = s.size;
const display = document.getElementById('font-size-display');
if (display) display.value = s.size;
// Toggle buttons: sync both visual class and aria-pressed
const toggles = {
'toggle-justify': !!s.justified,
'toggle-red-letter': !!s.redLetter,
'toggle-sticky-nav': !!s.stickyNav,
'toggle-verse-nums': !!s.verseNums
};
for (const [id, pressed] of Object.entries(toggles)) {
const el = document.getElementById(id);
if (el) { el.classList.toggle('active', pressed); el.setAttribute('aria-pressed', String(pressed)); }
}
document.querySelectorAll('#view-mode-control button').forEach(b => { const active = b.dataset.val === s.mode; b.classList.toggle('active', active); b.setAttribute('aria-pressed', String(active)); });
document.querySelectorAll('#font-family-control button').forEach(b => { const active = b.dataset.val === s.font; b.classList.toggle('active', active); b.setAttribute('aria-pressed', String(active)); });
}
function applySettings(s) {
dom.container.className = `bible-text ${s.mode}`;
dom.app.style.setProperty('--reader-font', s.font || defaultSettings.font);
// Optical-size compensation for narrow-x-height faces — keeps displayed px unchanged.
const READER_FONT_SCALE = { 'var(--font-cardo)': 1.1, 'var(--font-imfell)': 1.15 };
dom.app.style.setProperty('--reader-size-scale', String(READER_FONT_SCALE[s.font] || 1));
dom.app.style.setProperty('--reader-size', (s.size || defaultSettings.size) + 'px');
dom.container.classList.toggle('hide-red-letter', !s.redLetter);
dom.container.classList.toggle('hide-verse-nums', !s.verseNums);
dom.toolbar.classList.toggle('is-sticky', s.stickyNav);
// Text Justification
if (s.justified) {
dom.container.classList.add('text-justify');
dom.container.classList.remove('text-left');
} else {
dom.container.classList.add('text-left');
dom.container.classList.remove('text-justify');
}
// Sync font preview with current settings
const preview = document.getElementById('font-size-preview');
if (preview) {
preview.classList.toggle('hide-red-letter', !s.redLetter);
preview.classList.toggle('text-justify', !!s.justified);
preview.classList.toggle('hide-verse-nums', !s.verseNums);
}
saveSettings(s);
}
// --- 2. Version Modal ---
const versionModal = document.getElementById('version-modal');
function openVersionModal() {
versionModal.style.display = '';
document.body.style.overflow = 'hidden';
requestAnimationFrame(() => versionModal.classList.add('is-visible'));
}
function closeVersionModal() {
versionModal.classList.remove('is-visible');
document.body.style.overflow = '';
setTimeout(() => { versionModal.style.display = 'none'; }, 200);
}
document.getElementById('passage-ver-trigger')?.addEventListener('click', openVersionModal);
document.getElementById('version-modal-close')?.addEventListener('click', closeVersionModal);
versionModal?.addEventListener('click', (e) => { if (e.target === versionModal) closeVersionModal(); });
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && versionModal?.classList.contains('is-visible')) closeVersionModal(); });
document.querySelectorAll('#version-modal-list .version-modal-item').forEach(btn => {
btn.addEventListener('click', () => {
const newVersion = btn.dataset.ver;
// Apocryphal book check: if current book is apocryphal (id > 66) and
// target version doesn't support apocrypha, fall back to John 3:16-21
if (appData.bookId > 66 && !appData.apocryphaVersions.includes(newVersion)) {
window.showToast?.('This book is not available in that version');
window.location.href = `/passage/${newVersion}/john/3/16-21`;
return;
}
const isSingleVerse = (appData.start === appData.end);
const range = isSingleVerse ? `${appData.start}-${appData.start}` : `${appData.start}-${appData.end}`;
const ctx = appData.context ? '?context=1' : '';
window.location.href = `/passage/${newVersion}/${appData.slug}/${appData.chapter}/${range}${ctx}`;
});
});
function copyPassageToClipboard() {
// Walk the rendered DOM (not appData.verses JSON) so red-letter / verse-num /
// paragraph-marker formatting follows the same rules as the on-screen text.
// Strong's refs are stripped so the clipboard reads as plain Scripture.
const ref = (document.querySelector('.toolbar-title')?.textContent.trim() ?? '') + ` (${appData.versionAbbr})`;
const container = document.getElementById('bible-text-container');
if (!container) return;
const clone = container.cloneNode(true);
clone.querySelectorAll('.strongs-ref').forEach(el => el.remove());
const lines = [];
clone.querySelectorAll('.verse-block').forEach(block => {
const num = block.querySelector('.verse-num')?.textContent.trim() ?? '';
const content = block.querySelector('.verse-content')?.textContent.trim() ?? '';
if (content) lines.push(`${num} ${content}`);
});
window.trvCopy(ref + '\n\n' + lines.join('\n'), 'Passage copied');
}
document.getElementById('copy-btn')?.addEventListener('click', copyPassageToClipboard);
document.getElementById('image-btn')?.addEventListener('click', function() {
let text = appData.verses.map(v => {
const t = document.createElement('div');
t.innerHTML = v.text;
return t.textContent.trim();
}).join(' ');
const range = appData.start === appData.end ? appData.start : `${appData.start}-${appData.end}`;
window.trvQuickCard.open({ text, ref: `${appData.bookName} ${appData.chapter}:${range} (${appData.versionAbbr})` });
});
// --- 3. Drawers ---
window.closeDrawers = function() {
Object.values(dom.drawers).forEach(d => {
if (d.classList.contains('is-visible')) {
d.classList.remove('is-visible');
d.classList.add('is-hiding');
setTimeout(() => { d.style.display = 'none'; d.classList.remove('is-hiding'); }, 300);
}
});
};
function toggleDrawer(id) {
const t = dom.drawers[id];
const visible = t.classList.contains('is-visible');
closeDrawers();
if (!visible) { t.style.display = 'block'; setTimeout(() => t.classList.add('is-visible'), 10); }
}
document.getElementById('btn-toggle-settings')?.addEventListener('click', () => toggleDrawer('settings'));
document.getElementById('btn-close-drawer')?.addEventListener('click', closeDrawers);
document.getElementById('btn-reset-settings')?.addEventListener('click', () => { syncUI(defaultSettings); applySettings(defaultSettings); });
document.getElementById('btn-copy-passage')?.addEventListener('click', copyPassageToClipboard);
// --- 4. Controls ---
document.querySelectorAll('#view-mode-control button').forEach(b => b.onclick = () => {
const s = { ...defaultSettings, ...getStoredSettings() };
s.mode = b.dataset.val;
syncUI(s); applySettings(s);
});
document.querySelectorAll('#font-family-control button').forEach(b => b.onclick = () => {
const s = { ...defaultSettings, ...getStoredSettings() };
s.font = b.dataset.val;
syncUI(s); applySettings(s);
});
document.getElementById('font-size-slider')?.addEventListener('input', (e) => {
const display = document.getElementById('font-size-display');
if (display) display.value = e.target.value;
const s = { ...defaultSettings, ...getStoredSettings() };
s.size = e.target.value;
syncUI(s); applySettings(s);
});
document.getElementById('options-control')?.addEventListener('click', (e) => {
const btn = e.target.closest('button');
if (!btn) return;
const keyMap = {
'toggle-justify': 'justified',
'toggle-red-letter': 'redLetter',
'toggle-sticky-nav': 'stickyNav',
'toggle-verse-nums': 'verseNums'
};
const key = keyMap[btn.id];
if (!key) return;
const s = { ...defaultSettings, ...getStoredSettings() };
s[key] = !s[key];
syncUI(s); applySettings(s);
});
// Strong's tooltip handled by /js/strongs-tooltip.js
// Close Drawers on outside click
document.addEventListener('click', (e) => {
if (!e.target.closest('.settings-drawer') && !e.target.closest('#btn-toggle-settings')) {
closeDrawers();
}
});
// Initial Load
const currentSettings = { ...defaultSettings, ...getStoredSettings() };
syncUI(currentSettings);
applySettings(currentSettings);
});
</script>
<script src="/js/strongs-tooltip.js?v=4.0.441"></script>
<!-- Random Shuffle FAB -->
<button id="trv-random-dice" class="trv-random-dice" aria-label="Random Passage" title="Get a random passage">
<i class="fas fa-shuffle" aria-hidden="true"></i>
</button>
<script>
(function() {
const btn = document.getElementById('trv-random-dice');
if (!btn) return;
// Fix spinner stuck after browser back button (bfcache restores page with loading class)
window.addEventListener('pageshow', function(e) {
if (e.persisted) btn.classList.remove('loading');
});
btn.addEventListener('click', function() {
btn.classList.add('loading');
// Parse version from current URL (always up-to-date after pushState AJAX navigation)
const currentVersion = (() => {
const match = window.location.pathname.match(/^\/(chapter|passage)\/([^/]+)\//);
return match ? match[2] : 'uk';
})();
const versionParam = currentVersion ? '&version=' + currentVersion : '';
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/random.php?type=passage' + versionParam + '&_=' + Date.now(), true);
xhr.onreadystatechange = function() {
if (xhr.readyState !== 4) return;
if (xhr.status === 200) {
try {
const data = JSON.parse(xhr.responseText);
if (data.success && data.url) {
let url = data.url;
// Verse pages carry the translation as ?v= (not a path
// segment), so the shuffle must re-append it or the next
// verse silently reverts to KJV.
if ('passage' === 'verse') {
const v = new URLSearchParams(window.location.search).get('v');
if (v) url += (url.includes('?') ? '&' : '?') + 'v=' + encodeURIComponent(v);
}
window.location.href = url;
return; // keep loading state — page is navigating away
}
} catch (e) { /* fall through to error handling */ }
}
// Error: briefly dim the button
btn.classList.remove('loading');
btn.style.opacity = '0.5';
setTimeout(function() { btn.style.opacity = ''; }, 400);
};
xhr.send();
});
})();
</script>
<footer class="site-footer">
<div class="footer-wrapper">
<div class="footer-grid">
<div class="footer-brand">
<a href="/" class="footer-brand-emblem" aria-label="TrulyRandomVerse home">
<img src="/logoicon.png" alt="" width="44" height="56">
<span class="footer-brand-wordmark">TrulyRandomVerse</span>
</a>
<p class="footer-brand-verse">
“To God only wise, be glory through Jesus Christ for ever. Amen.”
<span class="footer-brand-verse-ref">Romans 16:27</span>
</p>
<a href="/donation" class="footer-support-link">
<i class="fas fa-heart" aria-hidden="true"></i>
<span>Support</span>
</a>
</div>
<!-- Column 1: Discover -->
<div class="footer-col">
<strong class="footer-col-heading">Discover</strong>
<ul class="footer-links">
<li><a href="/study">Study Hub</a></li>
<li><a href="/tags">Bible Tags</a></li>
<li><a href="/articles">Bible Articles</a></li>
<li><a href="/devotional">Daily Devotional</a></li>
</ul>
</div>
<!-- Column 2: Tools -->
<div class="footer-col">
<strong class="footer-col-heading">Tools</strong>
<ul class="footer-links">
<li><a href="/ten-lists">Ten Lists System</a></li>
<li><a href="/trivia">Bible Trivia</a></li>
<li><a href="/gallery">Community Gallery</a></li>
<li><a href="/randomness-archive">Randomness Data</a></li>
</ul>
</div>
<!-- Column 3: About -->
<div class="footer-col">
<strong class="footer-col-heading">About</strong>
<ul class="footer-links">
<li><a href="/about">About</a></li>
<li><a href="/how-to-use">How to Use</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/extension">Browser Extension</a></li>
<li><a href="/install-app">Install App</a></li>
</ul>
</div>
</div>
<p class="footer-ai-disclosure">
AI answers are generated using Google Gemini and may be inaccurate.
Verify important claims with the cited sources.
</p>
<div class="footer-bottom">
<div class="footer-copyright">
© 2026 TrulyRandomVerse </div>
<div class="footer-legal-line">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/beta-terms">AI Beta Terms</a>
<a href="#" class="footer-signin-link" data-trv-footer-signin>Sign in</a>
</div>
<div class="footer-socials">
<a href="https://x.com/TRVBibleVerses" target="_blank" rel="noopener" class="footer-social-icon" aria-label="X (Twitter)">
<img src="/img/icons/x_logo_2023.svg" class="social-icon-x-light" alt="X" width="16" height="16">
<img src="/img/icons/x_logo_2023_white.svg" class="social-icon-x-dark" alt="X" width="16" height="16">
</a>
<a href="https://www.facebook.com/groups/trulyrandomverse" target="_blank" rel="noopener" class="footer-social-icon" aria-label="Facebook">
<img src="/img/icons/facebook_f_logo.svg" alt="Facebook" width="18" height="18">
</a>
</div>
</div>
</div>
</footer>
</div>
<nav id="pwa-nav-bar" class="pwa-nav-bar" aria-label="Mobile Navigation">
<button type="button" id="pwa-btn-back" class="pwa-nav-button" aria-label="Go Back">
<i class="fas fa-chevron-left"></i>
</button>
<button type="button" id="pwa-btn-share" class="pwa-nav-button" aria-label="Share Verse">
<i class="fas fa-share-alt"></i>
</button>
<button type="button" id="pwa-btn-reload" class="pwa-nav-button" aria-label="Reload Page">
<i class="fas fa-rotate"></i>
</button>
<button type="button" id="pwa-btn-history" class="pwa-nav-button" aria-label="View History">
<i class="fas fa-clock-rotate-left"></i>
</button>
</nav>
<button type="button" id="pwa-scroll-top" class="scroll-top-btn" aria-label="Scroll to Top">
<i class="fas fa-arrow-up"></i>
</button>
<div id="pwa-history-menu" class="pwa-history-menu" hidden>
<div class="pwa-history-header">
<span class="pwa-history-title">Recent History</span>
<button type="button" id="pwa-history-close">Close</button>
</div>
<ul id="pwa-history-list"></ul>
<div class="pwa-history-footer">
<span class="pwa-history-limit-msg">Only the last 50 pages are stored locally.</span>
</div>
</div>
<div id="toast" class="toast" role="status" aria-live="polite"></div>
<div id="pwa-install-banner" class="pwa-banner" role="dialog" aria-label="Install App" hidden>
<div class="pwa-banner-inner">
<div class="pwa-banner-icon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</div>
<div class="pwa-banner-content">
<p class="pwa-banner-title">Get the App</p>
<p class="pwa-banner-subtitle">Add TrulyRandomVerse to your home screen for instant access</p>
</div>
<div class="pwa-banner-actions">
<button id="pwa-install-button" class="pwa-banner-btn-install">Install</button>
<button id="pwa-dismiss-button" class="pwa-banner-btn-dismiss" aria-label="Dismiss">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
</div>
</div>
<div class="trv-modal search-modal" id="search-modal" role="dialog" aria-labelledby="search-modal-title" aria-modal="true" aria-hidden="true">
<div class="trv-modal-backdrop"></div>
<div class="trv-modal-dialog search-modal-dialog">
<button class="trv-modal-close" data-modal-close aria-label="Close search modal">×</button>
<h2 id="search-modal-title">Search Scripture</h2>
<form id="passage-search-form-mobile" class="passage-search-form" action="/search" method="GET">
<div class="passage-search-input-wrapper">
<input type="text" name="q" id="passage-search-input-mobile" class="passage-search-input"
placeholder="Try John 3:16 or fear not"
autocomplete="off"
role="combobox"
aria-label="Search for Bible passages"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="autocomplete-container-mobile">
</div>
<button type="submit" class="passage-search-submit" aria-label="Submit Search">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</form>
<div id="autocomplete-container-mobile" class="search-autocomplete nav-autocomplete" role="listbox"></div>
<p id="passage-search-error-mobile" class="passage-search-error" role="alert"></p>
<div id="mobile-recent-searches" class="mobile-recent-searches"></div>
</div>
</div>
<script>window.TRV_AUTH = {"client_id":"1092156319046-58lhjvl2slrup55p41mueju81qrg0n51.apps.googleusercontent.com","beta_agreement_version":2,"user":null};</script>
<script src="/js/trv-utils.js?v=4.0.441"></script>
<script>window.TRV_BOOK_SLUGS = ["song_of_solomon","1_thessalonians","2_thessalonians","1_corinthians","2_corinthians","1_chronicles","2_chronicles","ecclesiastes","lamentations","deuteronomy","philippians","colossians","revelation","leviticus","zephaniah","zechariah","galatians","ephesians","1_timothy","2_timothy","1_samuel","2_samuel","nehemiah","proverbs","jeremiah","habakkuk","philemon","genesis","numbers","1_kings","2_kings","ezekiel","obadiah","malachi","matthew","hebrews","1_peter","2_peter","exodus","joshua","judges","esther","psalms","isaiah","daniel","haggai","romans","1_john","2_john","3_john","hosea","jonah","micah","nahum","titus","james","ruth","ezra","joel","amos","mark","luke","john","acts","jude","job"];</script>
<script src="/js/scripture-preview.js?v=4.0.441" defer></script>
<script src="/js/search-history.js?v=4.0.441" defer></script>
<script src="/js/autocomplete.js?v=4.0.441" defer></script>
<script src="/js/auth.js?v=4.0.441" defer></script>
<script src="/js/site.js?v=4.0.441" defer></script>
<script>
var _paq = window._paq = window._paq || [];
_paq.push(['enableHeartBeatTimer', 15]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//trulyrandomverse.com/matomo/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js';
s.parentNode.insertBefore(g,s);
})();
// Fallback bot trap — catches any bot that somehow bypassed the early <head>
// redirect (e.g. a cached page). Same signals as the head check.
(function(){var u=navigator.userAgent||'';if(navigator.webdriver||(/Linux aarch64/.test(u)&&/Chrome\//.test(u))){navigator.sendBeacon('/api/bot-trap');return;}var w=screen.width,h=screen.height;if((w===800&&h===600)||(w===h&&w>=1024)){navigator.sendBeacon('/api/bot-trap');}})();
</script>
<!-- Cookie Consent Banner -->
<div id="cookie-consent" class="cookie-consent" role="dialog" aria-label="Cookie Consent" hidden>
<div class="cookie-consent-inner">
<p class="cookie-consent-text">
This site uses cookies.
<a href="/privacy" class="cookie-consent-link">Privacy Policy</a>
</p>
<div class="cookie-consent-actions">
<button id="cookie-accept-all" class="cookie-consent-btn cookie-consent-accept">Accept All</button>
<button id="cookie-essential-only" class="cookie-consent-btn cookie-consent-decline">Essential Only</button>
</div>
</div>
</div>
<script>
(function() {
'use strict';
var CONSENT_KEY = 'trv_cookie_consent';
var consent;
try { consent = localStorage.getItem(CONSENT_KEY); } catch(e) {}
// If user already made a choice, apply it silently and don't show banner
if (consent === 'all') {
if (typeof gtag === 'function') {
gtag('consent', 'update', {
'analytics_storage': 'granted',
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted'
});
}
if (typeof clarity === 'function') {
clarity('consentv2', { ad_Storage: 'granted', analytics_Storage: 'granted' });
}
return;
}
if (consent === 'essential') return;
// No choice yet — show the banner
var banner = document.getElementById('cookie-consent');
if (!banner) return;
banner.hidden = false;
document.getElementById('cookie-accept-all').addEventListener('click', function() {
try { localStorage.setItem(CONSENT_KEY, 'all'); } catch(e) {}
if (typeof gtag === 'function') {
gtag('consent', 'update', {
'analytics_storage': 'granted',
'ad_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted'
});
}
if (typeof clarity === 'function') {
clarity('consentv2', { ad_Storage: 'granted', analytics_Storage: 'granted' });
}
banner.hidden = true;
});
document.getElementById('cookie-essential-only').addEventListener('click', function() {
try { localStorage.setItem(CONSENT_KEY, 'essential'); } catch(e) {}
banner.hidden = true;
});
})();
</script>
</body>
</html>