Merge branch 'main' into gh-pages

internetisgone · Oct 15, 2024 · 017379a · 017379a
2 parents 51a9977 + be83b91
commit 017379a
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 20 deletions.
diff --git a/src/templates/v2/credits.html b/src/templates/v2/credits.html
@@ -20,7 +20,7 @@
 {% block body %}
 
 <style>
-    #credits-container {       
+    #credits-wrapper {       
         background-color: white; z-index: 10;
         padding-left: 30px; padding-right: 30px;
         overflow-y: auto;
@@ -31,8 +31,10 @@
     li {
         list-style: none;
         padding: 5px;
+        font-weight: bold;
     }
     li span {
+        font-weight: normal;
         float: right;
     }
     li:hover, li:hover a {
@@ -42,6 +44,11 @@
     p {
         line-height: 1.3;
     }
+    @media screen and (max-width: 500px)    {
+        body {
+            font-size: 12px;
+        }
+    }
 </style>
 
 <pre class="bg-ascii">
@@ -168,7 +175,7 @@
                   ..            .:=++**++=--::::::::::::..          .:-==+**########*+=-.                                                                     ..::---===+++++++++*****+++==----:::...                       
 </pre>
 
-<div id="credits-container">
+<div id="credits-wrapper">
     <ul>
         {% for artist in artists %}
         <li>

diff --git a/src/templates/v2/index.html b/src/templates/v2/index.html
@@ -236,8 +236,10 @@
         <audio id="cur-track"></audio>
 
         <div id="top-display">
-            <!-- <img id="cur-track-state"></img> -->
-            <div class="cur-time" id="big-cur-time">00:00</div>
+            <div>
+                <span id="cur-track-state"></span>
+                <span class="cur-time" id="big-cur-time">00:00</span>
+            </div>
             <div id="visualiser-wrapper">
                 <canvas id="visualiser"></canvas>
             </div>
@@ -377,7 +379,9 @@
 </div>
 
 <div id="credits-container">
-    <a href="/v2/credits.html" target="_blank">credits</a>
+    <a href="/v2/credits.html" target="_blank" style="text-decoration: none;">
+    <img src="/v2/img/lain-smol-blocks.png" style="width: 100px;">
+    </a>
 </div>
 
 <div id="icon-tray">

diff --git a/v2/credits.html b/v2/credits.html
@@ -42,7 +42,7 @@
 
 
 <style>
-    #credits-container {       
+    #credits-wrapper {       
         background-color: white; z-index: 10;
         padding-left: 30px; padding-right: 30px;
         overflow-y: auto;
@@ -53,8 +53,10 @@
     li {
         list-style: none;
         padding: 5px;
+        font-weight: bold;
     }
     li span {
+        font-weight: normal;
         float: right;
     }
     li:hover, li:hover a {
@@ -64,6 +66,11 @@
     p {
         line-height: 1.3;
     }
+    @media screen and (max-width: 500px)    {
+        body {
+            font-size: 12px;
+        }
+    }
 </style>
 
 <pre class="bg-ascii">
@@ -190,7 +197,7 @@
                   ..            .:=++**++=--::::::::::::..          .:-==+**########*+=-.                                                                     ..::---===+++++++++*****+++==----:::...                       
 </pre>
 
-<div id="credits-container">
+<div id="credits-wrapper">
     <ul>
 
         <li>

diff --git a/v2/img/lain-smol-blocks.png b/v2/img/lain-smol-blocks.png
diff --git a/v2/img/lain_even.png b/v2/img/lain_even.png
diff --git a/v2/img/music-player-display/pause-icon.png b/v2/img/music-player-display/pause-icon.png
diff --git a/v2/img/music-player-display/play-icon.png b/v2/img/music-player-display/play-icon.png
diff --git a/v2/img/music-player-display/stop-icon.png b/v2/img/music-player-display/stop-icon.png
diff --git a/v2/index.html b/v2/index.html
@@ -259,8 +259,10 @@
         <audio id="cur-track"></audio>
 
         <div id="top-display">
-            <!-- <img id="cur-track-state"></img> -->
-            <div class="cur-time" id="big-cur-time">00:00</div>
+            <div>
+                <span id="cur-track-state"></span>
+                <span class="cur-time" id="big-cur-time">00:00</span>
+            </div>
             <div id="visualiser-wrapper">
                 <canvas id="visualiser"></canvas>
             </div>
@@ -424,7 +426,9 @@
 </div>
 
 <div id="credits-container">
-    <a href="/v2/credits.html" target="_blank">credits</a>
+    <a href="/v2/credits.html" target="_blank" style="text-decoration: none;">
+    <img src="/v2/img/lain-smol-blocks.png" style="width: 100px;">
+    </a>
 </div>
 
 <div id="icon-tray">

diff --git a/v2/v2.css b/v2/v2.css
@@ -181,10 +181,13 @@ pre, input, button
     border-style: none dashed dashed none;
 }
 
+#cur-track-state {
+    font-size: 24px;
+    margin-left: 7px;
+}
 #big-cur-time {
     font-size: 17px;
     margin: 0;
-    margin-left: 7px;
     margin-top: 7px;
 }
 
@@ -445,17 +448,30 @@ pre, input, button
 }
 
 /* credits */
-#credits-container {
-    position: absolute; top: 20px; left: 20px;
+#credits {
+    position: absolute; bottom: -33px; right: 30px;
+    width: 120px; height: 100px;
+    text-decoration: none;
+    z-index: unset;
+    /* animation: peek 2s linear infinite; */
+}
+#credits:hover {
+    margin-bottom: 15px;
 }
 
-/* mobile / portrait display */
+/* @keyframes peek {
+    from { margin-bottom: 0; }
+    to { margin-bottom: 10px;}
+} */
 
-@media (max-aspect-ratio: 4/3) 
-{
-    /* .bg-ascii {
+/* mobile */
 
-    } */
+@media screen and (max-width: 500px)
+{
+    #credits {
+        top: 20px; left: 0px;
+    }
+
 	#icon-tray {
         bottom: 80px;
     }

diff --git a/v2/v2.js b/v2/v2.js
@@ -110,7 +110,7 @@ const TERMINAL_ART = [
 // *+-------              -------+* //
 
 const miniWindows = document.getElementsByClassName("mini-window")
-const icons = document.getElementsByClassName("icon")
+const  windowIcons = document.getElementsByClassName("icon")
 
 initMiniWindows()
 
@@ -120,7 +120,7 @@ function initMiniWindows() {
 		let miniWindow = new MiniWindow(
 			i,
 			miniWindows.item(i), 
-			icons.item(i), 
+			 windowIcons.item(i), 
 		)	
 		miniWindow.init()
 	}
@@ -140,6 +140,13 @@ const volSlider = document.getElementById("volume-slider")
 const progressBar = document.getElementById("progress-bar")
 const playhead = document.getElementById("progress-bar-playhead")
 
+const trackStateImg = document.getElementById("cur-track-state")
+const trackStateIcons = [
+    "&#x23F5;", // play
+    "&#x23F8;", // pause
+    "&#x23F9;", // stop
+]
+
 let curIndex = 0
 let marqueeId, marqueeDelayId
 let progressTimer
@@ -170,14 +177,17 @@ function loadTrack() {
 
 function playTrackV2() {
     _playTrack()
+    trackStateImg.innerHTML = trackStateIcons[0]
 }
 
 function pauseTrackV2() {
     _pauseTrack()
+    trackStateImg.innerHTML = trackStateIcons[1]
 }
 
 function stopTrackV2() {
     _stopTrack()
+    trackStateImg.innerHTML = trackStateIcons[2]
     resetProgress()
 }
 
@@ -597,6 +607,7 @@ window.onload = ()=>
 
     loadTrack()
     initTracklistClickEvent()
+    trackStateImg.innerHTML = trackStateIcons[2]
     curTrack.addEventListener("ended", nextTrackV2); 
     progressBar.addEventListener("click", setProgress)