🎉 First commit 1.0

2021-06-16 15:32:06 +02:00
commit 5a533d4d23
19 changed files with 2833 additions and 0 deletions
--- a/client/index.html
+++ b/client/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Websocket</title>
+
+  <script src="/libs/js/tinycolor-min.js" defer></script>
+  <script src="/libs/js/randojs.js" defer></script>
+
+  <script src="app.js" defer></script>
+  <link rel="stylesheet" href="app.css">
+  <style>
+    :root {
+      --playerWidth: 20rem;
+      --imgSize: 5rem;
+    }
+
+    #playing {
+      position: absolute;
+      bottom: .5rem;
+      left: .5rem;
+      width: var(--playerWidth);
+      padding: .5rem;
+      background-color: rgba(0, 0, 0, .5);
+      border-radius: .5rem;
+      display: flex;
+    }
+
+    #playing > div {
+      display: flex;
+      align-items: center;
+    }
+
+    #playing .previous {
+      animation: 1s translateLeft forwards;
+    }
+
+    #playing .next {
+      animation: 1s translateRight forwards;
+    }
+
+    @keyframes translateLeft {
+      from {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+      }
+
+      80%,
+      100% {
+        opacity: 0;
+      }
+      to {
+        transform: translate3d(-100%, 0, 0);
+      }
+    }
+
+    @keyframes translateRight {
+      from {
+        transform: translate3d(0, 0, 0);
+      }
+
+      0%,
+      10% {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+        transform: translate3d(-100%, 0, 0);
+      }
+    }
+
+    #playing img {
+      display: block;
+      width: var(--imgSize);
+      height: var(--imgSize);
+      margin-right: calc(var(--imgSize) / 5)
+    }
+
+    #playing h1,
+    #playing h2 {
+      width: calc(var(--playerWidth) - var(--imgSize) * 1.2 - 1em * 1.5);
+      margin: 0;
+      font-size: 1rem;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  </style>
+</head>
+<body>
+  <div id="playing" style="display: none !important">
+    <div>
+      <img class="coverArt" src="https://picsum.photos/id/248/300/300.jpg">
+      <div>
+        <h1 class="trackName">Track Name</h1>
+        <h2 class="trackArtist">Track Artist</h2>
+      </div>
+    </div>
+    <!-- <div class="previous">
+      <img class="coverArt" src="https://picsum.photos/id/141/300/300.jpg">
+      <div>
+        <h1 class="trackName">Name previous</h1>
+        <h2 class="trackArtist">Artist previous</h2>
+      </div>
+    </div>
+    <div class="next">
+      <img class="coverArt" src="https://picsum.photos/id/415/300/300.jpg">
+      <div>
+        <h1 class="trackName">Name next</h1>
+        <h2 class="trackArtist">Artist next</h2>
+      </div>
+    </div> -->
+  </div>
+</body>
+</html>