.

2019-05-15 17:51:11 +00:00 · 2019-05-15 17:51:11 +00:00 · f790514cc3
commit f790514cc3
parent be29734fa4
17 changed files with 504 additions and 439 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -4,12 +4,6 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
-    "commander": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.0.tgz",
-      "integrity": "sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==",
-      "optional": true
-    },
    "cuffeo": {
      "version": "git+https://gitfap.de/keinBot/cuffeo.git#d55586ce5520d4119fa0900ef15ce8736fc62364",
      "from": "git+https://gitfap.de/keinBot/cuffeo.git"
@ -19,17 +13,6 @@
      "resolved": "https://registry.npmjs.org/denque/-/denque-1.4.1.tgz",
      "integrity": "sha512-OfzPuSZKGcgr96rf1oODnfjqBFmr1DVoc/TrItj3Ohe0Ah1C5WX5Baquw/9U9KovnQ88EqmJbD66rKYUQYN1tQ=="
    },
-    "handlebars": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz",
-      "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
-      "requires": {
-        "neo-async": "^2.6.0",
-        "optimist": "^0.6.1",
-        "source-map": "^0.6.1",
-        "uglify-js": "^3.1.4"
-      }
-    },
    "iconv-lite": {
      "version": "0.4.24",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@ -53,49 +36,10 @@
        "long": "^4.0.0"
      }
    },
-    "minimist": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
-    },
-    "neo-async": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.0.tgz",
-      "integrity": "sha512-MFh0d/Wa7vkKO3Y3LlacqAEeHK0mckVqzDieUKTT+KGxi+zIpeVsFxymkIiRpbpDziHc290Xr9A1O4Om7otoRA=="
-    },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      }
-    },
    "safer-buffer": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
-    },
-    "source-map": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-    },
-    "uglify-js": {
-      "version": "3.5.8",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.8.tgz",
-      "integrity": "sha512-GFSjB1nZIzoIq70qvDRtWRORHX3vFkAnyK/rDExc0BN7r9+/S+Voz3t/fwJuVfjppAMz+ceR2poE7tkhvnVwQQ==",
-      "optional": true,
-      "requires": {
-        "commander": "~2.20.0",
-        "source-map": "~0.6.1"
-      }
-    },
-    "wordwrap": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-      "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -12,7 +12,6 @@
  "license": "ISC",
  "dependencies": {
    "cuffeo": "git+https://gitfap.de/keinBot/cuffeo.git",
-    "handlebars": "^4.1.2",
    "mariadb": "^2.0.3"
  }
 }
--- a/public/css/f0ck.css
+++ b/public/css/f0ck.css
@ -1,9 +1,3 @@
-/* f0ck.me Stylesheet v2 */
-/* Created in April of 2019 by the notorious and super sexy Alman Abu Ottermann */
-/* This style makes use of the Milligram CSS framework and might not work as expected without! */
-/* Contact: sirx @ f0ck . it */
-/* This style is not meant to be used anywhere else than on f0ck.me or any other f0ck related website! */
-
 /*Theming*/
 :root {
  --primary-color: #302AE6;
@ -22,108 +16,26 @@
 }
 /*End of Theming*/

-/* Body */
-body {
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  overflow: hidden;
  background-color: var(--bg-color);
  color: var(--font-color);
-
-  overflow: hidden;
+}
+div.pageWrapper {
  height: 100%;
-  margin: 0;
-  padding: 0;
-}
-/* End of Body */
-
-/* Fieldset & Legend
-legend {
-  border-radius: 2px;
-  background: black;
-  font-family: monospace;
-  border: 1px white solid;
-  color: white;
-}
-
-fieldset {
-  border: 1px solid white;
-  padding: 20px;
-  background: black;
-}
-End of Fieldset & Legend */
-
-/* NAV */
-button {
-  background: #000101;
-  border: 1px solid white;
-  border-radius: 0px;
-  vertical-align: bottom !important;
-}
-  
-/* END OF NAV */
-
-/* MISC */
-::-webkit-scrollbar {
-  width: 12px;
-}
-
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
-}
-
-/* Flummikram lol */
-footer {
-  position: fixed;
-  bottom: 0;
-}
-
-div.content {
-  position: absolute;
-  top: 54px;
-  left: 8px;
-  bottom: 25px;
-  right: 8px;
-  margin-top: 25px;
-  overflow: hidden;
-}
-div.posts {
-  position: relative;
  width: 100%;
-  height: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0.2fr 2.6fr 0fr;
 }
-
-div.posts > a {
-  width: 128px;
-  height: 128px;
-  box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
-  margin: 4px;
-  float: left;
-  outline: none;
-  box-shadow: inset 0 0 10px #4c4a4a;
-}
-div.posts > a > img.thumb {
-  border: 2px solid black;
-  transition: .1s ease-out;
-}
-div.posts > a > img.thumb:hover {
-  box-shadow: 0px 0px 0px 2px #dac8d2;
-  border-radius: 5px;
-  transition: .1s ease-in;
-}
-
-/* fml */
-div#header {
-  height: 65px;
-  left: 8px;
-  right: 8px;
-  top: 0;
-  position: absolute;
+div#header, div#footer {
+  z-index: 9999;
  background-color: #292922;
 }
+
 #logoHead {
  margin: 6px 0 0 4px;
  padding: 0;
@ -147,7 +59,7 @@ div#header {
 #pagePosition, #itemPosition {
  position: absolute;
  right: 8px;
-  bottom: 6px;
+  top: 6px;
  padding: 0;
  color: #7d7b6a;
  background-color: #333;
@ -162,32 +74,21 @@ div#header {
  display: none;
 }

-div#wrapper {
-  display: block;
+div#content {
+  position: relative;
 }
-div#itemview {
-  z-index: 999;
-  background-color: rgba(0,0,0,0.8);
+
+div.wrapper {
  display: none;
-
-  flex-direction: row;
-  width: 100%;
-}
-
-div.items {
-  /*position: relative;*/
-  flex: 1 1 0px;
-
-  width: 100%;
-  height: 100%;
-}
-img.item {
  position: absolute;
-  max-height: 100%;
-  max-width: 100%;
  top: 0;
-  bottom: 0;
  left: 0;
-  right: 0;
-  margin: auto;
+  height: 100%;
+  width: 100%;
+}
+
+div#howtowrapper {
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 999;
 }
--- a/public/css/icons.css
+++ b/public/css/icons.css
@ -28,7 +28,7 @@


 div.arrow {
-  position: fixed;
+  position: absolute;
  cursor: pointer;
  height: 70px;
  width: 70px;
@ -67,22 +67,25 @@ div.right:before {
 }

 div.arrow.top {
-  top: 80px;
+  top: 10px;
  left: 50%;
  transform: translateX(-50%);
 }
 div.arrow.bottom {
-  bottom: 80px;
+  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
 }
 div.arrow.left {
-  left: 20px;
+  position: fixed !important;
+  left: 10px;
  top: 50%;
  transform: translateY(-50%);
 }
 div.arrow.right {
-  right: 20px;
+  position: fixed !important;
+  right: 10px;
  top: 50%;
  transform: translateY(-50%);
 }
+
--- a/public/css/itemview.css
+++ b/public/css/itemview.css
@ -0,0 +1,28 @@
+div#itemwrapper {
+  overflow: hidden;
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 999;
+}
+
+div#i_items {
+  width: 300%;
+  height: 100%;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 1fr;
+  grid-template-areas: ". . .";
+}
+div.i_item {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.item {
+  max-height: 100%;
+  max-width: 100%;
+}
--- a/public/css/milligram.min.css
+++ b/public/css/milligram.min.css
--- a/public/css/pageview.css
+++ b/public/css/pageview.css
@ -0,0 +1,34 @@
+div#pagewrapper {
+  display: block;
+  overflow: hidden;
+}
+
+div#p_items {
+  overflow: hidden;
+  height: 100%;
+  width: 100%;
+}
+div.p_item {
+  height: 100%;
+  width: 100%;
+}
+
+
+div.p_item > a {
+  width: 128px;
+  height: 128px;
+  box-shadow: 2px 2px 6px 0px rgb(0, 0, 0);
+  margin: 4px;
+  float: left;
+  outline: none;
+  box-shadow: inset 0 0 10px #4c4a4a;
+}
+div.p_item > a > img.thumb {
+  border: 2px solid black;
+  transition: .1s ease-out;
+}
+div.p_item > a > img.thumb:hover {
+  box-shadow: 0px 0px 0px 2px #dac8d2;
+  border-radius: 5px;
+  transition: .1s ease-in;
+}
--- a/public/js/events.js
+++ b/public/js/events.js
@ -0,0 +1,150 @@
+import rt from "./rt.js";
+import lib from "./lib.js";
+
+const events = {};
+events.wheel = {
+  page: async e => {
+    if(rt.scroll)
+      return;
+    rt.scroll = true;
+    const deltaY = e.target.id === "up" ? -1 : e.deltaY < 0 ? -1: 1; // -1 up, 1 down
+    
+    if((deltaY === -1 && rt.items.first === rt.items.newest) || (deltaY === 1 && rt.items.last === rt.items.oldest))
+      return rt.scroll = false;
+    rt.items.eps = 0;
+    await lib.getItems({
+      el: rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2],
+      opt: deltaY === -1 ? `id=${rt.items.first}&order=asc` : `id=${rt.items.last}&order=desc`
+    });
+    rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
+    await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
+      
+    rt.ct.wrapper.pages[1].innerHTML = rt.ct.wrapper.pages[deltaY === -1 ? 0 : 2].innerHTML;
+    rt.ct.wrapper.pages[1].scrollIntoView({ block: rt.vars.block });
+    
+    rt.scroll = false;
+  },
+  item: async e => {
+    if(rt.scroll)
+      return;
+    const deltaY = e.target.id === "left" ? -1 : e.deltaY < 0 ? -1: 1; // -1 left, 1 right
+    if((deltaY === -1 && rt.items.act === rt.items.first) || (deltaY === 1 && rt.items.act === rt.items.last))
+      return rt.scroll = false;
+    window.location = `${window.location.pathname}#${rt.items.act - deltaY}`;
+  }
+};
+events.resize = {
+  page: async e => {
+    e.preventDefault();
+    clearTimeout(rt.tmp.resize);
+    lib.calcItems();
+    rt.tmp.resize = setTimeout(() => lib.getItems({
+      el: rt.ct.wrapper.pages[1],
+      opt: `id=${rt.items.first + 1}&order=desc`
+    }), rt.vars.cd);
+    
+    lib.scrolltomiddle(rt.ct.wrapper.pages);
+  },
+  item: async e => {
+    lib.scrolltomiddle(rt.ct.wrapper.items);
+  }
+};
+events.hashchange = async e => {
+  if(rt.scroll)
+    return;
+  rt.scroll = true;
+
+  if(!rt.tmp.hash)
+    return rt.tmp.hash = true;
+  const itemid = parseInt((e.newURL?e.newURL:e.detail.newURL).split("#").slice(-1));
+  if(!itemid || itemid <= 0) // failover oder so
+    return lib.showLayer("page");
+
+  const next = rt.items.act === null || rt.items.act === itemid ? 1 : rt.items.act > itemid ? 2 : 0;
+  rt.ct.header.itempos.innerHTML = `item ${itemid}`;
+  const item = await (await fetch(`${rt.api}/item/${itemid}`)).json();
+  item.dest = item.dest.replace(/^\./, "");
+  
+  rt.ct.header.infos.source.href = item.src;
+  rt.ct.header.infos.source.innerHTML = item.srchost;
+  rt.ct.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
+  rt.ct.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
+  rt.ct.header.infos.nick.innerHTML = item.username;
+
+  lib.showLayer("item", next === 1);
+
+  rt.ct.wrapper.pages[1].querySelectorAll("a > img").forEach(e => {
+    e.style.boxShadow = null;
+    e.style.borderRadius = null;
+    e.style.transition = ".1s ease-out";
+  });
+  setTimeout(() => {
+    rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.boxShadow = "0px 0px 0px 2px #dac8d2";
+    rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.borderRadius = "5px";
+    rt.ct.wrapper.pages[1].querySelector(`a[href='#${itemid}'] > img`).style.transition = ".1s ease-in";
+  }, 50);
+
+  let el;
+  switch(item.mime) {
+    case "audio/flac":
+    case "audio/mpeg":
+    case "audio/ogg":
+    case "audio/x-flac": // audios
+      el = document.createElement("audio");
+      el.src = `${rt.url}${item.dest}`;
+      el.type = item.mime;
+      el.autoplay = true;
+      el.controls = true;
+      el.loop = true;
+    break;
+    case "image/gif":
+    case "image/jpeg":
+    case "image/png": // images
+      el = document.createElement("img");
+      el.src = `${rt.url}${item.dest}`;
+    break;
+    case "video/mp4":
+    case "video/quicktime":
+    case "video/webm":
+    case "video/ogv": // videos
+      el = document.createElement("video");
+      el.src = `${rt.url}${item.dest}`;
+      el.type = item.mime;
+      el.autoplay = true;
+      el.controls = true;
+      el.loop = true;
+    break;
+    default:
+      alert("lol hacker");
+    break;
+  }
+
+  el.classList.add("item");
+
+  rt.ct.wrapper.items[next].insertAdjacentElement("afterbegin", el);
+
+  rt.ct.wrapper.items[next].scrollIntoView({ block: rt.vars.block, behavior: "smooth" });
+
+  rt.items.prev = item.prev;
+  rt.items.next = item.next;
+  rt.items.act = item.id;
+
+  await new Promise(resolve => setTimeout(resolve, rt.vars.cd));
+  
+  if(next !== 1) {
+    document.querySelector("div#i_items").removeChild(rt.ct.wrapper.items[next === 0 ? 2 : 0]);
+    const newdiv = document.createElement("div");
+    newdiv.classList.add("i_item");
+    document.querySelector("div#i_items").insertAdjacentElement((next === 0 ? "afterbegin" : "beforeend"), newdiv);
+    
+    rt.ct.wrapper.items = document.querySelectorAll("div.i_item");
+  }
+  
+  lib.scrolltomiddle(rt.ct.wrapper.items);
+  rt.ct.wrapper.items[0].innerHTML = "";
+  rt.ct.wrapper.items[2].innerHTML = "";
+
+  rt.scroll = false;
+};
+
+export default events;
--- a/public/js/f0ck.js
+++ b/public/js/f0ck.js
@ -1,170 +1,33 @@
-/* Todo:
- * - Event tracker (rt.events)
- * - Functions und Events in Module auslagern
- */
 import rt from "./rt.js";
-import "./test.js";
+import events from "./events.js";
+import lib from "./lib.js";

-const calcItems = () => {
-  const cs = window.getComputedStyle(rt.container.posts[0]);
-  const height = parseInt(cs.height.replace("px", ""));
-  const width = parseInt(cs.width.replace("px", ""));
-  const cols = ~~(width  / ( rt.layout.itemsize + rt.layout.margin ));
-  const rows = ~~(height / ( rt.layout.itemsize + rt.layout.margin ));
-  rt.container.posts.forEach(e => {
-    e.style.marginLeft = Math.max((width - (cols * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) * 1.5;
-  });
-
-  return {
-    rows: rows,
-    cols: cols,
-    eps: rows * cols,
-    width: width,
-    height: height
-  };
-};
-const getItems = async ({ el, opt = "" }) => {
-  const tmp = calcItems();
-  if(tmp.eps === rt.items.eps)
-    return;
-  rt.items.eps = tmp.eps;
-  el.innerHTML = "";
-  const i = await (await fetch(`/api/p?eps=${tmp.eps}&${opt}`)).json();
+(async () => {
+  lib.showLayer("page");
+  window.addEventListener("hashchange", events.hashchange);
  
-  const items = i.items.sort((a, b) => b.id - a.id);
-  items.forEach(item => {
-    const _a = document.createElement("a");
-    _a.title = item.mime;
-    _a.href = `#${item.id}`;//`${rt.url}/${item.id}`;
-    const _img = document.createElement("img");
-    _img.classList.add("thumb");
-    _img.src = `${rt.url}/t/${item.id}.png`;
-    _a.insertAdjacentElement("afterbegin", _img);
-    el.insertAdjacentElement("beforeend", _a);
+  const debug = document.querySelectorAll("span#debug > a");
+  debug[0].addEventListener("click", () => { // page
+    lib.showLayer("page");
  });
-  rt.items.first = items[0].id;
-  rt.items.last = items[items.length - 1].id;
-  rt.items.oldest = i.oldest;
-  rt.items.newest = i.newest;
-  window.history.pushState(rt.items.first, `f0ck.me! page ${rt.items.first}`, `/page/${rt.items.first}`);
-
-  document.querySelector("#pagePosition").innerHTML = `items ${rt.items.first} - ${rt.items.last}`;
-};
-
-const scroll = async e => { // uff
-  if(rt.tmp.scroll)
-    return;
-  rt.tmp.scroll = true;
-  const direction = e.target.id === "up" ? "up" : e.deltaY < 0 ? "up": "down";
-  if((direction === "up" && rt.items.first === rt.items.newest) || (direction === "down" && rt.items.last === rt.items.oldest))
-    return rt.tmp.scroll = false;
-  rt.items.eps = 0;
-  await getItems({
-    el: rt.container.posts[direction === "up" ? 0 : 2],
-    opt: direction === "up" ? `id=${rt.items.first}&order=asc` : `id=${rt.items.last}&order=desc`
+  debug[1].addEventListener("click", () => { // item
+    lib.showLayer("item");
  });
-  rt.container.posts[direction === "up" ? 0 : 2].scrollIntoView({ block: rt.st.block, behavior: "smooth" });
-  await new Promise(resolve => setTimeout(resolve, 500));
-
-  rt.container.posts[1].innerHTML = rt.container.posts[direction === "up" ? 0 : 2].innerHTML;
-  rt.container.posts[1].scrollIntoView({ block: rt.st.block, behavior: "auto" });
-
-  rt.tmp.scroll = false;
-};
-
-const swiper = {
-  touchStartY: 0,
-  touchEndY: 0,
-  minSwipePixels: 30,
-  detectionZone: undefined,
-  swiperCallback: () => {},
-  init: (detectionZone, callback) => {
-    swiper.swiperCallback = callback
-    detectionZone.addEventListener("touchstart", event => {
-      swiper.touchStartY = event.changedTouches[0].screenY;
-    }, false);
-    detectionZone.addEventListener("touchend", event => {
-      swiper.touchEndY = event.changedTouches[0].screenY;
-      swiper.handleSwipeGesture();
-    }, false);
-  },
-  handleSwipeGesture: () => {
-    let direction, moved;
-    if (swiper.touchEndY <= swiper.touchStartY) {
-      moved = swiper.touchStartY - swiper.touchEndY;
-      direction = "down";
-    }
-    if (swiper.touchEndY >= swiper.touchStartY) {
-      moved = swiper.touchEndY - swiper.touchStartY;
-      direction = "up";
-    }
-    if (moved > swiper.minSwipePixels && direction !== "undefined")
-      swiper.swipe(direction, moved);
-  },
-  swipe: (direction, movedPixels) => {
-    const ret = {};
-    ret.direction = direction;
-    ret.movedPixels = movedPixels;
-    swiper.swiperCallback(ret);
-  }
-};
-
-const resize = e => {
-  e.preventDefault();
-  clearTimeout(rt.tmp.resize);
-  rt.tmp.resize = setTimeout(() => getItems({
-    el: rt.container.posts[1],
-    opt: `id=${rt.items.first + 1}&order=desc`
-  }), 500);
-};
-
-// events
-swiper.init(rt.container.wrapper, e => scroll({ target: { id: e.direction }}));
-[...document.querySelectorAll("div.arrow")].filter(e => ["up", "down"].includes(e.id)).forEach(p => p.addEventListener("click", scroll));
-document.addEventListener("wheel", scroll);
-
-(() => { // init
-  window.addEventListener("resize", resize);
+  debug[2].addEventListener("click", () => { // item
+    lib.showLayer("howto");
+  });
+  
  setTimeout(() => {
    const pn = parseInt(document.location.pathname.split("/").splice(-1));
-    rt.container.posts[1].scrollIntoView({ block: rt.st.block }); // mitte
-    getItems({
-      el: rt.container.posts[1],
+    const hash = document.location.hash;
+    lib.scrolltomiddle(rt.ct.wrapper.pages);
+    lib.getItems({
+      el: rt.ct.wrapper.pages[1],
      opt: pn > 0 ? `id=${pn + 1}&order=desc` : ""
    });
+
+    if(hash)
+      window.dispatchEvent(new CustomEvent("hashchange", { detail: { newURL: hash } }));
  }, 300);
+
 })();
-
-
-
-window.addEventListener("hashchange", async e => {
-  const itemid = parseInt(e.newURL.split("#").slice(-1));
-  if(itemid <= 0) { // failover
-    rt.container.itemview.style.display = "none";
-    return false;
-  }
-
-  rt.container.itemview.style.display = "flex"; // show itemview
-  rt.container.header.itempos.style.display = "block";
-  rt.container.header.pagepos.style.display = "none";
-  rt.container.header.iteminfo.style.display = "block";
-
-  rt.container.header.itempos.innerHTML = `item ${itemid}`;
-
-  const item = await (await fetch(`/api/item/${itemid}`)).json();
-  console.log(item);
-
-  rt.container.header.infos.source.href = item.src;
-  rt.container.header.infos.source.innerHTML = item.srchost;
-  rt.container.header.infos.channel.innerHTML = `${item.usernetwork} ${item.userchannel}`;
-  rt.container.header.infos.title.innerHTML = `${item.mime} (${item.size})`;
-  rt.container.header.infos.nick.innerHTML = item.username;
-
-  rt.container.items[1].innerHTML = `<img src="${rt.url}${item.dest}" class="item" />`;
-  rt.container.items[1].scrollIntoView({ block: rt.st.block }); // mitte
-
-  // remove page events
-  document.removeEventListener("wheel", scroll);
-
-  console.log(itemid);
-});
--- a/public/js/f0ck.min.js
+++ b/public/js/f0ck.min.js
@ -0,0 +1 @@
+import rt from"./rt.js";import events from"./events.js";import lib from"./lib.js";(async()=>{lib.showLayer("page"),window.addEventListener("hashchange",events.hashchange);const e=document.querySelectorAll("span#debug > a");e[0].addEventListener("click",()=>{lib.showLayer("page")}),e[1].addEventListener("click",()=>{lib.showLayer("item")}),e[2].addEventListener("click",()=>{lib.showLayer("howto")}),setTimeout(()=>{const e=parseInt(document.location.pathname.split("/").splice(-1)),t=document.location.hash;lib.scrolltomiddle(rt.ct.wrapper.pages),lib.getItems({el:rt.ct.wrapper.pages[1],opt:e>0?`id=${e+1}&order=desc`:""}),t&&window.dispatchEvent(new CustomEvent("hashchange",{detail:{newURL:t}}))},300)})();
--- a/public/js/lib.js
+++ b/public/js/lib.js
@ -0,0 +1,121 @@
+import rt from "./rt.js";
+import events from "./events.js";
+
+const calcItems = () => {
+  const cs = window.getComputedStyle(rt.ct.content);
+  const height = parseInt(cs.height.replace("px", ""));
+  const width = parseInt(cs.width.replace("px", ""));
+  const cols = ~~(width  / ( rt.layout.itemsize + rt.layout.margin ));
+  const rows = ~~(height / ( rt.layout.itemsize + rt.layout.margin ));
+  
+  rt.ct.wrapper.pages.forEach(e => {
+    e.style.marginLeft = Math.max((width  - (cols * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) * 1.5 + "px";
+    e.style.paddingTop = Math.max((height - (rows * (rt.layout.itemsize + rt.layout.margin)) + rt.layout.margin) / rt.layout.min_rows, 0) + "px";
+  });
+
+  return {
+    rows: rows,
+    cols: cols,
+    eps: rows * cols,
+    width: width,
+    height: height
+  };
+};
+
+const getItems = async ({ el, opt = "" }) => {
+  const tmp = calcItems();
+  if(tmp.eps === rt.items.eps)
+    return;
+  rt.items.eps = tmp.eps;
+  el.innerHTML = "";
+  const i = await (await fetch(`${rt.api}/p?eps=${tmp.eps}&${opt}`)).json();
+  
+  const items = i.items.sort((a, b) => b.id - a.id);
+  items.forEach(item => {
+    const _a = document.createElement("a");
+    _a.title = item.mime;
+    _a.href = `#${item.id}`;//`${rt.url}/${item.id}`;
+    const _img = document.createElement("img");
+    _img.classList.add("thumb");
+    _img.src = `${rt.url}/t/${item.id}.png`;
+    _a.insertAdjacentElement("afterbegin", _img);
+    el.insertAdjacentElement("beforeend", _a);
+  });
+  rt.items.first = items[0].id;
+  rt.items.last = items[items.length - 1].id;
+  rt.items.oldest = i.oldest;
+  rt.items.newest = i.newest;
+
+  rt.tmp.hash = false;
+  window.history.pushState(rt.items.first, `f0ck.me! page ${rt.items.first}`, `/page/${rt.items.first}${(window.location.hash?window.location.hash:"")}`);
+  rt.tmp.hash = true;
+
+  rt.ct.header.pagepos.innerHTML = `items ${rt.items.first} - ${rt.items.last}`;
+};
+
+const scrolltomiddle = el => {
+  el[0].scrollIntoView({ block: rt.vars.block });
+  el[2].scrollIntoView({ block: rt.vars.block });
+  el[1].scrollIntoView({ block: rt.vars.block });
+};
+
+const showLayer = (layer, scroll = true) => {
+  // hide all pages
+  for(let e in rt.ct.tabs)
+    rt.ct.tabs[e].style.display = "none";
+  // remove all events for reassigning
+  document.removeEventListener("wheel", events.wheel.item);
+  document.removeEventListener("wheel", events.wheel.page);
+  window.removeEventListener("resize", events.resize.item);
+  window.removeEventListener("resize", events.resize.page);
+  [...rt.ct.arrows] // remove itembuttons
+    .filter(e => ["left", "right"].includes(e.id))
+    .forEach(p => p.removeEventListener("click", events.wheel.item));
+  [...rt.ct.arrows] // remove pagebuttons
+    .filter(e => ["up", "down"].includes(e.id))
+    .forEach(p => p.removeEventListener("click", events.wheel.page));
+  
+  switch(layer) {
+    case "page":
+      rt.ct.tabs.item.style.display = "none";
+      rt.ct.tabs.howto.style.display = "none";
+      document.addEventListener("wheel", events.wheel.page);
+      window.addEventListener("resize", events.resize.page);
+      [...rt.ct.arrows] // add pagebuttons
+        .filter(e => ["up", "down"].includes(e.id))
+        .forEach(p => p.addEventListener("click", events.wheel.page));
+      
+      if(scroll)
+        scrolltomiddle(rt.ct.wrapper.pages);
+
+      rt.ct.header.pagepos.style.display = "block";
+      rt.ct.header.itempos.style.display = "none";
+      rt.ct.header.iteminfo.style.display = "none";
+    break;
+    case "item":
+      rt.ct.tabs.item.style.display = "block";
+      document.addEventListener("wheel", events.wheel.item);
+      window.addEventListener("resize", events.resize.item);
+      [...rt.ct.arrows] // add itembuttons
+        .filter(e => ["left", "right"].includes(e.id))
+        .forEach(p => p.addEventListener("click", events.wheel.item));
+
+      if(scroll)
+        scrolltomiddle(rt.ct.wrapper.items);
+
+      rt.ct.header.pagepos.style.display = "none";
+      rt.ct.header.itempos.style.display = "block";
+      rt.ct.header.iteminfo.style.display = "block";
+    break;
+    case "howto":
+      rt.ct.tabs.howto.style.display = "block";
+    break;
+  }
+};
+
+export default { // oof
+  calcItems: calcItems,
+  getItems: getItems,
+  showLayer: showLayer,
+  scrolltomiddle: scrolltomiddle
+};
--- a/public/js/rt.js
+++ b/public/js/rt.js
@ -5,18 +5,38 @@ export default {
    min_rows: 4,
    itemsize: 130
  },
-  st: {
-    behavior: "smooth",
-    block: "center"
-  },
  url: "//f0ck.me",
+  api: "//dev.f0ck.me/api",
+  vars: {
+    cd: 700,
+    block: "start"
+  },
  tmp: {
    scroll: false,
-    resize: null
+    resize: null,
+    hash: true
  },
-  container: {
-    wrapper: document.querySelector("div#wrapper"),
-    itemview: document.querySelector("div#itemview"),
+  items: {
+    first: null,
+    last: null,
+    newest: null,
+    oldest: null,
+    next: null,
+    prev: null,
+    act: null,
+    eps: 0
+  },
+  ct: {
+    content: document.querySelector("div#content"),
+    wrapper: {
+      pages: document.querySelectorAll("div.p_item"),
+      items: document.querySelectorAll("div.i_item")
+    },
+    tabs: {
+      item: document.querySelector("div#itemwrapper"),
+      howto: document.querySelector("div#howtowrapper")
+    },
+    arrows: document.querySelectorAll("div.arrow"),
    header: {
      iteminfo: document.querySelector("div#itemInfo"),
      pagepos: document.querySelector("div#pagePosition"),
@ -28,15 +48,6 @@ export default {
        nick: document.querySelector("span#itemNick"),
        channel: document.querySelector("span#itemChannel")
      }
-    },
-    items: document.querySelectorAll("div.items"),
-    posts: document.querySelectorAll("div.posts")
-  },
-  items: {
-    first: null,
-    last: null,
-    newest: null,
-    oldest: null,
-    eps: 0
+    }
  }
 };
--- a/public/js/test.js
+++ b/public/js/test.js
--- a/src/inc/routes/inc/index.mjs
+++ b/src/inc/routes/inc/index.mjs
@ -1,3 +0,0 @@
-export const queries = {
-  items: "select id, mime from items order by id desc limit 72"
-};
--- a/src/inc/routes/index.mjs
+++ b/src/inc/routes/index.mjs
@ -1,25 +1,10 @@
 import router from "../router";
 import fs from "fs";
-import sql from "../sql";
-import handlebars from "handlebars";

-import { queries } from "./inc/index";
-
-const template = fs.readFileSync("./views/index.hbs", "utf-8");
+const tpl = fs.readFileSync("./views/index.html", "utf-8");

 router.get(/^\/(page\/[0-9]+)?$/, async (req, res) => {
-  const db = await sql.getConnection();
-
-  try {
-    const rows = await db.query(queries.items);
-    const tpl = handlebars.compile(template);
-    res
-      .writeHead(200, { 'Content-Type': 'text/html' })
-      .end(tpl({ items: rows, debug: JSON.stringify(req.url, null, 2) }));
-  } catch(err) {
-    res
-      .writeHead(500)
-      .end(JSON.stringify(err), 'utf-8');
-  }
-  db.end();
+  res
+    .writeHead(200, { 'Content-Type': 'text/html' })
+    .end(tpl);
 });
--- a/views/index.hbs
+++ b/views/index.hbs
@ -1,50 +0,0 @@
-<!doctype inf0ckted>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
-    <meta name="description" content="f0ck you">
-    <meta name="author" content="Abu Ottermann, Flummi Mc Doggerstein">
-    <title>f0ck!</title>
-    <link rel="stylesheet" type="text/css" href="/css/milligram.min.css">
-    <link rel="stylesheet" type="text/css" href="/css/f0ck.css">
-    <link rel="stylesheet" type="text/css" href="/css/icons.css">
-  </head>
-  <body>
-    <div id="header">
-      <h1 id="logoHead"><a href="/"><img id="logo" src="/img/f0ck_logo.png"></a></h1>
-      <div id="pagePosition"></div>
-      <div id="itemPosition"></div>
-      <div id="itemInfo">
-        <div class="infoText">
-          <span id="itemTitle">blah</span> //
-          <a id="itemSource" href=""></a>
-        </div>
-        <div class="infoText">
-          <span id="itemTime" time=""></span> by
-          <span id="itemNick">blah</span> on
-          <span id="itemChannel">#f0ck</a>
-        </div>
-      </div>
-    </div>
-    <div id="wrapper" class="content">
-      <div class="arrow top" id="up"></div>
-      <div id="posts_1" class="posts"></div>
-      <div id="posts" class="posts"></div>
-      <div id="posts_2" class="posts"></div>
-      <div class="arrow bottom" id="down"></div>
-    </div>
-    <div id="itemview" class="content">
-      <div class="arrow left" id="left"></div>
-      <div id="item_1" class="items">&nbsp;</div>
-      <div id="item" class="items">&nbsp;</div>
-      <div id="item_2" class="items">&nbsp;</div>
-      <div class="arrow right" id="right"></div>
-      <a href="#" class="close"></a>
-    </div>
-    <footer>
-      <section class="credits">Made with 666 souls in mind and 2 liters of fresh virgin blood</section>
-    </footer>
-    <script src="/js/f0ck.js" type="module" defer></script>
-  </body>
-</html>
--- a/views/index.html
+++ b/views/index.html
@ -0,0 +1,81 @@
+<!doctype blah>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=0.7, shrink-to-fit=no, user-scalable=no">
+  <meta name="description" content="f0ck you">
+  <meta name="author" content="Abu Ottermann, Flummi Mc Doggerstein">
+  <title>f0ck lol!</title>
+  <link rel="stylesheet" href="/css/f0ck.css">
+  <link rel="stylesheet" href="/css/icons.css">
+  <link rel="stylesheet" href="/css/pageview.css">
+  <link rel="stylesheet" href="/css/itemview.css">
+</head>
+<body>
+  <div class="pageWrapper">
+    <div class="page" id="header">
+      <h1 id="logoHead"><a href="/"><img id="logo" src="/img/f0ck_logo.png"></a></h1>
+      <div id="pagePosition"></div>
+      <div id="itemPosition"></div>
+      <div id="itemInfo">
+        <div class="infoText">
+          <span id="itemTitle">blah</span> //
+          <a id="itemSource" href=""></a>
+        </div>
+        <div class="infoText">
+          <span id="itemTime" time=""></span> by
+          <span id="itemNick">blah</span> on
+          <span id="itemChannel">#f0ck</a>
+        </div>
+      </div>
+    </div>
+    <div class="page" id="content">
+      <div class="wrapper" id="pagewrapper">
+        <div class="arrow top" id="up"></div>
+        <div id="p_items">
+          <div class="p_item">Seite 1</div>
+          <div class="p_item">Seite 2</div>
+          <div class="p_item">Seite 3</div>
+        </div>
+        <div class="arrow bottom" id="down"></div>
+      </div>
+      <div class="wrapper" id="itemwrapper">
+        <div class="arrow left" id="left"></div>
+        <div id="i_items">
+          <div class="i_item">Item 1</div>
+          <div class="i_item">Item 2</div>
+          <div class="i_item">Item 3</div>
+        </div>
+        <div class="arrow right" id="right"></div>
+      </div>
+      <div class="wrapper" id="howtowrapper">
+        <h4>irc.n0xy.net +6697 (ssl only) #f0ck</h4>
+        <p>More information: <a href="https://n0xy.net">n0xy.net</a></p>
+        <div class="page-header"><h4>IRC Rules</h4></div>
+        <p>Constitution:</p>
+        <ul>
+          <li>§ 1 The dignity of the IRCd is inviolable.</li>
+          <li>§ 2 The distribution of Child Pornography is strictly prohibited in any of our networks and will lead to an immediate ban.</li>
+          <li>§ 3 Do not attack users in this network in any way, shape, or form.</li>
+          <li>§ 4 Do not transmit any personal/financial information without permission.</li>
+          <li>§ 5 Do not share any malware on this network.</li>
+        </ul>
+        <p>f0ck specific rules:</p>
+        <ul>
+          <li>Animal cruelty is forbidden and will lead to an immediate ban</li>
+        </ul>
+        <h4>how the f0ck to f0ck, you ask?</h4>
+        <p>f0ck will f0ck any media link posted in the channel ending with: jpg|gif|png|webm|mp3|mp4|ogg|flac</p>
+        <p>If you don't want f0ck to f0ck it put !ignore behind your link. Example: https://retard-journal.com/stupidshit.png !ignore</a>
+        <p>f0ck will only f0ck media links with the maximum size of 80MB</p>
+      </div>
+    </div>
+    <div class="page" id="footer">Made with 666 souls in mind and 2 liters of fresh virgin blood
+      <span id="debug">
+        <a href="#">page</a> - <a href="#">item</a> - <a href="#">howto</a>
+      </span>
+    </div>
+  </div>
+  <script src="/js/f0ck.js" type="module" defer></script>
+</body>
+</html>
				`@ -0,0 +1 @@`
				import rt from"./rt.js";import events from"./events.js";import lib from"./lib.js";(async()=>{lib.showLayer("page"),window.addEventListener("hashchange",events.hashchange);const e=document.querySelectorAll("span#debug > a");e[0].addEventListener("click",()=>{lib.showLayer("page")}),e[1].addEventListener("click",()=>{lib.showLayer("item")}),e[2].addEventListener("click",()=>{lib.showLayer("howto")}),setTimeout(()=>{const e=parseInt(document.location.pathname.split("/").splice(-1)),t=document.location.hash;lib.scrolltomiddle(rt.ct.wrapper.pages),lib.getItems({el:rt.ct.wrapper.pages[1],opt:e>0?`id=${e+1}&order=desc`:""}),t&&window.dispatchEvent(new CustomEvent("hashchange",{detail:{newURL:t}}))},300)})();