From 4de2652ffe0ee2a1ab77d57d48ac4a77167f4ffa Mon Sep 17 00:00:00 2001 From: x Date: Fri, 23 Jan 2026 19:44:17 +0100 Subject: [PATCH] adding cool search --- public/s/css/f0ck.css | 167 +++++++++++++++++++++++++------------ public/s/js/f0ck.js | 67 +++++++++++++++ views/snippets/navbar.html | 10 +++ 3 files changed, 189 insertions(+), 55 deletions(-) diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css index 49b4abb..6e38113 100644 --- a/public/s/css/f0ck.css +++ b/public/s/css/f0ck.css @@ -3054,70 +3054,127 @@ input#s_avatar { 50% { opacity: 1; } +} - /* Modern Tags Layout */ - .tags-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 20px; - padding: 20px 0; - } +/* Modern Tags Layout */ +.tags-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 20px; + padding: 20px 0; +} - .tag-card { - display: flex; - flex-direction: column; - background: var(--badge-bg, #171717); - border-radius: 12px; - overflow: hidden; - text-decoration: none !important; - transition: transform 0.2s, box-shadow 0.2s; - border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1)); - position: relative; - } +.tag-card { + display: flex; + flex-direction: column; + background: var(--badge-bg, #171717); + border-radius: 12px; + overflow: hidden; + text-decoration: none !important; + transition: transform 0.2s, box-shadow 0.2s; + border: 1px solid var(--nav-border-color, rgba(255, 255, 255, 0.1)); + position: relative; +} - .tag-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); - background: var(--dropdown-bg, #232323); - border-color: var(--accent, #9f0); - } +.tag-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); + background: var(--dropdown-bg, #232323); + border-color: var(--accent, #9f0); +} - .tag-card-image { - width: 100%; - height: 100px; - overflow: hidden; - position: relative; - background: #000; - } +.tag-card-image { + width: 100%; + height: 100px; + overflow: hidden; + position: relative; + background: #000; +} - .tag-card-image img { +.tag-card-image img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s; + opacity: 0.8; +} + +.tag-card:hover .tag-card-image img { + transform: scale(1.1); + opacity: 1; +} + +.tag-card-content { + padding: 15px; + display: flex; + flex-direction: column; + gap: 5px; +} + +.tag-name { + color: var(--white, #fff); + font-weight: bold; + font-size: 1.1em; + font-family: var(--font, monospace); +} + +.tag-count { + color: #888; + font-size: 0.9em; +} +/* Search Overlay */ +#search-overlay { + position: fixed; + top: 0; + left: 0; width: 100%; height: 100%; - object-fit: cover; - transition: transform 0.5s; - opacity: 0.8; - } + background-color: rgba(0, 0, 0, 0.9); + backdrop-filter: blur(5px); + z-index: 10000; + display: none; + align-items: center; + justify-content: center; + padding: 20px; + opacity: 0; + transition: opacity 0.2s ease-in-out; +} - .tag-card:hover .tag-card-image img { - transform: scale(1.1); +#search-overlay.visible { opacity: 1; - } +} - .tag-card-content { - padding: 15px; - display: flex; - flex-direction: column; - gap: 5px; - } +#search-input { + background: transparent; + border: none; + border-bottom: 2px solid var(--accent); + color: var(--white); + font-size: 3rem; + width: 100%; + max-width: 800px; + text-align: center; + outline: none; + font-family: var(--font); + padding: 10px; +} - .tag-name { - color: var(--white, #fff); - font-weight: bold; - font-size: 1.1em; - font-family: var(--font, monospace); - } +#search-input::placeholder { + color: #555; + text-transform: uppercase; +} - .tag-count { - color: #888; - font-size: 0.9em; - } \ No newline at end of file +#search-close { + position: absolute; + top: 20px; + right: 30px; + color: var(--white); + font-size: 2rem; + cursor: pointer; + font-family: sans-serif; + opacity: 0.7; + transition: opacity 0.2s; +} + +#search-close:hover { + opacity: 1; +} diff --git a/public/s/js/f0ck.js b/public/s/js/f0ck.js index 3e91a29..76ae416 100644 --- a/public/s/js/f0ck.js +++ b/public/s/js/f0ck.js @@ -745,6 +745,73 @@ window.requestAnimFrame = (function () { // + // + const initSearch = () => { + if (!document.getElementById('search-overlay')) { + const overlay = document.createElement('div'); + overlay.id = 'search-overlay'; + overlay.innerHTML = ` +
×
+ + `; + document.body.appendChild(overlay); + + const input = document.getElementById('search-input'); + const close = document.getElementById('search-close'); + const btns = document.querySelectorAll('#nav-search-btn, #nav-search-btn-guest'); + + const toggleSearch = (show) => { + if (show) { + overlay.style.display = 'flex'; + // Force reflow + overlay.offsetHeight; + overlay.classList.add('visible'); + input.focus(); + } else { + overlay.classList.remove('visible'); + setTimeout(() => { + overlay.style.display = 'none'; + }, 200); + } + }; + + btns.forEach(btn => btn.addEventListener('click', (e) => { + e.preventDefault(); + toggleSearch(true); + })); + + close.addEventListener('click', () => toggleSearch(false)); + + // Close on click outside (background) + overlay.addEventListener('click', (e) => { + if (e.target === overlay) toggleSearch(false); + }); + + // ESC to close + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape' && overlay.classList.contains('visible')) { + toggleSearch(false); + } + // "k" to open + if (e.key === 'k' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA' && !overlay.classList.contains('visible')) { + e.preventDefault(); + toggleSearch(true); + } + }); + + input.addEventListener('keydown', (e) => { + if (e.key === 'Enter') { + const val = input.value.trim(); + if (val) { + window.location.href = `/tag/${encodeURIComponent(val)}`; + } + } + }); + } + }; + initSearch(); + // + // })(); diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html index 69a4b4d..6e5ffc7 100644 --- a/views/snippets/navbar.html +++ b/views/snippets/navbar.html @@ -9,6 +9,11 @@ @if(!/^\/\d$/.test(url.pathname)) rand @endif + + + @@ -33,6 +38,11 @@ @if(!/^\/\d$/.test(url.pathname)) rand @endif + + +