From 852c98af2918216b5f9b9238ff6e9f273ceb384d Mon Sep 17 00:00:00 2001
From: sirx <sirx@firemail.cc>
Date: Sat, 5 Nov 2016 17:55:52 +0100
Subject: [PATCH] =?UTF-8?q?kl=C3=A4glicher=20versuch=20einen=20theme=20cha?=
 =?UTF-8?q?nger=20zu=20errichten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 s/css/cyber.css  | 538 +++++++++++++++++++++++++++++++++++++++++++++++
 s/index.tpl.html |   5 +-
 s/item.tpl.html  |   2 +
 s/js/theme.js    | 118 +++++++++++
 4 files changed, 661 insertions(+), 2 deletions(-)
 create mode 100644 s/css/cyber.css
 create mode 100644 s/js/theme.js

diff --git a/s/css/cyber.css b/s/css/cyber.css
new file mode 100644
index 0000000..0108c1d
--- /dev/null
+++ b/s/css/cyber.css
@@ -0,0 +1,538 @@
+@import url('https://fonts.googleapis.com/css?family=Oswald:700|Press+Start+2P');
+
+body {
+    margin: 1em auto 3em auto;
+    background-color: rgb(10, 10, 10);
+    color: #01ffbd;
+    font-family: 'Oswald', sans-serif;
+    font-size: 17px;
+}
+
+a {
+    color: #f300ff;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.return {
+    text-align: center;
+    font-family: 'Press Start 2P', cursive;
+    font-size: 29px;
+    text-decoration: none;
+    animation: glitch2 2s steps(100) infinite;
+    color: white;
+}
+
+.thumb {
+    border: 2px solid rgb(4, 232, 189);
+}
+
+/* Color the Controls */
+a#next {
+    color: #01f4b5;
+}
+
+a#next:hover {
+	animation: glitch2 2s steps(100) infinite;
+}
+
+a#random {
+    color: #01f4b5;
+}
+
+a#random:hover {
+    animation: glitch2 2s steps(100) infinite;
+}
+
+a#prev {
+    color: #01f4b5;
+}
+
+a#prev:hover {
+    animation: glitch2 2s steps(100) infinite;
+}
+
+a#holland {
+	color: white;
+}
+
+a#holland:hover {
+	color: #cc0ccb;
+    animation: glitch2 2s steps(100) infinite;
+}
+
+/* PANEL */
+.panel {
+	background-color: rgba(4, 27, 23, 0.61);
+    border: 5px solid #9a0039;
+}
+
+@keyframes noise-anim {
+  0% {
+    clip: rect(2px, 9999px, 94px, 0);
+  }
+  5% {
+    clip: rect(89px, 9999px, 60px, 0);
+  }
+  10% {
+    clip: rect(66px, 9999px, 50px, 0);
+  }
+  15% {
+    clip: rect(3px, 9999px, 54px, 0);
+  }
+  20% {
+    clip: rect(26px, 9999px, 19px, 0);
+  }
+  25% {
+    clip: rect(20px, 9999px, 66px, 0);
+  }
+  30% {
+    clip: rect(18px, 9999px, 43px, 0);
+  }
+  35% {
+    clip: rect(54px, 9999px, 48px, 0);
+  }
+  40% {
+    clip: rect(33px, 9999px, 66px, 0);
+  }
+  45% {
+    clip: rect(24px, 9999px, 61px, 0);
+  }
+  50% {
+    clip: rect(30px, 9999px, 18px, 0);
+  }
+  55% {
+    clip: rect(16px, 9999px, 96px, 0);
+  }
+  60% {
+    clip: rect(2px, 9999px, 20px, 0);
+  }
+  65% {
+    clip: rect(84px, 9999px, 19px, 0);
+  }
+  70% {
+    clip: rect(50px, 9999px, 5px, 0);
+  }
+  75% {
+    clip: rect(60px, 9999px, 80px, 0);
+  }
+  80% {
+    clip: rect(26px, 9999px, 96px, 0);
+  }
+  85% {
+    clip: rect(100px, 9999px, 74px, 0);
+  }
+  90% {
+    clip: rect(82px, 9999px, 29px, 0);
+  }
+  95% {
+    clip: rect(34px, 9999px, 97px, 0);
+  }
+  100% {
+    clip: rect(91px, 9999px, 44px, 0);
+  }
+}
+
+.return:after {
+  content: attr(class="return");
+  position: absolute;
+  left: 2px;
+  text-shadow: -1px 0 red;
+  top: 0;
+  color: white;
+  background: black;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: noise-anim 2s infinite linear alternate-reverse;
+}
+
+@keyframes noise-anim-2 {
+  0% {
+    clip: rect(76px, 9999px, 52px, 0);
+  }
+  5% {
+    clip: rect(5px, 9999px, 11px, 0);
+  }
+  10% {
+    clip: rect(25px, 9999px, 9px, 0);
+  }
+  15% {
+    clip: rect(56px, 9999px, 30px, 0);
+  }
+  20% {
+    clip: rect(63px, 9999px, 93px, 0);
+  }
+  25% {
+    clip: rect(84px, 9999px, 63px, 0);
+  }
+  30% {
+    clip: rect(55px, 9999px, 54px, 0);
+  }
+  35% {
+    clip: rect(53px, 9999px, 52px, 0);
+  }
+  40% {
+    clip: rect(40px, 9999px, 66px, 0);
+  }
+  45% {
+    clip: rect(50px, 9999px, 15px, 0);
+  }
+  50% {
+    clip: rect(90px, 9999px, 31px, 0);
+  }
+  55% {
+    clip: rect(33px, 9999px, 4px, 0);
+  }
+  60% {
+    clip: rect(18px, 9999px, 57px, 0);
+  }
+  65% {
+    clip: rect(2px, 9999px, 21px, 0);
+  }
+  70% {
+    clip: rect(38px, 9999px, 93px, 0);
+  }
+  75% {
+    clip: rect(61px, 9999px, 44px, 0);
+  }
+  80% {
+    clip: rect(83px, 9999px, 27px, 0);
+  }
+  85% {
+    clip: rect(80px, 9999px, 51px, 0);
+  }
+  90% {
+    clip: rect(91px, 9999px, 39px, 0);
+  }
+  95% {
+    clip: rect(59px, 9999px, 36px, 0);
+  }
+  100% {
+    clip: rect(74px, 9999px, 80px, 0);
+  }
+}
+.return:before {
+  content: attr(data-text);
+  position: absolute;
+  left: -2px;
+  text-shadow: 1px 0 blue;
+  top: 0;
+  color: white;
+  background: transparent;
+  overflow: hidden;
+  clip: rect(0, 900px, 0, 0);
+  animation: noise-anim-2 3s infinite linear alternate-reverse;
+}
+
+@keyframes glitch2 {
+  0% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  1% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  2% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  3% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  4% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  5% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  6% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  7% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  8% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  9% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  10% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  11% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  12% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  13% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  14% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  15% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  16% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  17% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  18% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  19% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  20% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  21% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  22% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  23% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  24% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  25% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  26% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  27% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  28% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  29% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  30% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  31% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  32% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  33% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  34% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  35% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  36% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  37% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  38% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  39% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  40% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  41% {
+    text-shadow: 50px 0 0 blue, -50px 0 0 lime;
+  }
+  42% {
+    text-shadow: 0 0 0 blue, 0 0 0 lime;
+  }
+  43% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  44% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  45% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  46% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  47% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  48% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  49% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  50% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  51% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  52% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  53% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  54% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  55% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  56% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  57% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  58% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  59% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  60% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  61% {
+    text-shadow: 30px 0 0 red, -30px 0 0 lime;
+  }
+  62% {
+    text-shadow: 0 0 0 red, 0 0 0 lime;
+  }
+  63% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  64% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  65% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  66% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 blue;
+  }
+  67% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  68% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  69% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  70% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  71% {
+    text-shadow: 70px 0 0 red, -70px 0 0 blue;
+  }
+  72% {
+    text-shadow: 0 0 0 red, 0 0 0 blue;
+  }
+  73% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  74% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  75% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  76% {
+    text-shadow: 1px 0 0 red, -1px 0 0 blue;
+  }
+  77% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  78% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  79% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  80% {
+    text-shadow: -1px 0 0 red, 1px 0 0 blue;
+  }
+  81% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  82% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  83% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  84% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  85% {
+    text-shadow: 0.5px 0 0 red, -0.5px 0 0 lime;
+  }
+  86% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  87% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  88% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  89% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  90% {
+    text-shadow: -1px 0 0 red, 1px 0 0 lime;
+  }
+  91% {
+    text-shadow: 60px 0 0 lime, -60px 0 0 blue;
+  }
+  92% {
+    text-shadow: 0 0 0 lime, 0 0 0 blue;
+  }
+  92% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  93% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  94% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  95% {
+    text-shadow: 0.7px 0 0 blue, -0.7px 0 0 lime;
+  }
+  96% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  97% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  98% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  99% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+  100% {
+    text-shadow: -1px 0 0 blue, 1px 0 0 lime;
+  }
+}
diff --git a/s/index.tpl.html b/s/index.tpl.html
index 83a6f45..5ebf5fb 100644
--- a/s/index.tpl.html
+++ b/s/index.tpl.html
@@ -6,7 +6,7 @@
   <link rel="stylesheet" type="text/css" href="./s/style.css">
 </head>
 <body>
-  <div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a></div>
+	<div class="navbar"><a href="/">f0ck.me</a> | <a href="/how">how to</a> | <a href="/contact">Contact</a>| <span id="themes"></span></div>
   <ul id="posts" data-last="{{ last }}">
     {% for item in items %}<li class="post"><a href="./{{ item.id }}" title="{{ item.mime }}"><img class="thumb" src="./t/{{ item.id }}.png" /></a></li>
     {% endfor %}
@@ -30,6 +30,7 @@
       }
     });
   });
+  <script src="js/theme.js"></script>
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/s/item.tpl.html b/s/item.tpl.html
index 61824b4..9317f46 100644
--- a/s/item.tpl.html
+++ b/s/item.tpl.html
@@ -45,6 +45,7 @@
       <span class="network">network: {{ usernetwork }}</span><br>
       <span class="timestamp">timestamp: {{ timestamp }}</span>
     </div>
+    <span id="themes"></span>
   </div>
   <script>
   function arrowKeys(e) {
@@ -76,6 +77,7 @@
   
 var x = document.getElementById("player");
     x.volume = 0.3;
+  <script src="js/theme.js"></script>
   </script>
 </body>
 </html>
diff --git a/s/js/theme.js b/s/js/theme.js
new file mode 100644
index 0000000..4d3b8a1
--- /dev/null
+++ b/s/js/theme.js
@@ -0,0 +1,118 @@
+var themes = [ {
+  file : 'cyber.css',
+  label : 'Cyber',
+  id : 'cyber'
+}, {
+  file : 'jungle.css',
+  label : 'Jungle',
+  id : 'jungle'
+} ];
+
+var customCss;
+var addedTheme;
+
+function updateCss() {
+
+  if (addedTheme) {
+    addedTheme.parentNode.removeChild(addedTheme);
+    addedTheme = null;
+  }
+
+  for (var i = 0; i < themes.length; i++) {
+    var theme = themes[i];
+
+    if (theme.id === localStorage.selectedTheme) {
+      addedTheme = theme.element;
+      document.head.insertBefore(theme.element, customCss);
+    }
+  }
+
+}
+
+if (!DISABLE_JS) {
+
+  for (var i = 0; i < document.head.children.length; i++) {
+    var element = document.head.children[i];
+
+    if (element.rel === 'stylesheet'
+        && element.href.indexOf('/custom.css') > -1) {
+
+      customCss = element;
+      break;
+    }
+
+  }
+
+  for (var i = 0; i < themes.length; i++) {
+    themes[i].element = document.createElement('link');
+    themes[i].element.type = 'text/css';
+    themes[i].element.rel = 'stylesheet';
+    themes[i].element.href = 'css/' + themes[i].file;
+  }
+
+  updateCss();
+
+  var postingLink = document.getElementById('themes');
+
+  if (postingLink) {
+
+    var divider = document.createElement('span');
+    divider.innerHTML = '/';
+
+    var referenceNode = postingLink.nextSibling;
+
+    postingLink.parentNode.insertBefore(divider, referenceNode);
+
+    var themeSelector = document.createElement('select');
+    themeSelector.id = 'themeSelector';
+
+    var vanillaOption = document.createElement('option');
+    vanillaOption.innerHTML = 'Default';
+    themeSelector.appendChild(vanillaOption);
+
+    for (i = 0; i < themes.length; i++) {
+
+      var theme = themes[i];
+
+      var themeOption = document.createElement('option');
+      themeOption.innerHTML = theme.label;
+
+      if (theme.id === localStorage.selectedTheme) {
+        themeOption.selected = true;
+      }
+
+      themeSelector.appendChild(themeOption);
+
+    }
+
+    themeSelector.onchange = function() {
+
+      if (!themeSelector.selectedIndex) {
+
+        if (localStorage.selectedTheme) {
+
+          delete localStorage.selectedTheme;
+
+          updateCss();
+        }
+
+        return;
+      }
+
+      var selectedTheme = themes[themeSelector.selectedIndex - 1];
+
+      if (selectedTheme.id === localStorage.selectedTheme) {
+        return;
+      }
+
+      localStorage.selectedTheme = selectedTheme.id;
+
+      updateCss();
+
+    };
+
+    postingLink.parentNode.insertBefore(themeSelector, referenceNode);
+
+  }
+
+}