kennethreitz/kjvstudy.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/kjvstudy.org.git synced 2026-06-05 23:00:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplify verse-of-the-day page design

Browse Source 
Remove decorative elements, emojis, inline styles, and complex layouts.
Use clean Tufte CSS styling consistent with the rest of the site.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2025-11-14 16:42:09 -05:00
parent 5d88d08522
commit bcef52fc2c
1 changed files with 27 additions and 408 deletions
Download Patch File Download Diff File Expand all files Collapse all files
kjvstudy_org/templates/verse_of_the_day.html
+27 -408
View File
@@ -1,416 +1,35 @@
{% extends "base.html" %}
{% block title %}Verse of the Day - {{ daily_verse.reference }} - KJV Study{% endblock %}
{% block description %}Today's verse from the King James Bible: {{ daily_verse.reference }} - {{ daily_verse.text[:100] }}... Meditate on God's Word daily with our verse of the day feature.{% endblock %}
{% block keywords %}verse of the day, daily Bible verse, KJV verse, daily devotion, Bible meditation, Scripture of the day{% endblock %}
{% block description %}Today's verse from the King James Bible: {{ daily_verse.reference }} - {{ daily_verse.text[:100] }}...{% endblock %}
{% block content %}
<div class="verse-of-the-day-container">
<!-- Header -->
<div class="text-center mb-4">
<h1 class="page-title" style="
font-size: 2.2rem;
margin-bottom: 0.5rem;
color: var(--text-primary);
font-family: var(--font-display);
">
✨ Verse of the Day
</h1>
<p style="
font-size: 1rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto 2rem;
">
{{ daily_verse.date }} - Meditate on God's Word and let it transform your heart and mind.
</p>
</div>
<h1>Verse of the Day</h1>
<p class="subtitle">{{ daily_verse.date }}</p>
<!-- Main Verse Card -->
<div class="verse-main-card" style="
background: linear-gradient(135deg, var(--primary-ultra-light) 0%, var(--surface-color) 100%);
border: 2px solid var(--primary-light);
border-radius: var(--radius-xl);
padding: 3rem 2rem;
margin: 2rem auto;
max-width: 800px;
text-align: center;
box-shadow: var(--shadow-lg);
position: relative;
overflow: hidden;
">
<!-- Decorative background -->
<div style="
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: radial-gradient(circle, var(--primary-ultra-light) 0%, transparent 70%);
opacity: 0.3;
pointer-events: none;
"></div>
<div style="
position: absolute;
bottom: -50px;
left: -50px;
width: 150px;
height: 150px;
background: radial-gradient(circle, var(--primary-ultra-light) 0%, transparent 70%);
opacity: 0.2;
pointer-events: none;
"></div>
<section>
<blockquote>
<p>{{ daily_verse.text }}</p>
<footer><a href="/book/{{ daily_verse.book }}/chapter/{{ daily_verse.chapter }}/verse/{{ daily_verse.verse }}">{{ daily_verse.reference }}</a></footer>
</blockquote>
</section>
<div class="verse-content" style="position: relative; z-index: 2;">
<div class="verse-icon" style="
font-size: 3rem;
margin-bottom: 1.5rem;
opacity: 0.7;
">📖</div>
<blockquote class="verse-text" style="
font-family: 'Crimson Text', 'Times New Roman', serif;
font-size: 1.4rem;
line-height: 1.8;
color: var(--text-primary);
font-style: italic;
margin: 0 0 2rem;
font-weight: 400;
quotes: '"' '"';
">
"{{ daily_verse.text }}"
</blockquote>
<cite class="verse-reference" style="
font-family: var(--font-display);
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
font-style: normal;
display: block;
margin-bottom: 2rem;
">
— {{ daily_verse.reference }}
</cite>
<!-- Action Buttons -->
<div class="verse-actions" style="
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
">
<a href="/book/{{ daily_verse.book }}" style="
display: inline-block;
background: var(--primary-color);
color: white;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 500;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='var(--shadow-md)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='var(--shadow-sm)'">
📚 Read {{ daily_verse.book }}
</a>
<a href="/book/{{ daily_verse.book }}/{{ daily_verse.chapter }}" style="
display: inline-block;
background: var(--primary-light);
color: white;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-weight: 500;
transition: all 0.2s ease;
box-shadow: var(--shadow-sm);
" onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='var(--shadow-md)'"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='var(--shadow-sm)'">
📄 Chapter {{ daily_verse.chapter }}
</a>
</div>
</div>
</div>
<section>
<h2>Reflection</h2>
<p>As you meditate on this verse today, consider:</p>
<ul>
<li>What does this verse teach me about God's character?</li>
<li>How can I apply this truth to my life today?</li>
<li>What is God calling me to do or change?</li>
</ul>
</section>
<!-- Reflection Section -->
<div class="reflection-section" style="
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 2rem;
margin: 2rem auto;
max-width: 700px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
">
<h2 style="
font-size: 1.3rem;
margin-bottom: 1rem;
color: var(--primary-color);
font-family: var(--font-display);
text-align: center;
">
💭 Reflection Questions
</h2>
<div class="reflection-questions" style="
color: var(--text-primary);
line-height: 1.7;
">
<ul style="
list-style: none;
padding: 0;
margin: 0;
">
<li style="
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: flex-start;
gap: 0.75rem;
">
<span style="color: var(--primary-color); font-weight: bold;">•</span>
<span>What does this verse teach me about God's character?</span>
</li>
<li style="
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: flex-start;
gap: 0.75rem;
">
<span style="color: var(--primary-color); font-weight: bold;">•</span>
<span>How can I apply this truth to my life today?</span>
</li>
<li style="
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-light);
display: flex;
align-items: flex-start;
gap: 0.75rem;
">
<span style="color: var(--primary-color); font-weight: bold;">•</span>
<span>What is God calling me to do or change?</span>
</li>
<li style="
padding: 0.75rem 0;
display: flex;
align-items: flex-start;
gap: 0.75rem;
">
<span style="color: var(--primary-color); font-weight: bold;">•</span>
<span>How can I share this truth with others?</span>
</li>
</ul>
</div>
</div>
<!-- Share Section -->
<div class="share-section" style="
background: var(--background-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
margin: 2rem auto;
max-width: 600px;
text-align: center;
border: 1px solid var(--border-light);
">
<h3 style="
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--text-primary);
font-family: var(--font-display);
">
📤 Share Today's Verse
</h3>
<p style="
font-size: 0.9rem;
color: var(--text-secondary);
margin-bottom: 1rem;
">
Encourage others with God's Word
</p>
<div class="share-buttons" style="
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
">
<button onclick="copyToClipboard()" style="
background: var(--primary-light);
color: white;
border: none;
padding: 0.6rem 1.2rem;
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font-display);
font-size: 0.9rem;
transition: background-color 0.2s ease;
" onmouseover="this.style.backgroundColor='var(--primary-color)'"
onmouseout="this.style.backgroundColor='var(--primary-light)'">
📋 Copy Verse
</button>
</div>
<div id="copyMessage" style="
color: var(--primary-color);
font-size: 0.85rem;
margin-top: 0.5rem;
opacity: 0;
transition: opacity 0.3s ease;
">
Verse copied to clipboard!
</div>
</div>
<!-- Navigation -->
<div class="navigation-section" style="
background: var(--surface-color);
border-radius: var(--radius-lg);
padding: 2rem;
margin-top: 3rem;
text-align: center;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-sm);
">
<h3 style="
color: var(--primary-color);
margin: 0 0 1rem;
font-family: var(--font-display);
font-size: 1.3rem;
">
Continue Your Study
</h3>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<a href="/study-guides" style="
display: inline-block;
background: var(--primary-light);
color: white;
padding: 0.75rem 1.5rem;
text-decoration: none;
border-radius: var(--radius-md);
font-family: var(--font-display);
transition: background-color 0.2s ease;
" onmouseover="this.style.backgroundColor='var(--primary-color)'"
onmouseout="this.style.backgroundColor='var(--primary-light)'">
📖 Study Guides
</a>
<a href="/search" style="
display: inline-block;
background: transparent;
color: var(--primary-color);
padding: 0.75rem 1.5rem;
text-decoration: none;
border: 2px solid var(--primary-light);
border-radius: var(--radius-md);
font-family: var(--font-display);
transition: all 0.2s ease;
" onmouseover="this.style.backgroundColor='var(--primary-light)'; this.style.color='white'"
onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--primary-color)'">
🔍 Search Bible
</a>
<a href="/" style="
display: inline-block;
background: transparent;
color: var(--primary-color);
padding: 0.75rem 1.5rem;
text-decoration: none;
border: 2px solid var(--primary-light);
border-radius: var(--radius-md);
font-family: var(--font-display);
transition: all 0.2s ease;
" onmouseover="this.style.backgroundColor='var(--primary-light)'; this.style.color='white'"
onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--primary-color)'">
📚 All Books
</a>
</div>
</div>
</div>
<style>
@media (max-width: 768px) {
.page-title {
font-size: 1.8rem !important;
}
.verse-main-card {
padding: 2rem 1.5rem !important;
margin: 1rem auto !important;
}
.verse-text {
font-size: 1.2rem !important;
}
.verse-reference {
font-size: 1rem !important;
}
.verse-actions {
flex-direction: column !important;
}
.verse-actions a {
text-align: center;
}
.reflection-section,
.navigation-section {
padding: 1.5rem !important;
margin: 1.5rem auto !important;
}
.navigation-section div {
flex-direction: column !important;
}
.share-buttons {
flex-direction: column !important;
}
}
.verse-main-card:hover {
transform: translateY(-2px);
transition: transform 0.3s ease;
}
</style>
<script>
function copyToClipboard() {
const verseText = `"{{ daily_verse.text }}" — {{ daily_verse.reference }}`;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(verseText).then(function() {
showCopyMessage();
});
} else {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = verseText;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
showCopyMessage();
} catch (err) {
console.error('Failed to copy text: ', err);
}
textArea.remove();
}
}
function showCopyMessage() {
const message = document.getElementById('copyMessage');
message.style.opacity = '1';
setTimeout(() => {
message.style.opacity = '0';
}, 2000);
}
</script>
{% endblock %}
<section>
<h2>Continue Reading</h2>
<p>
<a href="/book/{{ daily_verse.book }}">Read {{ daily_verse.book }}</a> |
<a href="/book/{{ daily_verse.book }}/chapter/{{ daily_verse.chapter }}">Chapter {{ daily_verse.chapter }}</a> |
<a href="/book/{{ daily_verse.book }}/chapter/{{ daily_verse.chapter }}/verse/{{ daily_verse.verse }}">Full Commentary</a>
</p>
</section>
{% endblock %}