Plantilla HTML/CSS de reproductor de música similar a Spotify

Abrir en el editor Publica tu código

Recomendado

3 June 2025

Plantilla HTML del panel de control de Couture Atelier

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon Lecteur Musical</title>
    <style>
        /* Styles de base pour la maquette similaire à Spotify */
        body {
            font-family: 'Montserrat', sans-serif; /* Police similaire à Spotify */
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            background-color: #121212; /* Couleur de fond principale */
            color: #b3b3b3; /* Couleur de texte par défaut */
            overflow: hidden; /* Empêche le défilement du corps principal */
        }

.app-container {
            display: flex;
            flex: 1; /* Prend l'espace restant en hauteur */
            overflow: hidden; /* Empêche le défilement du conteneur de l'application */
        }

header {
            background-color: #000; /* Couleur d'arrière-plan de l'en-tête */
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 60px; /* Hauteur fixe de l'en-tête */
            box-shadow: 0 2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }

.header-left {
            display: flex;
            align-items: center;
        }

.app-logo {
            font-size: 24px;
            font-weight: bold;
            color: #1DB954; /* Vert Spotify */
            margin-right: 20px;
        }

.search-bar {
            padding: 8px 15px;
            border-radius: 20px;
            border: 1px solid #333;
            background-color: #282828;
            color: #fff;
            width: 300px;
            box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
        }

.user-profile .profile-btn {
            background-color: #282828;
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s ease;
        }

.user-profile .profile-btn:hover {
            background-color: #3a3a3a;
        }

nav.sidebar {
            width: 250px;
            background-color: #000;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 5px rgba(0,0,0,0.5);
            overflow-y: auto; /* Permet le défilement de la barre latérale */
            scrollbar-width: thin; /* Pour Firefox */
            scrollbar-color: #535353 #000; /* Pour Firefox */
        }

/* Styles de la barre de défilement pour WebKit */
        nav.sidebar::-webkit-scrollbar {
            width: 8px;
        }

nav.sidebar::-webkit-scrollbar-track {
            background: #000;
        }

nav.sidebar::-webkit-scrollbar-thumb {
            background-color: #535353;
            border-radius: 4px;
            border: 2px solid #000;
        }

.sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

.sidebar ul li {
            margin-bottom: 5px;
        }

.sidebar ul li a {
            display: flex; /* Pour aligner l'icône et le texte */
            align-items: center;
            padding: 10px 20px;
            color: #b3b3b3;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }

.sidebar ul li a i {
            margin-right: 10px;
            font-size: 20px;
        }

.sidebar ul li a:hover, .sidebar ul li a.active {
            background-color: #282828;
            color: #fff;
        }

.sidebar h3 {
            color: #fff;
            padding: 0 20px;
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.create-playlist-btn {
            background-color: #1DB954;
            color: #fff;
            border: none;
            padding: 10px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            margin: 0 20px 20px 20px; /* Ajusté pour être centré avec le padding */
            transition: background-color 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.create-playlist-btn i {
            margin-right: 8px;
        }

.create-playlist-btn:hover {
            background-color: #178a40;
        }

.main-content {
            flex: 1; /* Prend l'espace restant en largeur */
            background-color: #121212;
            padding: 20px;
            overflow-y: auto; /* Permet le défilement du contenu principal */
            scrollbar-width: thin; /* Pour Firefox */
            scrollbar-color: #535353 #121212; /* Pour Firefox */
        }

/* Styles de la barre de défilement pour WebKit */
        .main-content::-webkit-scrollbar {
            width: 8px;
        }

.main-content::-webkit-scrollbar-track {
            background: #121212;
        }

.main-content::-webkit-scrollbar-thumb {
            background-color: #535353;
            border-radius: 4px;
            border: 2px solid #121212;
        }

.content-section {
            margin-bottom: 40px;
        }

.content-section h2 {
            color: #fff;
            font-size: 28px;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

.grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
        }

.card {
            background-color: #181818;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            transition: background-color 0.3s ease;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.card:hover {
            background-color: #282828;
        }

.card img {
            width: 100%;
            height: auto;
            border-radius: 4px;
            margin-bottom: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5);
        }

.card h3 {
            color: #fff;
            font-size: 16px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%; /* S'assure que le texte ne déborde pas */
        }

.card p {
            color: #b3b3b3;
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
        }

.playlists-list-detailed .playlist-item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            border-radius: 8px;
            transition: background-color 0.3s ease;
            cursor: pointer;
            margin-bottom: 10px;
        }

.playlists-list-detailed .playlist-item:hover {
            background-color: #282828;
        }

.playlist-item img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 15px;
            object-fit: cover;
        }

.playlist-info h4 {
            color: #fff;
            margin: 0;
            font-size: 18px;
        }

.playlist-info p {
            color: #b3b3b3;
            margin: 0;
            font-size: 14px;
        }

footer.player-bar {
            background-color: #282828;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 90px; /* Hauteur fixe de la barre de lecture */
            box-shadow: 0 -2px 5px rgba(0,0,0,0.5);
            z-index: 10;
        }

.current-song-info {
            display: flex;
            align-items: center;
            width: 25%;
        }

.current-song-info img {
            width: 60px;
            height: 60px;
            border-radius: 4px;
            margin-right: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

.song-details h4 {

Plantilla HTML/CSS de reproductor de música similar a Spotify

Recomendado

Un código de fluxyftnpro

Sitio web de información

Plantilla HTML del panel de control de Couture Atelier

HTML

CSS

JS

Recomendado

Un código de fluxyftnpro

Sitio web de información

Plantilla HTML del panel de control de Couture Atelier

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS