From 97519de05b3267bb1731f7e9ada58a3b2c76b432 Mon Sep 17 00:00:00 2001 From: Flummi Date: Sat, 17 Apr 2021 19:55:25 +0200 Subject: [PATCH] themes im backend etzala --- public/s/css/f0ck.css | 36 +++++++++++++++++++++--------------- public/s/js/theme.js | 23 ++++++++++++++++++++--- src/inc/routes/index.mjs | 12 +++++++++--- src/websrv.mjs | 8 ++++++++ views/about.html | 3 +++ views/item.html | 2 +- views/main/header.html | 2 +- 7 files changed, 63 insertions(+), 23 deletions(-) diff --git a/public/s/css/f0ck.css b/public/s/css/f0ck.css index 469f8f4..b5e149b 100644 --- a/public/s/css/f0ck.css +++ b/public/s/css/f0ck.css @@ -4,7 +4,7 @@ /* once upon a time this was a stiefelstrapse! but no more! */ /* Licensed under wtfpl */ -:root { +html[theme='f0ck'] { --accent: #9f0; --bg: #171717; --black: #000; @@ -30,7 +30,6 @@ --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1); --pagination-background-hover: #333; --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); - --videojs-background: #0d0d0d; --metadata-bg: #0d0d0d; --badge-bg: #171717; --posts-meta-bg: #000000b8; @@ -38,8 +37,6 @@ --badge-nsfw: #a72828; --badge-tag: #6c6c6c; --scrollbar-color: #2b2b2b; - --pb-primary: #fff; - --pb-secondary: #9f0; } html[theme='p1nk'] { @@ -66,18 +63,19 @@ html[theme='p1nk'] { --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1); --pagination-background-hover: #333; --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); - --videojs-background: #0e0d0d; + --badge-bg: #171717; + --metadata-bg: #0d0d0d; } html[theme='orange'] { --accent: #ff6f00; - --bg: #1f1e1e; + --bg: #171717; --black: #000; --white: #fff; --gray: #262626; --nav-bg: #2b2b2b; --nav-brand-border: inset 1px #242424; - --nav-brand-bg: #1f1e1e; + --nav-brand-bg: #171717; --navigation-links-bg: #2b2b2b; --navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0); --navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); @@ -94,9 +92,9 @@ html[theme='orange'] { --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1); --pagination-background-hover: #333; --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); - --videojs-background: #262626; --metadata-bg: #0d0d0d; --posts-meta-bg: #000000b8; + --badge-bg: #171717; --badge-sfw: #68a728; --badge-nsfw: #a72828; --badge-tag: #6c6c6c; @@ -129,7 +127,6 @@ html[theme='amoled'] { --pagination-anchor-box-shadow: inset 0 0 0 1px rgb(92, 92, 92),inset 0 1px rgb(92, 92, 92),inset 0 -1px rgb(92, 92, 92),0 1px 1px rgba(92, 92, 92, 0); --pagination-background-hover: #6a6a6a70; --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); - --videojs-background: #0d0d0d; --metadata-bg: #000; --badge-bg: #000; --posts-meta-bg: #000000b8; @@ -137,9 +134,8 @@ html[theme='amoled'] { --badge-nsfw: #a72828; --badge-tag: #6c6c6c; --scrollbar-color: #1d1c1c; - --pb-primary: #fff; - --pb-secondary: #9f0; } + ::-webkit-scrollbar { width: 5px; } @@ -187,6 +183,10 @@ a { text-decoration: none; } +a.id-link, a.dest-link { + /*transition: .5s ease;*/ +} + a.post_source:hover, a.id-link:hover { text-decoration: underline; } @@ -199,6 +199,7 @@ a.btn.disabled { .btn.disabled, .btn:disabled { opacity: 0.65; user-select: none; + /*transition: .5s ease;*/ } h5 { @@ -275,6 +276,7 @@ ul#posts > li:hover span { background: var(--nav-brand-bg); padding-right: 5px; padding-left: 5px; + /*transition: .5s ease;*/ } .navbar-brand:hover { @@ -347,11 +349,11 @@ span.f0ck { min-width: 17px; border: 1px solid var(--black); border-radius: 3px; - transition: .1s ease-out; + /*transition: .1s ease-out;*/ background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient)); box-shadow: var(--nav-link-box-shadow); color: transparent; - transition: .5s ease; + /*transition: .5s ease;*/ } .navbar-expand-lg .navbar-nav .nav-link, .pagination > a, .pagination > span { @@ -368,6 +370,7 @@ span.f0ck { span.placeholder { border-left: 1px solid var(--accent); margin-left: 7px; + /*transition: .5s ease;*/ } .navbar .nav-item .dropdown-menu { @@ -459,7 +462,7 @@ span.placeholder { width: 100%; padding: 5px; color: transparent; - transition: .5s ease; + /*transition: .5s ease;*/ } .pagination > a, .pagination > span { @@ -488,8 +491,8 @@ span.placeholder { border-color: var(--black); background-clip: padding-box; box-shadow: var(--pagination-anchor-box-shadow); - transition: .1s ease-out; background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient)); + /*transition: .5s ease;*/ } .pagination>a:hover { @@ -641,6 +644,7 @@ span.placeholder { opacity: 0.6; text-shadow: 2px 2px 2px var(--black); padding: 25px; + /*transition: .5s ease;*/ } #prev::before { @@ -657,6 +661,7 @@ span.placeholder { opacity: 0.6; text-shadow: 2px 2px 2px var(--black); padding: 25px; + /*transition: .5s ease;*/ } #next:hover, #prev:hover { @@ -857,6 +862,7 @@ span#tags { text-overflow: ellipsis; max-width: 20ch; display: inline-block; + /*transition: .5s ease;*/ } /*.embed-responsive-image img { diff --git a/public/s/js/theme.js b/public/s/js/theme.js index fbeba7b..307a9eb 100644 --- a/public/s/js/theme.js +++ b/public/s/js/theme.js @@ -1,7 +1,24 @@ +const Cookie = { + get: name => { + const c = document.cookie.match(`(?:(?:^|.*; *)${name} *= *([^;]*).*$)|^.*$`)[1]; + if(c) return decodeURIComponent(c); + }, + set: (name, value, opts = {}) => { + if(opts.days) { + opts['max-age'] = opts.days * 60 * 60 * 24; + delete opts.days; + } + opts = Object.entries(opts).reduce((accumulatedStr, [k, v]) => `${accumulatedStr}; ${k}=${v}`, ''); + document.cookie = name + '=' + encodeURIComponent(value) + opts + }, + delete: (name, opts) => Cookie.set(name, '', {'max-age': -1, ...opts}) +}; + (() => { const themes = [ 'f0ck', 'p1nk', 'orange', 'amoled' ]; - const acttheme = localStorage.getItem('theme') ?? "f0ck"; - document.documentElement.setAttribute("theme", acttheme); + const acttheme = Cookie.get('theme') ?? "f0ck"; + if(acttheme !== document.documentElement.getAttribute("theme")) + document.documentElement.setAttribute("theme", acttheme); if(themecontainer = document.querySelector("#themes")) { const sb = document.createElement("select"); sb.id = "themeselector"; @@ -16,7 +33,7 @@ sb.addEventListener("change", e => { const s = e.target.options[e.target.selectedIndex].innerText; document.documentElement.setAttribute("theme", s); - localStorage.setItem("theme", s); + Cookie.set("theme", s, { path: "/", days: 360 }); }); } })(); diff --git a/src/inc/routes/index.mjs b/src/inc/routes/index.mjs index 9dee153..b7527a2 100644 --- a/src/inc/routes/index.mjs +++ b/src/inc/routes/index.mjs @@ -46,7 +46,8 @@ router.get(/^\/(audio\/?|image\/?|video\/?)?(p\/\d+)?$/, async (req, res) => { link: `/${mime ? mime + "/" : ""}p/` }, last: query[query.length - 1].id, - filter: mime ? mime : undefined + filter: mime ? mime : undefined, + theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0] }; res.reply({ body: tpl.render("views/index", data) }); @@ -117,11 +118,16 @@ router.get(/^\/((audio\/|video\/|image\/)?[0-9]+)$/, async (req, res) => { cheat: cheat, link: `/${mime ? mime + "/" : ""}` }, - filter: mime ? mime : undefined + filter: mime ? mime : undefined, + theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0] }; res.reply({ body: tpl.render("views/item", data) }); }); router.get(/^\/(contact|help|about)$/, (req, res) => { - res.reply({ body: tpl.render(`views/${req.url.split[0]}`) }); + res.reply({ + body: tpl.render(`views/${req.url.split[0]}`, { + theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0] + }) + }); }); diff --git a/src/websrv.mjs b/src/websrv.mjs index 88a2df1..3f0574a 100644 --- a/src/websrv.mjs +++ b/src/websrv.mjs @@ -37,6 +37,14 @@ import router from "./inc/router.mjs"; "Cache-Control": "no-cache, public", "Location": target }).end(); + + req.cookies = {}; + if(req.headers.cookie) { + req.headers.cookie.split("; ").forEach(c => { + const parts = c.split('='); + req.cookies[parts.shift().trim()] = decodeURI(parts.join('=')); + }); + } !(r = router.routes.getRoute(req.url.pathname, req.method)) ? res.writeHead(404).end(`404 - ${req.url.pathname}`) : await r(req, res); console.log([ diff --git a/views/about.html b/views/about.html index b239d0a..967e68c 100644 --- a/views/about.html +++ b/views/about.html @@ -35,5 +35,8 @@

http://fockmoonsb24iczs7odozzy5uktlzbcgp337nabrgffzxv5ihabgpvyd.onion

http://fockulite74atso2xsxxw6q2gzqrgck572tiwvkyf5vdxictjn2vmlyd.onion

f0ck is completely functional without javascript enabled, you can be the beardiest neckbeard of all, we got you m'gentleman

+
Known Bugs
+

Theme plopper (If theme is selected the default f0ck sheme will appear for a small amount of time until the custom stylesheet is applied) - ETA: Christmas™

+

Magical video seeker (If you hold mouseclick for too long on the video timeline and drag to a specific position it will go crazy, don't!) - ETA: Christmas™

{{include main/footer}} diff --git a/views/item.html b/views/item.html index 4aab2ab..480d7f8 100644 --- a/views/item.html +++ b/views/item.html @@ -48,7 +48,7 @@ {{=item.id}} {{=user.network}} / {{=user.channel}} {{=item.src.short}} - {{=item.mime}} / {{=item.size}} + {{=item.mime}} / {{=item.size}} diff --git a/views/main/header.html b/views/main/header.html index a89fa73..5982c15 100644 --- a/views/main/header.html +++ b/views/main/header.html @@ -1,5 +1,5 @@ - + {{if data.title}}{{=data.title}}{{else}}f0ck!{{/if}}