Clon de Spotify

4055 Andev.web

Abrir en el editor Publica tu código

Recomendado

25 November 2025

Minero de oro

26 October 2024

Botón interruptor de luz oscura.

14 September 2024

Animación de línea de frecuencia cardíaca

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Spotify Clone</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Gotham:wght@400;500;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Gotham', sans-serif;
        }

:root {
            --spotify-green: #1DB954;
            --spotify-black: #191414;
            --spotify-white: #FFFFFF;
            --spotify-grey: #282828;
        }

body {
            background-color: var(--spotify-black);
            color: var(--spotify-white);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

.main-container {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

.sidebar {
            width: 240px;
            background-color: var(--spotify-black);
            padding: 24px 12px;
            display: flex;
            flex-direction: column;
        }

.logo {
            padding: 0 12px;
            margin-bottom: 24px;
        }

.logo img {
            width: 130px;
        }

.nav-links {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

.nav-links a {
            color: #b3b3b3;
            text-decoration: none;
            padding: 12px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            gap: 16px;
            font-weight: 500;
            transition: color 0.2s;
        }

.nav-links a:hover {
            color: var(--spotify-white);
        }

.nav-links a.active {
            background-color: var(--spotify-grey);
            color: var(--spotify-white);
        }

.main-content {
            flex: 1;
            background: linear-gradient(to bottom, #535353, var(--spotify-black));
            padding: 24px;
            overflow-y: auto;
        }

.playlists-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 24px;
            margin-top: 24px;
        }

.playlist-card {
            background-color: var(--spotify-grey);
            padding: 16px;
            border-radius: 8px;
            transition: background-color 0.3s;
            cursor: pointer;
        }

.playlist-card:hover {
            background-color: #3E3E3E;
        }

.playlist-card img {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 4px;
            margin-bottom: 16px;
        }

.playlist-card h3 {
            font-size: 16px;
            margin-bottom: 8px;
        }

.playlist-card p {
            color: #b3b3b3;
            font-size: 14px;
        }

.player {
            height: 90px;
            background-color: var(--spotify-grey);
            border-top: 1px solid #282828;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.now-playing {
            display: flex;
            align-items: center;
            gap: 12px;
            min-width: 180px;
        }

.now-playing img {
            width: 56px;
            height: 56px;
            border-radius: 4px;
        }

.track-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

.track-info .title {
            font-size: 14px;
            font-weight: 500;
        }

.track-info .artist {
            font-size: 12px;
            color: #b3b3b3;
        }

.player-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
            max-width: 722px;
        }

.control-buttons {
            display: flex;
            align-items: center;
            gap: 16px;
        }

.control-buttons button {
            background: none;
            border: none;
            color: #b3b3b3;
            cursor: pointer;
            transition: color 0.2s;
        }

.control-buttons button:hover {
            color: var(--spotify-white);
        }

.control-buttons .play-pause {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: var(--spotify-white);
            color: var(--spotify-black);
            display: flex;
            align-items: center;
            justify-content: center;
        }

.progress-bar {
            width: 100%;
            height: 4px;
            background-color: #4f4f4f;
            border-radius: 2px;
            position: relative;
        }

.progress {
            width: 30%;
            height: 100%;
            background-color: var(--spotify-white);
            border-radius: 2px;
            position: relative;
        }

.volume-controls {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 180px;
            justify-content: flex-end;
        }

@media (max-width: 768px) {
            .sidebar {
                width: 64px;
                padding: 24px 4px;
            }

.logo {
                display: none;
            }

.nav-links a span {
                display: none;
            }

.now-playing {
                min-width: auto;
            }

.track-info {
                display: none;
            }

.volume-controls {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="main-container">
        <aside class="sidebar">
            <div class="logo">
                <img src="https://storage.googleapis.com/pr-newsroom-wp/1/2018/11/Spotify_Logo_RGB_White.png" alt="Spotify">
            </div>
            <nav class="nav-links">
                <a href="#" class="active">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M12.5 3.247a1 1 0 0 0-1 0L4 7.577V20h4.5v-6a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v6H20V7.577l-7.5-4.33zm-2-1.732a3 3 0 0 1 3 0l7.5 4.33a2 2 0 0 1 1 1.732V21a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1v-6h-3v6a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.577a2 2 0 0 1 1-1.732l7.5-4.33z"/>
                    </svg>
                    <span>Inicio</span>
                </a>
                <a href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M10.533 1.279c-5.18 0-9.407 4.14-9.407 9.279s4.226 9.279 9.407 9.279c2.234 0 4.29-.77 5.907-2.058l4.353 4.353a1 1 0 1 0 1.414-1.414l-4.344-4.344a9.157 9.157 0 0 0 2.077-5.816c0-5.14-4.226-9.28-9.407-9.28zm-7.407 9.279c0-4.006 3.302-7.28 7.407-7.28s7.407 3.274 7.407 7.28-3.302 7.279-7.407 7.279-7.407-3.273-7.407-7.28z"/>
                    </svg>
                    <span>Buscar</span>
                </a>
                <a href="#">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
                        <path d="M14.5 2.134a1 1 0 0 1 1 0l6 3.464a1 1 0 0 1 .5.866V21a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V3a1 1 0 0 1 .5-.866zM16 4.732V20h4V7.041l-4-2.309zM3 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H3zm1-2h4V4H4v16z"/>
                    </svg>
                    <span>Tu Biblioteca</span>
                </a>
            </nav>
        </aside>
        <main class="main-content">
            <h1>Buenos días</h1>
            <div class="playlists-grid">
                <div class="playlist-card">
                    <img src="https://image-cdn-ak.spotifycdn.com/image/ab67706c0000da84849cff93133f27d8c1141da3" alt="Playlist">
                    <h3>Descubrimiento semanal</h3>
                    <p>Tu mix semanal de música nueva</p>
                </div>
                <div class="playlist-card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDtX_eVaWBk3AA5i1oUoH9H29IFP7XXuBX8g&s" alt="Playlist">
                    <h3>Mix Diario 1</h3>
                    <p>Artista 1, Artista 2 y más</p>
                </div>
                <div class="playlist-card">
                    <img src="https://i.scdn.co/image/ab67706f0000000275400322be4ca506707d63e1" alt="Playlist">
                    <h3>Éxitos Colombia</h3>
                    <p>Lo más escuchado en España</p>
                </div>
                <div class="playlist-card">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT5iqCqpandwMvpDplQ02MBJRg6IdU5D54Ocw&s" alt="Playlist">
                    <h3>Top 50 Global</h3>
                    <p>Los temas más hot del mundo</p>
                </div>
            </div>
        </main>
    </div>
    <footer class="player">
        <div class="now-playing">
            <img src="https://i.scdn.co/image/ab67616d0000b273b62a2ec2d61d48f34a368144" alt="Album cover">
            <div class="track-info">
                <div class="title">Mirame</div>
                <div class="artist">Blessd</div>
            </div>
        </div>
        <div class="player-controls">
            <div class="control-buttons">
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M13.151.922a.75.75 0 1 0-1.06 1.06L13.109 3H11.16a3.75 3.75 0 0 0-2.873 1.34l-6.173 7.356A2.25 2.25 0 0 1 .39 12.5H0V14h.391a3.75 3.75 0 0 0 2.873-1.34l6.173-7.356a2.25 2.25 0 0 1 1.724-.804h1.947l-1.017 1.018a.75.75 0 0 0 1.06 1.06L15.98 3.75 13.15.922zM.391 3.5H0V2h.391c1.109 0 2.16.49 2.873 1.34L4.89 5.277l-.979 1.167-1.796-2.14A2.25 2.25 0 0 0 .39 3.5z"/>
                    </svg>
                </button>
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3.3 1a.7.7 0 0 1 .7.7v5.15l9.95-5.744a.7.7 0 0 1 1.05.606v12.575a.7.7 0 0 1-1.05.607L4 9.149V14.3a.7.7 0 0 1-.7.7H1.7a.7.7 0 0 1-.7-.7V1.7a.7.7 0 0 1 .7-.7h1.6z"/>
                    </svg>
                </button>
                <button class="play-pause">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"/>
                    </svg>
                </button>
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M12.7 1a.7.7 0 0 0-.7.7v5.15L2.05 1.107A.7.7 0 0 0 1 1.712v12.575a.7.7 0 0 0 1.05.607L12 9.149V14.3a.7.7 0 0 0 .7.7h1.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-1.6z"/>
                    </svg>
                </button>
                <button>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                        <path d="M0 4.75l3.5 2.25-3.5 2.25v-4.5zm4 0l3.5 2.25-3.5 2.25v-4.5z"/>
                    </svg>
                </button>
            </div>
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
        </div>
        <div class="volume-controls">
            <button>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M9.741.85a.75.75 0 0 1 .375.65v13a.75.75 0 0 1-1.125.65l-6.925-4a3.642 3.642 0 0 1-1.33-4.967 3.639 3.639 0 0 1 1.33-1.332l6.925-4a.75.75 0 0 1 .75 0zm-6.924 5.3a2.139 2.139 0 0 0 0 3.7l5.8 3.35V2.8l-5.8 3.35zm8.683 4.29V5.56a2.75 2.75 0 0 1 0 4.88z"/>
                </svg>
            </button>
            <div class="progress-bar">
                <div class="progress"></div>
            </div>
        </div>
    </footer>

playPauseBtn.addEventListener('click', () => {
            isPlaying = !isPlaying;
            playPauseBtn.innerHTML = isPlaying 
                ? '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2.7 1a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7H2.7zm8 0a.7.7 0 0 0-.7.7v12.6a.7.7 0 0 0 .7.7h2.6a.7.7 0 0 0 .7-.7V1.7a.7.7 0 0 0-.7-.7h-2.6z"/></svg>'
                : '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M3 1.713a.7.7 0 0 1 1.05-.607l10.89 6.288a.7.7 0 0 1 0 1.212L4.05 14.894A.7.7 0 0 1 3 14.288V1.713z"/></svg>';
        });

// Simulación de progreso
        setInterval(() => {
            const progress = document.querySelector('.player-controls .progress');
            let width = parseFloat(progress.style.width || '30');
            width = (width + 0.1) % 100;
            progress.style.width = width + '%';
        }, 1000);
    </script>
</body>
</html>

Clon de Spotify

Recomendado

Minero de oro

Botón interruptor de luz oscura.

Animación de línea de frecuencia cardíaca

HTML

CSS

JS

Recomendado

Minero de oro

Botón interruptor de luz oscura.

Animación de línea de frecuencia cardíaca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS