kjvstudy.org/kjvstudy_org/templates/stories_index.html

{% extends "base.html" %}

{% block title %}Bible Stories - KJV Study{% endblock %}
{% block description %}Explore {{ story_count }} Bible stories from Creation to the early Church, with both adult narratives and kid-friendly versions.{% endblock %}

{% block og_type %}website{% endblock %}
{% block og_title %}Bible Stories - KJV Study{% endblock %}
{% block og_description %}Explore {{ story_count }} Bible stories from Creation to the early Church, with both adult narratives and kid-friendly versions.{% endblock %}

{% block head %}
<style>
.story-toc {
    margin: 1.25rem 0 2rem;
}
.story-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.story-toc-item {
    display: block;
    padding: 0.7rem 0.95rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.story-toc-item:hover,
.story-toc-item:focus-visible {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft);
}
.story-toc-item.selected {
    border-color: var(--accent);
    outline: 2px solid var(--accent-soft);
    outline-offset: 2px;
    background: var(--accent-softer);
}
.story-toc-item strong {
    display: block;
    color: var(--text-strong);
}
.story-toc-count {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--bronze);
}
.story-search {
    max-width: 400px;
    margin: 1.5rem 0;
    position: relative;
}
.story-search input {
    width: 100%;
    padding: 0.65rem 0.9rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--border-color-darker);
    border-radius: 8px;
    background: var(--bg-elevated);
    color: var(--text-color);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.story-search input::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}
.story-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-soft);
}
.story-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color-dark);
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: var(--shadow-pop);
}
.story-search-dropdown.show {
    display: block;
}
.search-result-category {
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--bronze);
    background: var(--code-bg);
    border-bottom: 1px solid var(--border-color);
}
.search-result-item {
    display: block;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.15s;
}
.search-result-item:hover,
.search-result-item.selected {
    background: var(--accent-softer);
}
.search-result-item:last-child {
    border-bottom: none;
}
.search-result-title {
    font-weight: 500;
    font-size: 0.9rem;
}
.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.1rem;
}

/* Story cards grid */
.stories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.story-card {
    display: block;
    border: 1px solid var(--border-color-dark);
    border-radius: 8px;
    padding: 1.25rem 1.4rem;
    background: var(--bg-elevated);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.story-card:hover,
.story-card:focus-visible {
    box-shadow: var(--shadow-soft);
    border-color: var(--accent);
    transform: translateY(-2px);
}
.story-card.hidden {
    display: none;
}
.story-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-style: normal;
    line-height: 1.3;
    color: var(--text-strong) !important;
    transition: color 0.15s ease;
}
.story-card:hover h3 {
    color: var(--accent-strong) !important;
}
.story-card .description {
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}
.story-card .scripture {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bronze);
    margin-bottom: 0.75rem;
}
.story-card .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.story-card .tag {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    background: var(--code-bg);
    border: 1px solid var(--border-color-dark);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.story-card .tag.character {
    background: var(--accent-softer);
    color: var(--accent-strong);
}
.story-card .tag.theme {
    background: var(--gold-soft);
    color: var(--bronze);
}
.story-card .links {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
}
.story-card .links a {
    text-decoration: none;
}
.story-card .links .kids-link {
    color: var(--bronze);
}
.kids-version-link {
    color: var(--accent-strong) !important;
    font-weight: 600;
}

.category-section.hidden {
    display: none;
}
.story-toc li.hidden {
    display: none;
}
.category-section {
    margin-bottom: 3rem;
}

/* Section headings — small caps over a gold-tipped rule */
h3#categories,
.category-section h2 {
    position: relative;
    font-size: 0.95rem !important;
    font-weight: 600;
    font-style: normal !important;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary) !important;
    margin: 2rem 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

h3#categories::after,
.category-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 2.75rem;
    height: 1px;
    background: var(--gold);
}
.category-description {
    font-size: 1rem;
    color: var(--text-secondary, #555);
    margin-bottom: 1rem;
    max-width: 65ch;
}
.no-results {
    display: none;
    padding: 1.5rem;
    background: var(--code-bg);
    border-radius: 4px;
    color: var(--text-secondary);
    text-align: center;
}
.no-results.visible {
    display: block;
}

/* Large font mode for story cards (category-description in base.html) */
[data-font-size="large"] .story-card h3 {
    font-size: 1.5rem;
}
[data-font-size="large"] .story-card .description {
    font-size: 1.2rem;
    line-height: 1.6;
}
[data-font-size="large"] .story-card .scripture {
    font-size: 1.05rem;
}
[data-font-size="large"] .story-card .tag {
    font-size: 1rem;
    padding: 0.25rem 0.65rem;
}
[data-font-size="large"] .story-toc-item strong {
    font-size: 1.1rem;
}
[data-font-size="large"] .story-toc-count {
    font-size: 0.95rem;
}
</style>
{% endblock %}

{% block content %}
<h1>Bible Stories</h1>
<p class="subtitle">{{ story_count }} stories across {{ category_count }} categories</p>

<section>
    <p><span class="newthought">These Bible stories</span> bring Scripture to life through engaging narratives that remain faithful to God's Word. Each story includes both an adult version with theological depth and a kid-friendly version perfect for family devotions or Sunday school.</p>

    <p style="margin-top: 1rem;"><a href="/stories/kids" class="kids-version-link">View Kids Version</a> — Stories written for younger readers</p>

    <div class="story-search">
        <input type="text" id="story-search" placeholder="Search stories by name, character, or theme..." autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
        <div id="story-search-dropdown" class="story-search-dropdown"></div>
    </div>

    <h3 id="categories">Categories</h3>
    <nav class="story-toc" aria-label="Story categories">
        <ul>
        {% for category in categories %}
            <li data-category="{{ category.slug }}">
                <a class="story-toc-item" href="#{{ category.slug }}">
                    <strong>{{ category.category }}</strong>
                    <span class="story-toc-count">{{ category.stories|length }} stories</span>
                </a>
            </li>
        {% endfor %}
        </ul>
    </nav>
</section>

<div class="no-results" id="no-results">
    No stories found matching your search.
</div>

{% for category in categories %}
<section id="{{ category.slug }}" class="category-section">
    <h2>{{ category.category }}</h2>
    <p class="category-description">{{ category.description }}</p>

    <div class="stories-grid">
        {% for story in category.stories %}
        <a class="story-card" href="/stories/{{ story.slug }}" data-title="{{ story.title|lower }}" data-description="{{ story.description|lower }}" data-characters="{{ story.characters|join(' ')|lower }}" data-themes="{{ story.themes|join(' ')|lower }}">
            <h3>{{ story.title }}</h3>
            <p class="description">{{ story.description }}</p>
            <div class="scripture">
                {% for verse in story.verses[:2] %}{{ verse }}{% if not loop.last %}, {% endif %}{% endfor %}{% if story.verses|length > 2 %} +{{ story.verses|length - 2 }} more{% endif %}
            </div>
            <div class="meta">
                {% for character in story.characters[:3] %}
                <span class="tag character">{{ character }}</span>
                {% endfor %}
                {% for theme in story.themes[:2] %}
                <span class="tag theme">{{ theme }}</span>
                {% endfor %}
            </div>
        </a>
        {% endfor %}
    </div>
</section>
{% endfor %}

<nav>
    <p><a href="/">← Home</a></p>
</nav>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var searchInput = document.getElementById('story-search');
    var dropdown = document.getElementById('story-search-dropdown');
    var stories = document.querySelectorAll('.story-card');
    var categorySections = document.querySelectorAll('.category-section');
    var tocItems = document.querySelectorAll('.story-toc li');
    var noResults = document.getElementById('no-results');
    var currentResults = [];
    var selectedIndex = -1;

    function filterStories(query) {
        if (!query) {
            stories.forEach(function(s) { s.classList.remove('hidden'); });
            categorySections.forEach(function(c) { c.classList.remove('hidden'); });
            tocItems.forEach(function(t) { t.classList.remove('hidden'); });
            noResults.classList.remove('visible');
            return;
        }

        var matchCount = 0;
        stories.forEach(function(story) {
            var title = story.dataset.title || '';
            var description = story.dataset.description || '';
            var characters = story.dataset.characters || '';
            var themes = story.dataset.themes || '';

            var matches = title.includes(query) ||
                         description.includes(query) ||
                         characters.includes(query) ||
                         themes.includes(query);

            if (matches) {
                story.classList.remove('hidden');
                matchCount++;
            } else {
                story.classList.add('hidden');
            }
        });

        categorySections.forEach(function(category) {
            var categoryId = category.id;
            var visibleStories = category.querySelectorAll('.story-card:not(.hidden)');
            var isEmpty = visibleStories.length === 0;

            if (isEmpty) {
                category.classList.add('hidden');
            } else {
                category.classList.remove('hidden');
            }

            // Also hide/show corresponding TOC item
            tocItems.forEach(function(tocItem) {
                if (tocItem.dataset.category === categoryId) {
                    if (isEmpty) {
                        tocItem.classList.add('hidden');
                    } else {
                        tocItem.classList.remove('hidden');
                    }
                }
            });
        });

        if (matchCount === 0) {
            noResults.classList.add('visible');
        } else {
            noResults.classList.remove('visible');
        }
    }

    function getMatchingStories(query) {
        var matches = [];
        stories.forEach(function(story) {
            var title = story.dataset.title || '';
            var description = story.dataset.description || '';
            var characters = story.dataset.characters || '';
            var themes = story.dataset.themes || '';

            if (title.includes(query) || description.includes(query) ||
                characters.includes(query) || themes.includes(query)) {
                // The story card itself is the anchor tag
                var storyTitle = story.querySelector('h3');
                var storyDesc = story.querySelector('.description');
                if (storyTitle) {
                    matches.push({
                        title: storyTitle.textContent,
                        url: story.href,
                        description: storyDesc ? storyDesc.textContent.substring(0, 60) + '...' : ''
                    });
                }
            }
        });
        return matches.slice(0, 8);
    }

    function showDropdown(html) {
        dropdown.innerHTML = html;
        dropdown.classList.add('show');
    }

    function hideDropdown() {
        dropdown.classList.remove('show');
        currentResults = [];
        selectedIndex = -1;
    }

    function updateSelection() {
        var items = dropdown.querySelectorAll('.search-result-item');
        items.forEach(function(item, i) {
            if (i === selectedIndex) {
                item.classList.add('selected');
            } else {
                item.classList.remove('selected');
            }
        });
    }

    function renderDropdown(query) {
        var html = '';
        currentResults = [];

        // Matching stories on this page
        var matchingStories = getMatchingStories(query.toLowerCase());
        if (matchingStories.length > 0) {
            html += '<div class="search-result-category">Stories</div>';
            matchingStories.forEach(function(story) {
                currentResults.push(story.url);
                var isSelected = currentResults.length === 1;
                html += '<a href="' + story.url + '" class="search-result-item' + (isSelected ? ' selected' : '') + '">';
                html += '<div class="search-result-title">' + story.title + '</div>';
                if (story.description) {
                    html += '<div class="search-result-subtitle">' + story.description + '</div>';
                }
                html += '</a>';
            });
        }

        if (html) {
            selectedIndex = currentResults.length > 0 ? 0 : -1;
            showDropdown(html);
        } else {
            hideDropdown();
        }
    }

    searchInput.addEventListener('input', function() {
        var query = this.value.trim();

        // Filter stories on page
        filterStories(query.toLowerCase());

        if (query.length < 2) {
            hideDropdown();
            return;
        }

        // Show matching stories in dropdown
        renderDropdown(query);
    });

    searchInput.addEventListener('keydown', function(e) {
        if (!dropdown.classList.contains('show')) return;

        if (e.key === 'ArrowDown') {
            e.preventDefault();
            selectedIndex = Math.min(selectedIndex + 1, currentResults.length - 1);
            updateSelection();
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            selectedIndex = Math.max(selectedIndex - 1, -1);
            updateSelection();
        } else if (e.key === 'Enter' && selectedIndex >= 0 && currentResults[selectedIndex]) {
            e.preventDefault();
            window.location.href = currentResults[selectedIndex];
        } else if (e.key === 'Escape') {
            hideDropdown();
        }
    });

    // Click outside to close dropdown
    document.addEventListener('click', function(e) {
        if (!dropdown.contains(e.target) && e.target !== searchInput) {
            hideDropdown();
        }
    });

    // Keyboard navigation for categories and story cards
    var categoryItems = Array.from(document.querySelectorAll('.story-toc-item'));
    var visibleStories = function() {
        return Array.from(document.querySelectorAll('.story-card:not(.hidden)'));
    };

    // Track which section we're in: 'categories' or 'stories'
    var currentSection = 'stories';
    var selectedCatIndex = -1;
    var selectedCardIndex = -1;

    function getCatGridColumns() {
        var toc = document.querySelector('.story-toc ul');
        if (!toc) return 1;
        var style = getComputedStyle(toc);
        var cols = style.gridTemplateColumns.split(' ').length;
        return cols || 1;
    }

    function getCardGridColumns() {
        var grid = document.querySelector('.stories-grid');
        if (!grid) return 1;
        var style = getComputedStyle(grid);
        var cols = style.gridTemplateColumns.split(' ').length;
        return cols || 1;
    }

    function clearAllSelections() {
        categoryItems.forEach(function(c) { c.classList.remove('selected'); });
        visibleStories().forEach(function(c) {
            c.style.outline = '';
            c.style.outlineOffset = '';
        });
    }

    function selectCategory(index) {
        clearAllSelections();
        currentSection = 'categories';
        selectedCardIndex = -1;
        selectedCatIndex = Math.max(0, Math.min(index, categoryItems.length - 1));
        categoryItems[selectedCatIndex].classList.add('selected');
        categoryItems[selectedCatIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
    }

    function selectStoryCard(index) {
        var cards = visibleStories();
        if (cards.length === 0) return;

        clearAllSelections();
        currentSection = 'stories';
        selectedCatIndex = -1;
        selectedCardIndex = Math.max(0, Math.min(index, cards.length - 1));
        cards[selectedCardIndex].style.outline = '2px solid var(--accent)';
        cards[selectedCardIndex].style.outlineOffset = '4px';
        cards[selectedCardIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
    }

    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

        var cards = visibleStories();
        var catCols = getCatGridColumns();
        var cardCols = getCardGridColumns();

        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            if (currentSection === 'categories') {
                // Move down within categories or transition to stories
                if (selectedCatIndex + catCols >= categoryItems.length) {
                    // Transition to story cards
                    selectStoryCard(0);
                } else {
                    selectCategory(selectedCatIndex + catCols);
                }
            } else {
                // In stories section
                if (selectedCardIndex < 0) selectStoryCard(0);
                else selectStoryCard(selectedCardIndex + cardCols);
            }
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            if (currentSection === 'stories') {
                if (selectedCardIndex < 0) {
                    selectStoryCard(0);
                } else if (selectedCardIndex - cardCols < 0) {
                    // Transition to categories (last row)
                    var lastRowStart = Math.floor((categoryItems.length - 1) / catCols) * catCols;
                    selectCategory(Math.min(lastRowStart + (selectedCardIndex % cardCols), categoryItems.length - 1));
                } else {
                    selectStoryCard(selectedCardIndex - cardCols);
                }
            } else {
                // In categories
                if (selectedCatIndex - catCols >= 0) {
                    selectCategory(selectedCatIndex - catCols);
                }
            }
        } else if (e.key === 'ArrowRight' || e.key === 'l') {
            e.preventDefault();
            if (currentSection === 'categories') {
                if (selectedCatIndex < categoryItems.length - 1) {
                    selectCategory(selectedCatIndex + 1);
                }
            } else {
                if (selectedCardIndex < 0) selectStoryCard(0);
                else selectStoryCard(selectedCardIndex + 1);
            }
        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
            e.preventDefault();
            if (currentSection === 'categories') {
                if (selectedCatIndex > 0) {
                    selectCategory(selectedCatIndex - 1);
                } else {
                    history.back();
                }
            } else {
                if (selectedCardIndex <= 0) history.back();
                else selectStoryCard(selectedCardIndex - 1);
            }
        } else if (e.key === 'Enter') {
            e.preventDefault();
            if (currentSection === 'categories' && selectedCatIndex >= 0) {
                // Get the target section from the category link
                var targetId = categoryItems[selectedCatIndex].getAttribute('href').substring(1);
                var targetSection = document.getElementById(targetId);
                if (targetSection) {
                    // Find the first story card in this section
                    var firstCard = targetSection.querySelector('.story-card:not(.hidden)');
                    if (firstCard) {
                        var allCards = visibleStories();
                        var cardIndex = allCards.indexOf(firstCard);
                        if (cardIndex >= 0) {
                            selectStoryCard(cardIndex);
                        }
                    }
                }
            } else if (currentSection === 'stories' && selectedCardIndex >= 0 && cards[selectedCardIndex]) {
                window.location.href = cards[selectedCardIndex].href;
            }
        } else if (e.key === 'Escape') {
            e.preventDefault();
            clearAllSelections();
            currentSection = 'stories';
            selectedCatIndex = -1;
            selectedCardIndex = -1;
        }
    });
});
</script>
{% endblock %}