feat(ui): dark theme redesign, fix image search and defaults

- Inline CSS in base.html (Inter, dark mode, sticky search, tabs, results)
- Remove HTMX/JS from templates; pagination via GET links
- Atmospheric side gradients + grid; wider column on large viewports
- Parse ?category= for HTML tabs (fixes Images category routing)
- Include bing_images, ddg_images, qwant_images in local_ported defaults
- Default listen port 5355; update Docker, compose, flake, README
- Favicon img uses /favicon/ proxy; preferences without inline JS

Made-with: Cursor
This commit is contained in:
ashisgreat22 2026-03-23 22:49:41 +01:00
parent bdc3dae4f5
commit 518215f62e
16 changed files with 1107 additions and 106 deletions

View file

@ -1,6 +1,6 @@
{{define "results_inner"}}
{{if .Corrections}}
<div id="corrections" class="correction" hx-swap-oob="true">{{range .Corrections}}{{.}} {{end}}</div>
<div id="corrections" class="correction">{{range .Corrections}}{{.}} {{end}}</div>
{{end}}
{{if or .Answers .Infoboxes}}
@ -11,13 +11,13 @@
</div>
{{end}}
<div class="results-meta" id="results-meta" hx-swap-oob="true">
<div class="results-meta" id="results-meta">
{{if .NumberOfResults}}
<span>{{.NumberOfResults}} results</span>
{{end}}
</div>
<div id="urls" role="main" hx-select="#urls" hx-swap="innerHTML" hx-target="#urls">
<div id="urls" role="main">
{{if .Results}}
{{if .IsImageSearch}}
<div class="image-grid">
@ -40,7 +40,7 @@
{{end}}
{{else if not .Answers}}
<div class="no-results">
<div class="no-results-icon">🔍</div>
<div class="no-results-icon" aria-hidden="true">🔍</div>
<h2>No results found</h2>
<p>Try different keywords or check your spelling.</p>
</div>
@ -48,42 +48,26 @@
</div>
{{if .Pageno}}
<nav class="pagination" role="navigation">
<nav class="pagination" role="navigation" aria-label="Pagination">
{{if gt .Pageno 1}}
<button type="button" class="paginate-btn" data-q="{{.Query}}" data-page="{{.PrevPage}}">← Prev</button>
<a class="pag-link" href="/search?q={{.Query | urlquery}}&amp;pageno={{.PrevPage}}{{if and .ActiveCategory (ne .ActiveCategory "all")}}&amp;category={{.ActiveCategory | urlquery}}{{end}}">← Prev</a>
{{end}}
{{range .PageNumbers}}
{{if .IsCurrent}}
<span class="page-current">{{.Num}}</span>
<span class="page-current" aria-current="page">{{.Num}}</span>
{{else}}
<button type="button" class="paginate-btn" data-q="{{$.Query}}" data-page="{{.Num}}">{{.Num}}</button>
<a class="pag-link" href="/search?q={{$.Query | urlquery}}&amp;pageno={{.Num}}{{if and $.ActiveCategory (ne $.ActiveCategory "all")}}&amp;category={{$.ActiveCategory | urlquery}}{{end}}">{{.Num}}</a>
{{end}}
{{end}}
{{if .HasNext}}
<button type="button" class="paginate-btn" data-q="{{.Query}}" data-page="{{.NextPage}}">Next →</button>
<a class="pag-link" href="/search?q={{.Query | urlquery}}&amp;pageno={{.NextPage}}{{if and .ActiveCategory (ne .ActiveCategory "all")}}&amp;category={{.ActiveCategory | urlquery}}{{end}}">Next →</a>
{{end}}
</nav>
{{end}}
<div class="back-to-top" id="backToTop">
<a href="#">↑ Back to top</a>
<div class="back-to-top">
<a href="#top">↑ Back to top</a>
</div>
<div class="htmx-indicator">Searching…</div>
<script>
(function() {
document.body.addEventListener('click', function(e) {
var btn = e.target.closest('.paginate-btn');
if (!btn) return;
var q = btn.getAttribute('data-q');
var page = btn.getAttribute('data-page');
if (!q || !page) return;
var url = '/search?q=' + encodeURIComponent(q) + '&pageno=' + encodeURIComponent(page);
htmx.ajax(url, {target: '#urls', swap: 'innerHTML', select: '#urls'});
});
})();
</script>
{{end}}