A comprehensive Bible study companion with daily passages, notes, and powerful study tools.
Get a new scripture passage every day with sequential or specific book reading plans.
Right‑click verses to highlight in colors. Take notes with full markdown support.
Click any verse to access Strong's Concordance, Greek/Hebrew interlinear, and more.
Open a side‑by‑side reference panel to compare translations while you study.
Save your highlights and notes. Import/export your data anytime.
Upload a PDF Bible to read and take notes while offline.
You can upload a free Berean Standard Bible PDF. This is entirely optional – you can skip this and use the online version.
Click to select your downloaded PDF
Or drag and drop hereAttribution
Scripture quotations are provided by API from bible.helloao.org, without which this app would not have been possible. And a thank you to Berean Bible for their excellent translation work. All copyrights reserved by their respective owners. Currently selected translation: Berean Standard Bible®
+ These resources provide detailed word-by-word analysis. + Use the "Pop Out" button to open them in a new tab. +
+No footnotes available for this verse
'; + return; + } + console.log('Found stored footnotes:', verseFootnotes); + container.innerHTML = ` +Error rendering markdown
'; + } +} +export function insertMarkdown(type) { + const ta = document.getElementById('notesInput'); + const start = ta.selectionStart; + const end = ta.selectionEnd; + const sel = ta.value.substring(start, end); + let repl = ''; + let cursorAdj = 0; + switch (type) { + case 'bold': repl = `**${sel || 'bold text'}**`; cursorAdj = sel ? 0 : -2; break; + case 'italic': repl = `*${sel || 'italic text'}*`; cursorAdj = sel ? 0 : -1; break; + case 'h1': repl = `# ${sel || 'Heading 1'}`; cursorAdj = sel ? 0 : -10; break; + case 'h2': repl = `## ${sel || 'Heading 2'}`; cursorAdj = sel ? 0 : -10; break; + case 'h3': repl = `### ${sel || 'Heading 3'}`; cursorAdj = sel ? 0 : -10; break; + case 'ul': repl = `- ${sel || 'List item'}`; cursorAdj = sel ? 0 : -10; break; + case 'ol': repl = `1. ${sel || 'List item'}`; cursorAdj = sel ? 0 : -10; break; + case 'quote': repl = `> ${sel || 'Quote'}`; cursorAdj = sel ? 0 : -6; break; + case 'code': repl = `\`${sel || 'code'}\``; cursorAdj = sel ? 0 : -1; break; + case 'link': repl = `[${sel || 'link text'}](url)`; cursorAdj = sel ? -4 : -14; break; + } + ta.value = ta.value.slice(0, start) + repl + ta.value.slice(end); + const newPos = start + repl.length + cursorAdj; + ta.setSelectionRange(newPos, newPos); + ta.focus(); + state.notes = ta.value; + saveToStorage(); + updateMarkdownPreview(); +} +export function exportNotes(ext) { + if (!state.notes || state.notes.trim() === '') { + alert('No notes to export!'); + return; + } + const blob = new Blob([state.notes], { type: 'text/plain;charset=utf-8' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `study-notes-${new Date().toISOString().split('T')[0]}.${ext}`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); +} +export function toggleNotes() { + document.getElementById('notesSection').classList.toggle('hidden'); +} +export function togglePanelCollapse(panelId) { + const panel = document.getElementById(panelId); + const collapsed = panel.classList.contains('panel-collapsed'); + if (collapsed) { + panel.classList.remove('panel-collapsed'); + if (state.settings.panelWidths[panelId]) { + panel.style.width = state.settings.panelWidths[panelId] + 'px'; + } + state.settings.collapsedPanels[panelId] = false; + } else { + panel.classList.add('panel-collapsed'); + state.settings.collapsedPanels[panelId] = true; + } + saveToStorage(); +} +export function toggleSection(sectionId) { + const content = document.getElementById(`content-${sectionId}`); + const header = document.querySelector(`[data-section="${sectionId}"]`); + const toggle = header.querySelector('.section-toggle'); + const nowCollapsed = content.classList.contains('collapsed'); + content.classList.toggle('collapsed'); + toggle.classList.toggle('collapsed'); + state.settings.collapsedSections[sectionId] = !nowCollapsed; + saveToStorage(); +} +export function toggleReferencePanel() { + const panel = document.getElementById('referencePanel'); + const nowOpen = panel.classList.contains('active'); + if (nowOpen) { + panel.classList.remove('active'); + state.settings.referencePanelOpen = false; + } else { + panel.classList.add('active'); + state.settings.referencePanelOpen = true; + updateReferencePanel(); + } + saveToStorage(); +} +export async function updateReferencePanel() { + try { + const sourceSelect = document.getElementById('referenceSource'); + const source = sourceSelect.value; + const iframe = document.getElementById('referenceIframe'); + const pdfViewer = document.getElementById('pdfViewer'); + const transSel = document.getElementById('referenceTranslation'); + state.settings.referenceSource = source; + state.settings.referenceVersion = transSel.value; + transSel.style.display = source === 'pdf' ? 'none' : 'block'; + filterTranslationOptions(source, transSel); + const actualSource = document.getElementById('referenceSource').value; + const translation = transSel.value; + let passage; + if (state.settings.readingMode === 'readingPlan') { + passage = getActivePlan()[state.settings.currentPassageIndex]; + } else { + passage = { + book: state.settings.manualBook, + chapter: state.settings.manualChapter, + displayRef: `${state.settings.manualBook} ${state.settings.manualChapter}` + }; + } + const bookName = passage.book.toLowerCase().replace(/\s+/g, '_'); + const bookAbbr = bookName.substring(0, 3).toUpperCase(); + const chapter = passage.chapter; + if (actualSource === 'pdf') { + if (!state.settings.customPdf) { + alert('No PDF uploaded. Please upload one in Settings first.'); + document.getElementById('referenceSource').value = 'biblegateway'; + transSel.style.display = 'block'; + filterTranslationOptions('biblegateway', transSel); + return; + } + iframe.style.display = 'none'; + pdfViewer.classList.add('active'); + document.getElementById('zoomLevel').textContent = + Math.round(state.settings.pdfZoom * 100) + '%'; + await loadPDF(); + } else if (actualSource === 'biblehub') { + const bibleHubCode = bibleHubUrlMap[translation] || translation.toLowerCase(); + const url = `https://biblehub.com/${bibleHubCode}/${bookName}/${chapter}.htm`; + iframe.src = url; + } else if (actualSource === 'biblecom') { + const bibleComCode = bibleComUrlMap[translation]; + if (!bibleComCode) { + alert(`Bible.com doesn't support ${translation}. Please choose another translation.`); + return; + } + const formattedBook = formatBookNameForSource(passage.book, 'biblecom'); + const urlFormats = [ + `https://www.bible.com/bible/${bibleComCode}/${formattedBook}.${chapter}.${translation}?interface=embed`, + `https://www.bible.com/bible/${bibleComCode}/${formattedBook}.${chapter}.${translation}`, + `https://www.bible.com/bible/${bibleComCode}/${chapter}.${translation}?${formattedBook}=${chapter}` + ]; + let currentUrlIndex = 0; + function tryNextUrl() { + if (currentUrlIndex >= urlFormats.length) { + alert('Could not load Bible.com. Please try another reference source.'); + return; + } + iframe.src = urlFormats[currentUrlIndex]; + currentUrlIndex++; + } + iframe.onload = function() { + console.log('Bible.com loaded successfully with format', currentUrlIndex); + }; + iframe.onerror = function() { + console.log('Trying next Bible.com URL format...'); + tryNextUrl(); + }; + tryNextUrl(); + } else if (actualSource === 'ebibleorg') { + const ebibleOrgCode = ebibleOrgUrlMap[translation]; + if (!ebibleOrgCode) { + alert(`eBible.org doesn't support ${translation}. Please choose another translation.`); + return; + } + const bookRef = bookName === 'psalms' ? 'PS1' : `${bookAbbr}1`; + const url = `https://ebible.org/study/?w1=bible&t1=${encodeURIComponent(ebibleOrgCode)}&v1=${bookRef}_${chapter}`; + iframe.src = url; + } else if (actualSource === 'stepbible') { + const stepBibleCode = stepBibleUrlMap[translation]; + if (!stepBibleCode) { + alert(`STEP Bible doesn't support ${translation}. Please choose another translation.`); + return; + } + const url = getStepBibleUrl(passage.displayRef, translation); + iframe.src = url; + } else { + const query = passage.displayRef.replace(/\s+/g, '+'); + let version = translation; + if (translation === 'GNV') version = 'GNV'; + const url = `https://www.biblegateway.com/passage/?search=${query}&version=${version}&interface=print`; + iframe.src = url; + } + saveToStorage(); + } catch (err) { + handleError(err, 'updateReferencePanel'); + } +} +function filterTranslationOptions(source, selectElement) { + const unsupportedTranslations = { + biblecom: [], + biblehub: ['GNV'], + biblegateway: ['BSB'], + stepbible: ['NKJV', 'CSB', 'NLT'], + ebibleorg: ['NASB', 'ASV', 'ESV', 'NKJV', 'CSB', 'NIV', 'NLT'], + pdf: ['NASB1995', 'NASB', 'ASV', 'ESV', 'KJV', 'GNV', 'NKJV', 'BSB', 'CSB', 'NET', 'NIV', 'NLT'] + }; + const allOptions = selectElement.querySelectorAll('option'); + const currentValue = selectElement.value; + let needsNewSelection = false; + let needsSourceChange = false; + allOptions.forEach(option => { + const value = option.value; + const isUnsupported = unsupportedTranslations[source]?.includes(value); + if (isUnsupported) { + option.style.display = 'none'; + option.disabled = true; + if (value === currentValue) { + needsNewSelection = true; + if (value === 'BSB' && source === 'biblegateway') { + needsSourceChange = true; + } + } + } else { + option.style.display = 'block'; + option.disabled = false; + } + }); + if (needsSourceChange) { + document.getElementById('referenceSource').value = 'biblehub'; + state.settings.referenceSource = 'biblehub'; + const sourceSelect = document.getElementById('referenceSource'); + sourceSelect.value = 'biblehub'; + selectElement.value = 'BSB'; + state.settings.referenceVersion = 'BSB'; + } + else if (needsNewSelection) { + let fallbackValue = 'NASB1995'; + if (source === 'biblehub') { + fallbackValue = 'NASB'; + } + selectElement.value = fallbackValue; + state.settings.referenceVersion = fallbackValue; + } + if (needsSourceChange || needsNewSelection) { + saveToStorage(); + } +} +export function restoreBookChapterUI() { + populateBookDropdown(); + const bookSel = document.getElementById('bookSelect'); + const chapterSel = document.getElementById('chapterSelect'); + const savedBook = state.settings.manualBook || BOOK_ORDER[0]; + const bookIdx = BOOK_ORDER.indexOf(savedBook); + const book = bookIdx >= 0 ? BOOK_ORDER[bookIdx] : BOOK_ORDER[0]; + populateBookDropdown(); + bookSel.value = book; + populateChapterDropdown(book); + const savedChap = Number(state.settings.manualChapter) || 1; + const maxChap = CHAPTER_COUNTS[book]; + const chapter = Math.min(savedChap, maxChap); + chapterSel.value = String(chapter); + state.settings.manualBook = book; + state.settings.manualChapter = chapter; + loadSelectedChapter(book, chapter); +} +export function initResizeHandles() { + const handles = document.querySelectorAll('.resize-handle'); + const SPEED_FACTOR = 1.8; + const limits = { + sidebar: { min: 150, max: 600 }, + referencePanel: { min: 250, max: 800 }, + scriptureSection: { min: 300, max: 1200 }, + notesSection: { min: 250, max: 800 } + }; + let resizing = false, + startX = 0, + startW = 0, + panel = null, + invert = false, + pendingRAF = false; + handles.forEach(handle => { + handle.addEventListener('mousedown', e => { + resizing = true; + startX = e.clientX; + const panelId = handle.dataset.panel; + panel = document.getElementById(panelId); + startW = panel.offsetWidth; + invert = (panel.id === 'notesSection'); + document.body.style.cursor = 'ew-resize'; + document.body.style.userSelect = 'none'; + e.preventDefault(); + }); + }); + document.addEventListener('mousemove', e => { + if (!resizing || !panel) return; + let delta = (invert ? startX - e.clientX : e.clientX - startX) * SPEED_FACTOR; + let newW = startW + delta; + const { min, max } = limits[panel.id] || { min: 150, max: 1200 }; + if (newW < min) newW = min; + if (newW > max) newW = max; + if (!pendingRAF) { + pendingRAF = true; + requestAnimationFrame(() => { + panel.style.width = newW + 'px'; + state.settings.panelWidths[panel.id] = newW; + pendingRAF = false; + }); + } + }); + document.addEventListener('mouseup', () => { + if (resizing) { + resizing = false; + panel = null; + document.body.style.cursor = ''; + document.body.style.userSelect = ''; + saveToStorage(); + } + }); +} +export function popOutResource(url, title) { + window.open(url, title, + 'width=800,height=600,menubar=no,toolbar=no,location=no'); +} +export function getStepBibleUrl(reference, translation) { + const stepBibleCode = stepBibleUrlMap[translation] || translation; + return `https://www.stepbible.org/?q=version=${stepBibleCode}@reference=${encodeURIComponent(reference)}&options=HNVUG`; +} +export function makeToggleSticky() { + const sidebar = document.getElementById('sidebar'); + const toggle = sidebar.querySelector('.collapse-toggle'); + if (!toggle) return; + toggle.style.position = 'sticky'; + toggle.style.top = '10px'; + toggle.style.zIndex = '1000'; + toggle.style.marginLeft = 'auto'; + toggle.style.marginRight = '10px'; +} +export function restoreSidebarState() { + Object.entries(state.settings.collapsedSections || {}) + .forEach(([sec, collapsed]) => { + if (collapsed) { + const content = document.getElementById(`content-${sec}`); + const header = document.querySelector(`[data-section="${sec}"]`); + const toggle = header?.querySelector('.section-toggle'); + if (content && toggle) { + content.classList.add('collapsed'); + toggle.classList.add('collapsed'); + } + } + }); +} +export function restorePanelStates() { + Object.entries(state.settings.panelWidths || {}) + .forEach(([id, w]) => { + const el = document.getElementById(id); + if (el && w) el.style.width = w + 'px'; + }); + Object.entries(state.settings.collapsedPanels || {}) + .forEach(([id, collapsed]) => { + const el = document.getElementById(id); + if (el && collapsed) el.classList.add('panel-collapsed'); + }); + if (state.settings.referencePanelOpen) { + document.getElementById('referencePanel').classList.add('active'); + document.getElementById('referenceSource').value = + state.settings.referenceSource || 'biblegateway'; + document.getElementById('referenceTranslation').value = + state.settings.referenceVersion || 'NASB1995'; + updateReferencePanel(); + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8d5580b --- /dev/null +++ b/styles.css @@ -0,0 +1,363 @@ +:root{--primary-color:#2c3e50;--secondary-color:#34495e;--accent-color:#3498db;--background:#ecf0f1;--card-background:#ffffff;--toolbar-background:#f8f9fa;--notes-background:#f8f9fa;--sidebar-background:#2c3e50;--header-background:#ffffff;--popup-background:#ffffff;--text-color:#2c3e50;--sidebar-text:#ecf0f1;--border-color:#bdc3c7;--verse-hover:#f0f0f0;--shadow:rgba(0,0,0,0.1);--shadow-strong:rgba(0,0,0,0.3);--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--radius-sm:0.25rem;--radius-md:0.5rem;--radius-lg:0.75rem;--radius-xl:1rem;--transition-fast:150ms ease;--transition-normal:300ms ease;--transition-slow:500ms ease} +[data-color-theme="blue"]{--primary-color:#2c3e50;--secondary-color:#34495e;--accent-color:#3498db} +[data-color-theme="green"]{--primary-color:#1b5e20;--secondary-color:#2e7d32;--accent-color:#4caf50} +[data-color-theme="purple"]{--primary-color:#4a148c;--secondary-color:#6a1b9a;--accent-color:#9c27b0} +[data-color-theme="red"]{--primary-color:#b71c1c;--secondary-color:#c62828;--accent-color:#f44336} +[data-color-theme="orange"]{--primary-color:#e65100;--secondary-color:#ef6c00;--accent-color:#ff9800} +[data-color-theme="teal"]{--primary-color:#004d40;--secondary-color:#00695c;--accent-color:#009688} +[data-theme="dark"]{--background:#0d1117;--card-background:#161b22;--toolbar-background:#161b22;--notes-background:#0d1117;--sidebar-background:#0d1117;--header-background:#161b22;--popup-background:#161b22;--text-color:#e1e1e1;--sidebar-text:#c9d1d9;--border-color:#444;--verse-hover:#21262d;--shadow:rgba(0,0,0,0.4);--shadow-strong:rgba(0,0,0,0.6)} +[data-theme="dark"][data-color-theme="blue"]{--primary-color:#1a3a52;--secondary-color:#2c5f7f;--accent-color:#5dade2} +[data-theme="dark"][data-color-theme="green"]{--primary-color:#1b4d20;--secondary-color:#2e6d32;--accent-color:#66bb6a} +[data-theme="dark"][data-color-theme="purple"]{--primary-color:#4a148c;--secondary-color:#7b1fa2;--accent-color:#ab47bc} +[data-theme="dark"][data-color-theme="red"]{--primary-color:#b71c1c;--secondary-color:#d32f2f;--accent-color:#ef5350} +[data-theme="dark"][data-color-theme="orange"]{--primary-color:#e65100;--secondary-color:#f57c00;--accent-color:#ffa726} +[data-theme="dark"][data-color-theme="teal"]{--primary-color:#004d40;--secondary-color:#00796b;--accent-color:#26a69a} + +*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} +@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important} +} +:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px} +@media(prefers-contrast:high){:root{--border-color:#000000;--shadow:rgba(0,0,0,0.8);--shadow-strong:rgba(0,0,0,0.9)} +.verse:hover{outline:2px solid var(--accent-color)} +} + +body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background-color:var(--background);color:var(--text-color);line-height:1.6;transition:background-color 0.3s,color 0.3s} +.container{display:flex;height:100vh;overflow:hidden} +.panel-collapsed{min-width:50px!important;max-width:50px!important} +.panel-collapsed>*:not(.collapse-toggle):not(.resize-handle){display:none!important} +.collapse-toggle{will-change:transform;position:absolute;top:55%;right:5px;transform:translateY(-50%);background:var(--accent-color);color:white;border:none;width:40px;height:40px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:100;transition:transform 0.3s ease,background-color 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.2)} +.collapse-toggle:hover{transform:translateY(-50%)scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.3)} +.collapse-toggle:focus{outline:2px solid white;outline-offset:2px} +.panel-collapsed .collapse-toggle{right:5px} +.collapse-toggle::before{content:'\25C0';transition:transform 0.3s ease} +.panel-collapsed .collapse-toggle::before{content:'\25B6'} +#scriptureSection .collapse-toggle::before{content:'\25B6'} +#scriptureSection.panel-collapsed .collapse-toggle::before{content:'\25C0'} +#notesSection .collapse-toggle::before{content:'\25B6'} +#notesSection.panel-collapsed .collapse-toggle::before{content:'\25C0'} +.scripture-section{scroll-behavior:smooth;scroll-padding-top:20px} +.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0} +.content-area{flex:1;display:flex;overflow:hidden} + +.welcome-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--primary-color),var(--accent-color));z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto} +.welcome-screen.hidden{display:none} +.welcome-content{background:var(--card-background);border-radius:20px;padding:40px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.3);margin:auto;max-height:90vh;overflow-y:auto} +.welcome-content h1{color:var(--primary-color);text-align:center;margin-bottom:15px;font-size:2.5em} +.welcome-content>p{color:var(--text-color);text-align:center;margin-bottom:30px;font-size:1.2em;opacity:0.8} +.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:30px 0} +.feature-card{padding:20px;background:var(--background);border-radius:10px;border:2px solid var(--border-color);transition:all 0.3s} +.feature-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px var(--shadow);border-color:var(--accent-color)} +.feature-icon{font-size:2.5em;margin-bottom:10px} +.feature-card h3{color:var(--primary-color);margin-bottom:10px} +.feature-card p{color:var(--text-color);opacity:0.8;font-size:0.95em} +.offline-setup{margin:30px 0;padding:25px;background:var(--background);border-radius:10px;border:2px solid var(--accent-color)} +.offline-setup h2{color:var(--primary-color);margin-bottom:15px;display:flex;align-items:center;gap:10px} +.pdf-upload-area{border:2px dashed var(--border-color);border-radius:8px;padding:30px;text-align:center;cursor:pointer;transition:all 0.3s;background:var(--card-background);margin:15px 0} +.pdf-upload-area:hover{border-color:var(--accent-color);background-color:rgba(52,152,219,0.05)} +.pdf-upload-area.has-file{border-color:var(--accent-color);background-color:rgba(52,152,219,0.1)} +.pdf-download-options{margin-top:15px;padding:15px;background-color:var(--card-background);border-radius:5px} +.pdf-download-options h4{margin-bottom:10px;color:var(--text-color)} +.pdf-download-link{display:block;padding:8px 12px;margin-bottom:8px;background-color:var(--background);border:1px solid var(--border-color);border-radius:4px;color:var(--accent-color);text-decoration:none;transition:all 0.2s} +.pdf-download-link:hover{background-color:var(--accent-color);color:white} +.welcome-actions{display:flex;gap:15px;margin-top:30px;justify-content:center} +.welcome-actions button{padding:15px 40px;border:none;border-radius:8px;font-size:16px;font-weight:bold;cursor:pointer;transition:all 0.3s} + +.sidebar{width:280px;background-color:var(--sidebar-background);color:var(--sidebar-text);padding:20px;overflow-y:auto;flex-shrink:0;border-right:1px solid var(--border-color);position:relative;min-width:50px;transition:all 0.3s ease} +.sidebar h2{margin-bottom:20px;font-size:1.3em;border-bottom:2px solid var(--accent-color);padding-bottom:10px;color:var(--sidebar-text)} +.sidebar-section{margin-bottom:10px} +.sidebar-section-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:10px;margin-top:15px;background-color:rgba(255,255,255,0.05);border-radius:5px;transition:background-color 0.2s} +.sidebar-section-header:hover{background-color:rgba(255,255,255,0.1)} +.sidebar-section-header:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.sidebar-section-header h3{margin:0;font-size:1.1em;color:var(--accent-color)} +.section-toggle{font-size:0.9em;transition:transform 0.3s} +.section-toggle.collapsed{transform:rotate(-90deg)} +.sidebar-section-content{max-height:1000px;overflow:hidden;transition:max-height 0.3s ease-out,opacity 0.3s ease-out;opacity:1} +.sidebar-section-content.collapsed{max-height:0;opacity:0} +.sidebar-links{list-style:none;margin-top:10px} +.sidebar-links li{margin-bottom:8px} +.sidebar-links a{color:var(--sidebar-text);text-decoration:none;display:block;padding:8px 12px;border-radius:5px;transition:background-color 0.3s;opacity:0.9} +.sidebar-links a:hover{background-color:var(--secondary-color);opacity:1} +.sidebar-links a:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.reference-panel-toggle{margin-top:20px;padding:12px;background:var(--accent-color);color:white;border:none;border-radius:5px;cursor:pointer;width:100%;font-size:14px;font-weight:bold;transition:opacity 0.3s} +.reference-panel-toggle:hover{opacity:0.8} +.reference-panel-toggle:focus{outline:2px solid white;outline-offset:2px} + +.reference-panel{display:none;width:400px;background-color:var(--card-background);border-right:1px solid var(--border-color);position:relative;flex-shrink:0;min-width:50px;transition:all 0.3s ease} +.reference-panel.active{display:flex;flex-direction:column} +.reference-panel-header{padding:15px;background-color:var(--toolbar-background);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} +.reference-panel-header h3{color:var(--text-color);margin:0} +.reference-panel-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap} +.reference-panel-controls select{padding:5px 10px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--card-background);color:var(--text-color);font-size:13px} +.reference-panel-controls select:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.reference-panel-close{background:none;border:none;color:var(--text-color);cursor:pointer;font-size:20px;padding:5px 10px;border-radius:4px;transition:background-color 0.2s;margin-left:10px} +.reference-panel-close:hover{background-color:var(--verse-hover)} +.reference-panel-close:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.reference-panel-content{flex:1;overflow:hidden;position:relative} +.reference-panel-iframe{width:100%;height:100%;border:none} +.pdf-viewer{width:100%;height:100%;display:none;flex-direction:column;background-color:var(--card-background)} +.pdf-viewer.active{display:flex} +.pdf-controls{padding:10px;background-color:var(--toolbar-background);border-bottom:1px solid var(--border-color);display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap} +.pdf-controls button{padding:5px 15px;background-color:var(--accent-color);color:white;border:none;border-radius:4px;cursor:pointer;font-size:13px} +.pdf-controls button:hover{opacity:0.8} +.pdf-controls button:focus{outline:2px solid white;outline-offset:2px} +.pdf-controls button:disabled{opacity:0.5;cursor:not-allowed} +.pdf-controls span{color:var(--text-color);font-size:13px} +.pdf-controls input[type="number"]{width:60px;padding:5px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--card-background);color:var(--text-color);font-size:13px} +.pdf-controls input[type="number"]:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.pdf-canvas-container{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:20px;background-color:var(--background)} +#pdfCanvas{box-shadow:0 2px 10px var(--shadow)} + +.resize-handle{position:absolute;top:0;bottom:0;width:10px;cursor:ew-resize;background-color:transparent;transition:background-color 0.2s;z-index:10;display:flex;align-items:center;justify-content:center} +.resize-handle::after{content:'\22EE\22EE';color:var(--border-color);font-size:18px;opacity:0;transition:opacity 0.2s} +.resize-handle:hover{background-color:rgba(52,152,219,0.1)} +.resize-handle:hover::after{opacity:1;color:var(--accent-color)} +.resize-handle-right{right:0} +.resize-handle-left{left:0} + +.header{background-color:var(--header-background);padding:20px 30px;box-shadow:0 2px 5px var(--shadow);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)} +.header h1{color:var(--text-color);font-size:1.8em} +.header-controls{display:flex;gap:10px;align-items:center} +.theme-toggle{background:none;border:2px solid var(--border-color);color:var(--text-color);width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all 0.3s} +.theme-toggle:hover{background-color:var(--accent-color);border-color:var(--accent-color);color:white;transform:rotate(180deg)} +.theme-toggle:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.btn{position:relative;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:all 0.3s;background-color:var(--accent-color);color:white} +.btn:hover{opacity:0.8;transform:translateY(-1px)} +.btn:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.btn:focus::after{content:'';position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;border:2px solid var(--accent-color);border-radius:7px;pointer-events:none} +.btn-secondary{background-color:var(--secondary-color)} +.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none} +.btn-primary{background:var(--accent-color);color:white} +.btn-primary:hover{opacity:0.9;transform:translateY(-2px);box-shadow:0 5px 15px var(--shadow)} +.btn-primary:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.btn-danger{background-color:#f44336!important;color:white} +.btn-danger:hover{background-color:#d32f2f!important;opacity:0.9} +.toolbar{background-color:var(--toolbar-background);padding:15px 30px;border-bottom:1px solid var(--border-color);display:flex;gap:10px;align-items:center;flex-wrap:wrap} +.toolbar button{padding:8px 15px;font-size:13px} +.toolbar-info{margin-left:auto;color:var(--text-color);opacity:0.7;font-size:14px} +.toolbar-divider{width:1px;height:24px;margin:0 12px;background-color:var(--border-color);align-self:center;opacity:0.6} + +.scripture-section{flex:1;padding:30px;overflow-y:auto;background-color:var(--card-background);margin:var(--spacing-xl);padding-inline:var(--spacing-xl);padding-block:var(--spacing-lg);border-radius:10px;box-shadow:0 2px 10px var(--shadow);border:1px solid var(--border-color);position:relative;min-width:300px;transition:all 0.3s ease;contain:layout style} +.scripture-content{font-size:1.1em;line-height:1.8;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1,"liga" 1,"calt" 1} +.passage-header{background:linear-gradient(135deg,var(--primary-color),var(--primary-color));color:white;padding:20px;border-radius:8px;margin-bottom:20px} +.passage-header h2{font-size:1.5em;margin-bottom:5px;color:white;border:none} +.passage-header .date{opacity:0.9;font-size:0.9em} +.passage-reference{font-weight:bold;font-size:1.2em;margin-bottom:15px;color:var(--accent-color)} +.plan-label{font-size:1.1rem;font-weight:500;color:var(--accent-color);margin-top:8px;margin-bottom:12px} +.verse{margin-bottom:8px;padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition-fast);position:relative;contain:content} +.verse:hover,.verse:active{background-color:var(--verse-hover);will-change:background-color} +.verse:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.verse-number{font-weight:bold;color:var(--accent-color);margin-right:8px;font-size:0.85em;vertical-align:super} +.verse-text{display:inline} +.highlight-yellow{background-color:#fff59d;color:#000} +.highlight-green{background-color:#a5d6a7;color:#000} +.highlight-blue{background-color:#90caf9;color:#000} +.highlight-pink{background-color:#f48fb1;color:#000} +.highlight-orange{background-color:#ffcc80;color:#000} +.highlight-purple{background-color:#ce93d8;color:#000} +.footnote-ref{position:relative;color:var(--accent-color);font-size:0.7em;vertical-align:super;cursor:pointer;margin:0 1px;text-decoration:none;font-weight:bold;background-color:rgba(0,0,0,0.08);padding:1px 4px;border-radius:3px;line-height:1;transition:all 0.2s ease} +.footnote-ref:hover{background-color:var(--accent-color);color:white;transform:scale(1.1)} +.footnote-ref::before{content:'['} +.footnote-ref::after{content:']'} +.footnotes-container{margin-top:20px;padding:15px;background-color:var(--toolbar-background);border-radius:6px;border-left:3px solid var(--accent-color);font-size:0.9em;overflow-y:auto;max-height:300px;position:relative;z-index:100} +.footnotes-separator{margin:30px 0 15px 0;border:none;border-top:1px solid var(--border-color);opacity:0.5} +.footnotes-heading{color:var(--text-color);margin-bottom:15px;font-size:1.1em;font-weight:600} +.footnote{cursor:pointer;transition:all 0.2s ease;padding:8px 12px;border-radius:4px;margin-bottom:8px} +.footnote:hover{background-color:var(--verse-hover);transform:translateX(2px)} +.footnote-number{color:var(--accent-color);font-weight:bold;margin-right:8px;background-color:rgba(0,0,0,0.08);padding:2px 6px;border-radius:3px;transition:all 0.2s ease} +.footnote:hover .footnote-number{background-color:var(--accent-color);color:white} +.footnote-content{color:var(--text-color);font-size:0.9em;line-height:1.4;opacity:0.95} +.footnote.highlighted{background-color:var(--verse-hover);border-left-color:var(--accent-color)} +.strongs-footnotes-container{display:block!important;max-height:200px;overflow-y:auto;padding:2px;background-color:var(--toolbar-background)} +.strongs-footnotes-container .footnotes-heading{color:var(--text-color);margin-bottom:15px;font-size:1.1em;font-weight:600} +.strongs-footnotes-container .footnote{margin-bottom:12px;padding:10px;border-radius:4px;transition:all 0.3s ease} +.strongs-footnotes-container .footnote:hover{background-color:rgba(0,0,0,0.03)} +.strongs-footnotes-container .footnote-number{color:var(--accent-color);font-weight:bold;margin-right:8px;font-size:0.85em;background-color:rgba(0,0,0,0.08);padding:3px 6px;border-radius:3px} +.strongs-footnotes-container .footnote-content{color:var(--text-color);font-size:0.9em;line-height:1.4;opacity:0.95} +.strongs-footnotes-container .footnote-ref{color:var(--accent-color);font-size:0.75em;vertical-align:super;cursor:pointer;margin:0 1px;text-decoration:none;font-weight:bold;background-color:rgba(0,0,0,0.08);padding:1px 4px;border-radius:3px;line-height:1;transition:all 0.2s ease} +.strongs-footnotes-container .footnote-ref:hover{background-color:var(--accent-color);color:white;transform:scale(1.1)} +#strongsFootnotesContainer .footnote{margin-bottom:12px;padding:10px;background-color:var(--toolbar-background);border-radius:4px} +#strongsFootnotesContainer .footnote-number{font-weight:bold;color:var(--accent-color);margin-right:8px} +#strongsFootnotesContainer .footnote-content{display:inline} +#strongsPopup .footnote{cursor:pointer;transition:all 0.2s ease} +#strongsPopup .footnote:hover{background-color:var(--verse-hover)} +#strongsPopup .footnote:hover .footnote-number{background-color:var(--accent-color);color:white} +.verse-navigation{display:flex;align-items:center;gap:10px;margin-right:auto} +.nav-btn{background:var(--button-bg);border:1px solid var(--border-color);border-radius:4px;padding:6px 10px;cursor:pointer;font-size:12px;color:var(--text-color);transition:all 0.2s ease} +.nav-btn:hover{background:var(--button-hover-bg);border-color:var(--accent-color)} +.nav-btn:disabled{opacity:0.5;cursor:not-allowed} + +.color-picker{transform:translateZ(0);display:none;position:absolute;background:var(--popup-background);border:1px solid var(--border-color);border-radius:5px;padding:10px;box-shadow:0 4px 15px var(--shadow-strong);z-index:1000} +.color-picker.active{display:block} +.color-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} +.color-option{width:40px;height:40px;border-radius:5px;cursor:pointer;border:2px solid transparent;transition:all 0.2s} +.color-option:hover{border-color:var(--accent-color);transform:scale(1.1)} +.color-option:focus{outline:2px solid var(--accent-color);outline-offset:2px} + +.strongs-popup{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--popup-background);border-radius:10px;padding:25px;box-shadow:0 10px 40px var(--shadow-strong);z-index:2000;max-width:90vw;width:90%;max-height:90vh;overflow-y:auto;border:1px solid var(--border-color)} +.strongs-popup.active{display:block} +.popup-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1999} +.popup-overlay.active{display:block} +.popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:2px solid var(--accent-color);padding-bottom:10px} +.popup-header h2{color:var(--text-color)} +.popup-close{cursor:pointer;font-size:24px;color:var(--text-color);background:none;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color 0.2s} +.popup-close:hover{background-color:var(--verse-hover)} +.popup-close:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.strongs-content{line-height:1.8;color:var(--text-color)} +.verse-reference-display{font-size:1.2em;font-weight:bold;color:var(--accent-color);margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px} +.verse-text-display{padding:15px;background-color:var(--toolbar-background);border-left:4px solid var(--accent-color);border-radius:4px;margin-bottom:20px;font-size:1.1em;line-height:1.6} +.copy-verse-btn{padding:6px 12px;background-color:var(--accent-color);color:white;border:none;border-radius:4px;cursor:pointer;font-size:13px;transition:all 0.2s} +.copy-verse-btn:hover{opacity:0.8} +.copy-verse-btn:focus{outline:2px solid white;outline-offset:2px} +.copy-verse-btn.copied{background-color:#4caf50} +.embedded-resources{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px} +.resource-frame{border:1px solid var(--border-color);border-radius:5px;overflow:hidden;background:var(--card-background)} +.resource-frame-header{background:var(--toolbar-background);padding:10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)} +.resource-frame-header h4{margin:0;font-size:0.9em;color:var(--text-color)} +.resource-frame-actions{display:flex;gap:5px} +.resource-frame-btn{padding:4px 8px;font-size:11px;background:var(--accent-color);color:white;border:none;border-radius:3px;cursor:pointer;transition:opacity 0.2s} +.resource-frame-btn:hover{opacity:0.8} +.resource-frame-btn:focus{outline:2px solid white;outline-offset:2px} +.resource-frame iframe{width:100%;height:400px;border:none} +.strongs-definition{margin-top:15px;padding:15px;background-color:var(--toolbar-background);border-left:4px solid var(--accent-color);border-radius:4px} +.strongs-definition h3{color:var(--text-color);margin-bottom:10px} +.api-attribution{margin-top:20px;padding:15px;background-color:var(--toolbar-background);border-radius:5px;border:1px solid var(--border-color);font-size:0.85em;opacity:0.8} +.api-attribution a{color:var(--accent-color);text-decoration:none} +.api-attribution a:hover{text-decoration:underline} +.api-attribution a:focus{outline:2px solid var(--accent-color);outline-offset:2px} + +.notes-section{width:400px;padding:20px;background-color:var(--notes-background);border-left:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:50px;transition:all 0.3s ease} +.notes-section.hidden{display:none} +.notes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px} +.notes-header h3{color:var(--text-color)} +.notes-controls{display:flex;gap:5px} +.notes-controls button{padding:5px 10px;font-size:12px} +.notes-view-toggle{display:flex;gap:5px;padding:5px;background-color:var(--toolbar-background);border-radius:5px;margin-bottom:10px} +.view-toggle-btn{flex:1;padding:8px;border:none;border-radius:4px;cursor:pointer;font-size:13px;background-color:transparent;color:var(--text-color);transition:all 0.2s} +.view-toggle-btn.active{background-color:var(--accent-color);color:white} +.view-toggle-btn:hover:not(.active){background-color:var(--verse-hover)} +.view-toggle-btn:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.markdown-toolbar{display:flex;gap:5px;padding:10px;background-color:var(--toolbar-background);border:1px solid var(--border-color);border-radius:5px 5px 0 0;flex-wrap:wrap} +.markdown-btn{padding:6px 12px;background-color:var(--card-background);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;font-size:13px;color:var(--text-color);transition:all 0.2s;display:flex;align-items:center;gap:5px} +.markdown-btn:hover{background-color:var(--accent-color);color:white;border-color:var(--accent-color)} +.markdown-btn:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.markdown-btn:active{transform:scale(0.95)} +#notesInput,#notesDisplay{flex:1;width:100%;border:1px solid var(--border-color);border-radius:0 0 5px 5px;padding:15px;margin-bottom:10px;background-color:var(--card-background);color:var(--text-color)} +#notesInput{font-family:'Courier New',monospace;font-size:14px;resize:none} +#notesInput:focus{outline:2px solid var(--accent-color);outline-offset:2px} +#notesDisplay{overflow-y:auto;font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:14px} +#notesDisplay h1,#notesDisplay h2,#notesDisplay h3{margin-top:20px;margin-bottom:10px;color:var(--text-color)} +#notesDisplay h1{font-size:2em;border-bottom:2px solid var(--border-color);padding-bottom:10px} +#notesDisplay h2{font-size:1.5em} +#notesDisplay h3{font-size:1.2em} +#notesDisplay code{background-color:var(--toolbar-background);padding:2px 6px;border-radius:3px;font-family:'Courier New',monospace;border:1px solid var(--border-color)} +#notesDisplay pre{background-color:var(--toolbar-background);padding:15px;border-radius:5px;overflow-x:auto;border:1px solid var(--border-color)} +#notesDisplay pre code{background:none;border:none;padding:0} +#notesDisplay blockquote{border-left:4px solid var(--accent-color);padding-left:15px;margin:15px 0;opacity:0.8} +#notesDisplay ul,#notesDisplay ol{margin-left:25px;margin-bottom:15px} +#notesDisplay a{color:var(--accent-color)} +#notesDisplay a:focus{outline:2px solid var(--accent-color);outline-offset:2px} +#notesDisplay p{margin-bottom:10px} +#notesDisplay table{border-collapse:collapse;width:100%;margin:15px 0} +#notesDisplay table th,#notesDisplay table td{border:1px solid var(--border-color);padding:8px;text-align:left} +#notesDisplay table th{background-color:var(--toolbar-background);font-weight:bold} + +.settings-modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--popup-background);border-radius:10px;padding:30px;box-shadow:0 10px 40px var(--shadow-strong);z-index:2000;max-width:600px;width:90%;border:1px solid var(--border-color);max-height:80vh;overflow-y:auto} +.settings-modal.active{display:block} +.settings-group{margin-bottom:20px} +.settings-group label{display:block;margin-bottom:8px;font-weight:bold;color:var(--text-color)} +.settings-group input,.settings-group select{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:5px;font-size:14px;background-color:var(--card-background);color:var(--text-color)} +.settings-group input:focus,.settings-group select:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.settings-group small{display:block;margin-top:5px;opacity:0.7;color:var(--text-color)} +.settings-group small a{color:var(--accent-color)} +.settings-group small a:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.color-theme-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px} +.color-theme-option{padding:15px;border:2px solid var(--border-color);border-radius:8px;cursor:pointer;text-align:center;transition:all 0.3s;background:var(--card-background)} +.color-theme-option:hover{transform:scale(1.05)} +.color-theme-option:focus{outline:2px solid var(--accent-color);outline-offset:2px} +.color-theme-option.selected{border-color:var(--accent-color);background-color:var(--accent-color);color:white} +.color-theme-preview{width:100%;height:40px;border-radius:5px;margin-bottom:8px} +.settings-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:25px} +.settings-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid var(--border-color)} +.about-content{line-height:1.6} +.about-creator{margin-bottom:12px;font-size:.9em} +.about-description{margin-bottom:5px;padding:5px;background-color:var(--bg-secondary);border-radius:5px} +.about-description p{margin:0;color:var(--text-color)} +.attribution-links{margin-top:20px;padding-top:15px;border-top:1px solid var(--border-color)} +.attribution-links h4{margin-bottom:12px;color:var(--text-color);font-size:1em;font-weight:600} +.attribution-link{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:8px;background-color:var(--bg-secondary);border-radius:6px;text-decoration:none;color:var(--text-color);transition:all 0.2s ease;border:1px solid transparent} +.attribution-link:hover{background-color:var(--button-hover-bg);border-color:var(--accent-color);transform:translateY(-1px)} +.attribution-link i{font-size:1.2em;width:20px;text-align:center} +.attribution-link.gab{color:#4cf278} +.attribution-link.gab:hover{background-color:rgba(151,246,202,0.1)} +.attribution-link.lumo{color:#8c67cd} +.attribution-link.lumo:hover{background-color:rgba(197,151,246,0.1)} +.link-description{font-size:0.85em;opacity:0.8;margin-top:4px} +.version-info{font-family:monospace;padding:2px 4px;background-color:var(--bg-secondary);border-radius:6px;display:inline-block} + +.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:none;justify-content:center;align-items:center;z-index:3000} +.loading-overlay.active{display:flex} +.loading-spinner{width:60px;height:60px;border:6px solid rgba(255,255,255,0.3);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite} +@keyframes spin{to{transform:rotate(360deg)} +} + +.error-message{background-color:#ff5252;color:white;padding:15px;border-radius:5px;margin-bottom:20px} + +@media(max-width:1024px){.sidebar{width:250px} +.notes-section{width:350px} +.reference-panel{width:350px} +.feature-grid{grid-template-columns:1fr} +} +@media(max-width:768px){.container{flex-direction:column} +.sidebar{width:100%;height:auto;max-height:200px} +.content-area{flex-direction:column} +.notes-section{width:100%;border-left:none;border-top:1px solid var(--border-color)} +.reference-panel{width:100%;border-left:none;border-top:1px solid var(--border-color)} +.footnote{padding:6px;margin-bottom:8px} +.toolbar-info{display:none} +.embedded-resources{grid-template-columns:1fr} +.welcome-content h1{font-size:2em} +.welcome-actions{flex-direction:column} +} +@container(max-width:768px){.feature-grid{grid-template-columns:1fr} +.toolbar{flex-direction:column;gap:15px} +} +.toggle-notes{display:none} +@media(max-width:768px){.toggle-notes{display:inline-block} +} +.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} +@media print{.sidebar,.header-controls,.toolbar,.notes-section,.reference-panel-toggle{display:none!important} +.scripture-section{margin:0;box-shadow:none;border:none} +body{background:white;color:black} +} +html{font-size:16px} +@media(max-width:768px){html{font-size:14px} +} +@media(hover:none)and(pointer:coarse){.verse:hover{background-color:transparent} +.sidebar-links a{padding:var(--spacing-md)var(--spacing-lg)} +.btn{min-height:44px;min-width:44px} +} +@media(prefers-contrast:high){.verse-number{font-weight:900} +.passage-header{border:2px solid var(--text-color)} +} +@keyframes spin{0%{transform:rotate(0deg)} +100%{transform:rotate(360deg)} +} +.loading-spinner{animation:spin 1s linear infinite;transform:translateZ(0)} +.settings-modal:focus{outline:none} +.settings-modal *:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px} +@media print{.verse{page-break-inside:avoid} +.passage-header{break-after:avoid} +body{background:white!important;color:black!important} +.verse{cursor:default!important} +.highlight-yellow{background-color:#fff59d!important} +} + +::-webkit-scrollbar{width:10px;height:10px} +::-webkit-scrollbar-track{background:var(--background)} +::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px} +::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)} +[data-theme="dark"]::-webkit-scrollbar-thumb{background:var(--secondary-color)} +[data-theme="dark"]::-webkit-scrollbar-thumb:hover{background:var(--accent-color)} +*{scrollbar-width:thin;scrollbar-color:var(--border-color)var(--background)} +[data-theme="dark"]*{scrollbar-color:var(--secondary-color)var(--background)} + diff --git a/sw.js b/sw.js new file mode 100644 index 0000000..67c6375 --- /dev/null +++ b/sw.js @@ -0,0 +1,249 @@ +import { APP_VERSION } from "./modules/state"; +const CACHE_VERSION = { + static: 'v2', + api: 'v1', + pdf: 'v1' +}; +const CACHE_NAME = `provinent-scripture-${APP_VERSION}-${CACHE_VERSION.static}`; +const API_CACHE_NAME = `provinent-api-cache-${CACHE_VERSION.api}`; +const OFFLINE_PDF_CACHE = `provinent-pdf-cache-${CACHE_VERSION.pdf}`; +const MAX_CACHE_AGE = 24 * 60 * 60 * 1000; +const PDF_SIZE_LIMIT = 10 * 1024 * 1024; +const PRECACHE_URLS = [ + '/', + '/index.html', + '/api.js', + '/main.js', + '/navigation.js', + '/passage.js', + '/pdf.js', + '/settings.js', + '/state.js', + '/strongs.js', + '/ui.js', + '/styles.css', + '/manifest.json' +]; +self.addEventListener('install', (event) => { + console.log('[Service Worker] Installing and pre-caching static assets'); + event.waitUntil( + caches.open(CACHE_NAME) + .then((cache) => { + console.log('[Service Worker] Caching static assets:', PRECACHE_URLS); + return cache.addAll(PRECACHE_URLS); + }) + .then(() => { + console.log('[Service Worker] Pre-caching complete, skipping waiting'); + return self.skipWaiting(); + }) + .catch((error) => { + console.error('[Service Worker] Pre-caching failed:', error); + }) + ); +}); +self.addEventListener('activate', (event) => { + event.waitUntil( + caches.keys() + .then((cacheNames) => { + return Promise.all( + cacheNames.map((cacheName) => { + if (cacheName !== CACHE_NAME && + cacheName !== API_CACHE_NAME && + cacheName !== OFFLINE_PDF_CACHE) { + console.log('[Service Worker] Deleting old cache:', cacheName); + return caches.delete(cacheName) + .catch((error) => { + console.warn('[Service Worker] Failed to delete cache:', cacheName, error); + }); + } + }) + ); + }) + .then(() => { + return Promise.all([ + manageCacheSize(API_CACHE_NAME, 100), + manageCacheSize(OFFLINE_PDF_CACHE, 5) + ]); + }) + .then(() => { + console.log('[Service Worker] Cache cleanup complete, claiming clients'); + return self.clients.claim(); + }) + ); +}); +self.addEventListener('fetch', (event) => { + const url = new URL(event.request.url); + if (url.origin === 'https://bible.helloao.org') { + event.respondWith(handleApiRequest(event.request)); + } + else if (url.hostname.includes('biblehub.com') || + url.hostname.includes('biblegateway.com') || + url.hostname.includes('bible.com')) { + event.respondWith(handleExternalBibleResource(event.request)); + } + else if (url.pathname.endsWith('.pdf')) { + event.respondWith(handlePdfRequest(event.request)); + } + else if (PRECACHE_URLS.includes(url.pathname) || + PRECACHE_URLS.includes(url.pathname + '/')) { + event.respondWith(handleStaticAssetRequest(event.request)); + } +}); +async function handleApiRequest(request) { + const cache = await caches.open(API_CACHE_NAME); + const cachedResponse = await cache.match(request); + if (cachedResponse) { + const cacheTime = new Date(cachedResponse.headers.get('sw-cache-time')); + if (Date.now() - cacheTime.getTime() < MAX_CACHE_AGE) { + console.log('[Service Worker] Serving fresh cached API response'); + return cachedResponse; + } + } + try { + console.log('[Service Worker] Fetching fresh API response from network'); + const networkResponse = await fetch(request); + if (networkResponse.ok) { + const headers = new Headers(networkResponse.headers); + headers.set('sw-cache-time', new Date().toISOString()); + const responseToCache = new Response( + await networkResponse.clone().blob(), + { + status: networkResponse.status, + statusText: networkResponse.statusText, + headers: headers + } + ); + await cache.put(request, responseToCache); + console.log('[Service Worker] Cached fresh API response'); + await manageCacheSize(API_CACHE_NAME, 100); + } + return networkResponse; + } + catch (error) { + console.error('[Service Worker] API request failed, returning offline response'); + return new Response( + JSON.stringify({ + error: 'Offline mode - Bible data not available', + message: 'Please connect to the internet to access Scripture data' + }), + { + status: 503, + headers: { 'Content-Type': 'application/json' } + } + ); + } +} +async function handleExternalBibleResource(request) { + try { + console.log('[Service Worker] Fetching external Bible resource:', request.url); + return await fetch(request); + } + catch (error) { + console.warn('[Service Worker] External resource unavailable offline:', request.url); + return new Response( + ` + +External Bible resources from ${new URL(request.url).hostname} + are not available offline.
+Please connect to the internet to access this resource.
+ + `, + { + headers: { 'Content-Type': 'text/html' } + } + ); + } +} +async function handlePdfRequest(request) { + const cache = await caches.open(OFFLINE_PDF_CACHE); + const cachedPdf = await cache.match(request); + if (cachedPdf) { + console.log('[Service Worker] Serving cached PDF:', request.url); + return cachedPdf; + } + try { + console.log('[Service Worker] Fetching PDF from network:', request.url); + const response = await fetch(request); + if (response.status === 200) { + const contentLength = response.headers.get('content-length'); + if (!contentLength || parseInt(contentLength) <= PDF_SIZE_LIMIT) { + await cache.put(request, response.clone()); + console.log('[Service Worker] Cached PDF:', request.url); + await manageCacheSize(OFFLINE_PDF_CACHE, 5); + } + } + return response; + } + catch (error) { + console.warn('[Service Worker] PDF unavailable offline:', request.url); + return new Response( + 'PDF not available offline. Please connect to the internet to access this resource.', + { + status: 503, + headers: { 'Content-Type': 'text/plain' } + } + ); + } +} +async function handleStaticAssetRequest(request) { + try { + const cachedResponse = await caches.match(request); + if (cachedResponse) { + console.log('[Service Worker] Serving cached static asset:', request.url); + return cachedResponse; + } + console.log('[Service Worker] Fetching static asset from network:', request.url); + return await fetch(request); + } + catch (error) { + console.error('[Service Worker] Static asset unavailable:', request.url); + if (event.request.destination === 'document') { + return new Response( + ` + +Provident Scripture Study is currently offline.
+Some features may be limited without an internet connection.
+ + `, + { + headers: { 'Content-Type': 'text/html' } + } + ); + } + throw error; + } +} +self.addEventListener('message', (event) => { + switch (event.data.type) { + case 'CLEAR_CACHE': + console.log('[Service Worker] Clearing caches per client request'); + caches.delete(CACHE_NAME).catch(console.warn); + caches.delete(API_CACHE_NAME).catch(console.warn); + break; + case 'CACHE_PDF': + console.log('[Service Worker] Caching PDF from client data:', event.data.url); + caches.open(OFFLINE_PDF_CACHE) + .then(cache => cache.put(event.data.url, new Response(event.data.data))) + .catch(console.error); + break; + default: + console.log('[Service Worker] Received unknown message:', event.data.type); + } +}); +async function manageCacheSize(cacheName, maxSize = 50) { + try { + const cache = await caches.open(cacheName); + const requests = await cache.keys(); + if (requests.length > maxSize) { + const excessCount = requests.length - maxSize; + const excessRequests = requests.slice(0, excessCount); + await Promise.all(excessRequests.map(request => cache.delete(request))); + console.log(`[Service Worker] Trimmed ${excessCount} entries from ${cacheName}`); + } + } + catch (error) { + console.error(`[Service Worker] Failed to manage cache size for ${cacheName}:`, error); + } +} \ No newline at end of file