From bcef52fc2c4f3907af693e38c7ac3f235ad1c698 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Fri, 14 Nov 2025 16:42:09 -0500
Subject: [PATCH] Simplify verse-of-the-day page design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 kjvstudy_org/templates/verse_of_the_day.html | 435 ++-----------------
 1 file changed, 27 insertions(+), 408 deletions(-)

diff --git a/kjvstudy_org/templates/verse_of_the_day.html b/kjvstudy_org/templates/verse_of_the_day.html
index 86cd35a..ed17b44 100644
--- a/kjvstudy_org/templates/verse_of_the_day.html
+++ b/kjvstudy_org/templates/verse_of_the_day.html
@@ -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 %}
\ No newline at end of file
+<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 %}