HTML Template for the Search Interface templates/search.html

templates/search.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TheBrain API Search</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .search-container {
            max-width: 600px;
            margin: 50px auto;
        }
        input[type="text"] {
            width: calc(100% - 100px);
            padding: 10px;
            font-size: 16px;
        }
        button {
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        .results {
            margin-top: 20px;
        }
    </style>

</head>

<body>

    <div class="search-container">
        <h1>TheBrain API Search</h1>
        <form id="searchForm">
            <input type="text" id="keyword" placeholder="Enter search keyword">
            <button type="button" onclick="performSearch()">Search</button>
        </form>
        <div class="results" id="results"></div>
    </div>

    <script>
        function performSearch() {
            const keyword = document.getElementById("keyword").value;
            if (!keyword) {
                alert("Please enter a keyword to search.");
                return;
            }

            fetch(`/search?keyword=${keyword}`)
                .then(response => response.json())
                .then(data => {
                    const resultsDiv = document.getElementById("results");
                    resultsDiv.innerHTML = "";  // Clear previous results

                    if (data.error) {
                        resultsDiv.innerHTML = `<p style="color: red;">Error: ${data.error}</p>`;
                        return;
                    }

                    if (data.length === 0) {
                        resultsDiv.innerHTML = "<p>No results found.</p>";
                        return;
                    }

                    let html = "<ul>";
                    data.forEach(item => {
                        html += `<li><strong>${item.name}</strong>: ${item.description || "No description"}</li>`;
                    });
                    html += "</ul>";
                    resultsDiv.innerHTML = html;
                })
                .catch(error => {
                    console.error("Error fetching search results:", error);
                    document.getElementById("results").innerHTML = "<p style='color: red;'>An error occurred while fetching the results.</p>";
                });
        }
    </script>

</body>

</html>