Spaces:

jk12p
/

togethertunes

Running

App Files Files Community

jk12p commited on Apr 12, 2025

Commit

40db71e

verified ·

1 Parent(s): 809496a

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +692 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Togethertunes
-emoji: 🏃
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: togethertunes
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,692 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TogetherTunes - Music Player for Couples</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            height: 100vh;
+            overflow: hidden;
+        }
+        .heart-beat {
+            animation: heartbeat 1.5s infinite;
+        }
+        @keyframes heartbeat {
+            0% { transform: scale(1); }
+            25% { transform: scale(1.1); }
+            50% { transform: scale(1); }
+            75% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .progress-bar {
+            height: 4px;
+            background: #e2e8f0;
+            border-radius: 2px;
+            cursor: pointer;
+        }
+        .progress {
+            height: 100%;
+            background: #f43f5e;
+            border-radius: 2px;
+            transition: width 0.1s linear;
+        }
+        .album-art {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s ease;
+        }
+        .album-art:hover {
+            transform: scale(1.05);
+        }
+        .song-item.active {
+            background-color: #fecdd3;
+        }
+        .song-item:hover:not(.active) {
+            background-color: #f8fafc;
+        }
+        .rotate {
+            animation: rotation 10s infinite linear;
+        }
+        @keyframes rotation {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(359deg); }
+        }
+        #partnerStatus {
+            transition: all 0.3s ease;
+        }
+        .partner-connected {
+            background-color: #bbf7d0;
+            border-color: #4ade80;
+        }
+        .partner-disconnected {
+            background-color: #fee2e2;
+            border-color: #f87171;
+        }
+        .typing-indicator {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: #f43f5e;
+            margin-right: 4px;
+            animation: typingAnimation 1.4s infinite ease-in-out;
+        }
+        .typing-indicator:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes typingAnimation {
+            0%, 60%, 100% { transform: translateY(0); }
+            30% { transform: translateY(-5px); }
+        }
+    </style>
+</head>
+<body class="text-gray-800">
+    <div class="container mx-auto h-screen flex flex-col">
+        <!-- Header -->
+        <header class="py-4 px-6 bg-white bg-opacity-80 backdrop-blur-sm shadow-sm flex items-center justify-between">
+            <div class="flex items-center">
+                <i class="fas fa-heart text-pink-500 text-2xl mr-2 heart-beat"></i>
+                <h1 class="text-xl font-bold text-pink-600">TogetherTunes</h1>
+            </div>
+            <div class="flex items-center space-x-4">
+                <button id="uploadBtn" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium transition flex items-center">
+                    <i class="fas fa-upload mr-2"></i>
+                    Upload Song
+                </button>
+                <input type="file" id="fileInput" accept="audio/*" class="hidden">
+                <div class="relative">
+                    <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-10 h-10 rounded-full object-cover border-2 border-pink-300">
+                </div>
+            </div>
+        </header>
+        <div class="flex flex-1 overflow-hidden">
+            <!-- Music Player Section -->
+            <div class="w-full p-6 flex flex-col">
+                <div class="bg-white rounded-xl shadow-md p-6 flex-1 flex flex-col">
+                    <!-- Room Connectivity Section -->
+                    <div class="mb-6 bg-white border rounded-lg p-4" id="partnerStatus">
+                        <div class="flex items-center justify-between mb-2">
+                            <h3 class="font-medium text-pink-600">Connection with Partner</h3>
+                            <div id="connectionStatus" class="text-sm px-2 py-1 rounded-full bg-gray-100 text-gray-600">
+                                Disconnected
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <div class="flex-1">
+                                <div class="flex items-center space-x-2 mb-2">
+                                    <input type="text" id="roomId" placeholder="Enter Room ID" class="border border-gray-300 rounded-full px-4 py-2 flex-1 focus:outline-none focus:ring-2 focus:ring-pink-300 focus:border-transparent">
+                                    <button id="connectBtn" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium transition">
+                                        Connect
+                                    </button>
+                                </div>
+                                <div class="text-xs text-gray-500">
+                                    <p>Share this Room ID with your partner to sync your music experience</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div id="partnerInfo" class="hidden mt-4 pt-4 border-t border-gray-100">
+                            <div class="flex items-center space-x-3">
+                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Partner" class="w-10 h-10 rounded-full object-cover border-2 border-pink-300">
+                                <div>
+                                    <p class="font-medium">Partner Name</p>
+                                    <p class="text-xs text-gray-500 flex items-center" id="partnerActivity">
+                                        <span>Connected</span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex-1 flex flex-col items-center justify-center" id="playerSection">
+                        <div class="album-art w-64 h-64 rounded-full overflow-hidden mb-6 relative">
+                            <img src="https://source.unsplash.com/random/300x300/?music" alt="Album Art" class="w-full h-full object-cover" id="albumArt">
+                            <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
+                                <i class="fas fa-music text-white text-4xl"></i>
+                            </div>
+                        </div>
+                        <div class="text-center mb-6">
+                            <h3 class="text-lg font-semibold" id="songTitle">No song selected</h3>
+                            <p class="text-gray-600" id="songArtist"></p>
+                        </div>
+                        <div class="w-full mb-4">
+                            <div class="progress-bar" id="progressBar">
+                                <div class="progress" id="progress"></div>
+                            </div>
+                            <div class="flex justify-between text-xs text-gray-500 mt-1">
+                                <span id="currentTime">0:00</span>
+                                <span id="duration">0:00</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-center space-x-6 mb-8">
+                            <button id="prevBtn" class="text-gray-600 hover:text-pink-500 transition">
+                                <i class="fas fa-step-backward text-2xl"></i>
+                            </button>
+                            <button id="playBtn" class="bg-pink-500 hover:bg-pink-600 text-white rounded-full w-12 h-12 flex items-center justify-center transition">
+                                <i class="fas fa-play text-xl" id="playIcon"></i>
+                            </button>
+                            <button id="nextBtn" class="text-gray-600 hover:text-pink-500 transition">
+                                <i class="fas fa-step-forward text-2xl"></i>
+                            </button>
+                        </div>
+                        <div class="flex items-center justify-between w-full max-w-xs">
+                            <button id="likeBtn" class="text-gray-600 hover:text-pink-500 transition">
+                                <i class="far fa-heart text-xl"></i>
+                            </button>
+                            <button id="volumeBtn" class="text-gray-600 hover:text-pink-500 transition">
+                                <i class="fas fa-volume-up text-xl"></i>
+                            </button>
+                            <input type="range" id="volumeControl" min="0" max="1" step="0.01" value="1" class="w-20">
+                            <button class="text-gray-600 hover:text-pink-500 transition">
+                                <i class="fas fa-ellipsis-h text-xl"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-4 bg-white rounded-xl shadow-md p-4">
+                    <h3 class="font-medium mb-2 text-pink-600">Playlist</h3>
+                    <div class="space-y-2 max-h-60 overflow-y-auto" id="playlist">
+                        <div class="text-center py-4 text-gray-500">
+                            <i class="fas fa-music mr-2"></i> Your playlist is empty
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Audio player functionality
+        const audio = new Audio();
+        let currentSongIndex = -1;
+        let songs = [];
+        // Room connection simulation
+        let isConnected = false;
+        let roomId = '';
+        let partnerTyping = false;
+        // DOM elements
+        const playBtn = document.getElementById('playBtn');
+        const playIcon = document.getElementById('playIcon');
+        const progressBar = document.getElementById('progressBar');
+        const progress = document.getElementById('progress');
+        const currentTimeEl = document.getElementById('currentTime');
+        const durationEl = document.getElementById('duration');
+        const prevBtn = document.getElementById('prevBtn');
+        const nextBtn = document.getElementById('nextBtn');
+        const likeBtn = document.getElementById('likeBtn');
+        const albumArt = document.getElementById('albumArt');
+        const songTitle = document.getElementById('songTitle');
+        const songArtist = document.getElementById('songArtist');
+        const playlist = document.getElementById('playlist');
+        const uploadBtn = document.getElementById('uploadBtn');
+        const fileInput = document.getElementById('fileInput');
+        const volumeBtn = document.getElementById('volumeBtn');
+        const volumeControl = document.getElementById('volumeControl');
+        // Room connection elements
+        const partnerStatus = document.getElementById('partnerStatus');
+        const connectionStatus = document.getElementById('connectionStatus');
+        const roomIdInput = document.getElementById('roomId');
+        const connectBtn = document.getElementById('connectBtn');
+        const partnerInfo = document.getElementById('partnerInfo');
+        const partnerActivity = document.getElementById('partnerActivity');
+        // Format time (seconds to MM:SS)
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = Math.floor(seconds % 60);
+            return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+        }
+        // Render playlist
+        function renderPlaylist() {
+            playlist.innerHTML = '';
+            if (songs.length === 0) {
+                playlist.innerHTML = '<div class="text-center py-4 text-gray-500"><i class="fas fa-music mr-2"></i> Your playlist is empty</div>';
+                return;
+            }
+            songs.forEach((song, index) => {
+                const songElement = document.createElement('div');
+                songElement.className = `flex items-center p-2 rounded-lg cursor-pointer song-item ${currentSongIndex === index ? 'active' : ''}`;
+                songElement.innerHTML = `
+                    <img src="${song.cover || 'https://source.unsplash.com/random/100x100/?music'}" alt="Song" class="w-10 h-10 rounded mr-3">
+                    <div class="flex-1">
+                        <p class="text-sm font-medium">${song.title || 'Unknown Title'}</p>
+                        <p class="text-xs text-gray-500">${song.artist || 'Unknown Artist'}</p>
+                    </div>
+                    <div class="flex items-center">
+                        <i class="fas fa-heart ${song.liked ? 'text-pink-500' : 'text-gray-300'} mr-3"></i>
+                        <span class="text-xs text-gray-400">${formatTime(song.duration || 0)}</span>
+                    </div>
+                `;
+                songElement.addEventListener('click', () => {
+                    playSong(index);
+                });
+                playlist.appendChild(songElement);
+            });
+        }
+        // Play a specific song
+        function playSong(index) {
+            if (index < 0 || index >= songs.length) return;
+            currentSongIndex = index;
+            const song = songs[currentSongIndex];
+            // Update UI
+            songTitle.textContent = song.title || 'Unknown Title';
+            songArtist.textContent = song.artist || 'Unknown Artist';
+            albumArt.src = song.cover || 'https://source.unsplash.com/random/300x300/?music';
+            durationEl.textContent = formatTime(song.duration || 0);
+            // Update active song in playlist
+            document.querySelectorAll('.song-item').forEach((item, i) => {
+                if (i === currentSongIndex) {
+                    item.classList.add('active');
+                } else {
+                    item.classList.remove('active');
+                }
+            });
+            // Update like button
+            likeBtn.innerHTML = `<i class="${song.liked ? 'fas' : 'far'} fa-heart text-xl"></i>`;
+            // Load and play audio
+            if (song.audio instanceof Blob) {
+                // For uploaded files
+                const audioURL = URL.createObjectURL(song.audio);
+                audio.src = audioURL;
+            } else {
+                // For other sources
+                audio.src = song.audio;
+            }
+            audio.load();
+            audio.play()
+                .then(() => {
+                    playIcon.classList.remove('fa-play');
+                    playIcon.classList.add('fa-pause');
+                    // Start album art rotation
+                    document.querySelector('.album-art').classList.add('rotate');
+                    // Simulate sending song info to partner
+                    if (isConnected) {
+                        simulatePartnerActivity('listening to ' + (song.title || 'Unknown Title'));
+                    }
+                })
+                .catch(error => {
+                    console.error('Playback failed:', error);
+                });
+        }
+        // Play next song
+        function playNext() {
+            if (songs.length === 0) return;
+            if (currentSongIndex < songs.length - 1) {
+                playSong(currentSongIndex + 1);
+            } else {
+                playSong(0); // Loop back to first song
+            }
+        }
+        // Play previous song
+        function playPrev() {
+            if (songs.length === 0) return;
+            if (currentSongIndex > 0) {
+                playSong(currentSongIndex - 1);
+            } else {
+                playSong(songs.length - 1); // Go to last song
+            }
+        }
+        // Toggle like status for current song
+        function toggleLike() {
+            if (currentSongIndex === -1) return;
+            songs[currentSongIndex].liked = !songs[currentSongIndex].liked;
+            likeBtn.innerHTML = `<i class="${songs[currentSongIndex].liked ? 'fas' : 'far'} fa-heart text-xl"></i>`;
+            // Update in playlist
+            const heartIcons = document.querySelectorAll('.song-item .fa-heart');
+            if (heartIcons[currentSongIndex]) {
+                heartIcons[currentSongIndex].className = songs[currentSongIndex].liked ?
+                    'fas fa-heart text-pink-500 mr-3' : 'far fa-heart text-gray-300 mr-3';
+            }
+            // Simulate partner reaction
+            if (isConnected) {
+                simulatePartnerTyping();
+                setTimeout(() => {
+                    partnerActivity.innerHTML = songs[currentSongIndex].liked ?
+                        '<span>❤️ Loved this song too!</span>' :
+                        '<span>😢 Why don\'t you like this song?</span>';
+                }, 1500);
+            }
+        }
+        // Handle file upload
+        uploadBtn.addEventListener('click', () => {
+            fileInput.click();
+        });
+        fileInput.addEventListener('change', (e) => {
+            const files = e.target.files;
+            if (files.length === 0) return;
+            const file = files[0];
+            const newSong = {
+                id: Date.now(),
+                title: file.name.replace(/\.[^/.]+$/, ""), // Remove file extension
+                artist: 'Uploaded Song',
+                duration: 0, // Will be updated when metadata loads
+                cover: 'https://source.unsplash.com/random/300x300/?music',
+                audio: file,
+                liked: false
+            };
+            // Add to playlist
+            songs.push(newSong);
+            renderPlaylist();
+            // If this is the first song, play it
+            if (songs.length === 1) {
+                playSong(0);
+            }
+            // Try to get duration from the file
+            const audioForDuration = new Audio();
+            audioForDuration.src = URL.createObjectURL(file);
+            audioForDuration.addEventListener('loadedmetadata', () => {
+                newSong.duration = audioForDuration.duration;
+                renderPlaylist();
+            });
+        });
+        // Volume control
+        volumeControl.addEventListener('input', () => {
+            audio.volume = volumeControl.value;
+            // Update volume icon based on level
+            if (volumeControl.value == 0) {
+                volumeBtn.innerHTML = '<i class="fas fa-volume-mute text-xl"></i>';
+            } else if (volumeControl.value < 0.5) {
+                volumeBtn.innerHTML = '<i class="fas fa-volume-down text-xl"></i>';
+            } else {
+                volumeBtn.innerHTML = '<i class="fas fa-volume-up text-xl"></i>';
+            }
+        });
+        // Toggle mute
+        volumeBtn.addEventListener('click', () => {
+            if (audio.volume > 0) {
+                audio.volume = 0;
+                volumeControl.value = 0;
+                volumeBtn.innerHTML = '<i class="fas fa-volume-mute text-xl"></i>';
+            } else {
+                audio.volume = 1;
+                volumeControl.value = 1;
+                volumeBtn.innerHTML = '<i class="fas fa-volume-up text-xl"></i>';
+            }
+        });
+        // Update progress bar
+        audio.addEventListener('timeupdate', () => {
+            const { currentTime, duration } = audio;
+            const progressPercent = (currentTime / duration) * 100;
+            progress.style.width = `${progressPercent}%`;
+            currentTimeEl.textContent = formatTime(currentTime);
+            // Update duration if not already set
+            if (durationEl.textContent === '0:00' && !isNaN(duration)) {
+                durationEl.textContent = formatTime(duration);
+                // Update duration in current song object
+                if (currentSongIndex !== -1) {
+                    songs[currentSongIndex].duration = duration;
+                    renderPlaylist();
+                }
+            }
+        });
+        // Set song duration when metadata is loaded
+        audio.addEventListener('loadedmetadata', () => {
+            durationEl.textContent = formatTime(audio.duration);
+        });
+        // When song ends, play next one
+        audio.addEventListener('ended', playNext);
+        // Click on progress bar to seek
+        progressBar.addEventListener('click', (e) => {
+            const width = progressBar.clientWidth;
+            const clickX = e.offsetX;
+            const duration = audio.duration;
+            audio.currentTime = (clickX / width) * duration;
+            // Simulate partner activity
+            if (isConnected) {
+                simulatePartnerActivity('changed song position');
+            }
+        });
+        // Play/pause toggle
+        playBtn.addEventListener('click', () => {
+            if (songs.length === 0) {
+                alert('Please add songs to your playlist first');
+                return;
+            }
+            if (currentSongIndex === -1) {
+                playSong(0);
+                return;
+            }
+            if (audio.paused) {
+                audio.play();
+                playIcon.classList.remove('fa-play');
+                playIcon.classList.add('fa-pause');
+                document.querySelector('.album-art').classList.add('rotate');
+                // Simulate partner activity
+                if (isConnected) {
+                    simulatePartnerActivity('resumed the song');
+                }
+            } else {
+                audio.pause();
+                playIcon.classList.remove('fa-pause');
+                playIcon.classList.add('fa-play');
+                document.querySelector('.album-art').classList.remove('rotate');
+                // Simulate partner activity
+                if (isConnected) {
+                    simulatePartnerActivity('paused the song');
+                }
+            }
+        });
+        // Navigation controls
+        prevBtn.addEventListener('click', playPrev);
+        nextBtn.addEventListener('click', playNext);
+        likeBtn.addEventListener('click', toggleLike);
+        // Room connection functionality
+        connectBtn.addEventListener('click', () => {
+            const newRoomId = roomIdInput.value.trim();
+            if (!newRoomId) {
+                alert('Please enter a Room ID');
+                return;
+            }
+            // Simulate connection process
+            connectionStatus.textContent = 'Connecting...';
+            connectionStatus.className = 'text-sm px-2 py-1 rounded-full bg-yellow-100 text-yellow-600';
+            setTimeout(() => {
+                // Successful connection
+                isConnected = true;
+                roomId = newRoomId;
+                connectionStatus.textContent = 'Connected';
+                connectionStatus.className = 'text-sm px-2 py-1 rounded-full bg-green-100 text-green-600';
+                partnerStatus.classList.add('partner-connected');
+                partnerStatus.classList.remove('partner-disconnected');
+                // Show partner info
+                partnerInfo.classList.remove('hidden');
+                // Simulate partner joining
+                setTimeout(() => {
+                    partnerActivity.innerHTML = '<span>Joined the room</span>';
+                    // Simulate partner typing
+                    setTimeout(() => {
+                        simulatePartnerTyping();
+                        setTimeout(() => {
+                            partnerActivity.innerHTML = '<span>Hey there! Ready to listen together? ❤️</span>';
+                        }, 2000);
+                    }, 1500);
+                }, 500);
+                // Change button to disconnect
+                connectBtn.textContent = 'Disconnect';
+                connectBtn.className = 'bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-full text-sm font-medium transition';
+                // Disable room ID input
+                roomIdInput.disabled = true;
+            }, 1500);
+        });
+        // Toggle connection
+        connectBtn.addEventListener('click', function() {
+            if (isConnected) {
+                // Disconnect
+                isConnected = false;
+                connectionStatus.textContent = 'Disconnected';
+                connectionStatus.className = 'text-sm px-2 py-1 rounded-full bg-gray-100 text-gray-600';
+                partnerStatus.classList.remove('partner-connected');
+                partnerStatus.classList.add('partner-disconnected');
+                // Hide partner info
+                partnerInfo.classList.add('hidden');
+                // Change button back to connect
+                this.textContent = 'Connect';
+                this.className = 'bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded-full text-sm font-medium transition';
+                // Enable room ID input
+                roomIdInput.disabled = false;
+                roomId = '';
+            }
+        });
+        // Simulate partner typing
+        function simulatePartnerTyping() {
+            partnerTyping = true;
+            partnerActivity.innerHTML = `
+                <span>Partner is typing</span>
+                <span class="typing-indicator"></span>
+                <span class="typing-indicator"></span>
+                <span class="typing-indicator"></span>
+            `;
+        }
+        // Simulate partner activity
+        function simulatePartnerActivity(activity) {
+            if (!isConnected) return;
+            partnerTyping = true;
+            partnerActivity.innerHTML = `
+                <span>Partner is typing</span>
+                <span class="typing-indicator"></span>
+                <span class="typing-indicator"></span>
+                <span class="typing-indicator"></span>
+            `;
+            setTimeout(() => {
+                partnerTyping = false;
+                partnerActivity.innerHTML = `<span>${activity}</span>`;
+            }, 1500);
+        }
+        // Initialize volume
+        audio.volume = volumeControl.value;
+        // Add some sample songs for demo
+        window.addEventListener('DOMContentLoaded', () => {
+            songs = [
+                {
+                    id: 1,
+                    title: 'Perfect',
+                    artist: 'Ed Sheeran',
+                    duration: 263,
+                    cover: 'https://source.unsplash.com/random/300x300/?love',
+                    audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+                    liked: false
+                },
+                {
+                    id: 2,
+                    title: 'All of Me',
+                    artist: 'John Legend',
+                    duration: 271,
+                    cover: 'https://source.unsplash.com/random/300x300/?romantic',
+                    audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
+                    liked: false
+                },
+                {
+                    id: 3,
+                    title: 'A Thousand Years',
+                    artist: 'Christina Perri',
+                    duration: 295,
+                    cover: 'https://source.unsplash.com/random/300x300/?wedding',
+                    audio: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
+                    liked: false
+                }
+            ];
+            renderPlaylist();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jk12p/togethertunes" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>