refactor(frontend): port search-zen-50 style to Go templates
Some checks failed
Build and Push Docker Image / build-and-push (push) Failing after 6s
Mirror to GitHub / mirror (push) Failing after 3s
Tests / test (push) Failing after 18s

Replace React SPA with simple Go templates using search-zen-50
visual style. No JavaScript required - pure HTML/CSS with clean
teal accent color scheme, monospace logo, and minimal design.

- Simplified base.html without HTMX or autocomplete JS
- Clean homepage with centered search box
- Results page with sticky header and category tabs
- Simplified CSS matching search-zen-50 aesthetics

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
ashisgreat22 2026-03-22 22:05:56 +01:00
parent 168cb78fab
commit 37420ae5a8
5 changed files with 291 additions and 1411 deletions

View file

@ -1,60 +1,25 @@
{{define "title"}}{{end}}
{{define "content"}}
<div class="search-hero">
<div class="hero-logo">
<div class="home-container">
<a href="/" class="home-logo">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
</div>
<p class="hero-tagline">Search the web privately, without tracking or censorship.</p>
<div class="search-box">
<form method="GET" action="/search" role="search" id="search-form">
<input type="text" name="q" id="q" placeholder="Search the web…" autocomplete="off" autofocus>
<button type="submit" class="search-box-submit" aria-label="Search">
<span class="home-logo-text">kafka</span>
</a>
<p class="home-tagline">Private meta-search, powered by open source.</p>
<form class="search-form" method="GET" action="/search" role="search">
<div class="search-box">
<input type="text" name="q" placeholder="Search the web…" autocomplete="off" autofocus>
<button type="submit" class="search-btn" aria-label="Search">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
</button>
</form>
</div>
<!-- Category Tiles -->
<div class="category-tiles">
<a href="/search" class="category-tile">
<span class="category-tile-icon">🌐</span>
<span>All</span>
</a>
<a href="/search?category=images" class="category-tile">
<span class="category-tile-icon">🖼️</span>
<span>Images</span>
</a>
<a href="/search?category=news" class="category-tile">
<span class="category-tile-icon">📰</span>
<span>News</span>
</a>
<a href="/search?category=videos" class="category-tile">
<span class="category-tile-icon">🎬</span>
<span>Videos</span>
</a>
<a href="/search?category=maps" class="category-tile">
<span class="category-tile-icon">🗺️</span>
<span>Maps</span>
</a>
<a href="/search?category=shopping" class="category-tile disabled" title="Coming soon">
<span class="category-tile-icon">🛒</span>
<span>Shopping</span>
</a>
<a href="/search?category=music" class="category-tile disabled" title="Coming soon">
<span class="category-tile-icon">🎵</span>
<span>Music</span>
</a>
<a href="/search?category=weather" class="category-tile disabled" title="Coming soon">
<span class="category-tile-icon">🌤️</span>
<span>Weather</span>
</a>
</div>
</div>
</form>
</div>
<div id="results"></div>
{{end}}
{{end}}