From 9a03d5f6972a8d2e6dea871734f32517d9dda36a Mon Sep 17 00:00:00 2001 From: x Date: Fri, 23 Jan 2026 16:53:19 +0100 Subject: [PATCH] adding generic tag cards --- public/s/css/f0ck.css | 67 ++++++++++++++++++++++++++++++++++++ src/inc/routes/tag_image.mjs | 41 ++++++++++++++++++++++ views/snippets/navbar.html | 6 ++-- views/tags.html | 30 +++++++++------- 4 files changed, 128 insertions(+), 16 deletions(-) create mode 100644 src/inc/routes/tag_image.mjs diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css index 0cc97d5..50f2b4e 100644 --- a/public/s/css/f0ck.css +++ b/public/s/css/f0ck.css @@ -3011,4 +3011,71 @@ input#s_avatar { .upload { padding: 10px; +} + +/* 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: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 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; } \ No newline at end of file diff --git a/src/inc/routes/tag_image.mjs b/src/inc/routes/tag_image.mjs new file mode 100644 index 0000000..3223079 --- /dev/null +++ b/src/inc/routes/tag_image.mjs @@ -0,0 +1,41 @@ +import crypto from 'crypto'; + +export default (router, tpl) => { + router.get(/^\/tag_image\/(?.+)$/, async (req, res) => { + const tag = req.params.tag; + + // Create a deterministic hash from the tag + const hash = crypto.createHash('md5').update(tag).digest('hex'); + + // Generate colors from hash + const c1 = '#' + hash.substring(0, 6); + const c2 = '#' + hash.substring(6, 12); + const c3 = '#' + hash.substring(12, 18); + + // Generate some deterministic numbers for shapes + const n1 = parseInt(hash.substring(18, 20), 16); + const n2 = parseInt(hash.substring(20, 22), 16); + + const svg = ` + + + + + + + + + + + ${tag} + + `.trim(); + + res.writeHead(200, { + 'Content-Type': 'image/svg+xml', + 'Cache-Control': 'public, max-age=86400' + }); + res.end(svg); + }); + return router; +}; diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html index 710db54..69a4b4d 100644 --- a/views/snippets/navbar.html +++ b/views/snippets/navbar.html @@ -2,7 +2,6 @@