From 87b393435655a2dc5c3a3c8cb038eadfd95c1292 Mon Sep 17 00:00:00 2001
From: "Jill \"oatmealine\" Monoids" <oatmealine@disroot.org>
Date: Wed, 20 Oct 2021 08:48:08 +0300
Subject: [PATCH] split index.html into css and js

---
 public/index.css  | 400 +++++++++++++++++++++++++++++++++
 public/index.html | 556 +---------------------------------------------
 public/index.js   | 150 +++++++++++++
 3 files changed, 552 insertions(+), 554 deletions(-)
 create mode 100644 public/index.css
 create mode 100644 public/index.js

diff --git a/public/index.css b/public/index.css
new file mode 100644
index 0000000..eba7bed
--- /dev/null
+++ b/public/index.css
@@ -0,0 +1,400 @@
+@media (prefers-color-scheme: dark) {
+  * {
+    transition: 0.1s background-color ease-out;
+  }
+  body {
+    background-color: #0a0a0f;
+    color: #fff;
+  }
+  input {
+    background-color: #112;
+    color: #fff;
+    box-shadow: 0px 0px 15px #000;
+    border-bottom: 0rem solid  rgb(131, 131, 243);
+  }
+  input:focus, input:hover {
+    border-bottom: 0.25rem solid  rgb(131, 131, 243);
+    background-color: #161626;
+  }
+  .album {
+    background-color: #161627;
+    box-shadow: 0px 0px 12px #000;
+    border-left: 0rem solid rgb(131, 131, 243);
+  }
+  .album:hover {
+    border-left: 0.25rem solid rgb(131, 131, 243);
+    background-color: #181829;
+  }
+  .small {
+    color: #888;
+  }
+  .album-image {
+    border: 0px solid rgb(131, 131, 243);
+    box-shadow: 0px 0px 15px #000;
+  }
+  .album:hover .album-image {
+    border: 2px solid rgb(131, 131, 243);
+    box-shadow: 0px 0px 30px #000;
+  }
+  .album-image-wrapper {
+    border: 2px solid rgba(0, 0, 0, 0);
+  }
+  .album:hover .album-image-wrapper {
+    border: 0px solid rgba(0, 0, 0, 0);
+  }
+  .link {
+    color:rgb(131, 131, 243);
+  }
+  .link:hover {
+    color: rgb(151, 151, 263);
+  }
+  .album-download {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+  .album-download:hover {
+    filter: invert(100%) sepia(100%) saturate(800%) brightness(70%) hue-rotate(180deg);
+  }
+  .lds-ring div {
+    border: 8px solid #fff;
+    border-color: #fff transparent transparent transparent;
+  }
+  #progress-bar {
+    background-color: #161627;
+  }
+  #progress-bar-inner {
+    background-color: rgb(131, 131, 243);
+  }
+  .album-bottom {
+    background-color: #112;
+    border-left: 0rem solid rgb(131, 131, 243);
+  }
+  .album:hover .album-bottom {
+    border-left: 0.25rem solid rgb(131, 131, 243);
+  }
+  .track {
+    border-bottom: 3px solid #0a0a0f;
+    border-left: 0rem solid rgb(131, 131, 243);
+  }
+  .track:hover {
+    background-color: #161627;
+    border-left: 0.25rem solid rgb(131, 131, 243);
+  }
+  .slider {
+    background-color: rgb(131, 131, 243);
+  }
+}
+@media (prefers-color-scheme: light) {
+  body {
+    background-color: #f0f0f0;
+    color: #1e1e2d;
+  }
+  input {
+    background-color: #fafafa;
+    color: #1e1e2d;
+    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+    border-bottom: 0rem solid  #ea74ac;
+  }
+  input:focus, input:hover {
+    border-bottom: 0.25rem solid  #ea74ac;
+    background-color: #e8e8e8;
+  }
+  .album {
+    background-color: #ffffff;
+    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
+    border-left: 0rem solid #ea74ac;
+  }
+  .album:hover {
+    border-left: 0.25rem solid #ea74ac;
+    background-color: #fafafa;
+  }
+  .small {
+    color: #c8c8d2;
+  }
+  .album-image {
+    border: 0px solid #ea74ac;
+    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+  }
+  .album:hover .album-image {
+    border: 2px solid #ea74ac;
+    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
+  }
+  .album-image-wrapper {
+    border: 2px solid rgba(0, 0, 0, 0);
+  }
+  .album:hover .album-image-wrapper {
+    border: 0px solid rgba(0, 0, 0, 0);
+  }
+  .link {
+    color:#ea74ac;
+  }
+  .link:hover {
+    color: #f484b6;
+  }
+  .album-download {
+    filter: invert(0%) hue-rotate(276deg);
+  }
+  .album-download:hover {
+    filter: invert(100%) sepia(100%) saturate(2000%) brightness(70%) hue-rotate(276deg);
+  }
+  .lds-ring div {
+    border: 8px solid #1e1e2d;
+    border-color: #1e1e2d transparent transparent transparent;
+  }
+  #progress-bar {
+    background-color: #fafafa;
+  }
+  #progress-bar-inner {
+    background-color: #ea74ac;
+  }
+  .album-bottom {
+    background-color: #fafafa;
+    border-left: 0rem solid #ea74ac;
+  }
+  .album:hover .album-bottom {
+    border-left: 0.25rem solid #ea74ac;
+  }
+  .track {
+    border-bottom: 3px solid #f0f0f0;
+    border-left: 0rem solid #ea74ac;
+  }
+  .track:hover {
+    background-color: #e8e8e8;
+    border-left: 0.25rem solid #ea74ac;
+  }
+  .slider {
+    background-color: #ea74ac;
+  }
+  #git {
+    filter: invert(100%);
+  }
+}
+
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+#main {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+input {
+  margin: 5px;
+  width: 550px;
+  max-width: 98%;
+  padding: 15px;
+  font-size: x-large;
+  border: none;
+  border-radius: 7px;
+  transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
+}
+
+.album {
+  padding: 15px;
+  margin: 2px;
+  font-size: large;
+  border-radius: 10px 10px 0px 0px;
+  transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
+  height: 96px;
+}
+.small {
+  font-size: medium;
+}
+.big {
+  font-weight: bold;
+}
+
+#albums {
+  margin-top: 20px;
+  width: 600px;
+  max-width: 98%;
+}
+#progress {
+  width: 600px;
+  max-width: 98%;
+}
+.album-image {
+  width: auto;
+  height: 100%;
+  border-radius: 10px;
+  transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
+  margin: none;
+  padding: none;
+}
+.album-image-wrapper {
+  transition: 0.1s border ease-out;
+  float: right;
+  max-height: 100%;
+  width: 96px;
+  padding: none;
+  margin: none;
+}
+.link {
+  cursor: pointer;
+  transition: 0.1s color ease-out;
+}
+.album-download {
+  position: relative;
+  top: 20px;
+  width: 32px;
+  height: 32px;
+  cursor: pointer;
+  transition: 0.1s filter ease-out;
+}
+.lds-ring {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#progress-bar {
+  border-radius: 10px;
+  width: 100%;
+  height: 12px;
+}
+#progress-bar-inner {
+  border-radius: 10px;
+}
+
+.album-bottom {
+  padding: 0px;
+  margin-left: 2px;
+  margin-right: 2px;
+  border-radius: 0px 0px 10px 10px;
+  transition: 0.1s border-left ease-out;
+}
+.track {
+  padding: 10px;
+  padding-top: 6px;
+  padding-bottom: 6px;
+  margin: none;
+  display: flex;
+  justify-content: space-between;
+  font-size: large;
+  transition: 0.05s background-color ease-out, 0.1s border-left ease-out;
+}
+.track:nth-last-child(1) {
+  border-bottom: none;
+  border-radius: 0px 0px 15px 15px;
+}
+
+.track .album-download {
+  vertical-align: top;
+}
+
+.track-download-wrapper {
+  position: relative;
+  bottom: 20px;
+  height: 50%;
+  width: auto;
+}
+
+#header {
+  display: flex;
+  align-items: left;
+  justify-content: left;
+  flex-direction: row;
+}
+#header > * {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+#header .link {
+  font-size: x-large;
+  text-decoration: none;
+}
+#header img {
+  position: relative;
+  top: 5px;
+}
+
+ /* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+#header-left {
+  width: 100%;
+}
+#header-left > * {
+  margin-right: 16px;
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 0162508..d4c2a0b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,560 +4,8 @@
     <title>deemix.oat.zone</title>
     <meta name="viewport" content="width=device-width">
 		<script src="https://cdn.jsdelivr.net/npm/axios@0.20.0/dist/axios.min.js"></script>
-    <script>
-      window.onload = () => {
-        const placeholders = [
-          'xilent - we are dust',
-          'joyryde - brave',
-          'phaseone - the risen ep',
-          'blanke & godlands - hellraiser',
-          'camellia - blackmagik blazing',
-          't+pazolite - without permission',
-          'the brig - vindicate',
-          'bossfight - next wave'
-        ];
-
-        function download(url) {
-          console.log(url);
-          fetch(url)
-            .then(response => response.blob())
-            .then(blob => {
-              const link = document.createElement("a");
-              link.href = URL.createObjectURL(blob);
-              link.download = url.split('/').pop();
-              link.target = '_blank';
-              link.click();
-          })
-          .catch(console.error);
-        }
-
-        function formatTime(s) {
-          return Math.floor(s / 60).toString().padStart(2, '0') + ':' + (s % 60).toString().padStart(2, '0');
-        }
-
-        // this is literally a find replace in the css
-        function setTheme(theme) {
-          Array.from(document.styleSheets).map(e => {
-            try {
-              return Array.from(e.cssRules)
-            } catch (e) {
-              return []
-            }
-          }).flat().map(e => {
-            if (e.constructor != CSSMediaRule) return;
-            if (e.originalConditionText) e.conditionText = e.originalConditionText;
-            else e.originalConditionText = e.conditionText
-            if (theme == "system") return
-            let match = e.conditionText.match(/prefers-color-scheme:\s*(light|dark)/i)
-            if (!match) return;
-            e.conditionText = e.conditionText.replace(match[0], (match[1].toLowerCase() == theme ? 'min' : 'max') + '-width: 0')
-          });
-        }
-
-        // dirty theme hacks :tm:
-
-        const color = window.getComputedStyle(document.querySelector('body')).getPropertyValue('color');
-        const rgbRegex = /rgb\((\d+), ?(\d+), ?(\d+)\)/;
-        const r = rgbRegex.exec(color);
-
-        let brightness = (Number(r[1]) + Number(r[2]) + Number(r[3])) / (255 * 3);
-
-        if (brightness > 0.5) { // light text, dark theme
-          document.getElementById('theme-switch').checked = true
-        } else { // dark text, light theme
-          document.getElementById('theme-switch').checked = false
-        }
-
-        document.getElementById('theme-switch').addEventListener('click', () => {
-          setTheme(document.getElementById('theme-switch').checked ? 'dark' : 'light');
-        });
-
-        const search = document.getElementById('album-search');
-        search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
-
-        async function change(e) {
-          const value = document.getElementById('album-search').value;
-          if (value === '') return document.getElementById('albums').innerHTML = '';
-          document.getElementById('progress-album').innerHTML = '';
-          document.getElementById('progress-bar-wrapper').innerHTML = '';
-          document.getElementById('albums').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
-          const d = await axios.get('/api/search', {params: {search: value}});
-          document.getElementById('albums').innerHTML = d.data.map(d =>
-            `<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
-          ).join('<br>');
-
-          if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>';
-
-          for (c of document.getElementById('albums').children) {
-            if (c.children[5]) {
-              let id = c.id.split('-')[1];
-              c.children[5].onclick = (a) => {
-                let coverArt
-                document.getElementById('albums').innerHTML = '';
-                document.getElementById('progress-album').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
-                const ws = new WebSocket('wss://deemix.oat.zone/api/album?id=' + id);
-                ws.onmessage = (m) => {
-                  const d = JSON.parse(m.data);
-
-                  if (d.key === 'downloadInfo') {
-                    document.getElementById('progress-album').innerHTML = `<div class="album" id="album-${d.data.data.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${d.data.data.title}</span><br><span class="small">by ${d.data.data.artist}</span><br><span class="small" id="progress-state">${d.data.state}</span></div>`;
-                  } else if (d.key === 'updateQueue') {
-                    if (d.data.progress) {
-                      document.getElementById('progress-bar-wrapper').innerHTML = `<br><div id="progress-bar"><div id="progress-bar-inner" style="height:100%;width:${d.data.progress}%"></div></div>`
-                    }
-                  } else if (d.key === 'coverArt') {
-                    coverArt = d.data;
-                  } else if (d.key === 'download') {
-                    download(d.data);
-                  }
-                }
-              }
-            }
-            let id = c.id.split('-')[1];
-            if (document.getElementById('album-bottom-' + id)) {
-              document.getElementById('album-bottom-' + id).innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
-              const album = await axios.get('/api/album', {params: {id: id}});
-              document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
-                `<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></span> ${formatTime(d.duration)}</span></div>`
-              ).join('');
-              for (track of document.getElementById('album-bottom-' + id).children) {
-                let trackId = track.id.split('-')[1];
-                track.children[1].children[0].onclick = () => {
-                  console.log(trackId);
-
-                  let coverArt
-                  document.getElementById('albums').innerHTML = '';
-                  document.getElementById('progress-album').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
-                  const ws = new WebSocket('wss://deemix.oat.zone/api/track?id=' + trackId);
-                  ws.onmessage = (m) => {
-                    const d = JSON.parse(m.data);
-                    console.log(d);
-
-                    if (d.key === 'downloadInfo') {
-                      document.getElementById('progress-album').innerHTML = `<div class="album" id="album-${d.data.data.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${d.data.data.title}</span><br><span class="small">by ${d.data.data.artist}</span><br><span class="small" id="progress-state">${d.data.state}</span></div>`;
-                    } else if (d.key === 'updateQueue') {
-                      if (d.data.progress) {
-                        document.getElementById('progress-bar-wrapper').innerHTML = `<br><div id="progress-bar"><div id="progress-bar-inner" style="height:100%;width:${d.data.progress}%"></div></div>`
-                      }
-                    } else if (d.key === 'coverArt') {
-                      coverArt = d.data;
-                    } else if (d.key === 'download') {
-                      download(d.data);
-                    } else if (d.key === 'finishDownload') {
-                      change();
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        search.addEventListener('change', change);
-      };
-    </script>
-    <style>
-      @media (prefers-color-scheme: dark) {
-        * {
-          transition: 0.1s background-color ease-out;
-        }
-        body {
-          background-color: #0a0a0f;
-          color: #fff;
-        }
-        input {
-          background-color: #112;
-          color: #fff;
-          box-shadow: 0px 0px 15px #000;
-          border-bottom: 0rem solid  rgb(131, 131, 243);
-        }
-        input:focus, input:hover {
-          border-bottom: 0.25rem solid  rgb(131, 131, 243);
-          background-color: #161626;
-        }
-        .album {
-          background-color: #161627;
-          box-shadow: 0px 0px 12px #000;
-          border-left: 0rem solid rgb(131, 131, 243);
-        }
-        .album:hover {
-          border-left: 0.25rem solid rgb(131, 131, 243);
-          background-color: #181829;
-        }
-        .small {
-          color: #888;
-        }
-        .album-image {
-          border: 0px solid rgb(131, 131, 243);
-          box-shadow: 0px 0px 15px #000;
-        }
-        .album:hover .album-image {
-          border: 2px solid rgb(131, 131, 243);
-          box-shadow: 0px 0px 30px #000;
-        }
-        .album-image-wrapper {
-          border: 2px solid rgba(0, 0, 0, 0);
-        }
-        .album:hover .album-image-wrapper {
-          border: 0px solid rgba(0, 0, 0, 0);
-        }
-        .link {
-          color:rgb(131, 131, 243);
-        }
-        .link:hover {
-          color: rgb(151, 151, 263);
-        }
-        .album-download {
-          filter: invert(100%) hue-rotate(180deg);
-        }
-        .album-download:hover {
-          filter: invert(100%) sepia(100%) saturate(800%) brightness(70%) hue-rotate(180deg);
-        }
-        .lds-ring div {
-          border: 8px solid #fff;
-          border-color: #fff transparent transparent transparent;
-        }
-        #progress-bar {
-          background-color: #161627;
-        }
-        #progress-bar-inner {
-          background-color: rgb(131, 131, 243);
-        }
-        .album-bottom {
-          background-color: #112;
-          border-left: 0rem solid rgb(131, 131, 243);
-        }
-        .album:hover .album-bottom {
-          border-left: 0.25rem solid rgb(131, 131, 243);
-        }
-        .track {
-          border-bottom: 3px solid #0a0a0f;
-          border-left: 0rem solid rgb(131, 131, 243);
-        }
-        .track:hover {
-          background-color: #161627;
-          border-left: 0.25rem solid rgb(131, 131, 243);
-        }
-        .slider {
-          background-color: rgb(131, 131, 243);
-        }
-      }
-      @media (prefers-color-scheme: light) {
-        body {
-          background-color: #f0f0f0;
-          color: #1e1e2d;
-        }
-        input {
-          background-color: #fafafa;
-          color: #1e1e2d;
-          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-          border-bottom: 0rem solid  #ea74ac;
-        }
-        input:focus, input:hover {
-          border-bottom: 0.25rem solid  #ea74ac;
-          background-color: #e8e8e8;
-        }
-        .album {
-          background-color: #ffffff;
-          box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
-          border-left: 0rem solid #ea74ac;
-        }
-        .album:hover {
-          border-left: 0.25rem solid #ea74ac;
-          background-color: #fafafa;
-        }
-        .small {
-          color: #c8c8d2;
-        }
-        .album-image {
-          border: 0px solid #ea74ac;
-          box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-        }
-        .album:hover .album-image {
-          border: 2px solid #ea74ac;
-          box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
-        }
-        .album-image-wrapper {
-          border: 2px solid rgba(0, 0, 0, 0);
-        }
-        .album:hover .album-image-wrapper {
-          border: 0px solid rgba(0, 0, 0, 0);
-        }
-        .link {
-          color:#ea74ac;
-        }
-        .link:hover {
-          color: #f484b6;
-        }
-        .album-download {
-          filter: invert(0%) hue-rotate(276deg);
-        }
-        .album-download:hover {
-          filter: invert(100%) sepia(100%) saturate(2000%) brightness(70%) hue-rotate(276deg);
-        }
-        .lds-ring div {
-          border: 8px solid #1e1e2d;
-          border-color: #1e1e2d transparent transparent transparent;
-        }
-        #progress-bar {
-          background-color: #fafafa;
-        }
-        #progress-bar-inner {
-          background-color: #ea74ac;
-        }
-        .album-bottom {
-          background-color: #fafafa;
-          border-left: 0rem solid #ea74ac;
-        }
-        .album:hover .album-bottom {
-          border-left: 0.25rem solid #ea74ac;
-        }
-        .track {
-          border-bottom: 3px solid #f0f0f0;
-          border-left: 0rem solid #ea74ac;
-        }
-        .track:hover {
-          background-color: #e8e8e8;
-          border-left: 0.25rem solid #ea74ac;
-        }
-        .slider {
-          background-color: #ea74ac;
-        }
-        #git {
-          filter: invert(100%);
-        }
-      }
-
-      body {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      }
-
-      #main {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-      }
-
-      input {
-        margin: 5px;
-        width: 550px;
-        max-width: 98%;
-        padding: 15px;
-        font-size: x-large;
-        border: none;
-        border-radius: 7px;
-        transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
-      }
-
-      .album {
-        padding: 15px;
-        margin: 2px;
-        font-size: large;
-        border-radius: 10px 10px 0px 0px;
-        transition: 0.1s border-left ease-out, 0.1s background-color ease-in-out;
-        height: 96px;
-      }
-      .small {
-        font-size: medium;
-      }
-      .big {
-        font-weight: bold;
-      }
-
-      #albums {
-        margin-top: 20px;
-        width: 600px;
-        max-width: 98%;
-      }
-      #progress {
-        width: 600px;
-        max-width: 98%;
-      }
-      .album-image {
-        width: auto;
-        height: 100%;
-        border-radius: 10px;
-        transition: 0.1s border ease-out, 0.1s box-shadow ease-out;
-        margin: none;
-        padding: none;
-      }
-      .album-image-wrapper {
-        transition: 0.1s border ease-out;
-        float: right;
-        max-height: 100%;
-        width: 96px;
-        padding: none;
-        margin: none;
-      }
-      .link {
-        cursor: pointer;
-        transition: 0.1s color ease-out;
-      }
-      .album-download {
-        position: relative;
-        top: 20px;
-        width: 32px;
-        height: 32px;
-        cursor: pointer;
-        transition: 0.1s filter ease-out;
-      }
-      .lds-ring {
-        display: inline-block;
-        position: relative;
-        width: 80px;
-        height: 80px;
-      }
-      .lds-ring div {
-        box-sizing: border-box;
-        display: block;
-        position: absolute;
-        width: 64px;
-        height: 64px;
-        margin: 8px;
-        border-radius: 50%;
-        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-      }
-      .lds-ring div:nth-child(1) {
-        animation-delay: -0.45s;
-      }
-      .lds-ring div:nth-child(2) {
-        animation-delay: -0.3s;
-      }
-      .lds-ring div:nth-child(3) {
-        animation-delay: -0.15s;
-      }
-      @keyframes lds-ring {
-        0% {
-          transform: rotate(0deg);
-        }
-        100% {
-          transform: rotate(360deg);
-        }
-      }
-
-      #progress-bar {
-        border-radius: 10px;
-        width: 100%;
-        height: 12px;
-      }
-      #progress-bar-inner {
-        border-radius: 10px;
-      }
-
-      .album-bottom {
-        padding: 0px;
-        margin-left: 2px;
-        margin-right: 2px;
-        border-radius: 0px 0px 10px 10px;
-        transition: 0.1s border-left ease-out;
-      }
-      .track {
-        padding: 10px;
-        padding-top: 6px;
-        padding-bottom: 6px;
-        margin: none;
-        display: flex;
-        justify-content: space-between;
-        font-size: large;
-        transition: 0.05s background-color ease-out, 0.1s border-left ease-out;
-      }
-      .track:nth-last-child(1) {
-        border-bottom: none;
-        border-radius: 0px 0px 15px 15px;
-      }
-
-      .track .album-download {
-        vertical-align: top;
-      }
-
-      .track-download-wrapper {
-        position: relative;
-        bottom: 20px;
-        height: 50%;
-        width: auto;
-      }
-
-      #header {
-        display: flex;
-        align-items: left;
-        justify-content: left;
-        flex-direction: row;
-      }
-      #header > * {
-        margin-left: 12px;
-        margin-right: 12px;
-      }
-      #header .link {
-        font-size: x-large;
-        text-decoration: none;
-      }
-      #header img {
-        position: relative;
-        top: 5px;
-      }
-
-       /* The switch - the box around the slider */
-      .switch {
-        position: relative;
-        display: inline-block;
-        width: 60px;
-        height: 34px;
-      }
-
-      /* Hide default HTML checkbox */
-      .switch input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-      }
-
-      /* The slider */
-      .slider {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        -webkit-transition: .4s;
-        transition: .4s;
-      }
-
-      .slider:before {
-        position: absolute;
-        content: "";
-        height: 26px;
-        width: 26px;
-        left: 4px;
-        bottom: 4px;
-        background-color: white;
-        -webkit-transition: .4s;
-        transition: .4s;
-      }
-
-      input:checked + .slider:before {
-        -webkit-transform: translateX(26px);
-        -ms-transform: translateX(26px);
-        transform: translateX(26px);
-      }
-
-      /* Rounded sliders */
-      .slider.round {
-        border-radius: 34px;
-      }
-
-      .slider.round:before {
-        border-radius: 50%;
-      }
-
-      #header-left {
-        width: 100%;
-      }
-      #header-left > * {
-        margin-right: 16px;
-      }
-    </style>
+    <script src="index.js"></script>
+    <link href="index.css" rel="stylesheet">
   </head>
   <body>
     <div id="header">
diff --git a/public/index.js b/public/index.js
new file mode 100644
index 0000000..c352d8c
--- /dev/null
+++ b/public/index.js
@@ -0,0 +1,150 @@
+function download(url) {
+  console.log(url);
+  fetch(url)
+    .then(response => response.blob())
+    .then(blob => {
+      const link = document.createElement("a");
+      link.href = URL.createObjectURL(blob);
+      link.download = url.split('/').pop();
+      link.target = '_blank';
+      link.click();
+  })
+  .catch(console.error);
+}
+
+function formatTime(s) {
+  return Math.floor(s / 60).toString().padStart(2, '0') + ':' + (s % 60).toString().padStart(2, '0');
+}
+
+// this is literally a find replace in the css
+function setTheme(theme) {
+  Array.from(document.styleSheets).map(e => {
+    try {
+      return Array.from(e.cssRules)
+    } catch (e) {
+      return []
+    }
+  }).flat().map(e => {
+    if (e.constructor != CSSMediaRule) return;
+    if (e.originalConditionText) e.conditionText = e.originalConditionText;
+    else e.originalConditionText = e.conditionText
+    if (theme == "system") return
+    let match = e.conditionText.match(/prefers-color-scheme:\s*(light|dark)/i)
+    if (!match) return;
+    e.conditionText = e.conditionText.replace(match[0], (match[1].toLowerCase() == theme ? 'min' : 'max') + '-width: 0')
+  });
+}
+
+window.onload = () => {
+  // dirty theme hacks :tm:
+
+  const color = window.getComputedStyle(document.querySelector('body')).getPropertyValue('color');
+  const rgbRegex = /rgb\((\d+), ?(\d+), ?(\d+)\)/;
+  const r = rgbRegex.exec(color);
+
+  let brightness = (Number(r[1]) + Number(r[2]) + Number(r[3])) / (255 * 3);
+
+  if (brightness > 0.5) { // light text, dark theme
+    document.getElementById('theme-switch').checked = true
+  } else { // dark text, light theme
+    document.getElementById('theme-switch').checked = false
+  }
+
+  document.getElementById('theme-switch').addEventListener('click', () => {
+    setTheme(document.getElementById('theme-switch').checked ? 'dark' : 'light');
+  });
+
+  const placeholders = [
+    'xilent - we are dust',
+    'joyryde - brave',
+    'phaseone - the risen ep',
+    'blanke & godlands - hellraiser',
+    'camellia - blackmagik blazing',
+    't+pazolite - without permission',
+    'the brig - vindicate',
+    'bossfight - next wave'
+  ];
+
+  const search = document.getElementById('album-search');
+  search.setAttribute('placeholder', placeholders[Math.floor(Math.random() * placeholders.length)]);
+
+  async function change() {
+    const value = document.getElementById('album-search').value;
+    if (value === '') return document.getElementById('albums').innerHTML = '';
+    document.getElementById('progress-album').innerHTML = '';
+    document.getElementById('progress-bar-wrapper').innerHTML = '';
+    document.getElementById('albums').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
+    const d = await axios.get('/api/search', {params: {search: value}});
+    document.getElementById('albums').innerHTML = d.data.map(d =>
+      `<div class="album" id="album-${d.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="https://e-cdns-images.dzcdn.net/images/cover/${d.cover}/128x128-000000-80-0-0.jpg"></span><span class="big">${d.title}</span><br><span class="small">by ${d.artist.name}</span><br><img class="album-download" width="48" height="48" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></div><div class="album-bottom" id="album-bottom-${d.id}"></div>`
+    ).join('<br>');
+
+    if (d.data.length === 0) return document.getElementById('albums').innerHTML = '<span class="small">Not found!</span>';
+
+    for (c of document.getElementById('albums').children) {
+      if (c.children[5]) {
+        let id = c.id.split('-')[1];
+        c.children[5].onclick = (a) => {
+          let coverArt
+          document.getElementById('albums').innerHTML = '';
+          document.getElementById('progress-album').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
+          const ws = new WebSocket('wss://deemix.oat.zone/api/album?id=' + id);
+          ws.onmessage = (m) => {
+            const d = JSON.parse(m.data);
+
+            if (d.key === 'downloadInfo') {
+              document.getElementById('progress-album').innerHTML = `<div class="album" id="album-${d.data.data.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${d.data.data.title}</span><br><span class="small">by ${d.data.data.artist}</span><br><span class="small" id="progress-state">${d.data.state}</span></div>`;
+            } else if (d.key === 'updateQueue') {
+              if (d.data.progress) {
+                document.getElementById('progress-bar-wrapper').innerHTML = `<br><div id="progress-bar"><div id="progress-bar-inner" style="height:100%;width:${d.data.progress}%"></div></div>`
+              }
+            } else if (d.key === 'coverArt') {
+              coverArt = d.data;
+            } else if (d.key === 'download') {
+              download(d.data);
+            }
+          }
+        }
+      }
+      let id = c.id.split('-')[1];
+      if (document.getElementById('album-bottom-' + id)) {
+        document.getElementById('album-bottom-' + id).innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
+        const album = await axios.get('/api/album', {params: {id: id}});
+        document.getElementById('album-bottom-' + id).innerHTML = album.data.tracks.map(d =>
+          `<div class="track" id="track-${d.id}"><span>${d.artist} - ${d.title}</span><span><span class="track-download-wrapper"><img class="album-download" width="32" height="32" src="https://img.icons8.com/material-sharp/48/000000/download--v1.png"></span> ${formatTime(d.duration)}</span></div>`
+        ).join('');
+        for (track of document.getElementById('album-bottom-' + id).children) {
+          let trackId = track.id.split('-')[1];
+          track.children[1].children[0].onclick = () => {
+            console.log(trackId);
+
+            let coverArt
+            document.getElementById('albums').innerHTML = '';
+            document.getElementById('progress-album').innerHTML = '<div class="lds-ring"><div></div><div></div><div></div><div></div></div>';
+            const ws = new WebSocket('wss://deemix.oat.zone/api/track?id=' + trackId);
+            ws.onmessage = (m) => {
+              const d = JSON.parse(m.data);
+              console.log(d);
+
+              if (d.key === 'downloadInfo') {
+                document.getElementById('progress-album').innerHTML = `<div class="album" id="album-${d.data.data.id}"><span class="album-image-wrapper"><img class="album-image" width="128" height="128" src="${coverArt}"></span><span class="big">${d.data.data.title}</span><br><span class="small">by ${d.data.data.artist}</span><br><span class="small" id="progress-state">${d.data.state}</span></div>`;
+              } else if (d.key === 'updateQueue') {
+                if (d.data.progress) {
+                  document.getElementById('progress-bar-wrapper').innerHTML = `<br><div id="progress-bar"><div id="progress-bar-inner" style="height:100%;width:${d.data.progress}%"></div></div>`
+                }
+              } else if (d.key === 'coverArt') {
+                coverArt = d.data;
+              } else if (d.key === 'download') {
+                download(d.data);
+              } else if (d.key === 'finishDownload') {
+                change();
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  search.addEventListener('change', change);
+};
\ No newline at end of file