kjvstudy.org/kjvstudy_org/templates/topics.html

{% extends "base.html" %}

{% block title %}Topical Index - KJV Study{% endblock %}
{% block description %}Find Bible verses by theme and theological topic{% endblock %}

{% block head %}
<style>
.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    max-width: 90%;
    margin: 2rem 0;
}

.topic-card {
    display: block;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--text-color);
}

.topic-card:hover {
    border-color: var(--border-color-darker);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    cursor: pointer;
}

.topic-name {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--link-color);
}

.topic-card:hover .topic-name {
    color: var(--link-hover);
}

.topic-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0.5rem 0;
}

.topic-subtopics {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    font-style: italic;
    margin-top: 0.75rem;
}

.intro-text {
    max-width: 60%;
    font-size: 1.2rem;
    line-height: 1.9;
    margin: 1rem 0;
}
</style>
{% endblock %}

{% block content %}
<h1>Topical Index</h1>
<p class="subtitle">Find Verses by Theme and Subject</p>

<div>
    <p class="intro-text"><span class="newthought">Systematic topical study</span> enables thematic exploration of Scripture across both testaments. This concordance organizes key theological and practical themes, providing structured access to related passages that illuminate each subject from multiple biblical perspectives.</p>

    <p class="intro-text">Select a topic below to explore its subtopics and discover the verses that address each theme. Each reference includes contextual notes to aid understanding of its relevance to the broader subject.</p>
</div>

<div>
    <h2>Major Topics</h2>

    <div class="topic-grid">
        {% for topic_name, topic_data in topics.items() %}
        <a href="/topics/{{ topic_name }}" class="topic-card">
            <div class="topic-name">{{ topic_name }}</div>
            <div class="topic-description">{{ topic_data.description }}</div>
            <div class="topic-subtopics">{{ topic_data.subtopics|length }} subtopics</div>
        </a>
        {% endfor %}
    </div>
</div>

<div>
    <h2>Using the Topical Index</h2>
    <p class="intro-text">Each major topic contains multiple subtopics with carefully selected verses. The references provided represent foundational passages for each theme, though they are not exhaustive. Consider these as entry points for deeper study, using cross-references and concordances to expand your exploration.</p>

    <p class="intro-text">Topical study complements sequential Bible reading by allowing focused examination of specific doctrines or practical matters. Compare passages across different books and testaments to grasp the full biblical teaching on any subject.</p>
</div>

<script>
(function() {
    const cards = Array.from(document.querySelectorAll('.topic-card'));
    if (cards.length === 0) return;

    let selectedIndex = -1;

    function getGridColumns() {
        if (window.innerWidth <= 768) return 1;
        const grid = document.querySelector('.topic-grid');
        if (!grid) return 1;
        const style = getComputedStyle(grid);
        const cols = style.gridTemplateColumns.split(' ').length;
        return cols || 1;
    }

    function selectCard(index) {
        if (selectedIndex >= 0 && selectedIndex < cards.length) {
            cards[selectedIndex].style.outline = '';
            cards[selectedIndex].style.outlineOffset = '';
            cards[selectedIndex].classList.remove('selected');
        }
        selectedIndex = Math.max(0, Math.min(index, cards.length - 1));
        cards[selectedIndex].style.outline = '2px solid #4a7c59';
        cards[selectedIndex].style.outlineOffset = '2px';
        cards[selectedIndex].classList.add('selected');
        cards[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
    }

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

        const cols = getGridColumns();
        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            selectCard(selectedIndex < 0 ? 0 : selectedIndex + cols);
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            if (selectedIndex < 0) selectCard(0);
            else if (selectedIndex - cols >= 0) selectCard(selectedIndex - cols);
        } else if (e.key === 'ArrowRight' || e.key === 'l') {
            e.preventDefault();
            selectCard(selectedIndex < 0 ? 0 : selectedIndex + 1);
        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
            e.preventDefault();
            if (selectedIndex <= 0) history.back();
            else selectCard(selectedIndex - 1);
        } else if (e.key === 'Enter' && selectedIndex >= 0) {
            e.preventDefault();
            window.location.href = cards[selectedIndex].href;
        } else if (e.key === 'Escape') {
            e.preventDefault();
            if (selectedIndex >= 0 && selectedIndex < cards.length) {
                cards[selectedIndex].style.outline = '';
                cards[selectedIndex].style.outlineOffset = '';
                cards[selectedIndex].classList.remove('selected');
            }
            selectedIndex = -1;
        }
    });
})();
</script>
{% endblock %}