Files
kjv_api/html/index.html
T
2026-10-19 15:10:59 -07:00

385 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KJV API - Legacy Edition</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="stylesheet" href="/styles/page.css?v=__V__">
<script src="/js/collapsible.js?v=__V__" defer></script>
<style>
/* Home page layout */
.site-title {
margin: var(--space-md) 0 0.25rem;
}
.tagline {
margin: 0 0 var(--space-lg);
color: var(--color-text-muted);
}
.search-section {
background-color: var(--color-bg-secondary);
padding: var(--space-lg);
border-radius: var(--border-radius);
border: 1px solid var(--color-border);
margin-bottom: var(--space-xl);
box-shadow: 0 2px 8px var(--color-shadow);
}
.search-section form {
background: none;
border: none;
padding: 0;
margin: 0;
}
.search-row {
display: flex;
gap: var(--space-sm);
}
.search-row input[type=text] {
margin: 0;
flex: 1;
min-width: 0;
}
.quick-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
margin-top: var(--space-md);
}
.quick-btn {
background-color: var(--color-bg-tertiary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
padding: 0.7rem 1rem;
min-height: 44px;
border-radius: var(--border-radius-sm);
font-weight: 600;
text-align: center;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.quick-btn:hover {
background-color: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: var(--color-on-accent);
text-decoration: none;
}
.testament-header {
color: var(--color-accent-primary);
font-size: 1.6rem;
margin-top: var(--space-2xl);
margin-bottom: var(--space-sm);
font-weight: 700;
border-bottom: 2px solid var(--color-accent-primary);
padding-bottom: 0.5rem;
}
.category-header {
color: var(--color-text-secondary);
font-size: 1.05rem;
margin-top: var(--space-lg);
margin-bottom: var(--space-sm);
font-weight: 600;
}
/* Books: each book is a button; its chapter grid opens full-width underneath
the row it sits in (display: contents lets the chapter grid span the
book grid, and "dense" back-fills the gap with the following books). */
.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-flow: row dense;
gap: var(--space-sm);
}
.book-grid > div {
display: contents;
}
.book-button {
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
padding: 0.7rem 0.9rem;
min-height: 44px;
text-align: left;
color: var(--color-text-primary);
cursor: pointer;
font-family: var(--font-ui);
font-weight: 600;
font-size: 0.95rem;
width: 100%;
margin: 0;
transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.book-button:hover,
.book-button.active {
background-color: var(--color-accent-primary);
color: var(--color-on-accent);
border-color: var(--color-accent-primary);
transform: none;
}
.chapter-grid {
display: none;
grid-column: 1 / -1;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.4rem;
padding: var(--space-md);
background-color: var(--color-bg-secondary);
border: 1px solid var(--color-accent-primary);
border-radius: var(--border-radius-sm);
}
.book-about {
grid-column: 1 / -1;
margin: 0 0 var(--space-xs);
font-size: 0.95rem;
line-height: 1.5;
color: var(--color-text-secondary);
}
.chapter-link {
background-color: var(--color-bg-tertiary);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
min-height: 44px;
padding: 0.35rem 0.75rem 0.35rem 0.4rem;
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--color-text-primary);
font-size: 0.95rem;
line-height: 1.35;
transition: background-color var(--transition-fast);
}
.chapter-num {
flex: 0 0 2.4rem;
text-align: center;
font-weight: 700;
color: var(--color-accent-primary);
}
.chapter-sum {
color: var(--color-text-secondary);
}
.chapter-link:hover {
background-color: var(--color-accent-primary);
color: var(--color-on-accent);
text-decoration: none;
}
.chapter-link:hover .chapter-num,
.chapter-link:hover .chapter-sum {
color: var(--color-on-accent);
}
.api-docs {
margin-top: var(--space-2xl);
border: 1px solid var(--color-border);
border-radius: var(--border-radius-sm);
background-color: var(--color-bg-secondary);
}
.api-docs summary {
padding: 0.9rem 1.1rem;
font-weight: 600;
cursor: pointer;
}
.api-docs pre {
margin: 0;
border: none;
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
}
@media (max-width: 480px) {
.book-grid {
grid-template-columns: repeat(2, 1fr);
}
.chapter-grid {
grid-template-columns: 1fr;
}
.search-row {
flex-direction: column;
}
.search-row input[type=submit] {
width: 100%;
}
}
</style>
<script src="/js/book_suggest.js?v=__V__" defer></script>
</head>
<body>
<div class="container">
<h1 class="site-title">KJV API <small>(Legacy edition)</small></h1>
<p class="tagline">King James Bible: search, read, and query by reference.</p>
<div class="search-section">
<form action="/find" role="search">
<label for="kw">Search Scripture</label>
<div class="search-row">
<input type="text" name="kw" id="kw" data-book-suggest autocapitalize="off" autocomplete="off" enterkeyhint="search" placeholder="Verse reference or keywords...">
<input type="hidden" name="view" value="rich">
<input type="submit" value="Search">
</div>
</form>
<div class="quick-actions">
<a href="/random?view=rich" class="quick-btn">Random Verse</a>
<a href="/votd?view=rich" class="quick-btn">Verse of the Day</a>
<a href="/plan" class="quick-btn">Make a Bible Reading Plan</a>
<a href="/saved" class="quick-btn">Saved Verses &amp; Notes</a>
<a href="#" class="quick-btn" id="continue-plan" hidden>Continue My Reading Plan</a>
</div>
</div>
<!-- OLD TESTAMENT -->
<h2 class="testament-header">Old Testament</h2>
{% for category, books in testament_data.OT.items() %}
<h3 class="category-header">{{ category }}</h3>
<div class="book-grid">
{% for book in books %}
<div>
<button class="book-button collapsible" data-book="{{ book.title }}">
{{ book.title }}
</button>
<div class="chapter-grid content">
{% if book.about %}<p class="book-about">{{ book.about }}</p>{% endif %}
{% for chapter in range(1, book.chapters + 1) %}
<a href="/show?kw={{ book.title }} {{ chapter }}&view=rich" class="chapter-link"><span class="chapter-num">{{ chapter }}</span>{% if book.summaries|length >= chapter %}<span class="chapter-sum">{{ book.summaries[chapter - 1] }}</span>{% endif %}</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
<!-- NEW TESTAMENT -->
<h2 class="testament-header">New Testament</h2>
{% for category, books in testament_data.NT.items() %}
<h3 class="category-header">{{ category }}</h3>
<div class="book-grid">
{% for book in books %}
<div>
<button class="book-button collapsible" data-book="{{ book.title }}">
{{ book.title }}
</button>
<div class="chapter-grid content">
{% if book.about %}<p class="book-about">{{ book.about }}</p>{% endif %}
{% for chapter in range(1, book.chapters + 1) %}
<a href="/show?kw={{ book.title }} {{ chapter }}&view=rich" class="chapter-link"><span class="chapter-num">{{ chapter }}</span>{% if book.summaries|length >= chapter %}<span class="chapter-sum">{{ book.summaries[chapter - 1] }}</span>{% endif %}</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
{% endfor %}
<!-- API DOCUMENTATION -->
<details class="api-docs">
<summary>API Documentation</summary>
<pre><code>API ENDPOINT SPECIFICATION v 0.3
================================
<a href="/find">/find</a> - Tries to show a verse, if it's not a verse
it will try to search your query. If it's a
single query it will try to find a definition
for the word as well. Only avaliable in "Rich"
and meant for interactive use/browsing
<a href="/random">/random</a> - outputs a random verse
<a href="/votd">/votd</a> - returns verse of the day
<a href="/search">/search</a> - returns a keyword search result set
<a href="/show">/show</a> - returns a verse or set of verses by name/location
<a href="/define">/define</a> - 1828 Noah Webster dictionary search
<a href="/seq">/seq</a> - Incremental sequence of Bible verses (per request)
URL PARAMETERS
==============
view=
- json - json-encoded response
- plain - very simple html response
- rich - pretty response with css and js
Required parameter
kw=
- Used with /search /show/ /define /find
- The keyword(s) of your query, separated by commas
-- ex ?kw=1cor5:1-5,2Peter2:5
getuid=
- Used only with /seq
- Set this to "true" to recieve a new UID for use with /seq?uid=
start=
- Used only with /seq
- You can use a ref like "1Cor5:1" to start there
instead of Genesis 1:1 as is the default
- Only used when creating a new UID
- If you want to "start in a new place" - just create a new UID
uid=
- Used only with /seq
- Required parameter for normal use of /seq
num=
- Used only with /seq
- You can get the "next # verses" in your sequence
FEATURES
========
- King James Only. (No heretical commentaries or false Bibles)
- High quality source documents
- Free
- Developer hates the sodomites
INTERACTIVE ENDPOINTS
=====================
The following endpoints will present you with a query box and
radio selector for choosing your output format.
- / (same function as /find)
- /search
- /define
- /show
EXAMPLES
========
api.tld/random
api.tld/votd?view=rich
api.tld/show?kw=john3:16,1john5:7&view=plain
BUGS
====
Suggestions, bug reports or improvements can be reported to <a href="https://nicecrew.digital/@tyler">@tyler@nicecrew.digital</a></code></pre>
</details>
</div>
<script>
try {
var plan = JSON.parse(localStorage.getItem('kjv.plan'));
if (plan && /^[0-9A-Z]+$/.test(plan.uid)) {
var link = document.getElementById('continue-plan');
link.href = '/plan/' + plan.uid + '?n=' + (parseInt(plan.n, 10) || 25);
link.hidden = false;
}
} catch (e) {}
</script>
</body>
</html>