jawoll

public/s/css/f0ck.css

@@ -56,6 +56,7 @@ html[theme='p1nk'] {
   --nav-link-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);
   --nav-link-hover-bg: #333;
   --dropdown-bg: #232323;
+  --dropdown-item-hover: #0d0d0d;
   --nav-brand-font: 'VCR';
   --font: monospace;
   --pagination-background: #2b2b2b;
@@ -65,6 +66,8 @@ html[theme='p1nk'] {
   --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
   --badge-bg: #171717;
   --metadata-bg: #0d0d0d;
+  --posts-meta-bg: #000000b8;
+  --scrollbar-color: #2b2b2b;
 }
 
 html[theme='orange'] {
@@ -136,6 +139,119 @@ html[theme='amoled'] {
   --scrollbar-color: #1d1c1c;
 }
 
+html[theme="paper"] {
+  --accent: #000;
+  --bg: #fff;
+  --black: #000;
+  --white: #fff;
+  --gray: #262626;
+  --nav-bg: #fff;
+  --nav-brand-border: inset 1px #242424;
+  --nav-brand-bg: #fff;
+  --navigation-links-bg: #fff;
+  --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);
+  --navigation-links-box-shadow: rgba(255,255,255,.05);
+  --nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
+  --nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
+  --nav-link-hover-bg: #3939354a;
+  --nav-border-color: rgba(255,255,255,.05);
+  --dropdown-bg: #fff;
+  --dropdown-item-hover: #3939354a;
+  --nav-brand-font: 'VCR';
+  --font: monospace;
+  --pagination-background: #fff;
+  --pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
+  --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: #3939354a;
+  --pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5);
+  --metadata-bg: #fff;
+  --badge-bg: #fff;
+  --posts-meta-bg: #000000b8;
+  --badge-sfw: #68a728;
+  --badge-nsfw: #a72828;
+  --badge-tag: #6c6c6c;
+  --scrollbar-color: #6c6c6c;
+}
+
+html[theme="paper"] a#next {
+  color: var(--white) !important;
+  -webkit-text-stroke: 1px var(--black);
+}
+
+html[theme="paper"] a#prev {
+  color: var(--white) !important;
+  -webkit-text-stroke: 1px var(--black);
+}
+
+html[theme="paper"] .about {
+  color: var(--black);
+}
+
+html[theme="paper"] .about a:hover {
+  text-decoration: underline;
+}
+
+html[theme="paper"] div#posts > a::after {
+  color: var(--white);
+}
+
+html[theme="paper"] .v0ck_progress_filled {
+  background: var(--white);
+}
+
+html[theme="paper"] .metadata {
+  color: var(--black);
+}
+
+html[theme="paper"] .navbar-brand:hover {
+  background: var(--black);
+  color: var(--white) !important;
+}
+
+html[theme="paper"] .navbar {
+  border-bottom: 1px solid var(--black);
+}
+
+html[theme="paper"] .embed-responsive-image {
+  background: var(--white);
+}
+
+html[theme="atmos"] {
+  --accent: #1fb2b0;
+  --bg: #161618;
+  --black: #000;
+  --white: #fff;
+  --gray: #262626;
+  --nav-bg: rgb(32, 32, 32);
+  --nav-brand-border: inset 1px #242424;
+  --nav-brand-bg: #171717;
+  --navigation-links-bg: rgb(32, 32, 32);
+  --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);
+  --navigation-links-box-shadow: rgba(255,255,255,.05);
+  --nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0);
+  --nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
+  --nav-link-hover-bg: #333;
+  --nav-border-color: rgba(255,255,255,.05);
+  --dropdown-bg: #232323;
+  --dropdown-item-hover: #0d0d0d;
+  --nav-brand-font: 'VCR';
+  --font: monospace;
+  --pagination-background: rgb(32, 32, 32);
+  --pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1);
+  --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);
+  --metadata-bg: rgba(34, 34, 34, 0.8);
+  --badge-bg: #1f1f20;
+  --posts-meta-bg: #000000b8;
+  --badge-sfw: #68a728;
+  --badge-nsfw: #a72828;
+  --badge-tag: #6c6c6c;
+  --scrollbar-color: #2b2b2b;
+}
+
 ::-webkit-scrollbar {
   width: 5px;
 }
@@ -147,9 +263,9 @@ html[theme='amoled'] {
 }
 
 *, ::before, ::after {
-    box-sizing: border-box;
-    outline: 0;
-    -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  outline: 0;
+  -webkit-tap-highlight-color: transparent;
 }
 
 @font-face {
@@ -159,6 +275,7 @@ html[theme='amoled'] {
 
 html {
   height: 100%;
+  overflow: overlay;
 }
 
 html, body {
@@ -183,10 +300,6 @@ 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,7 +312,6 @@ a.btn.disabled {
 .btn.disabled, .btn:disabled {
   opacity: 0.65;
   user-select: none;
-  /*transition: .5s ease;*/
 }
 
 h5 {
@@ -211,33 +323,46 @@ h5 {
   margin-right: 0.5rem !important;
 }
 
-ul#posts {
+div#posts {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
-  list-style: none;
+  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
+  justify-items: center;
+  grid-gap: 5px;
+  margin: 0;
   padding: 0;
   margin-top: 15px;
   margin-bottom: 15px;
-  grid-column-gap: 5px;
-  grid-row-gap: 5px;
 }
 
-ul#posts > li {
+@media (max-width: 376px) {
+  div#posts {
+    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
+  }
+}
+
+div#posts > a {
+  display: inline-block;
   position: relative;
-  height: 128px;
-  width: 128px;
-  text-align: center;
+  width: 100%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
 }
-
-ul#posts > li:hover {
+div#posts > a::before {
+  content: "";
+  display: block;
+  margin-top: 100%;
+}
+div#posts > a:hover {
   opacity: 0.8;
   box-shadow: 0 0 0 2px var(--accent);
 }
 
-ul#posts > li span {
+div#posts > a::after {
   position: absolute;
   right: 0;
   top: 0;
+  content: attr(data-mime);
   color: var(--accent);
   text-shadow: 0px 1px var(--black);
   font-size: 11px;
@@ -248,8 +373,7 @@ ul#posts > li span {
   font-family: vcr;
   text-transform: uppercase;
 }
-
-ul#posts > li:hover span {
+div#posts > a:hover::after {
   visibility: visible;
 }
 
@@ -276,7 +400,6 @@ ul#posts > li:hover span {
   background: var(--nav-brand-bg);
   padding-right: 5px;
   padding-left: 5px;
-  /*transition: .5s ease;*/
 }
 
 .navbar-brand:hover {
@@ -320,10 +443,7 @@ span.f0ck {
   width: 100%;
   display: flex;
   flex-direction: column;
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding: 5px 0 5px 0;
   margin-bottom: 0;
   list-style: none;
   margin: 0;
@@ -346,14 +466,13 @@ span.f0ck {
   padding-right: 0;
   padding-left: 0;
   display: flex;
+  justify-content: center;
   min-width: 17px;
   border: 1px solid var(--black);
   border-radius: 3px;
-  /*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;*/
 }
 
 .navbar-expand-lg .navbar-nav .nav-link, .pagination > a, .pagination > span {
@@ -367,10 +486,19 @@ span.f0ck {
   background-color: var(--nav-link-hover-bg);
 }
 
+.nav-link[data-toggle="dropdown"]::after {
+  content: "\00a0(" attr(content) ")\00a0\25bc";
+}
+
+@media (max-width: 768px) {
+  .nav-link[data-toggle="dropdown"]::after {
+    content: "\00a0\25bc";
+  }
+}
+
 span.placeholder {
   border-left: 1px solid var(--accent);
   margin-left: 7px;
-  /*transition: .5s ease;*/
 }
 
 .navbar .nav-item .dropdown-menu {
@@ -415,6 +543,11 @@ span.placeholder {
 .dropdown-menu > li:hover {
   background: var(--dropdown-item-hover);
 }
+
+.dropdown-menu a {
+  width: 100%;
+  display: inline-block;
+}
 /* Navbar media queries */
 @media (max-width: 1056px) {
   .navbar {
@@ -462,7 +595,6 @@ span.placeholder {
   width: 100%;
   padding: 5px;
   color: transparent;
-  /*transition: .5s ease;*/
 }
 
 .pagination > a, .pagination > span {
@@ -492,7 +624,6 @@ span.placeholder {
   background-clip: padding-box;
   box-shadow: var(--pagination-anchor-box-shadow);
   background-image: linear-gradient(to bottom,var(--nav-link-background-linear-gradient));
-  /*transition: .5s ease;*/
 }
 
 .pagination>a:hover {
@@ -555,6 +686,7 @@ span.placeholder {
   .embed-responsive-image {
     bottom: unset !important;
   }
+  
 }
 
 @media (min-width: 992px) {
@@ -644,7 +776,6 @@ span.placeholder {
   opacity: 0.6;
   text-shadow: 2px 2px 2px var(--black);
   padding: 25px;
-  /*transition: .5s ease;*/
 }
 
 #prev::before {
@@ -661,7 +792,6 @@ span.placeholder {
   opacity: 0.6;
   text-shadow: 2px 2px 2px var(--black);
   padding: 25px;
-  /*transition: .5s ease;*/
 }
 
 #next:hover, #prev:hover {
@@ -766,7 +896,7 @@ span#tags {
   padding-bottom: 1.5px;
 }
 
-.irc, .contact {
+.about {
   padding: 10px;
   color: white;
   word-break: break-word;
@@ -775,11 +905,6 @@ span#tags {
 }
 
 @media (max-width: 999px) {
-  ul#posts {
-    grid-column-gap: 5px;
-    grid-row-gap: 5px;
-  }
-
   .index-container {
     padding-left: 5px;
     padding-right: 5px;
@@ -862,24 +987,6 @@ span#tags {
   text-overflow: ellipsis;
   max-width: 20ch;
   display: inline-block;
-  /*transition: .5s ease;*/
-}
-
-/*.embed-responsive-image img {
-  animation: fadein 1.5s;
-}
-
-.embed-responsive .embed-responsive-item, .embed-responsive video {
-  animation: fadein 1.5s;
-}*/
-@keyframes fadein {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* logik überdenken sobald anderer player!*/
-video {
-  background: black !important;
 }
 
 audio::-webkit-media-controls{
@@ -888,4 +995,18 @@ audio::-webkit-media-controls{
 
 audio::-webkit-media-controls-timeline {
   filter: contrast(0);
+}
+
+div.about > div {
+  float: right;
+  max-width: 500px;
+  margin-left: 5px;
+}
+div.about > div img {
+  max-width: 99%;
+  height: auto;
+}
+div.about > div p {
+  font-size: 7pt;
+  margin-top: 0;
 }

public/s/css/v0ck.css

@@ -22,11 +22,6 @@
   height: auto;
 }
 
-.v0ck_video {
-  max-width: 100%;
-  max-height: 100%;
-}
-
 .v0ck_overlay {
   pointer-events: none;
   position: absolute;

public/s/js/f0ck.js

@@ -1,6 +1,12 @@
 (() => {
   if(elem = document.querySelector("#my-video")) {
     const video = new v0ck(elem);
+    document.addEventListener("keydown", e => {
+      if(e.key === " ") {
+        video[video.paused ? 'play' : 'pause']();
+        document.querySelector('.v0ck_overlay').classList[video.paused ? 'remove' : 'add']('v0ck_hidden');
+      }
+    });
   }
 
   let tt = false;
@@ -14,9 +20,9 @@
   const clickOnElementBinding = selector => () => (elem = document.querySelector(selector)) ? elem.click() : null;
   const keybindings = {
     "ArrowLeft": clickOnElementBinding("#next"),
-    "d": clickOnElementBinding("#next"),
+    "a": clickOnElementBinding("#next"),
     "ArrowRight": clickOnElementBinding("#prev"),
-    "a": clickOnElementBinding("#prev"),
+    "d": clickOnElementBinding("#prev"),
     "r": clickOnElementBinding("#random")
   };
   document.addEventListener("keydown", e => {
@@ -28,9 +34,24 @@
   // </keybindings>
 
   // <image-responsive>
-  if(f0ckimage = document.querySelector("#f0ck-image")) {
-    f0ckimage.addEventListener("click", e => {
+  const imgSize = e => new Promise((res, _) => {
+    const i = new Image();
+    i.addEventListener('load', function() {
+      res({ width: this.width, height: this.height });
+    });
+    i.src = e.src;
+  });
+
+  if(f0ckimage = document.querySelector("img#f0ck-image")) {
+    const f0ckimagescroll = document.querySelector("#image-scroll");
+    f0ckimage.addEventListener("click", async e => {
       e.preventDefault();
+      const img = await imgSize(f0ckimage);
+      if(img.width > img.height)
+        return;
+      f0ckimagescroll.hasAttribute("style")
+        ? f0ckimagescroll.removeAttribute("style")
+        : f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
       f0ckimage.hasAttribute("style")
         ? f0ckimage.removeAttribute("style")
         : f0ckimage.setAttribute("style", "max-height: none; height: auto; width: 100%; position: absolute; left: 0;");
@@ -38,19 +59,8 @@
   }
   // </image-responsive>
 
-  // <scroll-event-adder>
-  if(f0ckimagescroll = document.querySelector("#image-scroll")) {
-    f0ckimagescroll.addEventListener("click", e => {
-      e.preventDefault();
-      f0ckimagescroll.hasAttribute("style")
-        ? f0ckimagescroll.removeAttribute("style")
-        : f0ckimagescroll.setAttribute("style", "overflow-y: scroll");
-    });
-  }
-  // </scroll-event-adder>
-
   // <scroller>
-  if(document.querySelector("ul#posts")) {
+  if(document.querySelector("div#posts")) {
     document.addEventListener("wheel", e => {
       if((window.innerHeight + window.scrollY) >= document.body.offsetHeight && e.deltaY > 0) {
         if(elem = document.querySelector(".pagination > .next:not(.disabled)"))
@@ -94,10 +104,10 @@
         elem = document.querySelector(".pagination > .prev:not(.disabled)");
     }
     else {
-      if(navbar = document.querySelector("nav.navbar") && document.querySelector("ul#posts")) {
+      if(navbar = document.querySelector("nav.navbar") && document.querySelector("div#posts")) {
         if(yDiff > 0 && (window.innerHeight + window.scrollY) >= document.body.offsetHeight) // up
           elem = document.querySelector(".pagination > .next:not(.disabled)");
-        else if(yDiff <= 0 && window.scrollY <= 0 && document.querySelector("ul#posts")) // down
+        else if(yDiff <= 0 && window.scrollY <= 0 && document.querySelector("div#posts")) // down
           elem = document.querySelector(".pagination > .prev:not(.disabled)");
       }
     }

public/s/js/theme.js

@@ -10,30 +10,36 @@ const Cookie = {
     }
     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 = Cookie.get('theme') ?? "f0ck";
-  if(acttheme !== document.documentElement.getAttribute("theme"))
+  const themecontainer = document.querySelector("li#themes > ul.dropdown-menu");
+  const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
+  if(acttheme !== document.documentElement.getAttribute("theme") && themes.includes(acttheme))
     document.documentElement.setAttribute("theme", acttheme);
-  if(themecontainer = document.querySelector("#themes")) {
-    const sb = document.createElement("select");
-    sb.id = "themeselector";
-    themes.forEach(o => {
-      const option = document.createElement("option");
-      option.text = o;
-      if(acttheme === o)
-        option.selected = true;
-      sb.add(option);
-    });
-    themecontainer.insertAdjacentElement("afterend", sb);
-    sb.addEventListener("change", e => {
-      const s = e.target.options[e.target.selectedIndex].innerText;
-      document.documentElement.setAttribute("theme", s);
-      Cookie.set("theme", s, { path: "/", days: 360 });
-    });
-  }
+  [...themecontainer.querySelectorAll("li > a")].forEach(t => t.addEventListener("click", e => {
+    e.preventDefault();
+    const _theme = e.target.innerText.toLowerCase();
+    document.documentElement.setAttribute("theme", _theme);
+    document.querySelector("#themes > a").setAttribute("content", _theme);
+    Cookie.set("theme", _theme, { path: "/", days: 360 });
+    return false;
+  }));
+
+  document.addEventListener("keydown", e => {
+    const acttheme = Cookie.get('theme') ?? "f0ck";
+    const themes = [...themecontainer.querySelectorAll("li > a")].map(t => t.innerText.toLowerCase());
+    const k = e.key;
+    if(k === "t") {
+      e.preventDefault();
+      let i = themes.indexOf(acttheme);
+      if(++i >= themes.length)
+        i = 0;
+      document.documentElement.setAttribute("theme", themes[i]);
+      document.querySelector("#themes > a").setAttribute("content", themes[i]);
+      Cookie.set("theme", themes[i], { path: "/", days: 360 });
+    }
+  });
 })();

public/s/js/v0ck.js

@@ -49,7 +49,7 @@ class v0ck {
     }
     else
       return console.error("nope");
-    this.init(elem);
+    return this.init(elem);
   }
 
   init(elem) {
@@ -133,10 +133,14 @@ class v0ck {
       video.currentTime = (e.offsetX / progress.offsetWidth) * video.duration;
     }
     function toggleFullScreen(e) {
-      if(document.fullscreenElement)
+      if(document.fullscreenElement) // exit fullscreen
         document.exitFullscreen();
-      else
-        player.requestFullscreen();
+      else { // request fullscreen
+        if(/(iPad|iPhone|iPod)/gi.test(navigator.platform))
+          video.webkitEnterFullscreen();
+        else
+          player.requestFullscreen();
+      }
     }
     function toggleFullScreenClasses() {
       player.classList.toggle('fullscreen');
@@ -161,12 +165,11 @@ class v0ck {
     progress.addEventListener('mouseup', () => mousedown = false);
     fullscreen.addEventListener('click', toggleFullScreen);
     document.addEventListener('fullscreenchange', toggleFullScreenClasses);
-    document.addEventListener('mozfullscreenchange', toggleFullScreenClasses);
-    document.addEventListener('webkitfullscreenchange', toggleFullScreenClasses);
-    document.addEventListener('msfullscreenchange', toggleFullScreenClasses);
 
     video.volume = _volume = volumeSlider.value = +(localStorage.getItem('volume') ?? defaultVolume);
     handleVolumeButton(video.volume);
     togglePlay();
+
+    return video;
   }
 }

src/inc/routes/index.mjs

@@ -47,6 +47,7 @@ router.get(/^\/(audio\/?|image\/?|video\/?)?(p\/\d+)?$/, async (req, res) => {
       },
       last: query[query.length - 1].id,
       filter: mime ? mime : undefined,
+      themes: cfg.websrv.themes,
       theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0]
     };
 
@@ -105,7 +106,7 @@ router.get(/^\/((audio\/|video\/|image\/)?[0-9]+)$/, async (req, res) => {
       dest: `${cfg.websrv.paths.images}/${query.dest}`,
       mime: query.mime,
       size: lib.formatSize(query.size),
-      timestamp: lib.timeAgo(new Date(query.stamp * 1000).toISOString()),
+      timestamp: lib.timeAgo(new Date(query.stamp * 1e3).toISOString()),
       tags: tags
     },
     title: `${query.id} - f0ck.me`,
@@ -119,14 +120,17 @@ router.get(/^\/((audio\/|video\/|image\/)?[0-9]+)$/, async (req, res) => {
       link: `/${mime ? mime + "/" : ""}`
     },
     filter: mime ? mime : undefined,
-    theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0]
+    themes: cfg.websrv.themes,
+    theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0],
+    lul: cfg.websrv.phrases[~~(Math.random() * cfg.websrv.phrases.length)]
   };
   res.reply({ body: tpl.render("views/item", data) });
 });
 
-router.get(/^\/(contact|help|about)$/, (req, res) => {
+router.get(/^\/(about)$/, (req, res) => {
   res.reply({
     body: tpl.render(`views/${req.url.split[0]}`, {
+      themes: cfg.websrv.themes,
       theme: (typeof req.cookies.theme !== "undefined" && cfg.websrv.themes.includes(req.cookies.theme)) ? req.cookies.theme : cfg.websrv.themes[0]
     })
   });

src/inc/routes/theme.mjs

@@ -0,0 +1,14 @@
+import router from "../router.mjs";
+import cfg from "../../../config.json";
+
+router.get(/^\/theme\//, async (req, res) => {
+  let theme = req.url.split[1] ?? cfg.websrv.themes[0];
+  if(!cfg.websrv.themes.includes(theme))
+    theme = cfg.websrv.themes[0];
+
+  return res.writeHead(301, {
+    "Cache-Control": "no-cache, public",
+    "Set-Cookie": `theme=${theme}; Path=/`,
+    "Location": req.headers.referer ?? "/"
+  }).end();
+});

src/inc/trigger/parser.mjs

@@ -51,7 +51,7 @@ export default async bot => {
           //meta = JSON.parse((await exec(`youtube-dl -f "bestvideo[ext=mp4,filesize<${maxfilesize}k]+bestaudio/best" --skip-download --dump-json "${link}"`)).stdout);
         }
         catch(err) {
-          e.reply("666 - kein b0ck!");
+          e.reply("(╯° °）╯︵ ┻━┻)");
           console.error(err);
           return;
         }
@@ -59,7 +59,7 @@ export default async bot => {
         let filename = `${uuid}.${meta.ext}`;
 
         //e.reply(`downloading ${uuid}...`);
-        e.reply(`[charging the f0cker] downloading: ${uuid}.${meta.ext}`);
+        e.reply(`[charging the f0cker] downloading: ${uuid}`);
 
         // download data
         const start = new Date();

views/about.html

@@ -1,5 +1,11 @@
 {{include main/header}}
-    <div class="irc">
+    <div class="about">
+      <div>
+        <a href="/48908"><img src="/s/img/loool.webp" /></a>
+        <p>thanks to our turkish fellow lol@n0xy/#f0ck for this gif &lt;3</p>
+      </div>
+      <h5>f0ck Contact</h5>
+      <p>Whatever it is, we might have a answer, even though it might not be the one you were looking for: <a href="mailto:admin@f0ck.me">admin@f0ck.me</a></p>
       <h5>About f0ck</h5>
       <p>f0ck is your friendly IRC shitposting bot, it's built for catching urls that are passed to it and displays the content of passed urls on a simple and accessible web gallery reachable at <a href="/">f0ck.me</a></p>
       <h5>WTF is a f0ck?</h5>
@@ -34,9 +40,13 @@
       <p>f0ck onions and moons, but fockulite!</p>
       <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>
+      <p>f0ck is completely functional without javascript enabled, you can be the beardiest neckbeard of all, we got you m'gentleman, if you want to use a custom theme you gotta allow our style cookie.</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>
+      <h5>f0ck Privacy?</h5>
+      <p>Cookies: Yes, we set 1 cookie for your prefered stylesheet, for the _cfduid cookie please see <a href="https://blog.cloudflare.com/deprecating-cfduid-cookie/">https://blog.cloudflare.com/deprecating-cfduid-cookie/</a></p>
+      <p>Logs: No for Tor - Yes for cloudflare and cloudflare probably sells your soul to the devil, however our webserver doesn't log cloudflare connecting to our webserver, if you want to lurk without being flared by the cloud, see the above tor section my man</p>
+      <p>But let me tell you something about internet "privacy". At first you need to understand what it means to have "privacy", for me as a human the word privacy means that I am by myself, private not observable by others, on the internet this concept does not work, in real life you might lock your door and then no one can enter the normal way to your room and you have some good old fashioned privacy, but on the internet various applications on your computer including extensions for your browser might make connections without you knowing or even giving consent if you knew, most applications send heartbeats, store information, read files on your computer, they might even process the gained data with or without you knowing or consenting to any of it, you probably accepted in good faith the ToS of many services without ever reading them, in the end it's up to you if you give a shit about your privacy, btw a VPN wont help if you still got all the tracking cookies and shit in your browser, they will just add 1+1 and you are identified again. My honest advice for anyone who seeks total privacy without bullshit, disconnect from the internet, remove the internet from your life, it's a bulletproof solution! With that being said, have a good day!</p>
     </div>
 {{include main/footer}}

views/contact.html

@@ -1,6 +1,6 @@
 {{include main/header}}
     <div class="contact">
-      <h5>f0ck Contact</h5>
-      <p>Whatever it is, we might have a answer, even though it might not be the one you were looking for: <a href="mailto:admin@f0ck.me">admin@f0ck.me</a></p>
+      <a href="/48908"><img src="/s/img/loool.webp" style="margin-right: 5px; max-width: 100%; height: auto;" /></a>
+      <p style="font-size: 7pt; margin-top: 0;">thanks to our turkish fellow lol@n0xy/#f0ck for this gif &lt;3</p>
     </div>
 {{include main/footer}}

views/index.html

@@ -1,14 +1,9 @@
 {{include main/header}}
   <div class="index-container">
-    <ul id="posts">
+    <div id="posts">
       {{each items as item}}
-      <li>
-        <a href="/{{if typeof filter !== "undefined"}}{{=filter}}/{{/if}}{{=item.id}}">
-          <img src="/t/{{=item.id}}.png" loading="lazy" />
-          <span>{{=item.mime}}</span>
-        </a>
-      </li>
+      <a href="/{{if typeof filter !== "undefined"}}{{=filter}}/{{/if}}{{=item.id}}" data-mime="{{=item.mime}}" style="background-image: url('/t/{{=item.id}}.png')"></a>
       {{/each}}
-    </ul>
+    </div>
   </div>
 {{include main/footer}}

views/item.html

@@ -13,10 +13,11 @@
         {{/if}}
       </div>
       <div class="media-object">
+        <div hidden class="f0ck95"><img src="/s/img/f0ck95/computer.png" alt="f0ck95"><a href="/random">Random</a></div>
         {{if item.mime.startsWith("video")}}
         <div class="embed-responsive embed-responsive-16by9">
           <video id="my-video" class="embed-responsive-item" width="640" height="360" src="{{=item.dest}}"
-            preload="auto" autoplay controls loop></video>
+            preload="auto" autoplay controls loop playsinline></video>
         </div>
         {{elseif item.mime.startsWith("audio")}}
         <div class="embed-responsive embed-responsive-16by9" style="background: url('{{if item.coverart}}{{=item.coverart}}{{else}}/s/img/200.gif{{/if}}') no-repeat center / contain black;">
@@ -50,7 +51,7 @@
       <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 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">{{=lul}}</span>
       <span class="badge badge-dark" id="tags">
       {{if typeof item.tags !== "undefined"}}
         {{each item.tags as tag}}

views/main/header.html

@@ -4,6 +4,7 @@
   <title>{{if data.title}}{{=data.title}}{{else}}f0ck!{{/if}}</title>
   <link rel="icon" type="image/gif" href="/s/img/favicon.gif" />
   <link rel="stylesheet" href="/s/css/f0ck.css">
+  <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="f0ck.me is the place where internet purists gather to celebrate content of all kinds">
   {{if data.item}}
@@ -11,7 +12,6 @@
   <meta property="og:description"/>
   <meta name="Description"/>
   <meta property="og:image" content="{{=item.thumbnail}}" />
-  <meta charset="utf-8" />
   {{/if}}
 </head>
 <body>

views/snippets/navbar.html

@@ -1,35 +1,40 @@
 <nav class="navbar navbar-expand-lg">
   <a class="navbar-brand" href="/"><span class="f0ck" width="" height="">F0CK</span></a>
   <div class="navigation-links">
-      <ul class="navbar-nav">
-          <li class="nav-item">
-              <a class="nav-link" href="/about"><span class="nav-link-identifier">About</span></a>
-          </li>
-          <li class="nav-item">
-              <a class="nav-link" href="/contact"><span class="nav-link-identifier">Contact</span></a>
-          </li>
-        <span class="placeholder">&nbsp;</span>
-        <li class="nav-item dropdown">
-          <a class="nav-link" href="#" data-toggle="dropdown">Filter{{if typeof filter !== "undefined"}}&nbsp;({{=filter}}){{/if}}&nbsp;&#9660;</a>
-          <ul class="dropdown-menu">
-            <li><a class="dropdown-item" href="/">All</a></li>
-            <li><a class="dropdown-item" href="/audio">Audio</a></li>
-            <li><a class="dropdown-item" href="/video">Video</a></li>
-            <li><a class="dropdown-item" href="/image">Image</a></li>
-          </ul>
-        </li>
-        <li class="nav-item">
-          <a id="random" class="nav-link" href="/random{{if typeof filter !== "undefined"}}/{{=filter}}{{/if}}">
-            <span class="nav-link-identifier">Random</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="collapse navbar-collapse show" id="navbarSupportedContent">
-      <div class="pagination-container-fluid">
-        <div class="pagination-wrapper">
-          {{include partials/pagination}}
-        </div>
+    <ul class="navbar-nav">
+      <li class="nav-item">
+        <a class="nav-link" href="/about"><span class="nav-link-identifier">About</span></a>
+      </li>
+      <li class="nav-item dropdown" id="themes">
+        <a class="nav-link" href="#" content="{{=theme}}" data-toggle="dropdown">Theme</a>
+        <ul class="dropdown-menu">
+          {{each themes as t}}
+            <li><a href="/theme/{{=t}}">{{=t}}</a></li>
+          {{/each}}
+        </ul>
+      </li>
+      <span class="placeholder">&nbsp;</span>
+      <li class="nav-item dropdown">
+        <a class="nav-link" href="#"{{if typeof filter !== "undefined"}} content="{{=filter}}" data-toggle="dropdown"{{/if}}">Filter{{if typeof filter === "undefined"}}&nbsp;&#9660;{{/if}}</a>
+        <ul class="dropdown-menu">
+          <li><a class="dropdown-item" href="/">All</a></li>
+          <li><a class="dropdown-item" href="/audio">Audio</a></li>
+          <li><a class="dropdown-item" href="/video">Video</a></li>
+          <li><a class="dropdown-item" href="/image">Image</a></li>
+        </ul>
+      </li>
+      <li class="nav-item">
+        <a id="random" class="nav-link" href="/random{{if typeof filter !== "undefined"}}/{{=filter}}{{/if}}">
+          <span class="nav-link-identifier">Random</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="collapse navbar-collapse show" id="navbarSupportedContent">
+    <div class="pagination-container-fluid">
+      <div class="pagination-wrapper">
+        {{include partials/pagination}}
       </div>
+    </div>
   </div>
 </nav>