themes im backend etzala

2021-04-17 19:55:25 +02:00
parent 65454961ce
commit 97519de05b
7 changed files with 63 additions and 23 deletions
--- 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 {
--- 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 });
    });
  }
 })();
--- 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]
+    })
+  });
 });
--- 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([
--- a/views/about.html
+++ b/views/about.html
@@ -35,5 +35,8 @@
      <p>http://fockmoonsb24iczs7odozzy5uktlzbcgp337nabrgffzxv5ihabgpvyd.onion</p>
      <p>http://fockulite74atso2xsxxw6q2gzqrgck572tiwvkyf5vdxictjn2vmlyd.onion</p>
      <p>f0ck is completely functional without javascript enabled, you can be the beardiest neckbeard of all, we got you m'gentleman</p>
+      <h5>Known Bugs</h5>
+      <p style="text-decoration: line-through">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™</p>
+      <p>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™</p>
    </div>
 {{include main/footer}}
--- a/views/item.html
+++ b/views/item.html
@@ -48,7 +48,7 @@
      <span class="badge badge-dark"><a href="/{{=item.id}}" class="id-link">{{=item.id}}</a></span>
      <span class="badge badge-dark">{{=user.network}} / {{=user.channel}}</span>
      <span class="badge badge-dark image-source"><a class="post_source" title="{{=item.src.long}}" href="{{=item.src.long}}" target="_blank">{{=item.src.short}}</a></span>
-      <span class="badge badge-dark"><a href="{{=item.dest}}" target="_blank">{{=item.mime}}</a> / {{=item.size}}</span>
+      <span class="badge badge-dark"><a class="dest-link" href="{{=item.dest}}" target="_blank">{{=item.mime}}</a> / {{=item.size}}</span>
      <span class="badge badge-dark"><time class="timeago" title="{{=item.timestamp}}" datetime="{{=item.timestamp}}">{{=item.timestamp}}</time></span>
      <span class="badge badge-dark" id="themes"></span>
      <span class="badge badge-dark" id="tags">
--- a/views/main/header.html
+++ b/views/main/header.html
@@ -1,5 +1,5 @@
 <!cocktype big f0ck>
-<html lang="en">
+<html lang="en" theme="{{if typeof theme !== "undefined" }}{{=theme}}{{/if}}">
 <head>
  <title>{{if data.title}}{{=data.title}}{{else}}f0ck!{{/if}}</title>
  <link rel="icon" type="image/gif" href="/s/img/favicon.gif" />