Interface de usuário HTML e CSS para clone do Spotify: reprodutor de música

41 r.ducoutumanyc

Abrir no Editor Publique Seu Código

Interface de usuário HTML e CSS para clone do Spotify: reprodutor de música

Recomendado

29 December 2024

Uma página inicial alternativa

13 June 2025

Efeito de foco no mapa

8 July 2025

TheDoc's - Sistema moderno de login e registro

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>

Recomendado

Uma página inicial alternativa

Efeito de foco no mapa

TheDoc's - Sistema moderno de login e registro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS