Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DuckDuckGo Search</title> | |
| <style> | |
| /* Simple loading spinner */ | |
| .spinner { | |
| border: 4px solid rgba(0, 0, 0, 0.1); | |
| border-left-color: #000; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| animation: spin 1s linear infinite; | |
| display: none; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Result container styling */ | |
| .result-item { | |
| margin-bottom: 20px; | |
| } | |
| .result-item h3 { | |
| margin: 0; | |
| } | |
| .result-item img { | |
| width: 16px; | |
| height: 16px; | |
| vertical-align: middle; | |
| } | |
| </style> | |
| <script> | |
| async function performSearch() { | |
| const query = document.getElementById('search-query').value; | |
| const resultsContainer = document.getElementById('results'); | |
| const spinner = document.getElementById('spinner'); | |
| if (!query) { | |
| alert('Please enter a search query.'); | |
| return; | |
| } | |
| // Clear previous results | |
| resultsContainer.innerHTML = ''; | |
| spinner.style.display = 'inline-block'; // Show loading spinner | |
| try { | |
| // Perform search query | |
| const response = await fetch(`/search?query=${encodeURIComponent(query)}`); | |
| const results = await response.json(); | |
| if (results.error) { | |
| throw new Error(results.error); | |
| } | |
| // Hide loading spinner | |
| spinner.style.display = 'none'; | |
| // Display search results | |
| if (results.length > 0) { | |
| results.forEach(result => { | |
| const resultItem = document.createElement('div'); | |
| resultItem.classList.add('result-item'); | |
| resultItem.innerHTML = ` | |
| <h3><a href="${result.link}" target="_blank">${result.title}</a></h3> | |
| <p>${result.description}</p> | |
| <img src="${result.icon}" alt="Icon"> <a href="${result.link}" target="_blank">${result.link}</a> | |
| <hr> | |
| `; | |
| resultsContainer.appendChild(resultItem); | |
| }); | |
| } else { | |
| resultsContainer.innerHTML = '<p>No results found.</p>'; | |
| } | |
| } catch (error) { | |
| spinner.style.display = 'none'; | |
| resultsContainer.innerHTML = `<p>Error: ${error.message}</p>`; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1>DuckDuckGo Search</h1> | |
| <input type="text" id="search-query" placeholder="Enter search query" style="width: 300px;"> | |
| <button onclick="performSearch()">Search</button> | |
| <div id="spinner" class="spinner"></div> | |
| <div id="results"></div> | |
| </body> | |
| </html> | |