WittySearch Documentation

Visit The Projects Github

Jinja2 UI Templates

WittySearch uses standard Flask Jinja2 templating to render dynamic HTML based on the backend's search results.

Landing Page (index.html)

A minimalist design featuring the multi-colored WittySearch logo, an autofocusing search box, and standard "Search" / "I'm Feeling Lucky" buttons. The form sends a GET request to the /search endpoint.

Search Engine Results Page (results.html)

This is a complex, data-rich template. Key components include:

  • Top Bar: A compact version of the logo and a persistent search bar.
  • Pagination Controls: Forms that allow the user to change the results limit (10, 25, 50, 100) and navigate between pages.
  • Result Iteration: A Jinja {% for res in results %} loop that generates each SERP item. It checks boolean flags like res.is_video or res.is_html to determine whether to render media thumbnails or favicons.
  • Full Path Toggle: Inline JavaScript allows users to click a small arrow button (▼) to reveal the absolute system path of a file.

The Media Modal Viewer

At the bottom of results.html is a hidden div structure serving as a modal overlay. Custom JavaScript functions (openMediaModal and closeMediaModal) manipulate the DOM to dynamically load image sources or HTML5 video tags into the modal when a thumbnail is clicked, providing a theater-mode preview experience.