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,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simple Music Player</title>
+    <style>
+        .music-player {
+            width: 80%;
+            margin: auto;
+            padding: 20px;
+            font-family: Arial, sans-serif;
+        }
+
+        .info, .progress-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .progress-container {
+            position: relative;
+            height: 20px;
+        }
+
+        .progress-bar {
+            width: 100%;
+            background-color: #eee;
+            height: 8px;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+
+        .progress {
+            height: 8px;
+            background-color: #007BFF;
+            width: 0%;
+            border-radius: 4px;
+            transition: width 0.5s ease;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            padding: 20px;
+            background-color: #f0f0f0;
+        }
+    </style>
+</head>
+<body>
+<div class="music-player">
+    <div class="info">
+        <span id="song-title">Song Title</span>
+    </div>
+    <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>
+</div>
+
+<script>
+    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>