NOW I DONT SEE THE CONTROLS - Follow Up Deployment

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>iOS 18 Clock</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsmediatags/3.9.5/jsmediatags.min.js"></script>
     <style>
         @font-face {
             font-family: 'SF Pro Display';
@@ -19,9 +20,6 @@
             background-repeat: no-repeat;
             color: #fff;
             font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
             height: 100vh;
             margin: 0;
             -webkit-app-region: drag;
@@ -35,16 +33,41 @@
         <div id="date" class="clock-date">Monday, September 25</div>
     </div>
 
-    <button id="settings-button" style="position: fixed; bottom: 20px; right: 20px; background: rgba(30,30,30,0.7); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-app-region: no-drag;">
+    <button id="settings-button" style="position: fixed; bottom: 20px; right: 20px; background: rgba(30,30,30,0.7); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-app-region: no-drag; z-index: 100;">
         ️
     </button>
 
+    <div id="music-player" style="display: none; position: fixed; top: 300px; left: 50%; transform: translateX(-50%); background: transparent; padding: 10px; width: 250px; z-index: 50;">
+        <div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
+            <div id="album-art-container" style="width: 150px; height: 150px; margin-bottom: 10px;">
+                <img id="album-art" src="" style="width: 100%; height: 100%; object-fit: cover; border-radius: 10px;">
+            </div>
+            <div id="track-info" style="text-align: center; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.5);">
+                <div id="track-title" style="font-size: 18px; font-weight: bold;">No song playing</div>
+                <div id="track-artist" style="font-size: 14px; opacity: 0.8;">Upload a song to begin</div>
+            </div>
+            <div style="display: flex; align-items: center; gap: 15px; width: 100%; max-width: 400px;">
+                <span id="current-time">0:00</span>
+                <input type="range" id="progress-bar" style="flex-grow: 1;" min="0" max="100" value="0">
+                <span id="duration">0:00</span>
+            </div>
+            <div style="display: flex; justify-content: center; gap: 20px;">
+                <button id="prev-btn" style="background: none; border: none; color: white; font-size: 20px;">⏮</button>
+                <button id="play-btn" style="background: none; border: none; color: white; font-size: 30px;">▶</button>
+                <button id="next-btn" style="background: none; border: none; color: white; font-size: 20px;">⏭</button>
+            </div>
+        </div>
+    </div>
+
     <style>
         .clock-container {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
             display: flex;
-            flex-direction: column;
+            flex-direction: column-reverse;
             align-items: center;
-            padding-top: 40px;
             background-color: transparent;
             border-radius: 12px;
             padding: 20px;
@@ -56,12 +79,12 @@
             font-weight: 700;
             letter-spacing: -2px;
             opacity: 0.55;
+            margin-top: -8px;
         }
         
         .clock-date {
             font-size: 18px;
             font-weight: 600;
-            margin-top: -8px;
             letter-spacing: -0.3px;
             opacity: 0.55;
         }
@@ -74,6 +97,10 @@
             <button onclick="document.getElementById('wallpaper-input').click()" style="background: #2c2c2e; color: white; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer;">
                 Upload Wallpaper
             </button>
+            <input type="file" id="music-input" accept="audio/*" style="display: none;">
+            <button onclick="document.getElementById('music-input').click()" style="background: #2c2c2e; color: white; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; margin-left: 10px;">
+                Upload Music
+            </button>
             <button onclick="document.getElementById('settings-modal').style.display = 'none'" style="background: #2c2c2e; color: white; border: none; padding: 10px 15px; border-radius: 8px; cursor: pointer; margin-left: 10px;">
                 Close
             </button>
@@ -81,6 +108,76 @@
     </div>
 
     <script>
+        // Check if this is first visit and prompt for wallpaper
+        if (!localStorage.getItem('wallpaperSet')) {
+            setTimeout(() => {
+                document.getElementById('settings-modal').style.display = 'block';
+                localStorage.setItem('wallpaperSet', 'true');
+            }, 500);
+        }
+
+        const audio = new Audio();
+        let currentTrack = null;
+        let isPlaying = false;
+        
+        // Initialize player with empty state
+        document.getElementById('track-title').textContent = 'No song playing';
+        document.getElementById('track-artist').textContent = 'Upload a song to begin';
+        document.getElementById('album-art').src = '';
+        document.getElementById('music-player').style.display = 'none';
+
+        // Music player controls
+        document.getElementById('play-btn').addEventListener('click', function() {
+            if (!currentTrack) return;
+            
+            if (isPlaying) {
+                audio.pause();
+                document.getElementById('play-btn').textContent = '▶';
+            } else {
+                audio.play()
+                    .then(() => {
+                        document.getElementById('play-btn').textContent = '⏸';
+                    })
+                    .catch(error => {
+                        console.error('Playback failed:', error);
+                        alert('Playback failed. Please try again.');
+                    });
+            }
+            isPlaying = !isPlaying;
+        });
+
+        document.getElementById('progress-bar').addEventListener('input', function() {
+            if (currentTrack) {
+                const seekTime = (audio.duration * this.value) / 100;
+                audio.currentTime = seekTime;
+            }
+        });
+
+        audio.addEventListener('timeupdate', function() {
+            if (currentTrack) {
+                const progress = (audio.currentTime / audio.duration) * 100;
+                document.getElementById('progress-bar').value = progress;
+                document.getElementById('current-time').textContent = formatTime(audio.currentTime);
+            }
+        });
+
+        audio.addEventListener('loadedmetadata', function() {
+            if (currentTrack) {
+                document.getElementById('duration').textContent = formatTime(audio.duration);
+            }
+        });
+
+        audio.addEventListener('ended', function() {
+            document.getElementById('play-btn').textContent = '▶';
+            isPlaying = false;
+        });
+
+        function formatTime(seconds) {
+            const minutes = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
+        }
+
         let clickCount = 0;
         let clickTimer;
 
@@ -88,6 +185,126 @@
             document.getElementById('settings-modal').style.display = 'block';
         });
 
+        document.getElementById('music-input').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                // Reset player state
+                document.getElementById('track-title').textContent = file.name.replace(/\.[^/.]+$/, "");
+                document.getElementById('track-artist').textContent = 'Unknown Artist';
+                document.getElementById('album-art').src = '';
+                document.getElementById('music-player').style.display = 'block';
+                
+                currentTrack = file;
+                const url = URL.createObjectURL(file);
+                audio.src = url;
+                audio.load();
+                audio.play().catch(error => console.log('Autoplay prevented:', error));
+                document.getElementById('play-btn').textContent = '⏸';
+                isPlaying = true;
+                
+                // Read metadata
+                const reader = new FileReader();
+                reader.onload = function(event) {
+                    try {
+                        jsmediatags.read(file, {
+                            onSuccess: function(tag) {
+                                const tags = tag.tags;
+                                document.getElementById('track-title').textContent = tags.title || file.name.replace(/\.[^/.]+$/, "");
+                                document.getElementById('track-artist').textContent = tags.artist || 'Unknown Artist';
+                                
+                                if (tags.picture) {
+                                    const base64String = arrayBufferToBase64(tags.picture.data);
+                                    const imageUrl = `data:${tags.picture.format};base64,${base64String}`;
+                                    document.getElementById('album-art').src = imageUrl;
+                                } else {
+                                    document.getElementById('album-art').src = '';
+                                }
+                                
+                                document.getElementById('music-player').style.display = 'block';
+                                audio.play().catch(e => console.log('Autoplay prevented:', e));
+                                document.getElementById('play-btn').textContent = '⏸';
+                                isPlaying = true;
+                            },
+                            onError: function(error) {
+                                console.log('Error reading metadata:', error);
+                                document.getElementById('track-title').textContent = file.name.replace(/\.[^/.]+$/, "");
+                                document.getElementById('track-artist').textContent = 'Unknown Artist';
+                                document.getElementById('album-art').src = '';
+                                document.getElementById('music-player').style.display = 'block';
+                                audio.play().catch(e => console.log('Autoplay prevented:', e));
+                                document.getElementById('play-btn').textContent = '⏸';
+                                isPlaying = true;
+                            }
+                        });
+                    } catch (error) {
+                        console.log('Error processing file:', error);
+                        document.getElementById('track-title').textContent = file.name.replace(/\.[^/.]+$/, "");
+                        document.getElementById('track-artist').textContent = 'Unknown Artist';
+                        document.getElementById('album-art').src = '';
+                        document.getElementById('music-player').style.display = 'block';
+                        audio.play().catch(e => console.log('Autoplay prevented:', e));
+                        document.getElementById('play-btn').textContent = '⏸';
+                        isPlaying = true;
+                    }
+                };
+                reader.onerror = function() {
+                    console.log('FileReader error');
+                    document.getElementById('track-title').textContent = file.name.replace(/\.[^/.]+$/, "");
+                    document.getElementById('track-artist').textContent = 'Unknown Artist';
+                    document.getElementById('album-art').src = '';
+                    document.getElementById('music-player').style.display = 'block';
+                    audio.play().catch(e => console.log('Autoplay prevented:', e));
+                    document.getElementById('play-btn').textContent = '⏸';
+                    isPlaying = true;
+                };
+                reader.readAsArrayBuffer(file);
+            }
+        });
+
+        function arrayBufferToBase64(buffer) {
+            let binary = '';
+            const bytes = new Uint8Array(buffer);
+            for (let i = 0; i < bytes.byteLength; i++) {
+                binary += String.fromCharCode(bytes[i]);
+            }
+            return window.btoa(binary);
+        }
+
+        function setBackgroundFromImage(imageUrl) {
+            const img = new Image();
+            img.src = imageUrl;
+            img.onload = function() {
+                // Create a small canvas to analyze the image
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                canvas.width = 16;
+                canvas.height = 16;
+                ctx.drawImage(img, 0, 0, 16, 16);
+                
+                // Get dominant color
+                const pixelData = ctx.getImageData(0, 0, 16, 16).data;
+                let r = 0, g = 0, b = 0;
+                for (let i = 0; i < pixelData.length; i += 4) {
+                    r += pixelData[i];
+                    g += pixelData[i + 1];
+                    b += pixelData[i + 2];
+                }
+                r = Math.floor(r / (pixelData.length / 4));
+                g = Math.floor(g / (pixelData.length / 4));
+                b = Math.floor(b / (pixelData.length / 4));
+                
+                // Apply background with blur
+                document.body.style.background = `
+                    linear-gradient(rgba(${r}, ${g}, ${b}, 0.7), rgba(${r}, ${g}, ${b}, 0.9)),
+                    url(${imageUrl})
+                `;
+                document.body.style.backgroundSize = 'cover';
+                document.body.style.backgroundPosition = 'center';
+                document.body.style.backgroundRepeat = 'no-repeat';
+                document.body.style.backdropFilter = 'blur(20px)';
+            };
+        }
+
         document.getElementById('wallpaper-input').addEventListener('change', function(e) {
             const file = e.target.files[0];
             if (file) {
@@ -97,6 +314,7 @@
                     document.body.style.backgroundSize = 'cover';
                     document.body.style.backgroundPosition = 'center';
                     document.body.style.backgroundRepeat = 'no-repeat';
+                    localStorage.setItem('wallpaperSet', 'true');
                 };
                 reader.readAsDataURL(file);
             }