| <!DOCTYPE html> |
| <html lang="es"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Sherlock Music - Tu Estación de Música</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| :root { |
| --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); |
| --dark-bg: #0f0f23; |
| --card-bg: rgba(255, 255, 255, 0.05); |
| --glass-bg: rgba(255, 255, 255, 0.1); |
| --text-primary: #ffffff; |
| --text-secondary: #b0b3b8; |
| --accent: #ff6b6b; |
| --success: #51cf66; |
| } |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background: var(--dark-bg); |
| color: var(--text-primary); |
| overflow-x: hidden; |
| min-height: 100vh; |
| } |
| |
| |
| .bg-animation { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| z-index: -1; |
| background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%), |
| radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.2) 0%, transparent 50%); |
| animation: float 20s ease-in-out infinite; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } |
| 50% { transform: translateY(-20px) rotate(1deg); } |
| } |
| |
| |
| .header { |
| position: fixed; |
| top: 0; |
| width: 100%; |
| padding: 1rem 2rem; |
| backdrop-filter: blur(20px); |
| background: var(--glass-bg); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); |
| z-index: 1000; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| } |
| |
| .logo { |
| font-size: 1.8rem; |
| font-weight: 700; |
| background: var(--primary-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .header-actions { |
| display: flex; |
| gap: 1rem; |
| align-items: center; |
| } |
| |
| .theme-toggle { |
| background: var(--card-bg); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| color: var(--text-primary); |
| padding: 0.8rem; |
| border-radius: 50%; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| font-size: 1.1rem; |
| } |
| |
| .theme-toggle:hover { |
| background: var(--glass-bg); |
| transform: scale(1.05); |
| } |
| |
| |
| .main-content { |
| margin-top: 80px; |
| padding: 2rem; |
| max-width: 1400px; |
| margin-left: auto; |
| margin-right: auto; |
| } |
| |
| |
| .hero { |
| text-align: center; |
| margin-bottom: 4rem; |
| padding: 2rem; |
| } |
| |
| .hero h1 { |
| font-size: clamp(2.5rem, 5vw, 4rem); |
| font-weight: 700; |
| margin-bottom: 1rem; |
| background: var(--primary-gradient); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .hero p { |
| font-size: 1.3rem; |
| color: var(--text-secondary); |
| max-width: 600px; |
| margin: 0 auto; |
| } |
| |
| |
| .music-player { |
| background: var(--card-bg); |
| backdrop-filter: blur(20px); |
| border-radius: 24px; |
| padding: 2.5rem; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| margin-bottom: 3rem; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .music-player::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 4px; |
| background: var(--primary-gradient); |
| border-radius: 24px 24px 0 0; |
| } |
| |
| .album-art { |
| width: 200px; |
| height: 200px; |
| border-radius: 20px; |
| margin: 0 auto 2rem; |
| background: var(--primary-gradient); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 4rem; |
| color: white; |
| animation: rotate 20s linear infinite paused; |
| box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3); |
| } |
| |
| .album-art.playing { |
| animation-play-state: running; |
| } |
| |
| @keyframes rotate { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
| |
| .track-info h2 { |
| font-size: 1.8rem; |
| margin-bottom: 0.5rem; |
| text-align: center; |
| } |
| |
| .track-artist { |
| color: var(--text-secondary); |
| text-align: center; |
| margin-bottom: 2rem; |
| } |
| |
| .progress-container { |
| margin-bottom: 2rem; |
| } |
| |
| .progress-bar { |
| width: 100%; |
| height: 6px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 3px; |
| overflow: hidden; |
| cursor: pointer; |
| position: relative; |
| } |
| |
| .progress { |
| height: 100%; |
| background: var(--primary-gradient); |
| width: 0%; |
| border-radius: 3px; |
| transition: width 0.1s ease; |
| } |
| |
| .time-display { |
| display: flex; |
| justify-content: space-between; |
| margin-bottom: 2rem; |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| } |
| |
| .controls { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| gap: 2rem; |
| margin-bottom: 1rem; |
| } |
| |
| .control-btn { |
| width: 60px; |
| height: 60px; |
| border-radius: 50%; |
| border: none; |
| background: var(--glass-bg); |
| color: var(--text-primary); |
| font-size: 1.3rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .control-btn:hover { |
| background: var(--primary-gradient); |
| transform: scale(1.1); |
| } |
| |
| .play-pause { |
| width: 80px; |
| height: 80px; |
| font-size: 1.8rem; |
| background: var(--primary-gradient); |
| } |
| |
| .play-pause:hover { |
| transform: scale(1.05); |
| } |
| |
| .volume-container { |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| justify-content: center; |
| } |
| |
| .volume-bar { |
| width: 120px; |
| height: 4px; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 2px; |
| cursor: pointer; |
| } |
| |
| |
| .playlist-section { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
| gap: 2rem; |
| margin-bottom: 3rem; |
| } |
| |
| .playlist-card { |
| background: var(--card-bg); |
| backdrop-filter: blur(20px); |
| border-radius: 20px; |
| padding: 2rem; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .playlist-card:hover { |
| transform: translateY(-10px); |
| border-color: rgba(255, 255, 255, 0.2); |
| } |
| |
| .playlist-card.playing { |
| border-color: var(--accent); |
| box-shadow: 0 20px 40px rgba(255, 107, 107, 0.3); |
| } |
| |
| .playlist-icon { |
| width: 60px; |
| height: 60px; |
| border-radius: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .playlist-1 .playlist-icon { background: var(--primary-gradient); } |
| .playlist-2 .playlist-icon { background: var(--secondary-gradient); } |
| .playlist-3 .playlist-icon { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } |
| |
| .playlist-title { |
| font-size: 1.3rem; |
| font-weight: 600; |
| margin-bottom: 0.5rem; |
| } |
| |
| .playlist-tracks { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| } |
| |
| |
| .recently-section { |
| margin-top: 3rem; |
| } |
| |
| .section-title { |
| font-size: 2rem; |
| margin-bottom: 2rem; |
| display: flex; |
| align-items: center; |
| gap: 1rem; |
| } |
| |
| .tracks-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 1.5rem; |
| } |
| |
| .track-item { |
| background: var(--card-bg); |
| border-radius: 16px; |
| padding: 1.5rem; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| border: 1px solid transparent; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .track-item::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: var(--primary-gradient); |
| transform: scaleX(0); |
| transition: transform 0.3s ease; |
| } |
| |
| .track-item:hover::before { |
| transform: scaleX(1); |
| } |
| |
| .track-item:hover { |
| transform: translateY(-5px); |
| border-color: rgba(255, 255, 255, 0.2); |
| } |
| |
| .track-item.active { |
| border-color: var(--accent); |
| } |
| |
| .track-thumb { |
| width: 50px; |
| height: 50px; |
| border-radius: 8px; |
| background: var(--primary-gradient); |
| margin-bottom: 1rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.2rem; |
| } |
| |
| .track-title { |
| font-weight: 500; |
| margin-bottom: 0.3rem; |
| } |
| |
| .track-duration { |
| color: var(--text-secondary); |
| font-size: 0.9rem; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .main-content { |
| padding: 1rem; |
| margin-top: 100px; |
| } |
| |
| .header { |
| padding: 1rem; |
| } |
| |
| .controls { |
| gap: 1rem; |
| } |
| |
| .playlist-section { |
| grid-template-columns: 1fr; |
| } |
| |
| .tracks-grid { |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
| } |
| } |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| } |
| |
| ::-webkit-scrollbar-track { |
| background: rgba(255, 255, 255, 0.05); |
| } |
| |
| ::-webkit-scrollbar-thumb { |
| background: var(--primary-gradient); |
| border-radius: 4px; |
| } |
| |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.7; } |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="bg-animation"></div> |
| |
| <header class="header"> |
| <div class="logo"> |
| <i class="fas fa-music"></i> |
| Sherlock Music |
| </div> |
| <div class="header-actions"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" |
| style="color: var(--text-primary); text-decoration: none; font-weight: 500;"> |
| Built with anycoder |
| </a> |
| <div class="theme-toggle" id="themeToggle"> |
| <i class="fas fa-moon"></i> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="main-content"> |
| <section class="hero"> |
| <h1>Tu Estación de Música</h1> |
| <p>Descubre nueva música, crea tus listas personalizadas y disfruta de una experiencia única con nuestro reproductor premium.</p> |
| </section> |
|
|
| <section class="music-player" id="musicPlayer"> |
| <div class="album-art" id="albumArt"> |
| <i class="fas fa-music"></i> |
| </div> |
| <div class="track-info"> |
| <h2 id="trackTitle">Canción Actual</h2> |
| <p class="track-artist" id="trackArtist">Artista Desconocido</p> |
| </div> |
| |
| <div class="progress-container"> |
| <div class="progress-bar" id="progressBar"> |
| <div class="progress" id="progress"></div> |
| </div> |
| <div class="time-display"> |
| <span id="currentTime">0:00</span> |
| <span id="duration">0:00</span> |
| </div> |
| </div> |
|
|
| <div class="controls"> |
| <button class="control-btn" id="prevBtn"> |
| <i class="fas fa-step-backward"></i> |
| </button> |
| <button class="control-btn play-pause" id="playPauseBtn"> |
| <i class="fas fa-play"></i> |
| </button> |
| <button class="control-btn" id="nextBtn"> |
| <i class="fas fa-step-forward"></i> |
| </button> |
| </div> |
|
|
| <div class="volume-container"> |
| <i class="fas fa-volume-up"></i> |
| <div class="volume-bar" id="volumeBar"></div> |
| </div> |
| </section> |
|
|
| <section class="playlist-section"> |
| <div class="playlist-card playlist-1" data-playlist="1"> |
| <div class="playlist-icon"> |
| <i class="fas fa-guitar"></i> |
| </div> |
| <div class="playlist-title">Pop Hits 2024</div> |
| <div class="playlist-tracks">12 canciones • 45 min</div> |
| </div> |
| <div class="playlist-card playlist-2" data-playlist="2"> |
| <div class="playlist-icon"> |
| <i class="fas fa-drum"></i> |
| </div> |
| <div class="playlist-title">Rock Clásico</div> |
| <div class="playlist-tracks">15 canciones • 1h 2min</div> |
| </div> |
| <div class="playlist-card playlist-3" data-playlist="3"> |
| <div class="playlist-icon"> |
| <i class="fas fa-headphones"></i> |
| </div> |
| <div class="playlist-title">Chill Vibes</div> |
| <div class="playlist-tracks">20 canciones • 1h 30min</div> |
| </div> |
| </section> |
|
|
| <section class="recently-section"> |
| <h2 class="section-title"> |
| <i class="fas fa-history"></i> |
| Reproducidas Recientemente |
| </h2> |
| <div class="tracks-grid" id="tracksGrid"> |
| |
| </div> |
| </section> |
| </main> |
|
|
| <script> |
| class MusicPlayer { |
| constructor() { |
| this.audio = new Audio(); |
| this.audio.volume = 0.5; |
| this.isPlaying = false; |
| this.currentTrack = 0; |
| this.tracks = [ |
| { title: "Noche Estelar", artist: "Luna Vargas", duration: "3:45", color: "#667eea" }, |
| { title: "Ritmo Urbano", artist: "DJ Flow", duration: "2:58", color: "#f093fb" }, |
| { title: "Sueños Rotos", artist: "Marta Sol", duration: "4:12", color: "#4facfe" }, |
| { title: "Fuego en la Pista", artist: "Carlos Rey", duration: "3:22", color: "#ff6b6b" }, |
| { title: "Alma Libre", artist: "Sofía Luna", duration: "4:01", color: "#51cf66" }, |
| { title: "Eco del Tiempo", artist: "Raúl Mendoza", duration: "3:37", color: "#764ba2" } |
| ]; |
| |
| this.playlists = { |
| 1: ["Noche Estelar", "Ritmo Urbano", "Sueños Rotos"], |
| 2: ["Fuego en la Pista", "Eco del Tiempo"], |
| 3: ["Alma Libre", "Sueños Rotos"] |
| }; |
| |
| this.init(); |
| } |
| |
| init() { |
| this.bindEvents(); |
| this.loadTrack(0); |
| this.renderTracks(); |
| this.updateVolumeBar(); |
| } |
| |
| bindEvents() { |
| |
| document.getElementById('playPauseBtn').addEventListener('click', () => this.togglePlay()); |
| document.getElementById('prevBtn').addEventListener('click', () => this.prevTrack()); |
| document.getElementById('nextBtn').addEventListener('click', () => this.nextTrack()); |
| |
| |
| const progressBar = document.getElementById('progressBar'); |
| progressBar.addEventListener('click', (e) => this.setProgress(e)); |
| |
| |
| const volumeBar = document.getElementById('volumeBar'); |
| volumeBar.addEventListener('click', (e) => this.setVolume(e)); |
| |
| |
| this.audio.addEventListener('timeupdate', () => this.updateProgress()); |
| this.audio.addEventListener('loadedmetadata', () => this.updateDuration()); |
| this.audio.addEventListener('ended', () => this.nextTrack()); |
| |
| |
| document.querySelectorAll('.playlist-card').forEach(card => { |
| card.addEventListener('click', (e) => this.playPlaylist(card.dataset.playlist)); |
| }); |
| |
| |
| document.addEventListener('click', (e) => { |
| if (e.target.closest('.track-item')) { |
| const index = parseInt(e.target.closest('.track-item').dataset.index); |
| this.loadTrack(index); |
| } |
| }); |
| |
| |
| document.addEventListener('keydown', (e) => { |
| if (e.code === 'Space') { |
| e.preventDefault(); |
| this.togglePlay(); |
| } else if (e.code === 'ArrowLeft') { |
| this.prevTrack(); |
| } else if (e.code === 'ArrowRight') { |
| this.nextTrack(); |
| } |
| }); |
| } |
| |
| loadTrack(index) { |
| this.currentTrack = index; |
| const track = this.tracks[index]; |
| |
| document.getElementById('trackTitle').textContent = track.title; |
| document.getElementById('trackArtist').textContent = track.artist; |
| |
| |
| const albumArt = document.getElementById('albumArt'); |
| albumArt.style.background = track.color; |
| |
| |
| this.audio.currentTime = 0; |
| this.audio.pause(); |
| this.isPlaying = false; |
| |
| this.updateActiveTrack(); |
| this.updatePlayButton(); |
| } |
| |
| togglePlay() { |
| if (this.isPlaying) { |
| this.audio.pause(); |
| } else { |
| this.audio.play(); |
| document.getElementById('albumArt').classList.add('playing'); |
| } |
| this.isPlaying = !this.isPlaying; |
| this.updatePlayButton(); |
| } |
| |
| nextTrack() { |
| this.loadTrack((this.currentTrack + 1) % this.tracks.length); |
| if (this.isPlaying) { |
| this.audio.play(); |
| document.getElementById('albumArt').classList.add('playing'); |
| } |
| } |
| |
| prevTrack() { |
| this.loadTrack((this.currentTrack - 1 + this.tracks.length) % this.tracks.length); |
| if (this.isPlaying) { |
| this.audio.play(); |
| document.getElementById('albumArt').classList.add('playing'); |
| } |
| } |
| |
| playPlaylist(playlistId) { |
| const playlistTracks = this.playlists[playlistId]; |
| const firstTrackIndex = this.tracks.findIndex(track => |
| playlistTracks.includes(track.title) |
| ); |
| this.loadTrack(firstTrackIndex); |
| this.togglePlay(); |
| } |
| |
| updatePlayButton() { |
| const btn = document.getElementById('playPauseBtn'); |
| const icon = btn.querySelector('i'); |
| icon.className = this.isPlaying ? 'fas fa-pause' : 'fas fa-play'; |
| } |
| |
| updateProgress() { |
| if (this.audio.duration) { |
| const progress = (this.audio.currentTime / this.audio.duration) * 100; |
| document.getElementById('progress').style.width = progress + '%'; |
| document.getElementById('currentTime').textContent = |
| this.formatTime(this.audio.currentTime); |
| } |
| } |
| |
| updateDuration() { |
| document.getElementById('duration').textContent = |
| this.formatTime(this.audio.duration); |
| } |
| |
| setProgress(e) { |
| const progressBar = document.getElementById('progressBar'); |
| const rect = progressBar.getBoundingClientRect(); |
| const pos = (e.clientX - rect.left) / rect.width; |
| this.audio.currentTime = pos * this.audio.duration; |
| } |
| |
| setVolume(e) { |
| const volumeBar = document.getElementById('volumeBar'); |
| const rect = volumeBar.getBoundingClientRect(); |
| const pos = (e.clientX - rect.left) / rect.width; |
| this.audio.volume = Math.max(0, Math.min(1, pos)); |
| this.updateVolumeBar(); |
| } |
| |
| updateVolumeBar() { |
| const volumeBar = document.getElementById('volumeBar'); |
| const progress = document.createElement('div'); |
| progress.style.width = (this.audio.volume * 100) + '%'; |
| progress.style.height = '100%'; |
| progress.style.background = 'var(--primary-gradient)'; |
| progress.style.borderRadius = '2px'; |
| progress.style.transition = 'width 0.1s ease'; |
| volumeBar.innerHTML = ''; |
| volumeBar.appendChild(progress); |
| } |
| |
| formatTime(seconds) { |
| const mins = Math.floor(seconds / 60); |
| const secs = Math.floor(seconds % 60); |
| return `${mins}:${secs.toString().padStart(2, '0')}`; |
| } |
| |
| renderTracks() { |
| const container = document.getElementById('tracksGrid'); |
| container.innerHTML = this.tracks.map((track, index) => ` |
| <div class="track-item" data-index="${index}"> |
| <div class="track-thumb" style="background: ${track.color}"> |
| <i class="fas fa-music"></i> |
| </div> |
| <div class="track-title">${track.title}</div> |
| <div class="track-duration">${track.artist} • ${track.duration}</div> |
| </div> |
| `).join(''); |
| } |
| |
| updateActiveTrack() { |
| document.querySelectorAll('.track-item').forEach((item, index) => { |
| item.classList.toggle('active', index === this.currentTrack); |
| }); |
| } |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| new MusicPlayer(); |
| }); |
| |
| |
| setInterval(() => { |
| if (document.getElementById('albumArt').classList.contains('playing')) { |
| const albumArt = document.getElementById('albumArt'); |
| const scale = 1 + Math.sin(Date.now() / 200) * 0.05; |
| albumArt.style.transform = `scale(${scale})`; |
| } |
| }, 100); |
| </script> |
| </body> |
| </html> |
