added a search bar for my searxng instance

This commit is contained in:
dvorakmortonxd 2026-05-15 10:21:34 +02:00
commit 63a3fa5de8
2 changed files with 45 additions and 0 deletions

View file

@ -833,6 +833,41 @@ body {
}
}
/* ============================================
SEARCH BAR
============================================ */
.search-section {
margin-top: 16px;
}
.search-form {
display: flex;
padding: 20px 24px;
}
.search-bar {
width: 100%;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.05); /* very transparent */
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border: 1px solid var(--tui-border);
color: var(--fg);
font-family: var(--font-custom-mono), monospace;
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
}
.search-bar:focus {
border-color: var(--red);
box-shadow: 0 0 10px rgba(74, 233, 52, 0.3);
}
.search-bar::placeholder {
color: var(--gray);
}
/* Joker Animation */
.joker-flash-overlay {
position: fixed;

View file

@ -258,6 +258,16 @@ export default function Home() {
</p>
</div>
{/* Search Panel */}
<div className="search-section">
<div className="tui-panel">
<span className="tui-panel-label" style={{ color: 'var(--red)' }}>├─ SEARXNG.C</span>
<form action="https://search.dvorakmortonxd.dev/search" method="GET" target="_blank" rel="noopener noreferrer" className="search-form">
<input type="text" name="q" placeholder="Search..." className="search-bar" />
</form>
</div>
</div>
{/* Social Links Panel */}
<div className="social-section">
<div className="tui-panel">