From 1721ce366279a0599d333f8924e206fdc6ffd027 Mon Sep 17 00:00:00 2001
From: Kenneth Reitz <me@kennethreitz.org>
Date: Thu, 20 Nov 2025 17:12:54 -0500
Subject: [PATCH] Simplify search page design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Search page: 682 → 143 lines (79% reduction)

- Remove emojis, autocomplete, complex CSS
- Remove CSS variables and gradients
- Keep core search functionality and results display
- Use clean Tufte CSS styling

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 kjvstudy_org/templates/search.html | 657 +++--------------------------
 1 file changed, 59 insertions(+), 598 deletions(-)

diff --git a/kjvstudy_org/templates/search.html b/kjvstudy_org/templates/search.html
index 363ec71..19be1c3 100644
--- a/kjvstudy_org/templates/search.html
+++ b/kjvstudy_org/templates/search.html
@@ -1,507 +1,128 @@
 {% extends "base.html" %}
 
-{% block title %}{% if query %}Search Results for "{{ query }}"{% else %}Search the KJV Bible{% endif %} - Authorized King James Version{% endblock %}
-{% block description %}{% if query %}Search results for "{{ query }}" in the Authorized King James Version (KJV) Bible. Find verses and passages across all books.{% else %}Search the complete Authorized King James Version (KJV) Bible. Find verses, passages, and topics across all 66 books.{% endif %}{% endblock %}
-{% block keywords %}{% if query %}{{ query }}, KJV Bible search, Bible verse search, {{ query }} Bible verses{% else %}KJV Bible search, Bible verse search, search scripture, find Bible verses, Authorized King James Version search{% endif %}{% endblock %}
+{% block title %}{% if query %}Search Results for "{{ query }}"{% else %}Search the KJV Bible{% endif %} - KJV Study{% endblock %}
+{% block description %}{% if query %}Search results for "{{ query }}" in the King James Bible.{% else %}Search the complete King James Bible.{% endif %}{% endblock %}
 
 {% block head %}
 <style>
-.search-container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-}
-
-.search-header {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-.search-title {
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    font-size: 2rem;
-    font-weight: normal;
-    color: var(--text-primary);
-    margin: 0 0 1rem;
-}
-
-.search-subtitle {
-    font-size: 1rem;
-    color: var(--text-secondary);
-    margin: 0 0 2rem;
-}
-
 .search-form {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 2rem;
-    max-width: 600px;
-    margin-left: auto;
-    margin-right: auto;
-    position: relative;
+    margin: 2rem 0;
 }
 
 .search-input {
-    flex: 1;
-    padding: 1rem 1rem 1rem 3rem;
+    width: 100%;
+    max-width: 600px;
+    padding: 0.75rem;
     font-size: 1.1rem;
-    border: 2px solid var(--border-color);
-    border-radius: var(--radius-md);
-    background: var(--surface-color);
-    color: var(--text-primary);
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    transition: border-color 0.2s ease;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
 .search-input:focus {
     outline: none;
-    border-color: var(--primary-light);
-}
-
-.search-input::placeholder {
-    color: var(--text-muted);
-    font-style: italic;
-}
-
-.search-suggestions {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    background: var(--surface-color);
-    border: 2px solid var(--border-color);
-    border-top: none;
-    border-radius: 0 0 var(--radius-md) var(--radius-md);
-    max-height: 300px;
-    overflow-y: auto;
-    z-index: 100;
-    display: none;
-}
-
-.search-icon {
-    position: absolute;
-    left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--text-muted);
-    font-size: 1.1rem;
-    pointer-events: none;
-    z-index: 10;
-}
-
-.suggestion-item {
-    padding: 0.75rem 1rem;
-    cursor: pointer;
-    border-bottom: 1px solid var(--border-light);
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    color: var(--text-primary);
-    transition: background-color 0.2s ease;
-}
-
-.suggestion-item:hover,
-.suggestion-item.active {
-    background: var(--border-light);
-    color: var(--primary-light);
-}
-
-.suggestion-item:last-child {
-    border-bottom: none;
-}
-
-.suggestion-reference {
-    font-weight: 600;
-    color: var(--primary-light);
-    font-size: 0.9rem;
-}
-
-.suggestion-preview {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    margin-top: 0.25rem;
-    line-height: 1.4;
-}
-
-.suggestion-preview mark {
-    background: rgba(139, 92, 246, 0.2);
-    color: var(--text-primary);
-    padding: 0.1rem 0.2rem;
-    border-radius: 2px;
+    border-color: #111;
 }
 
 .search-button {
-    padding: 1rem 2rem;
-    background: var(--primary-light);
-    color: white;
+    margin-top: 1rem;
+    padding: 0.75rem 1.5rem;
+    background: #111;
+    color: #fff;
     border: none;
-    border-radius: var(--radius-md);
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    font-size: 1.1rem;
+    border-radius: 4px;
     cursor: pointer;
-    transition: background-color 0.2s ease;
+    font-size: 1rem;
 }
 
 .search-button:hover {
-    background: var(--primary-color);
+    background: #333;
 }
 
 .search-stats {
-    text-align: center;
-    margin-bottom: 2rem;
-    color: var(--text-secondary);
-    font-size: 0.95rem;
-}
-
-.search-results {
-    margin-top: 2rem;
+    margin: 2rem 0;
+    color: #666;
 }
 
 .search-result {
-    background: var(--surface-color);
-    border-radius: var(--radius-lg);
-    padding: 1.5rem;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--border-color);
-    transition: all 0.2s ease;
-}
-
-.search-result:hover {
-    box-shadow: var(--shadow-md);
-    border-color: var(--primary-light);
+    margin: 2rem 0;
+    padding: 1rem;
+    border-left: 3px solid #111;
 }
 
 .result-reference {
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    font-size: 1.1rem;
     font-weight: 600;
-    color: var(--primary-light);
-    margin: 0 0 0.75rem;
-    text-decoration: none;
+    margin-bottom: 0.5rem;
 }
 
-.result-reference:hover {
-    color: var(--accent-color);
+.result-reference a {
+    text-decoration: none;
+    color: #111;
+}
+
+.result-reference a:hover {
     text-decoration: underline;
 }
 
 .result-text {
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    font-size: 1.1rem;
-    line-height: 1.7;
-    color: var(--text-primary);
-    margin: 0;
+    line-height: 1.6;
 }
 
 .result-text mark {
-    background: rgba(139, 92, 246, 0.3);
-    color: var(--text-primary);
+    background: #fffacd;
     padding: 0.1rem 0.2rem;
-    border-radius: 3px;
-    font-weight: 500;
-}
-
-.no-results {
-    text-align: center;
-    padding: 3rem 1rem;
-    color: var(--text-secondary);
-}
-
-.no-results-title {
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    font-size: 1.5rem;
-    margin: 0 0 1rem;
-    color: var(--text-primary);
-}
-
-.no-results-text {
-    font-size: 1rem;
-    line-height: 1.6;
-    margin: 0 0 1.5rem;
 }
 
 .search-tips {
-    background: var(--surface-color);
-    border-radius: var(--radius-lg);
-    padding: 2rem;
-    margin-top: 2rem;
-    border: 1px solid var(--border-color);
+    margin: 2rem 0;
+    padding: 1.5rem;
+    background: #f9f9f9;
+    border-left: 3px solid #111;
 }
 
 .search-tips h3 {
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    font-size: 1.3rem;
-    color: var(--text-primary);
-    margin: 0 0 1rem;
+    margin-top: 0;
 }
 
 .search-tips ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.search-tips li {
-    font-family: 'Crimson Text', 'Times New Roman', serif;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
-    padding-left: 1.5rem;
-    position: relative;
-}
-
-.search-tips li::before {
-    content: "•";
-    color: var(--primary-light);
-    position: absolute;
-    left: 0;
-}
-
-.direct-verse-result {
-    border-left: 4px solid var(--primary-color);
-    background: linear-gradient(135deg, rgba(75, 46, 131, 0.03), rgba(65, 105, 225, 0.03));
-}
-
-.direct-verse-result .result-reference {
-    color: var(--primary-color);
-    font-size: 1.2rem;
-}
-
-@media (max-width: 768px) {
-    .search-container {
-        padding: 1rem 0.5rem;
-    }
-    
-    .search-form {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    
-    .search-input {
-        font-size: 16px;
-        padding: 1.25rem 1rem 1.25rem 3rem;
-        border-radius: var(--radius-lg);
-        -webkit-appearance: none;
-        touch-action: manipulation;
-    }
-    
-    .search-button {
-        padding: 1.25rem 2rem;
-        font-size: 1.1rem;
-        min-height: 56px;
-        touch-action: manipulation;
-        border-radius: var(--radius-lg);
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
-    }
-    
-    .search-button:active {
-        transform: scale(0.98);
-        background: var(--primary-dark);
-    }
-    
-    .search-title {
-        font-size: 1.75rem;
-        line-height: 1.2;
-    }
-    
-    .search-subtitle {
-        font-size: 1rem;
-        line-height: 1.5;
-        margin-bottom: 1.5rem;
-    }
-    
-    .search-result {
-        padding: 1.25rem;
-        margin-bottom: 1rem;
-        border-radius: var(--radius-lg);
-        touch-action: manipulation;
-    }
-    
-    .search-result:active {
-        transform: scale(0.98);
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    }
-    
-    .result-reference {
-        font-size: 1.1rem;
-        margin-bottom: 0.75rem;
-        touch-action: manipulation;
-    }
-    
-    .result-text {
-        font-size: 1.1rem;
-        line-height: 1.7;
-    }
-    
-    .search-suggestions {
-        max-height: 250px;
-        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-    }
-    
-    .suggestion-item {
-        padding: 1rem 1rem;
-        min-height: 60px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        touch-action: manipulation;
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
-    }
-    
-    .suggestion-item:active {
-        background: var(--primary-light);
-        color: white;
-        transform: scale(0.98);
-    }
-    
-    .suggestion-reference {
-        font-size: 1rem;
-        margin-bottom: 0.25rem;
-    }
-    
-    .suggestion-preview {
-        font-size: 0.9rem;
-        line-height: 1.4;
-    }
-    
-    .search-tips {
-        padding: 1.5rem;
-        margin-top: 1.5rem;
-    }
-    
-    .search-tips h3 {
-        font-size: 1.2rem;
-        margin-bottom: 1rem;
-    }
-    
-    .search-tips li {
-        font-size: 1rem;
-        line-height: 1.6;
-        margin-bottom: 0.75rem;
-    }
-    
-    .no-results {
-        padding: 2rem 1rem;
-    }
-    
-    .no-results-title {
-        font-size: 1.3rem;
-        line-height: 1.3;
-    }
-    
-    .no-results-text {
-        font-size: 1rem;
-        line-height: 1.6;
-    }
-}
-
-/* Enhanced touch feedback for mobile */
-@media (max-width: 768px) and (pointer: coarse) {
-    .search-input:focus {
-        border-color: var(--primary-color);
-        box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
-    }
-    
-    .search-button:focus {
-        outline: 3px solid rgba(139, 92, 246, 0.3);
-        outline-offset: 2px;
-    }
-    
-    .suggestion-item.active,
-    .suggestion-item:hover {
-        background: var(--primary-light);
-        color: white;
-    }
-    
-    .result-reference:active {
-        color: var(--primary-dark);
-        text-decoration: underline;
-    }
+    line-height: 1.8;
 }
 </style>
 {% endblock %}
 
-{% block breadcrumb %}
-<div class="container">
-    <nav class="breadcrumb">
-        <a href="/">📚 All Books</a>
-        <span class="breadcrumb-separator">/</span>
-        <span>Search</span>
-    </nav>
-</div>
-{% endblock %}
-
 {% block content %}
-<div class="search-container">
-    <header class="search-header">
-        <h1 class="search-title">Search the KJV Bible</h1>
-        <p class="search-subtitle">
-            Search across all verses in the Authorized King James Version (1769)
-        </p>
-    </header>
+<h1>Search the KJV Bible</h1>
+<p class="subtitle">Search across all verses in the Authorized King James Version</p>
 
+<section>
     <form class="search-form" method="get" action="/search">
-        <div style="position: relative; flex: 1;">
-            <span class="search-icon">🔍</span>
-            <input 
-                type="text" 
-                name="q" 
-                value="{{ query }}" 
-                placeholder="Enter words or phrases to search..." 
-                class="search-input"
-                id="searchInput"
-                autofocus
-                autocomplete="off"
-            >
-        </div>
-        <div class="search-suggestions" id="searchSuggestions"></div>
+        <input
+            type="text"
+            name="q"
+            value="{{ query }}"
+            placeholder="Enter words or phrases to search..."
+            class="search-input"
+            autofocus
+        >
         <button type="submit" class="search-button">Search</button>
     </form>
 
     {% if query %}
         {% if total_results > 0 %}
-            {% if is_direct_verse %}
-            <div class="search-stats">
-                <span style="color: var(--primary-color); font-weight: 600;">📖 Found exact verse: </span><strong>{{ query }}</strong>
-            </div>
-            {% else %}
             <div class="search-stats">
                 Found <strong>{{ total_results }}</strong> result{{ 's' if total_results != 1 else '' }} for "<strong>{{ query }}</strong>"
             </div>
-            {% endif %}
 
-            <div class="search-results">
-                {% for result in results %}
-                <div class="search-result{% if is_direct_verse %} direct-verse-result{% endif %}">
-                    <a href="{{ result.url }}" class="result-reference">
-                        {% if is_direct_verse %}📖 {% endif %}{{ result.reference }}
-                    </a>
-                    <p class="result-text">{{ result.highlighted_text|safe }}</p>
-                    {% if is_direct_verse %}
-                    <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-light);">
-                        <a href="{{ result.url }}" style="
-                            display: inline-block;
-                            background: var(--primary-light);
-                            color: white;
-                            padding: 0.5rem 1rem;
-                            text-decoration: none;
-                            border-radius: var(--radius-sm);
-                            font-size: 0.9rem;
-                            transition: background-color 0.2s ease;
-                        " onmouseover="this.style.backgroundColor='var(--primary-color)'" 
-                           onmouseout="this.style.backgroundColor='var(--primary-light)'">
-                            Read {{ result.reference }} in Context →
-                        </a>
-                    </div>
-                    {% endif %}
+            {% for result in results %}
+            <article class="search-result">
+                <div class="result-reference">
+                    <a href="{{ result.url }}">{{ result.reference }}</a>
                 </div>
-                {% endfor %}
-            </div>
+                <div class="result-text">{{ result.highlighted_text|safe }}</div>
+            </article>
+            {% endfor %}
         {% else %}
-            <div class="no-results">
-                <h2 class="no-results-title">No results found</h2>
-                <p class="no-results-text">
-                    No verses were found for "<strong>{{ query }}</strong>". 
-                    Try different words or check your spelling.
-                </p>
+            <div class="search-stats">
+                <p><strong>No results found</strong> for "{{ query }}". Try different words or check your spelling.</p>
             </div>
         {% endif %}
     {% endif %}
@@ -511,172 +132,12 @@
         <h3>Search Tips</h3>
         <ul>
             <li>Search for words or phrases that appear in Bible verses</li>
-            <li>Enter specific verse references like "John 3:16", "1 John 4:8", or "Genesis 1:1"</li>
+            <li>Enter specific verse references like "John 3:16" or "Genesis 1:1"</li>
             <li>Use Roman numerals ("I John 4:8") or numbers ("1 John 4:8") for numbered books</li>
             <li>Use multiple words to find verses containing all terms</li>
-            <li>Try different word forms (e.g., "love" vs "loveth")</li>
-            <li>Search for names, places, or key themes</li>
-            <li>Use Old English spellings for better KJV results</li>
+            <li>Use Old English spellings for better KJV results (e.g., "loveth" instead of "loves")</li>
         </ul>
     </div>
     {% endif %}
-</div>
+</section>
 {% endblock %}
-
-{% block scripts %}
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-    const searchInput = document.getElementById('searchInput');
-    const searchSuggestions = document.getElementById('searchSuggestions');
-    const searchForm = document.querySelector('.search-form');
-    let currentSuggestionIndex = -1;
-    let suggestionItems = [];
-    let searchTimeout;
-
-    // Focus on search input if no query (but only on desktop to avoid mobile keyboard issues)
-    if (searchInput && !searchInput.value && window.innerWidth > 768) {
-        searchInput.focus();
-    }
-    
-    // Live search suggestions
-    searchInput.addEventListener('input', function() {
-        const query = this.value.trim();
-        
-        clearTimeout(searchTimeout);
-        
-        if (query.length < 2) {
-            hideSuggestions();
-            return;
-        }
-        
-        searchTimeout = setTimeout(() => {
-            fetchSuggestions(query);
-        }, 300);
-    });
-    
-    // Handle keyboard navigation
-    searchInput.addEventListener('keydown', function(e) {
-        if (suggestionItems.length === 0) return;
-        
-        switch(e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                currentSuggestionIndex = Math.min(currentSuggestionIndex + 1, suggestionItems.length - 1);
-                updateActiveSuggestion();
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                currentSuggestionIndex = Math.max(currentSuggestionIndex - 1, -1);
-                updateActiveSuggestion();
-                break;
-            case 'Enter':
-                if (currentSuggestionIndex >= 0) {
-                    e.preventDefault();
-                    selectSuggestion(suggestionItems[currentSuggestionIndex]);
-                }
-                break;
-            case 'Escape':
-                hideSuggestions();
-                // On mobile, also blur the input to hide keyboard
-                if (window.innerWidth <= 768) {
-                    searchInput.blur();
-                }
-                break;
-        }
-    });
-    
-    // Hide suggestions when clicking outside
-    document.addEventListener('click', function(e) {
-        if (!searchForm.contains(e.target)) {
-            hideSuggestions();
-        }
-    });
-    
-    // Form submission handling
-    searchForm.addEventListener('submit', function(e) {
-        const query = searchInput.value.trim();
-        if (query.length < 2) {
-            e.preventDefault();
-            alert('Please enter at least 2 characters to search.');
-            return false;
-        }
-        hideSuggestions();
-    });
-    
-    function fetchSuggestions(query) {
-        fetch(`/api/search?q=${encodeURIComponent(query)}&limit=5`)
-            .then(response => response.json())
-            .then(data => {
-                showSuggestions(data.results);
-            })
-            .catch(error => {
-                console.error('Search error:', error);
-                hideSuggestions();
-            });
-    }
-    
-    function showSuggestions(results) {
-        if (results.length === 0) {
-            hideSuggestions();
-            return;
-        }
-        
-        searchSuggestions.innerHTML = results.map(result => `
-            <div class="suggestion-item" data-url="${result.url}">
-                <div class="suggestion-reference">${result.reference}</div>
-                <div class="suggestion-preview">${result.highlighted_text}</div>
-            </div>
-        `).join('');
-        
-        suggestionItems = searchSuggestions.querySelectorAll('.suggestion-item');
-        
-        // Add click and touch handlers
-        suggestionItems.forEach(item => {
-            item.addEventListener('click', () => {
-                window.location.href = item.dataset.url;
-            });
-            
-            // Enhanced touch feedback for mobile
-            if (window.innerWidth <= 768) {
-                item.addEventListener('touchstart', function() {
-                    this.style.transform = 'scale(0.98)';
-                }, { passive: true });
-                
-                item.addEventListener('touchend', function() {
-                    this.style.transform = '';
-                }, { passive: true });
-                
-                item.addEventListener('touchcancel', function() {
-                    this.style.transform = '';
-                }, { passive: true });
-            }
-        });
-        
-        searchSuggestions.style.display = 'block';
-        currentSuggestionIndex = -1;
-    }
-    
-    function hideSuggestions() {
-        searchSuggestions.style.display = 'none';
-        suggestionItems = [];
-        currentSuggestionIndex = -1;
-    }
-    
-    function updateActiveSuggestion() {
-        suggestionItems.forEach((item, index) => {
-            item.classList.toggle('active', index === currentSuggestionIndex);
-        });
-        
-        if (currentSuggestionIndex >= 0) {
-            suggestionItems[currentSuggestionIndex].scrollIntoView({
-                block: 'nearest'
-            });
-        }
-    }
-    
-    function selectSuggestion(suggestionItem) {
-        window.location.href = suggestionItem.dataset.url;
-    }
-});
-</script>
-{% endblock %}
\ No newline at end of file