Spaces:

Khansahabddu
/

khan

Running

App Files Files Community

Khansahabddu commited on Aug 24, 2025

Commit

187955c

verified ·

1 Parent(s): acdb2bd

undefined - Initial Deployment

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +464 -19

README.md CHANGED Viewed

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

 ---
+title: khan
+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,464 @@
-<!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>Melody Player</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, #1a1a2e 0%, #16213e 100%);
+            color: white;
+            min-height: 100vh;
+        }
+        .progress-container {
+            height: 6px;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 3px;
+            cursor: pointer;
+        }
+        .progress-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
+            border-radius: 3px;
+            transition: width 0.1s linear;
+        }
+        .album-art {
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
+            transition: all 0.3s ease;
+        }
+        .album-art:hover {
+            transform: scale(1.03);
+        }
+        .song-item:hover {
+            background-color: rgba(255, 255, 255, 0.1);
+        }
+        .active-song {
+            background: linear-gradient(90deg, rgba(0, 219, 222, 0.2) 0%, rgba(252, 0, 255, 0.2) 100%);
+        }
+        .volume-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 4px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 2px;
+        }
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 12px;
+            height: 12px;
+            background: white;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body class="text-white">
+    <div class="container mx-auto px-4 py-6 max-w-md">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <button class="text-white text-xl">
+                <i class="fas fa-bars"></i>
+            </button>
+            <h1 class="text-xl font-bold">Melody Player</h1>
+            <button class="text-white text-xl">
+                <i class="fas fa-search"></i>
+            </button>
+        </header>
+        <!-- Now Playing -->
+        <div class="text-center mb-10">
+            <div class="album-art w-64 h-64 mx-auto rounded-xl overflow-hidden mb-6">
+                <img id="album-art" src="https://source.unsplash.com/random/300x300/?music" alt="Album Art" class="w-full h-full object-cover">
+            </div>
+            <div class="mb-2">
+                <h2 id="song-title" class="text-xl font-bold">Song Title</h2>
+                <p id="song-artist" class="text-gray-300">Artist Name</p>
+            </div>
+            <div class="progress-container mx-auto w-full max-w-xs mb-4">
+                <div id="progress-bar" class="progress-bar w-0"></div>
+            </div>
+            <div class="flex justify-between text-sm text-gray-400 mb-8 px-2">
+                <span id="current-time">0:00</span>
+                <span id="duration">3:45</span>
+            </div>
+            <div class="flex justify-center items-center space-x-8">
+                <button id="shuffle-btn" class="text-gray-400 hover:text-white text-xl">
+                    <i class="fas fa-random"></i>
+                </button>
+                <button id="prev-btn" class="text-white text-3xl">
+                    <i class="fas fa-step-backward"></i>
+                </button>
+                <button id="play-btn" class="bg-gradient-to-r from-cyan-500 to-purple-500 w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl">
+                    <i class="fas fa-play"></i>
+                </button>
+                <button id="next-btn" class="text-white text-3xl">
+                    <i class="fas fa-step-forward"></i>
+                </button>
+                <button id="repeat-btn" class="text-gray-400 hover:text-white text-xl">
+                    <i class="fas fa-redo"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Playlist -->
+        <div class="mb-20">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="font-medium">Playlist</h3>
+                <button id="playlist-menu" class="text-gray-400">
+                    <i class="fas fa-ellipsis-h"></i>
+                </button>
+            </div>
+            <div id="playlist" class="space-y-2 max-h-64 overflow-y-auto">
+                <!-- Songs will be added here by JavaScript -->
+            </div>
+        </div>
+        <!-- Bottom Navigation -->
+        <nav class="fixed bottom-0 left-0 right-0 bg-gray-900 bg-opacity-80 backdrop-filter backdrop-blur-lg py-3 px-6">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center space-x-3 w-1/3">
+                    <img id="mini-album-art" src="https://source.unsplash.com/random/50x50/?music" alt="Album Art" class="w-10 h-10 rounded">
+                    <div class="truncate">
+                        <p id="mini-song-title" class="text-sm font-medium truncate">Song Title</p>
+                        <p id="mini-song-artist" class="text-xs text-gray-400 truncate">Artist</p>
+                    </div>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <button id="mini-play-btn" class="text-white">
+                        <i class="fas fa-play"></i>
+                    </button>
+                    <button class="text-white">
+                        <i class="fas fa-forward"></i>
+                    </button>
+                </div>
+                <div class="flex items-center space-x-2 w-1/3 justify-end">
+                    <i class="fas fa-volume-down text-gray-400"></i>
+                    <input id="volume-slider" type="range" class="volume-slider w-20" min="0" max="100" value="80">
+                </div>
+            </div>
+        </nav>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Sample playlist data
+            const playlist = [
+                {
+                    title: "Blinding Lights",
+                    artist: "The Weeknd",
+                    duration: "3:20",
+                    cover: "https://source.unsplash.com/random/300x300/?weeknd"
+                },
+                {
+                    title: "Save Your Tears",
+                    artist: "The Weeknd",
+                    duration: "3:35",
+                    cover: "https://source.unsplash.com/random/300x300/?tears"
+                },
+                {
+                    title: "Levitating",
+                    artist: "Dua Lipa",
+                    duration: "3:23",
+                    cover: "https://source.unsplash.com/random/300x300/?dua"
+                },
+                {
+                    title: "Stay",
+                    artist: "The Kid LAROI, Justin Bieber",
+                    duration: "2:21",
+                    cover: "https://source.unsplash.com/random/300x300/?kidlaroi"
+                },
+                {
+                    title: "Good 4 U",
+                    artist: "Olivia Rodrigo",
+                    duration: "2:58",
+                    cover: "https://source.unsplash.com/random/300x300/?olivia"
+                },
+                {
+                    title: "Montero",
+                    artist: "Lil Nas X",
+                    duration: "2:17",
+                    cover: "https://source.unsplash.com/random/300x300/?montero"
+                }
+            ];
+            // DOM elements
+            const playBtn = document.getElementById('play-btn');
+            const miniPlayBtn = document.getElementById('mini-play-btn');
+            const prevBtn = document.getElementById('prev-btn');
+            const nextBtn = document.getElementById('next-btn');
+            const shuffleBtn = document.getElementById('shuffle-btn');
+            const repeatBtn = document.getElementById('repeat-btn');
+            const progressBar = document.getElementById('progress-bar');
+            const progressContainer = document.querySelector('.progress-container');
+            const currentTimeEl = document.getElementById('current-time');
+            const durationEl = document.getElementById('duration');
+            const songTitleEl = document.getElementById('song-title');
+            const songArtistEl = document.getElementById('song-artist');
+            const albumArtEl = document.getElementById('album-art');
+            const miniSongTitleEl = document.getElementById('mini-song-title');
+            const miniSongArtistEl = document.getElementById('mini-song-artist');
+            const miniAlbumArtEl = document.getElementById('mini-album-art');
+            const playlistEl = document.getElementById('playlist');
+            const volumeSlider = document.getElementById('volume-slider');
+            // Player state
+            let currentSongIndex = 0;
+            let isPlaying = false;
+            let isShuffled = false;
+            let isRepeated = false;
+            let currentTime = 0;
+            let duration = 0;
+            let progressInterval;
+            // Initialize player
+            function initPlayer() {
+                loadSong(currentSongIndex);
+                renderPlaylist();
+                // Event listeners
+                playBtn.addEventListener('click', togglePlay);
+                miniPlayBtn.addEventListener('click', togglePlay);
+                prevBtn.addEventListener('click', prevSong);
+                nextBtn.addEventListener('click', nextSong);
+                shuffleBtn.addEventListener('click', toggleShuffle);
+                repeatBtn.addEventListener('click', toggleRepeat);
+                progressContainer.addEventListener('click', setProgress);
+                volumeSlider.addEventListener('input', setVolume);
+                // Simulate audio element (in a real app, this would be an actual audio element)
+                setInterval(updateProgress, 1000);
+            }
+            // Load song
+            function loadSong(index) {
+                const song = playlist[index];
+                songTitleEl.textContent = song.title;
+                songArtistEl.textContent = song.artist;
+                durationEl.textContent = song.duration;
+                albumArtEl.src = song.cover;
+                miniSongTitleEl.textContent = song.title;
+                miniSongArtistEl.textContent = song.artist;
+                miniAlbumArtEl.src = song.cover;
+                // Reset progress
+                currentTime = 0;
+                updateProgressBar();
+                // Highlight active song in playlist
+                const songItems = document.querySelectorAll('.song-item');
+                songItems.forEach(item => item.classList.remove('active-song'));
+                if (songItems[index]) {
+                    songItems[index].classList.add('active-song');
+                }
+            }
+            // Toggle play/pause
+            function togglePlay() {
+                isPlaying = !isPlaying;
+                if (isPlaying) {
+                    playBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                    miniPlayBtn.innerHTML = '<i class="fas fa-pause"></i>';
+                    // In a real app: audio.play();
+                } else {
+                    playBtn.innerHTML = '<i class="fas fa-play"></i>';
+                    miniPlayBtn.innerHTML = '<i class="fas fa-play"></i>';
+                    // In a real app: audio.pause();
+                }
+            }
+            // Previous song
+            function prevSong() {
+                currentSongIndex--;
+                if (currentSongIndex < 0) {
+                    currentSongIndex = playlist.length - 1;
+                }
+                loadSong(currentSongIndex);
+                if (isPlaying) {
+                    // In a real app: audio.play();
+                }
+            }
+            // Next song
+            function nextSong() {
+                currentSongIndex++;
+                if (currentSongIndex > playlist.length - 1) {
+                    currentSongIndex = 0;
+                }
+                loadSong(currentSongIndex);
+                if (isPlaying) {
+                    // In a real app: audio.play();
+                }
+            }
+            // Toggle shuffle
+            function toggleShuffle() {
+                isShuffled = !isShuffled;
+                shuffleBtn.classList.toggle('text-white');
+                shuffleBtn.classList.toggle('text-gray-400');
+                if (isShuffled) {
+                    // Shuffle playlist
+                    shufflePlaylist();
+                } else {
+                    // Restore original order
+                    renderPlaylist();
+                }
+            }
+            // Toggle repeat
+            function toggleRepeat() {
+                isRepeated = !isRepeated;
+                repeatBtn.classList.toggle('text-white');
+                repeatBtn.classList.toggle('text-gray-400');
+            }
+            // Update progress bar
+            function updateProgress() {
+                if (!isPlaying) return;
+                // Simulate progress (in a real app, this would come from audio.currentTime)
+                currentTime += 1;
+                // If song ended
+                if (currentTime >= convertTimeToSeconds(durationEl.textContent)) {
+                    if (isRepeated) {
+                        currentTime = 0;
+                    } else {
+                        nextSong();
+                    }
+                }
+                updateProgressBar();
+            }
+            function updateProgressBar() {
+                const durationSeconds = convertTimeToSeconds(durationEl.textContent);
+                const progressPercent = (currentTime / durationSeconds) * 100;
+                progressBar.style.width = `${progressPercent}%`;
+                // Update current time display
+                currentTimeEl.textContent = convertSecondsToTime(currentTime);
+            }
+            // Set progress on click
+            function setProgress(e) {
+                const width = this.clientWidth;
+                const clickX = e.offsetX;
+                const durationSeconds = convertTimeToSeconds(durationEl.textContent);
+                currentTime = (clickX / width) * durationSeconds;
+                // In a real app: audio.currentTime = currentTime;
+                updateProgressBar();
+            }
+            // Set volume
+            function setVolume() {
+                const volume = this.value / 100;
+                // In a real app: audio.volume = volume;
+            }
+            // Render playlist
+            function renderPlaylist() {
+                playlistEl.innerHTML = '';
+                playlist.forEach((song, index) => {
+                    const songItem = document.createElement('div');
+                    songItem.className = `song-item flex items-center p-3 rounded-lg cursor-pointer ${index === currentSongIndex ? 'active-song' : ''}`;
+                    songItem.innerHTML = `
+                        <img src="${song.cover}" alt="${song.title}" class="w-12 h-12 rounded mr-3">
+                        <div class="flex-grow">
+                            <h4 class="font-medium">${song.title}</h4>
+                            <p class="text-sm text-gray-400">${song.artist}</p>
+                        </div>
+                        <span class="text-gray-400 text-sm">${song.duration}</span>
+                    `;
+                    songItem.addEventListener('click', () => {
+                        currentSongIndex = index;
+                        loadSong(currentSongIndex);
+                        if (!isPlaying) {
+                            togglePlay();
+                        }
+                    });
+                    playlistEl.appendChild(songItem);
+                });
+            }
+            // Shuffle playlist
+            function shufflePlaylist() {
+                const shuffledPlaylist = [...playlist];
+                for (let i = shuffledPlaylist.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [shuffledPlaylist[i], shuffledPlaylist[j]] = [shuffledPlaylist[j], shuffledPlaylist[i]];
+                }
+                playlistEl.innerHTML = '';
+                shuffledPlaylist.forEach((song, index) => {
+                    const songItem = document.createElement('div');
+                    songItem.className = `song-item flex items-center p-3 rounded-lg cursor-pointer`;
+                    songItem.innerHTML = `
+                        <img src="${song.cover}" alt="${song.title}" class="w-12 h-12 rounded mr-3">
+                        <div class="flex-grow">
+                            <h4 class="font-medium">${song.title}</h4>
+                            <p class="text-sm text-gray-400">${song.artist}</p>
+                        </div>
+                        <span class="text-gray-400 text-sm">${song.duration}</span>
+                    `;
+                    songItem.addEventListener('click', () => {
+                        // Find the original index of the song
+                        const originalIndex = playlist.findIndex(s => s.title === song.title);
+                        currentSongIndex = originalIndex;
+                        loadSong(currentSongIndex);
+                        if (!isPlaying) {
+                            togglePlay();
+                        }
+                    });
+                    playlistEl.appendChild(songItem);
+                });
+            }
+            // Helper functions
+            function convertTimeToSeconds(timeStr) {
+                const [minutes, seconds] = timeStr.split(':').map(Number);
+                return minutes * 60 + seconds;
+            }
+            function convertSecondsToTime(seconds) {
+                const mins = Math.floor(seconds / 60);
+                const secs = Math.floor(seconds % 60);
+                return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
+            }
+            // Initialize the player
+            initPlayer();
+        });
+    </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=Khansahabddu/khan" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>