kjv_api/kjv_fe.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic Search - KJV API</title>
    <link rel="stylesheet" href="/styles/page.css?v=__V__">
    <style>
        .search-row { display: flex; gap: var(--space-sm); }
        .search-row input[type=text] { margin: 0; flex: 1; min-width: 0; }
        #results, #last-searched { list-style: none; padding: 0; margin: var(--space-md) 0; }
        #results li {
            background-color: var(--color-bg-secondary);
            border: 1px solid var(--color-border);
            border-left: 3px solid var(--color-accent-primary);
            border-radius: var(--border-radius-sm);
            padding: var(--space-md);
            margin-bottom: var(--space-sm);
        }
        #last-searched li { padding: 0.2rem 0; color: var(--color-text-secondary); }
        @media (max-width: 480px) { .search-row { flex-direction: column; } .search-row button { width: 100%; } }
    </style>
</head>
<body>
    <header>
        <a href="/">Home</a> <a href="/find">Quick Search</a>
        <a href="/random?view=rich">Random Verse</a> <a href="/votd?view=rich">Verse of the Day</a>
    </header>
    <h2>Bible Semantic Search</h2>
    <p>This is NOT a keyword search. This means searching single words will not have the results you expect. For that, use the normal keyword search at <a href='/'>bible.nicecrew.digital</a></p>
    <p>Use a sentence like "The Lord will kill his enemies without mercy" - you are supposed to search an idea, not individual words.</p>
    <h3>Recent searches</h3>
    <ul id="last-searched"></ul>
    <div class="search-row">
        <input type="text" id="search-box" aria-label="Search an idea" enterkeyhint="search" placeholder="The lord god is a man of war, just in all his dealings">
        <button id="search-button">Search</button>
    </div>
    <ul id="results"></ul>

    <script>
        const searchButton = document.getElementById('search-button');
        const searchBox = document.getElementById('search-box');
        const esc = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
        const resultsList = document.getElementById('results');
	const lastSearched = document.getElementById('last-searched');

        window.addEventListener('DOMContentLoaded', async () => {
            const lastSearchedURL = `https://bible.nicecrew.digital/natural`;
            const data = {
                token: 'testing',
                query: '__last_searched__'
            };
            const response = await fetch(lastSearchedURL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });
            if (response.ok) {
                const results = await response.json();
                lastSearched.innerHTML = ''; // Clear previous results

                results.forEach(result => {
                    const listItem = document.createElement('li');
                    listItem.innerHTML = `
                        ${esc(result.query)}<br>
                    `;
                    lastSearched.appendChild(listItem);
                });
            } else {
                console.error('Error fetching data:', response.statusText);
            }
        });

        searchButton.addEventListener('click', async () => {
            const query = searchBox.value;
	    if (query.length >= 100){
		alert("Query too long");
		return;}
            const url = `https://bible.nicecrew.digital/natural`; // Replace with your actual URL

            const data = {
                token: 'testing',
                query: query
            };

            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            if (response.ok) {
                const results = await response.json();
                resultsList.innerHTML = ''; // Clear previous results

                results.forEach(result => {
                    const listItem = document.createElement('li');
		    const uriRef = encodeURIComponent(result.ref);
                    listItem.innerHTML = `
                        <strong>Verse ID:</strong> ${esc(result.verse_id)}<br>
                        <strong>Text:</strong> ${esc(result.text)}<br>
                        <strong>Ref:</strong> <a href="/find?kw=${uriRef}">${esc(result.ref)}</a><br>
                        <strong>Score:</strong> ${esc(result.score)}
                    `;
                    resultsList.appendChild(listItem);
                });
            } else {
                console.error('Error fetching data:', response.statusText);
                alert('An error occurred while searching. Please try again later.');
            }
        });
    </script>
</body>
</html>