tyler/kjv_api
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Redesign UI with modern dark theme and improved styling

Browse Source 
- Unified color scheme using CSS variables across all pages
- Fixed spacing issues in verse display (removed <br> joins for rich view)
- Updated all HTML pages with proper HTML5 structure
- Added responsive design with mobile breakpoints
- Created shared stylesheet (styles/page.css) for form pages
- Fixed unclosed div tag in scripture_response
- Improved typography with serif fonts for scripture text
- Added verse container cards with hover effects
- Inline dark background to prevent white flash on navigation

All endpoints remain backward compatible with existing functionality.
This commit is contained in:
Tyler
2025-10-19 22:24:02 -07:00
parent dd474492bb
commit a597e2be07
17 changed files with 792 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/show.html
+27 -14
View File
@@ -1,18 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show Verse - KJV API</title>
<link rel="stylesheet" href="/styles/page.css">
<style>body{background-color:#1a1a1a}</style>
</head>
<body>
<header>
<a href="/">Home</a> | <a href="/find">Quick Search</a> | <a href="/show">Show Verse</a> |
<a href="/random?view=rich">Random Verse</a> | <a href="/votd?view=rich">Verse of the Day</a>
</header>
<h2>Show Verse</h2>
<form action="/show">
<label for='kw'>Verse References</label><br>
<input type="text" name="kw"><br><br>
<label for='view'>View<label><br>
<input type="radio" name="view" value="rich" checked="checked">Rich<br>
<input type="radio" name="view" value="plain">Plain<br>
<input type="radio" name="view" value="json">JSON<br>
<input type="submit">
<form>
<label for='kw'>Verse References</label>
<input type="text" name="kw" placeholder="e.g., 1 John 5:7 or John3:16,2Peter2:1">
<label for='view'>View</label>
<input type="radio" name="view" value="rich" checked="checked"> Rich
<input type="radio" name="view" value="plain"> Plain
<input type="radio" name="view" value="json"> JSON
<input type="submit" value="Show">
</form>
<hr>
<p>You can try to search a Bible reference in this box, such as "1 John 5:7".</p>
<p>You can search a Bible reference in this box, such as "1 John 5:7".</p>
<p>You can use abbreviations, but you may not get the result you are looking for.</p>
<p>Use a dash for the verse to get the entire chapter, eg. "John 3:-"<p>
<p>You may return multiple verse groups by using a comma, eg. "John3:16,2Peter2:1"</p>
<p>Use a dash for the verse to get the entire chapter, e.g., "John 3:-"</p>
<p>You may return multiple verse groups by using a comma, e.g., "John3:16,2Peter2:1"</p>
</body>
</html>