Frontend Features and refactor
This commit is contained in:
+212
-111
@@ -5,114 +5,77 @@
|
||||
<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">
|
||||
<script src="/js/collapsible.js" defer></script>
|
||||
<link rel="stylesheet" href="/styles/page.css?v=__V__">
|
||||
<script src="/js/collapsible.js?v=__V__" defer></script>
|
||||
<style>
|
||||
/* Bible Book Styles */
|
||||
.book-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0;
|
||||
/* Home page layout */
|
||||
.site-title {
|
||||
margin: var(--space-md) 0 0.25rem;
|
||||
}
|
||||
|
||||
.book-button {
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
color: var(--color-text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-ui);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.book-button:hover {
|
||||
background-color: var(--color-accent-primary);
|
||||
color: var(--color-bg-primary);
|
||||
border-color: var(--color-accent-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.book-button.active {
|
||||
background-color: var(--color-accent-primary);
|
||||
color: var(--color-bg-primary);
|
||||
border-color: var(--color-accent-primary);
|
||||
}
|
||||
|
||||
.chapter-grid {
|
||||
display: none;
|
||||
grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
|
||||
gap: 0.4rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.chapter-link {
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius-sm);
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 0.85rem;
|
||||
transition: all var(--transition-fast);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chapter-link:hover {
|
||||
background-color: var(--color-accent-primary);
|
||||
color: var(--color-bg-primary);
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
background-color: var(--color-accent-primary);
|
||||
color: var(--color-bg-primary);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--border-radius-sm);
|
||||
font-weight: 600;
|
||||
transition: all var(--transition-fast);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.quick-btn:hover {
|
||||
background-color: var(--color-accent-hover);
|
||||
transform: translateY(-1px);
|
||||
text-decoration: none;
|
||||
.tagline {
|
||||
margin: 0 0 var(--space-lg);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.search-section {
|
||||
background-color: var(--color-bg-secondary);
|
||||
padding: var(--space-xl);
|
||||
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.8rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
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;
|
||||
@@ -120,43 +83,169 @@
|
||||
|
||||
.category-header {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 1.1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
font-size: 1.05rem;
|
||||
margin-top: var(--space-lg);
|
||||
margin-bottom: var(--space-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
/* 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(auto-fill, minmax(130px, 1fr));
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
.chapter-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.quick-btn {
|
||||
.search-row input[type=submit] {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/js/book_suggest.js?v=__V__" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<h1>KJV API (Legacy edition)</h1>
|
||||
<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">
|
||||
<label for='kw'>Search Scripture</label><br>
|
||||
<input type="text" name="kw" id="kw" placeholder="Enter verse reference or search keywords..."><br><br>
|
||||
<input type="hidden" name="view" value="rich">
|
||||
<input type="submit" value="Search">
|
||||
<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 & Notes</a>
|
||||
<a href="#" class="quick-btn" id="continue-plan" hidden>Continue My Reading Plan</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -171,8 +260,9 @@
|
||||
{{ 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">{{ chapter }}</a>
|
||||
<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>
|
||||
@@ -191,8 +281,9 @@
|
||||
{{ 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">{{ chapter }}</a>
|
||||
<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>
|
||||
@@ -201,8 +292,8 @@
|
||||
{% endfor %}
|
||||
|
||||
<!-- API DOCUMENTATION -->
|
||||
<button class="collapsible" style="margin-top: 2rem;">API Documentation</button>
|
||||
<div class="content">
|
||||
<details class="api-docs">
|
||||
<summary>API Documentation</summary>
|
||||
<pre><code>API ENDPOINT SPECIFICATION v 0.3
|
||||
================================
|
||||
|
||||
@@ -275,9 +366,19 @@ 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>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user