Spaces:

broadfield-dev
/

bible-app

Paused

App Files Files Community

broadfield-dev commited on Sep 14, 2025

Commit

5be321a

verified ·

1 Parent(s): 2e63d3b

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +23 -110

templates/index.html CHANGED Viewed

@@ -1,125 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Bible Search App</title>
     <style>
         body { font-family: sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; }
         .container { max-width: 800px; margin: auto; background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
-        .admin-section { background-color: #f8f9fa; padding: 1.5em; border-radius: 5px; border: 1px solid #e1e1e8; }
-        #build-status { margin-top: 1em; padding: 1em; border-radius: 4px; display: none; }
-        #build-status.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
-        #build-status.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
-        #build-status.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
-        /* Other styles remain the same */
-        h1, h2, h3 { color: #4a4a4a; }
-        input[type="text"] { width: 70%; padding: 0.8em; border: 1px solid #ccc; border-radius: 4px; }
-        input[type="submit"] { padding: 0.8em 1.5em; border: none; background-color: #5c67f2; color: white; border-radius: 4px; cursor: pointer; }
-        input[type="submit"]:hover { background-color: #4a54e1; }
-        .result { border: 1px solid #e1e1e8; padding: 1em; margin-bottom: 1em; border-radius: 5px; background: #fdfdff; }
-        .reference { font-weight: bold; color: #5c67f2; }
-        hr { border: none; border-top: 1px solid #e1e1e8; margin: 2em 0; }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Bible Search</h1>
-        <form action="/search" method="post">
-            <input type="text" name="query" size="50" value="{{ query or '' }}" placeholder="e.g., love is patient, love is kind">
-            <input type="submit" value="Search">
-        </form>
-        <hr>
-        <div class="admin-section">
-            <h3>Admin Panel</h3>
-            <form id="build-form">
-                <p>Build the vector database from the JSON files and upload it for persistence. <strong>Requires a write-permission HF_TOKEN secret.</strong></p>
-                <input type="submit" id="build-button" value="Build and Push Database to Hub">
-            </form>
-            <div id="build-status"></div>
         </div>
-        {% if query %}
-            <h2>Results for: "{{ query }}"</h2>
-        {% endif %}
-        {% if results %}
-            {% for result in results %}
-                <div class="result">
-                    <p class="reference">{{ result.reference }} ({{result.version}})</p>
-                    <p>{{ result.text }}</p>
-                    <small>Score (Distance): {{ "%.4f"|format(result.score) }}</small>
-                </div>
-            {% endfor %}
-        {% endif %}
     </div>
-    <script>
-        const buildForm = document.getElementById('build-form');
-        const buildButton = document.getElementById('build-button');
-        const statusDiv = document.getElementById('build-status');
-        let statusInterval;
-        function updateStatusDisplay(status, message) {
-            statusDiv.style.display = 'block';
-            statusDiv.textContent = message;
-            statusDiv.className = ''; // Reset classes
-            if (status.startsWith('IN_PROGRESS')) {
-                statusDiv.classList.add('info');
-                buildButton.disabled = true;
-                buildButton.value = 'Building...';
-            } else if (status === 'SUCCESS') {
-                statusDiv.classList.add('success');
-                buildButton.disabled = false;
-                buildButton.value = 'Build and Push Database to Hub';
-                clearInterval(statusInterval);
-                 // Prompt user to refresh to load the new data
-                if(confirm("Build successful! Refresh the page to start searching?")) {
-                    window.location.reload();
-                }
-            } else if (status === 'FAILED') {
-                statusDiv.classList.add('error');
-                buildButton.disabled = false;
-                buildButton.value = 'Try Build Again';
-                clearInterval(statusInterval);
-            } else { // NOT_STARTED
-                statusDiv.style.display = 'none';
-                buildButton.disabled = false;
-            }
-        }
-        async function checkStatus() {
-            try {
-                const response = await fetch('/status');
-                const data = await response.json();
-                updateStatusDisplay(data.status, data.message);
-            } catch (error) {
-                console.error('Error fetching status:', error);
-                updateStatusDisplay('FAILED', 'Could not connect to server to get status.');
-            }
-        }
-        buildForm.addEventListener('submit', async function(event) {
-            event.preventDefault();
-            if (!confirm('This will start the build process. It can take a long time. Are you sure?')) {
-                return;
-            }
-            buildButton.disabled = true;
-            updateStatusDisplay('IN_PROGRESS', 'Initiating build process...');
-            try {
-                await fetch('/build-rag', { method: 'POST' });
-                // Start polling for status updates every 5 seconds
-                statusInterval = setInterval(checkStatus, 5000);
-            } catch (error) {
-                updateStatusDisplay('FAILED', 'Failed to send build request to the server.');
-            }
-        });
-        // Check status on page load
-        document.addEventListener('DOMContentLoaded', checkStatus);
-    </script>
 </body>
 </html>

+<!-- templates/book.html -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <title>The Book of {{ book_name }} - Bible App</title>
     <style>
         body { font-family: sans-serif; margin: 2em; background-color: #f4f4f9; color: #333; }
         .container { max-width: 800px; margin: auto; background: #fff; padding: 2em; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+        h1, h2 { color: #4a4a4a; }
+        p { line-height: 1.6; }
+        .verse-num { font-weight: bold; color: #5c67f2; vertical-align: super; font-size: 0.8em; margin-left: 4px; }
+        .nav-links { margin-bottom: 2em; font-size: 1.1em; }
+        a { color: #5c67f2; text-decoration: none; }
+        a:hover { text-decoration: underline; }
+        .chapter-heading { margin-top: 2em; border-bottom: 1px solid #e1e1e8; padding-bottom: 0.5em;}
     </style>
 </head>
 <body>
     <div class="container">
+        <div class="nav-links">
+            <a href="/">← Back to Search</a>
         </div>
+        <h1>The Book of {{ book_name }}</h1>
+        <hr>
+        {% for chapter_num in chapters.keys()|sort %}
+            <h2 class="chapter-heading">Chapter {{ chapter_num }}</h2>
+            <p>
+                {% for verse in chapters[chapter_num] %}
+                    <span class="verse-num">{{ verse.verse }}</span> {{ verse.text }}
+                {% endfor %}
+            </p>
+        {% endfor %}
     </div>
 </body>
 </html>