-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
13 lines (13 loc) · 41.9 KB
/
index.html
File metadata and controls
13 lines (13 loc) · 41.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
// Provinent Scripture Study - Bible study web application
// Copyright (C) 2025 Jordan DiPasquale
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License version 3 as
// published by the Free Software Foundation.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
--><!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <title>Provinent Scripture Study</title> <meta http-equiv="Content-Security-Policy" content=" script-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://www.stepbible.org https://biblehub.com https://www.biblegateway.com https://www.bible.com https://ebible.org; frame-src 'self' https://www.stepbible.org https://biblehub.com https://www.biblegateway.com https://www.bible.com https://ebible.org; child-src 'self' https://www.stepbible.org https://biblehub.com https://www.biblegateway.com https://www.bible.com https://ebible.org; "> <link rel="preconnect" href="https://cdnjs.cloudflare.com"> <link rel="preconnect" href="https://cdn.jsdelivr.net"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="icon" type="image/x-icon" href="/favicons/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png"> <link rel="manifest" href="/manifest.json"> <meta name="theme-color" content="#600"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="apple-mobile-web-app-title" content="Provinent Scripture Study"> <meta name="msapplication-TileColor" content="#600"> <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js" defer></script> <link rel="stylesheet" href="/styles.css"> <script> if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('/sw.js', { scope: '/' }) .catch(function(error) { console.log('ServiceWorker registration failed:', error); }); }); } </script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <div class="loading-overlay" id="loadingOverlay" aria-hidden="true" aria-label="Loading"> <div class="loading-spinner"></div> </div> <div class="container" id="mainContainer"> <aside class="sidebar" id="sidebar"> <button class="collapse-toggle" title="Toggle sidebar" aria-label="Collapse sidebar"></button> <h2>Bible Study Resources</h2> <form id="bibleGatewayForm" action="https://www.biblegateway.com/quicksearch/" target="_blank" method="GET"> <input type="hidden" name="version" id="bgVersion" value="NASB1995" /> <div class="bible-gateway-container"> <div class="bible-gateway-header"> Search the Bible </div> <div class="bible-gateway-content"> <div class="bible-gateway-inputs"> <input type="text" name="quicksearch" placeholder="Enter search terms" /> <input type="submit" value="Search BibleGateway.com" /> </div> <small> <a href="https://www.biblegateway.com/usage/form/" target="_blank"> About </a> </small> </div> </div> </form> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="devotionals"> <h3>Devotionals</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-devotionals"> <ul class="sidebar-links"> <li><a href="https://spurgeonsmorningandevening.org" target="_blank" rel="noopener noreferrer">C.H. Spurgeon's Morning and Evening</a></li> <li><a href="https://www.desiringgod.org/solid-joys" target="_blank" rel="noopener noreferrer">Desiring God Devotionals</a></li> <li><a href="https://www.gty.org/devotionals" target="_blank" rel="noopener noreferrer">Grace to You Devotionals</a></li> <li><a href="https://www.ligonier.org/learn/devotionals" target="_blank" rel="noopener noreferrer">Ligonier Ministries Devotionals</a></li> <li><a href="https://www.studylight.org/reading-plans.html" target="_blank" rel="noopener noreferrer">Bible Reading Plans</a></li> <li><a href="https://biblereadingplangenerator.com" target="_blank" rel="noopener noreferrer">Bible Reading Plan Generator</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="doctrines"> <h3>Christian Doctrine</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-doctrines"> <ul class="sidebar-links"> <li><a href="https://www.desiringgod.org/articles/what-is-the-doctrine-of-the-trinity" target="_blank" rel="noopener noreferrer">The Trinity</a></li> <li><a href="https://www.gotquestions.org/foreknowledge.html" target="_blank" rel="noopener noreferrer">Doctrine of Foreknowledge</a></li> <li><a href="https://www.gotquestions.org/predestination.html" target="_blank" rel="noopener noreferrer">Doctrine of Predestination</a></li> <li><a href="https://www.thegospelcoalition.org/essay/the-doctrine-of-justification/" target="_blank" rel="noopener noreferrer">Doctrine of Justification</a></li> <li><a href="https://www.thegospelcoalition.org/essay/the-doctrine-of-imputation/" target="_blank" rel="noopener noreferrer">Doctrine of Imputation</a></li> <li><a href="https://learn.ligonier.org/guides/regeneration" target="_blank" rel="noopener noreferrer">Doctrine of Regeneration</a></li> <li><a href="https://www.gotquestions.org/Christian-doctrine-salvation.html" target="_blank" rel="noopener noreferrer">Doctrine of Salvation</a></li> <li><a href="https://www.thegospelcoalition.org/essay/the-doctrine-of-sanctification/" target="_blank" rel="noopener noreferrer">Doctrine of Sanctification</a></li> <li><a href="https://www.thegospelcoalition.org/essay/the-five-solas/" target="_blank" rel="noopener noreferrer">The Five Solas</a></li> <li><a href="https://reasonabletheology.org/five-points-calvinism-defining-doctrines-of-grace/" target="_blank" rel="noopener noreferrer">Doctrines of Grace</a></li> <li><a href="https://learn.ligonier.org/articles/what-is-total-depravity" target="_blank" rel="noopener noreferrer">Doctrine of Total Depravity</a></li> <li><a href="https://learn.ligonier.org/articles/what-is-unconditional-election" target="_blank" rel="noopener noreferrer">Doctrine of Election</a></li> <li><a href="https://learn.ligonier.org/articles/what-was-gods-purpose-cross" target="_blank" rel="noopener noreferrer">Doctrine of Limited Atonement</a></li> <li><a href="https://learn.ligonier.org/articles/what-is-irresistible-grace" target="_blank" rel="noopener noreferrer">Doctrine of Irresistible Grace</a></li> <li><a href="https://learn.ligonier.org/articles/what-is-perseverance-of-the-saints" target="_blank" rel="noopener noreferrer">Doctrine of Perseverance</a></li> <li><a href="https://www.monergism.com/legacy/mt/sitepages/what-monergism" target="_blank" rel="noopener noreferrer">Doctrine of Monergism</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="importantWorks"> <h3>Important Literary Works</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-importantWorks"> <ul class="sidebar-links"> <li><a href="https://thewestminsterstandard.org/the-westminster-confession/" target="_blank" rel="noopener noreferrer">The Westminster Confession of Faith</a></li> <li><a href="https://www.monergism.com/thethreshold/sdg/calvin/Institutes%20-%20John%20Calvin.pdf" target="_blank" rel="noopener noreferrer">Institutes of the Christian Religion by John Calvin</a></li> <li><a href="https://www.monergism.com/thethreshold/sdg/luther/Bondage%20of%20the%20Will%20-%20Martin%20Luther.pdf" target="_blank" rel="noopener noreferrer">Bondage of the Will by Martin Luther</a></li> <li><a href="https://www.monergism.com/thethreshold/sdg/augustine/Confessions%20-%20Augustine.pdf" target="_blank" rel="noopener noreferrer">Confessions by St. Augustine</a></li> <li><a href="https://www.monergism.com/thethreshold/sdg/owen/The%20Remainders%20of%20Indwelling%20Sin%20-%20John%20Owen.pdf" target="_blank" rel="noopener noreferrer">Remainder of Indwelling Sin by John Owen</a></li> <li><a href="https://www.monergism.com/thethreshold/sdg/owen/Death%20of%20Death%20-%20Modern%20-%20John%20Owen.pdf" target="_blank" rel="noopener noreferrer">Death of Death in the Death of Christ by John Owen</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="studyTopics"> <h3>Study Topics and FAQs</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-studyTopics"> <ul class="sidebar-links"> <li><a href="https://learn.ligonier.org/articles/what-does-it-mean-that-god-is-sovereign" target="_blank" rel="noopener noreferrer">What does it mean that God is sovereign?</a></li> <li><a href="https://www.gty.org/sermons/80-356/the-atonement-real-or-potential" target="_blank" rel="noopener noreferrer">The Atonement: Real or Potential?</a></li> <li><a href="https://www.gty.org/articles/A331/What-Is-the-Doctrine-of-Election" target="_blank" rel="noopener noreferrer">What is the Doctrine of Election?</a></li> <li><a href="https://www.desiringgod.org/articles/a-beginners-guide-to-free-will" target="_blank" rel="noopener noreferrer">A Beginner's Guide to 'Free Will'</a></li> <li><a href="https://www.gotquestions.org/predestination-vs-free-will.html" target="_blank" rel="noopener noreferrer">What does the Bible say about predestination vs. free will?</a></li> <li><a href="https://tabletalkmagazine.com/posts/people-reject-jesus/" target="_blank" rel="noopener noreferrer">Why do some people reject Jesus?</a></li> <li><a href="https://www.monergism.com/reformation-theology/blog/what-about-john-316" target="_blank" rel="noopener noreferrer">What about John 3:16?</a></li> <li><a href="https://www.gotquestions.org/arminianism.html" target="_blank" rel="noopener noreferrer">What is Arminianism, and is it biblical?</a></li> <li><a href="https://www.gotquestions.org/calvinism.html" target="_blank" rel="noopener noreferrer">What is Calvinism and is it biblical?</a></li> <li><a href="https://www.thegospelcoalition.org/essay/reformed-theology/" target="_blank" rel="noopener noreferrer">What is Reformed Theology?</a></li> <li><a href="https://carm.org/chronological-list-of-major-english-bible-translations" target="_blank" rel="noopener noreferrer">Chronological List of Major English Bible Translations</a></li> <li><a href="https://www.biblegateway.com/learn/bible-101/about-the-bible/bible-versions-guide/" target="_blank" rel="noopener noreferrer">Why are there so many Bible versions?</a></li> <li><a href="https://www.equip.org/articles/is-your-modern-translation-corrupt/" target="_blank" rel="noopener noreferrer">Is your modern translation corrupt?</a></li> <li><a href="https://carm.org/kjvo" target="_blank" rel="noopener noreferrer">What is King James Onlyism?</a></li> <li><a href="https://biblehub.com/q/what_is_textual_criticism.htm" target="_blank" rel="noopener noreferrer">What is textual criticism?</a></li> <li><a href="https://carm.org/what-are-election-and-predestination" target="_blank" rel="noopener noreferrer">What are election and predestination?</a></li> <li><a href="https://www.gotquestions.org/monergism-and-salvation.html" target="_blank" rel="noopener noreferrer">What is monergism?</a></li> <li><a href="https://www.gotquestions.org/synergism-and-salvation.html" target="_blank" rel="noopener noreferrer">What is synergism?</a></li> <li><a href="https://www.gotquestions.org/exegesis-eisegesis.html" target="_blank" rel="noopener noreferrer">What is the difference between exegesis and eisegesis?</a></li> <li><a href="https://www.blueletterbible.org/Comm/stewart_don/faq/bible-translations/question6-what-is-an-interlinear-bible.cfm" target="_blank" rel="noopener noreferrer">What is an interlinear Bible?</a></li> <li><a href="https://www.desiringgod.org/articles/what-is-the-apocrypha" target="_blank" rel="noopener noreferrer">What is the Apocrypha?</a></li> <li><a href="https://christiannationalist.com" target="_blank" rel="noopener noreferrer">What is Christian Nationalism?</a></li> <li><a href="https://judeochristianmyth.com" target="_blank" rel="noopener noreferrer">What is "Judeo-Christianity"?</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="theological"> <h3>Theological Resources</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-theological"> <ul class="sidebar-links"> <li><a href="https://www.aomin.org" target="_blank" rel="noopener noreferrer">Alpha & Omega Ministries</a></li> <li><a href="https://answersingenesis.org" target="_blank" rel="noopener noreferrer">Answers in Genesis</a></li> <li><a href="https://biblethinker.org" target="_blank" rel="noopener noreferrer">BibleThinker</a></li> <li><a href="https://carm.org" target="_blank" rel="noopener noreferrer">CARM</a></li> <li><a href="https://www.equip.org" target="_blank" rel="noopener noreferrer">Christian Research Institute</a></li> <li><a href="https://www.desiringgod.org" target="_blank" rel="noopener noreferrer">Desiring God</a></li> <li><a href="https://fortisinstitute.org" target="_blank" rel="noopener noreferrer">Fortis Institute</a></li> <li><a href="https://www.thegospelcoalition.org" target="_blank" rel="noopener noreferrer">The Gospel Coalition</a></li> <li><a href="https://www.gotquestions.org" target="_blank" rel="noopener noreferrer">Got Questions</a></li> <li><a href="https://www.ligonier.org" target="_blank" rel="noopener noreferrer">Ligonier Ministries</a></li> <li><a href="https://www.monergism.com" target="_blank" rel="noopener noreferrer">Monergism</a></li> <li><a href="https://reasonabletheology.org" target="_blank" rel="noopener noreferrer">Reasonable Theology</a></li> <li><a href="https://www.voddiebaucham.org" target="_blank" rel="noopener noreferrer">Voddie Baucham Ministries</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="podcasts"> <h3>Podcasts and Radio</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-podcasts"> <ul class="sidebar-links"> <li><a href="https://www.aomin.org/aoblog/webcast" target="_blank" rel="noopener noreferrer">Alpha & Omega Ministries Podcasts</a></li> <li><a href="https://www.desiringgod.org/podcasts" target="_blank" rel="noopener noreferrer">Desiring God Podcasts</a></li> <li><a href="https://www.gty.org/radio-broadcast" target="_blank" rel="noopener noreferrer">Grace to You Radio Broadcast</a></li> <li><a href="https://refnet.fm" target="_blank" rel="noopener noreferrer">RefNet Christian Internet Radio</a></li> <li><a href="https://www.ligonier.org/podcasts/renewing-your-mind" target="_blank" rel="noopener noreferrer">Renewing Your Mind with R.C. Sproul</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="commentaries"> <h3>Commentaries</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-commentaries"> <ul class="sidebar-links"> <li><a href="https://bestcommentaries.com" target="_blank" rel="noopener noreferrer">Best Commentaries</a></li> <li><a href="https://biblehub.com/commentaries" target="_blank" rel="noopener noreferrer">Bible Hub Commentaries</a></li> <li><a href="https://www.studylight.org/commentaries" target="_blank" rel="noopener noreferrer">Study Light</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="studyTools"> <h3>Study Tools</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-studyTools"> <ul class="sidebar-links"> <li><a href="https://andbible.org" target="_blank" rel="noopener noreferrer">AndBible: Bible Study</a></li> <li><a href="https://apologist.ai/en" target="_blank" rel="noopener noreferrer">Apologist.ai</a></li> <li><a href="https://dbs.org/en/bibles/audio/" target="_blank" rel="noopener noreferrer">Audio Bibles (DBS)</a></li> <li><a href="https://berean.ai" target="_blank" rel="noopener noreferrer">Berean.ai</a></li> <li><a href="https://biblehub.net" target="_blank" rel="noopener noreferrer">Bible Hub (.net)</a></li> <li><a href="https://www.bibleref.com" target="_blank" rel="noopener noreferrer">BibleRef</a></li> <li><a href="https://www.bibletools.org" target="_blank" rel="noopener noreferrer">BibleTools</a></li> <li><a href="https://dbs.org/en/bibles/" target="_blank" rel="noopener noreferrer">The Bible Cloud (DBS)</a></li> <li><a href="https://www.blueletterbible.org/resources/prefaces.cfm" target="_blank" rel="noopener noreferrer">Bible Prefaces (BLB)</a></li> <li><a href="https://gab.ai/app" target="_blank" rel="noopener noreferrer">Gab AI</a></li> <li><a href="https://openbible.com" target="_blank" rel="noopener noreferrer">Open Bible</a></li> <li><a href="https://biblehub.com/strongs.htm" target="_blank" rel="noopener noreferrer">Strong's Exhaustive Concordance</a></li> </ul> </div> </div> <div class="sidebar-section"> <div class="sidebar-section-header" data-section="bibles"> <h3>Online Bibles</h3> <span class="section-toggle" aria-hidden="true"><i class="fas fa-chevron-down"></i></span> </div> <div class="sidebar-section-content" id="content-bibles"> <ul class="sidebar-links"> <li><a href="https://biblehub.com" target="_blank" rel="noopener noreferrer">Bible Hub (.com)</a></li> <li><a href="https://www.bible.com" target="_blank" rel="noopener noreferrer">Bible (YouVersion)</a></li> <li><a href="https://www.biblegateway.com" target="_blank" rel="noopener noreferrer">Bible Gateway</a></li> <li><a href="https://biblewebapp.com" target="_blank" rel="noopener noreferrer">Bible Web App</a></li> <li><a href="https://ebible.com" target="_blank" rel="noopener noreferrer">eBible (.com)</a></li> <li><a href="https://ebible.org" target="_blank" rel="noopener noreferrer">eBible (.org)</a></li> <li><a href="https://www.esv.org" target="_blank" rel="noopener noreferrer">ESV Bible</a></li> <li><a href="https://lsbible.org" target="_blank" rel="noopener noreferrer">The Legacy Standard Bible</a></li> <li><a href="https://netbible.org" target="_blank" rel="noopener noreferrer">NET Bible</a></li> <li><a href="https://relight.app" target="_blank" rel="noopener noreferrer">Relight App</a></li> <li><a href="https://www.stepbible.org" target="_blank" rel="noopener noreferrer">STEP Bible</a></li> </ul> </div> </div> </aside> <div class="reference-panel" id="referencePanel"> <div class="reference-panel-header"> <h3>Reference Bible</h3> <div class="reference-panel-controls"> <label for="referenceSource" class="sr-only">Reference Source</label> <select id="referenceSource" title="Choose a reference Bible source"> <option value="biblegateway">Bible Gateway</option> <option value="biblecom">Bible.com (YouVersion)</option> <option value="biblehub">Bible Hub</option> <option value="stepbible">STEP Bible</option> <option value="ebibleorg">eBible.org</option> </select> <label for="referenceTranslation" class="sr-only">Reference Translation</label> <select id="referenceTranslation" title="Choose a reference Bible translation"> <option value="ASV">ASV (Rigorously literal)</option> <option value="NASB1995">NASB 1995 (Strictly literal)</option> <option value="LSB">LSB (Precision-focused literal)</option> <option value="NASB">NASB 2020 (Updated literal)</option> <option value="ESV">ESV (Elegant literal)</option> <option value="KJV">KJV (Classic literal)</option> <option value="GNV">GNV (Scholarly literal; Old English)</option> <option value="NKJV">NKJV (Modernized classic)</option> <option value="BSB">BSB (Study‑focused)</option> <option value="CSB">CSB (Optimal balance)</option> <option value="NET">NET (Scholarly transparent)</option> <option value="NIV">NIV (Readable dynamic)</option> <option value="NLT">NLT (Thought‑for‑thought)</option> </select> <button class="reference-panel-close" aria-label="Close reference panel"><i class="fas fa-xmark"></i></button> </div> </div> <div class="reference-panel-content"> <iframe id="referenceIframe" class="reference-panel-iframe" src="" title="Reference Bible Content" ></iframe> </div> <div class="resize-handle resize-handle-right" data-panel="referencePanel" aria-label="Resize reference panel"></div> </div> <main class="main-content"> <div class="popup-overlay" id="helpOverlay" aria-hidden="true"></div> <div class="help-modal" id="helpModal" role="dialog" aria-labelledby="helpModalTitle" aria-modal="true"> <div class="popup-header"> <h2 id="helpModalTitle">Keyboard Shortcuts</h2> <button class="popup-close" id="closeHelpBtn" aria-label="Close help"><i class="fas fa-xmark"></i></button> </div> <div class="help-content"> <div class="hotkey-settings-section"> <label class="toggle-label"> <input type="checkbox" id="hotkeysEnabled" checked> <span class="toggle-slider"></span> Enable Keyboard Shortcuts </label> </div> <div class="hotkeys-list" id="hotkeysList"> </div> <div class="help-actions"> <button class="btn btn-secondary" id="resetHotkeysBtn">Reset to Defaults</button> <button class="btn" id="closeHelpModalBtn">Close</button> </div> </div> </div> <div class="toolbar"> <div class="header-controls"> <button class="btn" id="openSettingsBtn" title="View and change settings"><i class="fas fa-gear"></i></button> <input type="file" id="importFile" style="display: none;" accept=".json"> </div> <span class="toolbar-divider" aria-hidden="true" id="settings-tb-divider"></span> <button class="reference-panel-toggle" id="referencePanelToggle" title="Toggle reference Bible"> <i class="fa-solid fa-book-bible"></i> </button> <span class="toolbar-divider" aria-hidden="true" id="bible-tb-divider"></span> <button class="btn btn-secondary" id="prevPassageBtn" title="Previous passage"> <i class="fas fa-arrow-left"></i> </button> <button class="btn btn-secondary" id="nextPassageBtn" title="Next passage"> <i class="fas fa-arrow-right"></i> </button> <span class="toolbar-divider" aria-hidden="true" id="chapter-tb-divider"></span> <button class="btn btn-secondary" id="randomPassageBtn" title="View a random passage of Scripture"> <i class="fas fa-shuffle"></i> </button> <span class="toolbar-divider" aria-hidden="true" id="dropdown-tb-divider"></span> <label for="bookSelect" class="sr-only">Choose a book</label> <select class="btn btn-secondary" id="bookSelect" title="Choose a book"> </select> <label for="chapterSelect" class="sr-only">Choose a chapter</label> <select class="btn btn-secondary" id="chapterSelect" title="Choose a chapter"> </select> <span class="toolbar-divider" aria-hidden="true" id="highlights-tb-divider"></span> <button class="btn btn-secondary" id="showHighlightsBtn" title="View highlighted verses"> <i class="fas fa-highlighter"></i> </button> <span class="toolbar-divider" aria-hidden="true" id="audio-tb-divider"></span> <div id="audioControls" style="margin: 10px 0; padding: 10px; background: var(--secondary-color); border-radius: 5px;"> <div style="display: flex; align-items: center; gap: 10px;"> <span><i class="fas fa-headphones"></i></span> <button class="play-audio-btn" style="padding: 5px 10px; background: var(--accent-color); color: white; border: none; border-radius: 3px; cursor: pointer;" title="Play current chapter audio"> <i class="fas fa-play"></i> </button> <button class="pause-audio-btn" style="padding: 5px 10px; background: var(--accent-color); color: white; border: none; border-radius: 3px; cursor: pointer; display: none;" title="Pause current chapter audio"> <i class="fas fa-pause"></i> </button> <button class="stop-audio-btn" style="padding: 5px 10px; background: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;" title="Stop current chapter audio"> <i class="fas fa-stop"></i> </button> </div> </div> </div> <div class="content-area"> <section class="scripture-section" id="scriptureSection"> <div id="errorContainer" role="alert"></div> <div class="passage-header"> <h2 id="passageHeaderTitle"></h2> <div class="passage-reference" id="passageReference"></div> </div> <div id="scriptureContent"></div> <div class="api-attribution"> <p><strong>Attribution</strong></p> <p>Scripture quotations are provided by API from <a href="https://bible.helloao.org" target="_blank" rel="noopener noreferrer">bible.helloao.org</a>, without which this app would not have been possible. And a thank you to <a href="https://berean.bible" target="_blank" rel="noopener noreferrer">Berean Bible</a> for their excellent translation work. All copyrights reserved by their respective owners. <p style="margin-top: 10px;"> </p> </div> </section> <section class="notes-section" id="notesSection"> <button class="collapse-toggle" title="Toggle notes" aria-label="Collapse notes"></button> <div class= "notes-header"> <h3>Study Notes</h3> <div class="notes-controls"> <button class="btn btn-secondary" data-format="md" aria-label="Export as markdown" title="Export notes in Markdown format"><i class="fas fa-download" aria-hidden="true"></i> Export Notes</button> </div> </div> <div class="notes-view-toggle"> <button class="view-toggle-btn active" id="textViewBtn">Text</button> <button class="view-toggle-btn" id="markdownViewBtn">Markdown</button> </div> <div class="markdown-toolbar" id="markdownToolbar"> <button class="markdown-btn" data-format="bold" title="Bold (Ctrl+B)" aria-label="Bold"><strong>B</strong></button> <button class="markdown-btn" data-format="italic" title="Italic (Ctrl+I)" aria-label="Italic"><em>I</em></button> <button class="markdown-btn" data-format="h1" title="Heading 1 (Ctrl+1)" aria-label="Heading 1">H1</button> <button class="markdown-btn" data-format="h2" title="Heading 2 (Ctrl+2)" aria-label="Heading 2">H2</button> <button class="markdown-btn" data-format="h3" title="Heading 3 (Ctrl+3)" aria-label="Heading 3">H3</button> <button class="markdown-btn" data-format="ul" title="Bullet List (Ctrl+Shift+U)" aria-label="Bullet list">• List</button> <button class="markdown-btn" data-format="ol" title="Numbered List (Ctrl+Shift+O)" aria-label="Numbered list">1. List</button> <button class="markdown-btn" data-format="quote" title="Quote (Ctrl+Shift+>)" aria-label="Quote">" Quote</button> <button class="markdown-btn" data-format="code" title="Code (Ctrl+`)" aria-label="Code"></></button> <button class="markdown-btn" data-format="link" title="Link (Ctrl+K)" aria-label="Insert link"><i class="fas fa-link"></i> Link</button> </div> <textarea id="notesInput" aria-label="Study notes" placeholder="Write your study notes here..."></textarea> <div id="notesDisplay" style="display: none;"></div> <div class="resize-handle resize-handle-left" data-panel="notesSection" aria-label="Resize notes panel"></div> </section> </div> </main> </div> <div class="color-picker" id="colorPicker" role="menu" aria-label="Highlight color options"> <div class="color-options"> <div class="color-option highlight-yellow" data-color="yellow" role="menuitem" tabindex="0"></div> <div class="color-option highlight-green" data-color="green" role="menuitem" tabindex="0"></div> <div class="color-option highlight-blue" data-color="blue" role="menuitem" tabindex="0"></div> <div class="color-option highlight-pink" data-color="pink" role="menuitem" tabindex="0"></div> <div class="color-option highlight-orange" data-color="orange" role="menuitem" tabindex="0"></div> <div class="color-option highlight-purple" data-color="purple" role="menuitem" tabindex="0"></div> </div> <button class="btn btn-secondary" id="removeHighlight" style="width: 100%; margin-top: 10px;">Remove Highlight</button> </div> <div class="popup-overlay" id="highlightsOverlay" aria-hidden="true"></div> <div class="highlights-modal" id="highlightsModal" role="dialog" aria-labelledby="highlightsModalTitle" aria-modal="true"> <div class="popup-header"> <h2 id="highlightsModalTitle">Highlights</h2> <button class="popup-close" id="closeHighlightsBtn" aria-label="Close highlights"> <i class="fas fa-xmark"></i> </button> <div class="highlights-search"> <input type="text" id="highlightsSearch" placeholder="Search..." /> <button id="clearSearch" class="clear-search-btn"> <i class="fas fa-delete-left"></i> </button> </div> </div> <div class="highlight-controls"> <div class="highlight-sort-controls"> <button class="highlight-sort-btn active" data-sort="canon" title="Canonical Order (Bible book order)"> <i class="fas fa-book"></i> <span>Canon</span> </button> <button class="highlight-sort-btn" data-sort="alpha" title="Alphabetical Order (A-Z by book name)"> <i class="fas fa-sort-alpha-down"></i> <span>A-Z</span> </button> <button class="highlight-sort-btn" data-sort="time" title="Time Highlighted (Most recent first)"> <i class="fas fa-clock"></i> <span>Time</span> </button> </div> <div class="highlight-filter-controls"> <div class="highlights-filters"> <button class="highlight-filter-btn" data-color="pink">Pink</button> <button class="highlight-filter-btn" data-color="orange">Orange</button> <button class="highlight-filter-btn" data-color="yellow">Yellow</button> <button class="highlight-filter-btn" data-color="green">Green</button> <button class="highlight-filter-btn" data-color="blue">Blue</button> <button class="highlight-filter-btn" data-color="purple">Purple</button> <button class="highlight-filter-btn active" data-color="all">All</button> </div> </div> </div> <div class="highlights-list" id="highlightsList"> </div> </div> <div class="popup-overlay" id="popupOverlay" aria-hidden="true"></div> <div class="strongs-popup" id="strongsPopup" role="dialog" aria-labelledby="strongsPopupTitle" aria-modal="true"> <div class="popup-header"> <h2 id="strongsPopupTitle">Verse Analysis</h2> <button class="popup-close" aria-label="Close popup"><i class="fas fa-xmark"></i></button> </div> <div class="strongs-content" id="strongsContent"></div> </div> <div class="popup-overlay" id="settingsOverlay" aria-hidden="true"></div> <div class="settings-modal" id="settingsModal" role="dialog" aria-labelledby="settingsModalTitle" aria-modal="true"> <div class="popup-header"> <h2 id="settingsModalTitle">Settings</h2> <button class="popup-close" id="closeSettingsBtn" aria-label="Close settings"><i class="fas fa-xmark"></i></button> </div> <div class="settings-group"> <label for="bibleTranslationSetting">Bible Translation</label> <select id="bibleTranslationSetting"> <option value="ASV">American Standard Version (ASV)</option> <option value="KJV">King James Version (KJV)</option> <option value="GNV">Geneva Bible 1599 (GNV)</option> <option value="BSB">Berean Standard Bible (BSB)</option> <option value="NET">New English Translation (NET)</option> </select> <small>Set the translation for Scripture section.</small> </div> <div class="settings-group"> <label>Dark Mode Toggle</label> <label class="toggle-label"> <input type="checkbox" id="themeToggleSetting"> <span class="toggle-slider"></span> Dark mode </label> <small>Toggle between light and dark mode.</small> </div> <div class="settings-group"> <label for="scriptureFontSizeSlider">Scripture Font Size</label> <div style="display:flex; align-items:center; gap:8px; margin-top:4px;"> <input type="range" id="scriptureFontSizeSlider" min="12" max="24" step="1" value="16" style="flex:1;"> <output id="scriptureFontSizeValue" style="min-width:30px; text-align:center;">16 px</output> </div> <small>Adjust the size of all text in the Scripture section.</small> </div> <div class="settings-group"> <label for="notesFontSizeSlider">Notes Font Size</label> <div style="display:flex; align-items:center; gap:8px; margin-top:4px;"> <input type="range" id="notesFontSizeSlider" min="12" max="24" step="1" value="16" style="flex:1;"> <output id="notesFontSizeValue" style="min-width:30px; text-align:center;">16 px</output> </div> <small>Adjust the size of all text in the Study Notes section.</small> </div> <div class="settings-group"> <label for="audioControlsToggle">Audio Preferences</label> <label class="toggle-label"> <input type="checkbox" id="audioControlsToggle" checked> <span class="toggle-slider"></span> Show audio controls in toolbar </label> <label class="toggle-label" style="margin-top:12px;"> <input type="checkbox" id="autoplayAudioToggle" checked> <span class="toggle-slider"></span> Play next chapter audio automatically </label> <label for="narratorSelect" style="margin-top:12px; display:block;"> <select class="narrator-select" id="narratorSelect" style="padding:5px; border-radius:3px;"> <option value="gilbert">Gilbert</option> <option value="hays">Hays</option> <option value="souer">Souer</option> </select> <small style="font-weight:normal;"> Set narrator for BSB audio. </small> </label> </div> <div class="settings-group" id="keyboard-shortcuts"> <label>Keyboard Shortcuts</label> <button class="btn btn-secondary" id="keyboardShortcutsBtn"> <i class="fas fa-keyboard"></i> Keyboard Shortcuts </button> <small>View and customize keyboard shortcuts (you can also hit the 'F1' key to view these).</small> </div> <div class="settings-group" id="fileInfoSection"> <label>Data Management</label> <div class="file-info-container"> <div class="file-info-block"> <h4><i class="fas fa-download" aria-hidden="true"></i> Last Export</h4> <div id="lastExportInfo"> <p class="no-data">No exports yet</p> </div> <button class="btn btn-secondary file-action-btn" id="exportDataBtn" aria-label="Export data"> <i class="fas fa-download" aria-hidden="true"></i> Export Data </button> <small class="file-action-note"> Export your highlights, notes, and settings to a JSON file. </small> </div> <div class="file-info-block"> <h4><i class="fas fa-upload" aria-hidden="true"></i> Last Import</h4> <div id="lastImportInfo"> <p class="no-data">No imports yet</p> </div> <button class="btn btn-secondary file-action-btn" id="importDataBtn" aria-label="Import data"> <i class="fas fa-upload" aria-hidden="true"></i> Import Data </button> <small class="file-action-note"> Import your data from a backup file (overwrites existing data). </small> </div> </div> </div> <div class="settings-group"> <label>Local Storage</label> <div class="settings-group"> <button class="btn btn-secondary" id="clearHighlightsBtn"><i class="fas fa-eraser"></i> Clear Highlights</button> <small style="display:block;margin-top:5px;"> Removes all highlighted verses. </small> </div> <div class="settings-group"> <button class="btn btn-secondary" id="clearCacheBtn"><i class="fas fa-broom"></i> Clear Cached Data</button> <small style="display:block;margin-top:5px;"> Clear all cached Bible passages and resources. This will free up storage space but remove offline access to previously viewed content. </small> </div> </div> <div class="settings-group"> <label>Reset Application</label> <div class="settings-group"> <button class="btn btn-danger" id="deleteAllDataBtn"> <i class="fas fa-trash" aria-hidden="true"></i> Delete All Data </button> <small style="display:block;margin-top:5px;color:#f44336;"> <strong>Warning:</strong> This will permanently delete all your highlights, notes, and settings. This action cannot be undone! </small> </div> </div> <div class="settings-group"> <label>Bible PDF Downloads</label> <small style="margin-bottom: 10px;"> Download free PDF Bibles for offline use. </small> <div class="pdf-download-options"> <a href="https://bereanbible.com/bsb-book-11.pdf" class="pdf-download-link" target="_blank" rel="noopener noreferrer" download> <div><i class="fas fa-download" aria-hidden="true"></i> Berean Standard Bible (BSB) – Recommended</div> </a> <a href="https://bibles.dbs.org/ENGASV/pdf/ENGASV.pdf" class="pdf-download-link" target="_blank" rel="noopener noreferrer" download> <div><i class="fas fa-download" aria-hidden="true"></i> American Standard Version (ASV)</div> </a> <a href="https://bibles.dbs.org/ENGKJV/pdf/ENGKJV.pdf" class="pdf-download-link" target="_blank" rel="noopener noreferrer" download> <div><i class="fas fa-download" aria-hidden="true"></i> King James Version (KJV)</div> </a> <a href="https://bibles.dbs.org/ENGNET/pdf/ENGNET.pdf" class="pdf-download-link" target="_blank" rel="noopener noreferrer" download> <div><i class="fas fa-download" aria-hidden="true"></i> New English Translation (NET)</div> </a> </div> </div> <div class="settings-group"> <label>Color Theme</label> <div class="color-theme-options"> <div class="color-theme-option" data-theme="red"> <div class="color-theme-preview" style="background: linear-gradient(135deg, #b71c1c, #f44336);"></div> </div> <div class="color-theme-option" data-theme="orange"> <div class="color-theme-preview" style="background: linear-gradient(135deg, #e65100, #ff9800);"></div> </div> <div class="color-theme-option" data-theme="yellow"> <div class="color-theme-preview" style="background: linear-gradient(135deg, #d4b938, #c4a644);"></div> </div> <div class="color-theme-option" data-theme="green"> <div class="color-theme-preview" style="background: linear-gradient(135deg, #1b5e20, #4caf50);"></div> </div> <div class="color-theme-option" data-theme="blue"> <div class="color-theme-preview" style="background: linear-gradient(135deg, #2c3e50, #3498db);"></div> </div> <div class="color-theme-option" data-theme="purple"> <div class="color-theme-preview" style="background: linear-gradient(135deg, #4a148c, #9c27b0);"></div> </div> </div> </div> <div class="settings-section"> <h3>About Provinent Scripture Study</h3> <div class="about-content"> <div class="about-creator"> Created by: Jordan DiPasquale (code written using AI tools) </div> <div class="attribution-links"> <a href="https://github.com/jd-code76/provinent-scripture-study" target="_blank" class="attribution-link github"> <div> <strong>Source Code</strong> <div class="link-description">Hosted on GitHub</div> </div> </a> <a href="https://gab.ai/" target="_blank" class="attribution-link gab"> <div> <strong>Gab AI</strong> <div class="link-description">By Gab, free speech social media</div> </div> </a> <a href="https://lumo.proton.me/" target="_blank" class="attribution-link lumo"> <div> <strong>Lumo AI</strong> <div class="link-description">By Proton AG</div> </div> </a> </div> <div class="version-info"> <strong>Version:</strong> <span id="appVersion"></span> </div> </div> </div> <div class="settings-actions"> <button class="btn btn-secondary" id="cancelSettingsBtn">Cancel</button> <button class="btn" id="saveSettingsBtn">Save Settings</button> </div> </div> <div class="popup-overlay" id="importOptionsOverlay" aria-hidden="true"></div> <div class="settings-modal" id="importOptionsModal" role="dialog" aria-labelledby="importOptionsTitle" aria-modal="true"> <div class="popup-header"> <h2 id="importOptionsTitle">Import Options</h2> <button class="popup-close" id="closeImportOptionsBtn" aria-label="Close import options"> <i class="fas fa-xmark"></i> </button> </div> <div class="import-options-content"> <p style="margin-bottom: 20px; color: var(--text-color); opacity: 0.9;"> Choose how to import your data. These options control what gets overwritten. </p> <div class="settings-group"> <label class="toggle-label"> <input type="checkbox" id="mergeHighlightsToggle" checked> <span class="toggle-slider"></span> <span style="flex: 1;"> <strong>Merge Highlights</strong> <small style="display: block; margin-top: 4px; opacity: 0.8; font-weight: normal;"> Keep existing highlights and add imported ones. If disabled, all current highlights will be replaced. </small> </span> </label> </div> <div class="settings-group"> <label class="toggle-label"> <input type="checkbox" id="mergeNotesToggle"> <span class="toggle-slider"></span> <span style="flex: 1;"> <strong>Merge Notes</strong> <small style="display: block; margin-top: 4px; opacity: 0.8; font-weight: normal;"> Append imported notes to existing notes. If disabled, current notes will be replaced. </small> </span> </label> </div> <div class="settings-group"> <label class="toggle-label"> <input type="checkbox" id="preserveSettingsToggle" checked> <span class="toggle-slider"></span> <span style="flex: 1;"> <strong>Keep Current Settings</strong> <small style="display: block; margin-top: 4px; opacity: 0.8; font-weight: normal;"> Preserve your device's current settings (translation, theme, audio, etc.). If disabled, imported settings will be applied. </small> </span> </label> </div> <div class="import-summary" style="margin-top: 25px; padding: 15px; background: var(--toolbar-background); border-radius: 8px; border-left: 4px solid var(--accent-color);"> <h4 style="margin: 0 0 10px 0; color: var(--text-color);"> <i class="fas fa-info-circle"></i> What will happen: </h4> <ul id="importSummaryList" style="margin: 0; padding-left: 20px; color: var(--text-color); opacity: 0.9; line-height: 1.8;"> </ul> </div> </div> <div class="settings-actions"> <button class="btn btn-secondary" id="cancelImportBtn">Cancel</button> <button class="btn" id="confirmImportBtn"> <i class="fas fa-upload"></i> Import Data </button> </div> </div> <div class="mobile-nav-tabs" id="mobileNavTabs"> <button class="mobile-nav-tab active" data-panel="scripture" aria-label="Scripture"> <i class="fas fa-book-open"></i> <span>Scripture</span> </button> <button class="mobile-nav-tab" data-panel="reference" aria-label="Reference"> <i class="fas fa-book"></i> <span>Reference</span> </button> <button class="mobile-nav-tab" data-panel="notes" aria-label="Notes"> <i class="fas fa-sticky-note"></i> <span>Notes</span> </button> <button class="mobile-nav-tab" data-panel="sidebar" aria-label="Resources"> <i class="fas fa-sitemap"></i> <span>Resources</span> </button> <button class="mobile-nav-tab" data-panel="settings" aria-label="Settings"> <i class="fas fa-cog"></i> <span>Settings</span> </button> </div> <div class="mobile-panel" id="mobilePanel"> <button class="mobile-close-btn" id="mobilePanelClose" aria-label="Close panel">×</button> <div id="mobilePanelContent"></div> </div> <script type="module" src="/main.js" defer></script> </body> </html>