Clon de Spotify

3096 Andev.web

Abrir en el editor Publica tu código

Recomendado

28 August 2024

Animación de desplazamiento de paralaje

25 August 2024

Exploración de productos de animación de interfaz de usuario

22 May 2025

Aplicación de voz

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

Animación de desplazamiento de paralaje

Exploración de productos de animación de interfaz de usuario

Aplicación de voz

HTML

CSS

JS

Recomendado

Animación de desplazamiento de paralaje

Exploración de productos de animación de interfaz de usuario

Aplicación de voz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS