Clonage HTML/CSS de Spotify : interface utilisateur du lecteur de musique

44 r.ducoutumanyc

Ouvrir dans l'éditeur Publiez votre code

Clonage HTML/CSS de Spotify : interface utilisateur du lecteur de musique

Recommandé

30 January 2025

Page de destination du chef personnel

13 January 2024

Jeu de morpion

28 October 2025

Bouton bascule du mode clair HTML/CSS/JS

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>

Recommandé

Page de destination du chef personnel

Jeu de morpion

Bouton bascule du mode clair HTML/CSS/JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS