Frontend lul

public/css/f0ck.css

@@ -76,28 +76,6 @@ button {
 }
 
 /* Flummikram lol */
-div.pscroll {
-  opacity: 0.7;
-  position: fixed;
-  display: inline-block;
-  height: 64px;
-  width: 64px;
-  left: 50%;
-  cursor: pointer;
-  margin-left: -36px;
-  z-index: 999;
-}
-div.pscroll:hover {
-  opacity: 0.9;
-}
-div#up {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyP///8iIiLm5uY3NzdKSkpAQEAqKipZf6aEAAAACnRSTlOxIfAAKvPn6quuQpaxIgAAAMZJREFUeF7t17uOwjAYROHjOMCuL0l4/5ddbQU0M4p/RIE8/flkyY1NTr/XNrjrT8qsSwtsWaGFBpcYcKEF9xFgAhMo9xIBytFrP8owUPb6v10JmN4K6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4L6N4LiN4LD2Cv53c8AaUPAL08AXVk9zeeoG3nhb69XuP5fdkLZQITmED840kMIP75zonbaH4j5T8NALtW477R3QAAAABJRU5ErkJggg==');
-  top: 5.8em;
-}
-div#down {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAANlBMVEUiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIjIyMiIiLm5uY3NzcqKipAQED///9KSkpHtWFIAAAACnRSTlMqACGx8/Cu6uerGsmyTAAAAM9JREFUeF7t1zkOwzAMBVEt3kLK2/0vm3KQivhWigTQ7+dBpZhyeW3+cNtSckqzd2xOafGu1TT1AVPyzv0YMIABDMD0fQB7u9S1HcCNXhAM4CAQZl98gZ8PgNsB3G69NwAEqQdAUHoABKUHQNB6AAStB0DQegAErQdA0HoABK0HQNB6AAShBwgE+gBACHuAWKCPAIS4B4gEegFAoHcFQKBXAAR6BUCgVwAEehlAoNcBt7Nd7TTXAYjD/uKDMYAB9B+etQ+o/cd3Lsv6NF9ryW9/v8EFMSsbFgAAAABJRU5ErkJggg==');
-  bottom: 5em;
-}
 footer {
   position: fixed;
   bottom: 0;
@@ -191,4 +169,25 @@ div#itemview {
   z-index: 999;
   background-color: rgba(0,0,0,0.8);
   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;
 }

public/css/icons.css

@@ -0,0 +1,88 @@
+.close {
+  position: absolute;
+  right: 48px;
+  top: 48px;
+  width: 48px;
+  height: 48px;
+  opacity: 0.8;
+  background-color: rgba(0,0,0,0.5);
+}
+.close:hover {
+  opacity: 1;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 23px;
+  top: 3px;
+  content: ' ';
+  height: 40px;
+  width: 2px;
+  background-color: #333;
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}
+
+
+div.arrow {
+  position: fixed;
+  cursor: pointer;
+  height: 70px;
+  width: 70px;
+  background-color: #000;
+  opacity: .5;
+  border-radius: 10px;
+  z-index: 90;
+}
+div.arrow:hover {
+  opacity: .9;
+  box-shadow: 0px 0px 0px 2px #dac8d2;
+  border-radius: 10px;
+  transition: .1s ease-in;
+}
+div.arrow:before {
+  content: '';
+  position: absolute;
+  top: 7%;
+  left: 7%;
+  height: 60px;
+  width: 60px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+div.top:before {
+  clip-path: polygon(0% 77%, 50% 23%, 100% 77%);
+}
+div.bottom:before {
+  clip-path: polygon(0% 23%, 100% 23%, 50% 77%);
+}
+div.left:before {
+  clip-path: polygon(23% 50%, 77% 0%, 77% 100%);
+}
+div.right:before {
+  clip-path: polygon(23% 0%, 77% 50%, 23% 100%);
+}
+
+div.arrow.top {
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+div.arrow.bottom {
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+div.arrow.left {
+  left: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+div.arrow.right {
+  right: 20px;
+  top: 50%;
+  transform: translateY(-50%);
+}

public/js/f0ck.js

@@ -120,7 +120,7 @@ const resize = e => {
 
 // events
 swiper.init(rt.container.wrapper, e => scroll({ target: { id: e.direction }}));
-document.querySelectorAll("div.pscroll").forEach(p => p.addEventListener("click", scroll));
+[...document.querySelectorAll("div.arrow")].filter(e => ["up", "down"].includes(e.id)).forEach(p => p.addEventListener("click", scroll));
 document.addEventListener("wheel", scroll);
 
 (() => { // init
@@ -137,13 +137,32 @@ document.addEventListener("wheel", scroll);
 
 
 
-window.addEventListener("hashchange", e => {
+window.addEventListener("hashchange", async e => {
   const itemid = parseInt(e.newURL.split("#").slice(-1));
-  if(itemid === "NaN")
+  if(itemid <= 0) { // failover
-    return rt.container.itemview.style.display = "none";
+    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
 
-  rt.container.itemview.style.display = "block"; // show itemview
   // remove page events
   document.removeEventListener("wheel", scroll);
 

public/js/rt.js

@@ -17,6 +17,19 @@ export default {
   container: {
     wrapper: document.querySelector("div#wrapper"),
     itemview: document.querySelector("div#itemview"),
+    header: {
+      iteminfo: document.querySelector("div#itemInfo"),
+      pagepos: document.querySelector("div#pagePosition"),
+      itempos: document.querySelector("div#itemPosition"),
+      infos: {
+        title: document.querySelector("span#itemTitle"),
+        source: document.querySelector("a#itemSource"),
+        time: document.querySelector("span#itemTime"),
+        nick: document.querySelector("span#itemNick"),
+        channel: document.querySelector("span#itemChannel")
+      }
+    },
+    items: document.querySelectorAll("div.items"),
     posts: document.querySelectorAll("div.posts")
   },
   items: {

views/index.hbs

@@ -8,6 +8,7 @@
     <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">
@@ -22,19 +23,24 @@
         <div class="infoText">
           <span id="itemTime" time=""></span> by
           <span id="itemNick">blah</span> on
-          <a id="itemChannel">#f0ck</a>
+          <span id="itemChannel">#f0ck</a>
         </div>
       </div>
     </div>
     <div id="wrapper" class="content">
-      <div class="pscroll" id="up"></div>
+      <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="pscroll" id="down"></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>