mirror of
https://github.com/kennethreitz/kjvstudy.org.git
synced 2026-06-05 23:00:16 +00:00
Add CSS styling and HTML templates for Bible browsing interface
This commit is contained in:
@@ -0,0 +1,55 @@
|
||||
body {
|
||||
font-family: 'Palatino Linotype', serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
background-color: #f6f4ef;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 250px;
|
||||
background-color: #2e2e2e;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.sidebar h2 {
|
||||
font-size: 1.2rem;
|
||||
margin-top: 0;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.sidebar a {
|
||||
display: block;
|
||||
color: #ddd;
|
||||
padding: 4px 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sidebar a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex-grow: 1;
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
color: #4b2e83;
|
||||
}
|
||||
|
||||
.verse-block {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.verse-block strong {
|
||||
display: inline-block;
|
||||
width: 4rem;
|
||||
font-weight: normal;
|
||||
color: #888;
|
||||
}
|
||||
@@ -16,6 +16,7 @@ bible = kjv.Bible()
|
||||
@app.get("/", response_class=HTMLResponse)
|
||||
def read_root(request: Request):
|
||||
books = list(bible.iter_books())
|
||||
|
||||
return templates.TemplateResponse(
|
||||
"index.html", {"request": request, "books": books}
|
||||
)
|
||||
@@ -23,22 +24,33 @@ def read_root(request: Request):
|
||||
|
||||
@app.get("/book/{book}", response_class=HTMLResponse)
|
||||
def read_book(request: Request, book: str):
|
||||
books = list(bible.iter_books())
|
||||
chapters = [ch for bk, ch in bible.iter_chapters() if bk == book]
|
||||
|
||||
if not chapters:
|
||||
raise HTTPException(status_code=404, detail="Book not found")
|
||||
return templates.TemplateResponse(
|
||||
"book.html", {"request": request, "book": book, "chapters": chapters}
|
||||
"book.html",
|
||||
{"request": request, "book": book, "chapters": chapters, "books": books},
|
||||
)
|
||||
|
||||
|
||||
@app.get("/book/{book}/chapter/{chapter}", response_class=HTMLResponse)
|
||||
def read_chapter(request: Request, book: str, chapter: int):
|
||||
books = list(bible.iter_books())
|
||||
verses = [v for v in bible.iter_verses() if v.book == book and v.chapter == chapter]
|
||||
|
||||
if not verses:
|
||||
raise HTTPException(status_code=404, detail="Chapter not found")
|
||||
return templates.TemplateResponse(
|
||||
"chapter.html",
|
||||
{"request": request, "book": book, "chapter": chapter, "verses": verses},
|
||||
{
|
||||
"request": request,
|
||||
"book": book,
|
||||
"chapter": chapter,
|
||||
"verses": verses,
|
||||
"books": books,
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{% block title %}Bible Study{% endblock %}</title>
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="sidebar">
|
||||
<h2>Bible Books</h2>
|
||||
{% for book in books %}
|
||||
<a href="/book/{{ book }}">{{ book }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="main">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+69
-9
@@ -1,15 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{ book }}</title>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ book }} – Chapters</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Lora:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'EB Garamond', serif;
|
||||
background-color: #fdfcf9;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: 'Lora', serif;
|
||||
text-align: center;
|
||||
color: #4b2e83;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.chapter-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
||||
gap: 1rem;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.chapter-grid a {
|
||||
display: block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background-color: #f0ebf8;
|
||||
color: #4b2e83;
|
||||
border-radius: 0.5rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.chapter-grid a:hover {
|
||||
background-color: #e4d7f5;
|
||||
}
|
||||
|
||||
.nav-back {
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.nav-back a {
|
||||
color: #4b2e83;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-back a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ book }}</h1>
|
||||
<ul>
|
||||
{% for chapter in chapters %}
|
||||
<li><a href="/book/{{ book }}/chapter/{{ chapter }}">{{ book }} {{ chapter }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<a href="/">Back to Books</a>
|
||||
<div class="container">
|
||||
<div class="heading">{{ book }}</div>
|
||||
<div class="chapter-grid">
|
||||
{% for chapter in chapters %}
|
||||
<a href="/book/{{ book }}/chapter/{{ chapter }}">{{ chapter }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="nav-back">
|
||||
<a href="/">← Back to Books</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+73
-9
@@ -1,16 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>{{ book }} {{ chapter }}</title>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ book }} {{ chapter }} – KJV Bible</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Lora:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'EB Garamond', serif;
|
||||
background-color: #fdfcf9;
|
||||
color: #1a1a1a;
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.chapter-heading {
|
||||
font-family: 'Lora', serif;
|
||||
font-size: 2.8rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
color: #4b2e83;
|
||||
}
|
||||
|
||||
.verse {
|
||||
margin-bottom: 1.2rem;
|
||||
line-height: 1.75;
|
||||
font-size: 1.2rem;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.verse-number {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
margin-right: 0.5rem;
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.verse-container {
|
||||
display: block;
|
||||
padding-left: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: #4b2e83;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
margin-top: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{{ book }} {{ chapter }}</h1>
|
||||
{% for verse in verses %}
|
||||
<div>
|
||||
<p><strong>{{ verse.verse }}</strong> {{ verse.text }}</p>
|
||||
<textarea rows="2" cols="80" placeholder="Your commentary..."></textarea>
|
||||
<div class="container">
|
||||
<div class="chapter-heading">{{ book }} {{ chapter }}</div>
|
||||
|
||||
<div class="verse-container">
|
||||
{% for verse in verses %}
|
||||
<div class="verse">
|
||||
<span class="verse-number">{{ verse.verse }}</span>{{ verse.text }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
<a href="/book/{{ book }}">Back to {{ book }}</a>
|
||||
|
||||
<div class="footer-nav">
|
||||
<a href="/book/{{ book }}" class="nav-link">← Back to {{ book }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+46
-8
@@ -1,14 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Bible Browser</title>
|
||||
<meta charset="UTF-8">
|
||||
<title>Bible Browser – KJV</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond&family=Lora:wght@400;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'EB Garamond', serif;
|
||||
background-color: #fdfcf9;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'Lora', serif;
|
||||
font-size: 2.5rem;
|
||||
text-align: center;
|
||||
color: #4b2e83;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.book-list {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.book-list a {
|
||||
display: block;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 1.25rem;
|
||||
color: #4b2e83;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
.book-list a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Select a Book</h1>
|
||||
<ul>
|
||||
{% for book in books %}
|
||||
<li><a href="/book/{{ book }}">{{ book }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="container">
|
||||
<div class="title">📖 Select a Book</div>
|
||||
<div class="book-list">
|
||||
{% for book in books %}
|
||||
<a href="/book/{{ book }}">{{ book }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user