logos.php

<!DOCTYPE html>
<html>

<head>
    <title>Subscription Logos</title>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function () {
            const searchForm = document.getElementById("search-form");
            const imageResults = document.getElementById("image-results");

            searchForm.addEventListener("submit", function (e) {
                e.preventDefault();

                const searchTerm = document.getElementById("search").value.trim();
                if (searchTerm === "") {
                    alert("Please enter a search term.");
                    return;
                }

                // Use the proxy to perform a Google image search
                const proxyUrl = `endpoints/logos/search.php?search=${searchTerm}`;

                // Send an AJAX request to the proxy
                fetch(proxyUrl)
                    .then(response => response.json())
                    .then(data => {
                        if (data.imageUrls) {
                            // Display the image sources from the PHP response.
                            displayImageResults(data.imageUrls);
                        } else if (data.error) {
                            console.error(data.error);
                        }
                    })
                    .catch(error => {
                        console.error("Error fetching image results:", error);
                    });
            });

            function displayImageResults(imageSources) {
                // Clear previous results
                imageResults.innerHTML = "";

                // Display the image sources as image elements
                imageSources.forEach(src => {
                    const img = document.createElement("img");
                    img.src = src;
                    imageResults.appendChild(img);
                });
            }
        });
    </script>
</head>

<body>
    <form id="search-form">
        <input type="text" name="search" id="search">
        <input type="submit" value="Search">
    </form>
    <div id="image-results">
        <!-- Image results will be displayed here -->
    </div>
</body>

</html>