bible-app / templates /book.html
broadfield-dev's picture
Create book.html
4255bc2 verified
<!-- templates/book.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Book of {{ book_name }} - Bible App</title>
<style>
body { font-family: sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; }
.container { max-width: 800px; margin: auto; background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
h1, h2 { color: #4a4a4a; }
p { line-height: 1.6; }
.verse-num { font-weight: bold; color: #5c67f2; vertical-align: super; font-size: 0.8em; margin-left: 4px; }
.nav-links { margin-bottom: 2em; font-size: 1.1em; }
a { color: #5c67f2; text-decoration: none; }
a:hover { text-decoration: underline; }
.chapter-heading { margin-top: 2em; border-bottom: 1px solid #e1e1e8; padding-bottom: 0.5em;}
</style>
</head>
<body>
<div class="container">
<div class="nav-links">
<a href="/">← Back to Search</a>
</div>
<h1>The Book of {{ book_name }}</h1>
<hr>
{% for chapter_num in chapters.keys()|sort %}
<h2 class="chapter-heading">Chapter {{ chapter_num }}</h2>
<p>
{% for verse in chapters[chapter_num] %}
<span class="verse-num">{{ verse.verse }}</span> {{ verse.text }}
{% endfor %}
</p>
{% endfor %}
</div>
</body>
</html>