Initial migration

2024-08-06 20:52:02 -04:00
parent 21a9ec3cf2
commit 9bcf3ddb60
15 changed files with 1508 additions and 0 deletions
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Now Playing</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            padding: 0;
+            background-color: #0f0f0f;
+            display: flex;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            flex-direction: column;
+        }
+        h1 {
+            color: #999;
+            font-size: 5vw;
+        }
+        span{
+            color:#999;
+            font-size: 1vw;
+            margin: 1vw;
+        }
+        #now-playing {
+            font-size: 3vw;
+            color: #007bff;
+        }
+        .progress-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            height: 5vh;
+            width: 75vw;
+        }
+
+        .progress-bar {
+            width: 100%;
+            background-color: #eee;
+            height: 2vh;
+            border-radius: 1vh;
+            overflow: hidden;
+        }
+
+        .progress {
+            height: 2vh;
+            background-color: #007BFF;
+            width: 0%;
+            border-radius: 1vh;
+            transition: width 0.5s ease;
+        }
+        #album-art {
+            /*width: 200px;  /* Adjust width as needed */
+            height: 20vh;  /* Maintain aspect ratio */
+            width: auto;
+            border-radius: 1vh;  /* Rounded corners */
+            margin-bottom: 1vh;  /* Space between the image and text */
+        }
+
+    </style>
+</head>
+<body>
+    <h1>Now Playing</h1>
+    <img id="album-art" src="mao.jpg" alt="Album Art">
+    <div id="now-playing">Nothing is playing</div>
+    <h1></h1>
+    <div class="progress-container">
+        <span id="current-time">0:00</span>
+        <div class="progress-bar">
+            <div class="progress" id="progress" style="width: 0%;"></div>
+        </div>
+        <span id="duration">4:00</span>
+    </div>
+    <script>
+        function fetchNowPlaying() {
+            fetch('/current')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('now-playing').textContent = data.title || 'Nothing is playing';
+                });
+        }
+        setInterval(fetchNowPlaying, 1000);
+        fetchNowPlaying();
+        function updateProgressBar(percentage) {
+        const progressBar = document.getElementById('progress');
+        progressBar.style.width = percentage + '%';
+    }
+
+    // Example: Update progress bar every second
+    setInterval(function() {
+        // This would be dynamic, typically set by the current play time over total duration
+        const currentTime = 60; // current time in seconds
+        const duration = 240; // total duration in seconds
+        const percentage = (currentTime / duration) * 100;
+        updateProgressBar(percentage);
+
+        // Update time display
+        document.getElementById('current-time').innerText = formatTime(currentTime);
+        document.getElementById('duration').innerText = formatTime(duration);
+    }, 1000);
+
+    function formatTime(seconds) {
+        const min = Math.floor(seconds / 60);
+        const sec = seconds % 60;
+        return `${min}:${sec < 10 ? '0' : ''}${sec}`;
+    }
+    </script>
+</body>
+</html>