Дизайн музыкального плеера - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<div class="screen-1">

  <header>

    <ion-icon name="arrow-back-outline"></ion-icon><span>NOW PLAYING</span>

    <ion-icon name="menu-outline"></ion-icon>

  </header>

  <div class="player">

    <div class="song">

      <div class="img-container"> <img src="https://upload.wikimedia.org/wikipedia/en/c/cd/Taylor_Swift_-_Lover.png" alt="Lover Album Cover"/></div>

      <h1>ME!</h1>

      <h6>Taylor Swift</h6>

    </div>

    <div class="slider"><span class="start">0:00</span>

      <input class="input" type="range" value="0"/><span class="end">3:13</span>

    </div>

    <div class="controls">

      <button>

        <ion-icon name="play-back-sharp"></ion-icon>

      </button>

      <button> 

        <ion-icon name="pause-sharp"></ion-icon>

      </button>

      <button>

        <ion-icon name="play-forward-sharp"></ion-icon>

      </button>

    </div>

  </div>

</div>

<div class="screen-2">

  <header><span>Taylor Swift &middot; Lover</span></header>

  <div class="title">

    <ion-icon name="star"></ion-icon><img src="https://upload.wikimedia.org/wikipedia/en/c/cd/Taylor_Swift_-_Lover.png" alt="Lover Album Cover"/>

    <ion-icon name="ellipsis-horizontal"></ion-icon>

  </div>

  <div class="songs">

    <div class="song">

      <div class="details">

        <h5>Cruel Summer</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="play-sharp"></ion-icon>

      </button>

    </div>

    <div class="song">

      <div class="details">

        <h5>ME!</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="pause-sharp"></ion-icon>

      </button>

    </div>

    <div class="song">

      <div class="details">

        <h5>I Forgot You Existed</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="play-sharp"></ion-icon>

      </button>

    </div>

    <div class="song">

      <div class="details">

        <h5>You Need to calm down</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="play-sharp"></ion-icon>

      </button>

    </div>

    <div class="song">

      <div class="details">

        <h5>Lover</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="play-sharp"></ion-icon>

      </button>

    </div>

    <div class="song">

      <div class="details">

        <h5>I Think He Knows</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="play-sharp"></ion-icon>

      </button>

    </div>

    <div class="song">

      <div class="details">

        <h5>London Boy</h5><span>Taylor Swift</span>

      </div>

      <button>

        <ion-icon name="play-sharp"></ion-icon>

      </button>

    </div>

  </div>

</div>

* {

  font-family: "Poppins";

  outline: none;

}



body {

  background: #f9e7f0;

  display: flex;

  height: 100vh;

  flex-direction: row;

  justify-content: center;

  align-items: center;

  gap: 2em;

  overflow-x: hidden;

}



.screen-1 {

  margin-top: auto;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  background: #f8e7f1;

  box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff, 0 0 2vh 2vh #f9e7f0;

  padding: 1em;

  border-radius: 20px;

}

.screen-1 header {

  padding: 1.1em;

  display: flex;

  gap: 3.4em;

  color: #b6aaae;

}

.screen-1 header ion-icon {

  padding: 0.5em;

  background: linear-gradient(145deg, #fff7ff, #dfd0d9);

  box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff;

  border-radius: 50%;

}

.screen-1 header span {

  font-weight: bold;

  font-size: 0.7em;

  margin-top: 0.7em;

}

.screen-1 .song {

  margin-top: 4em;

  padding: 0.1em;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.screen-1 .song .img-container {

  display: flex;

  justify-content: center;

  align-items: center;

  margin-bottom: 1.1em;

}

.screen-1 .song .img-container img {

  border-radius: 50%;

  width: 10em;

  height: 10em;

  border: 0.45em solid #f6e0eb;

  box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff, 0 0 2vh 2vh #f9e7f0;

}

.screen-1 .song h1 {

  color: #675f63;

}

.screen-1 .song h6 {

  color: #bcaeb3;

  font-weight: normal;

  margin-top: -1em;

}

.screen-1 .slider {

  margin-top: 3em;

  display: flex;

  justify-content: center;

  align-items: center;

}

.screen-1 .slider input[type=range] {

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

  background: transparent;

  width: 90%;

}

.screen-1 .slider input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;

  width: 1.2em;

  height: 1.2em;

  background: radial-gradient(#faa3cc 30%, #f5e0ea 30%);

  border-radius: 50%;

  margin-top: -5px;

  cursor: pointer;

  box-shadow: 0 0 30px #f1f1f1;

}

.screen-1 .slider input[type=range]::-moz-range-thumb, .screen-1 .slider input[type=range]::-ms-thumb {

  width: 1.2em;

  height: 1.2em;

  background: radial-gradient(#faa3cc 30%, #f5e0ea 30%);

  border-radius: 50%;

  cursor: pointer;

  box-shadow: 0 0 30px #f1f1f1;

}

.screen-1 .slider input[type=range]:focus {

  -webkit-appearance: none;

     -moz-appearance: none;

          appearance: none;

}

.screen-1 .slider input[type=range]::-ms-track {

  width: 100%;

  cursor: pointer;

  background: transparent;

  border-color: transparent;

  color: transparent;

}

.screen-1 .slider input[type=range]::-webkit-slider-runnable-track {

  background: #fce9f2;

  width: 100%;

  border-radius: 10px;

  height: 0.5em;

  cursor: pointer;

  box-shadow: inset 0 0 5px -2px rgba(0, 0, 0, 0.5);

}

.screen-1 .slider input[type=range]::-moz-range-track, .screen-1 .slider input[type=range]::-ms-track {

  background: #fce9f2;

  width: 100%;

  border-radius: 10px;

  height: 0.5em;

  cursor: pointer;

  box-shadow: inset 0 0 5px -2px rgba(0, 0, 0, 0.5);

}

.screen-1 .slider input[type=range]::-moz-range-progress {

  background: #eda6c8;

}

.screen-1 .slider input[type=range]::-ms-fill-lower {

  background: #eda6c8;

}

.screen-1 .slider span {

  color: #908489;

  font-size: 0.7em;

  margin-top: -3em;

  z-index: 2;

}

.screen-1 .slider .start {

  margin-right: -2em;

}

.screen-1 .slider .end {

  margin-left: -2.2em;

}

.screen-1 .controls {

  margin-top: 6em;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 1em;

  gap: 2em;

}

.screen-1 .controls button {

  background: #ffebf3;

  box-shadow: 0 0 30px #e5cdda;

  padding: 0.8em;

  color: #908489;

  border: 1px solid #ffebf3;

  border-radius: 50%;

}

.screen-1 .controls button:nth-child(2n) {

  box-shadow: 0 0 30px #d9c4d0;

  background: #eda6c8;

  color: white;

  border: 1px solid #eda6c8;

}



.screen-2 {

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

  background: #f8e7f1;

  box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff, 0 0 2vh 2vh #f9e7f0;

  padding: 1em;

  border-radius: 20px;

  padding: 0;

  margin-top: auto;

}

.screen-2 header {

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 0.65em;

  color: #b6aaae;

  font-weight: bold;

  padding: 2em;

}

.screen-2 .title {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 2em;

  padding: 1em;

}

.screen-2 .title ion-icon {

  color: #908488;

  padding: 0.7em;

  background: #fedceb;

  border-radius: 50%;

  border: 0.1em solid #e6d5dd;

}

.screen-2 .title img {

  width: 7em;

  border-radius: 50%;

  border: 0.45em solid #f6e0eb;

  box-shadow: 20px 20px 60px #d3c4cd, -20px -20px 60px #ffffff, 0 0 2vh 2vh #f9e7f0;

}

.screen-2 .songs {

  display: flex;

  flex-direction: column;

}

.screen-2 .songs .song {

  margin-top: -1em;

  display: flex;

  align-items: center;

  gap: 3em;

  padding: 1em;

}

.screen-2 .songs .song .details {

  display: flex;

  flex-direction: column;

  color: #b6a5ab;

}

.screen-2 .songs .song .details span {

  font-size: 0.7em;

  margin-top: -1.7em;

  color: #dccbd2;

  font-weight: bold;

}

.screen-2 .songs .song button {

  align-self: end;

  border: 0.1em solid #f5d6e3;

  border-radius: 50%;

  padding-top: 0.45em;

  padding-left: 0.5em;

  padding-right: 0.5em;

  padding-bottom: 0.45em;

  box-shadow: 0 0 2em 0.1em #fff, inset 0 0 1em -0.8em #333, inset 0 0 3em -1.9em #fff;

}

.screen-2 .songs .song button ion-icon {

  color: #a9939d;

}

.screen-2 .songs .song:nth-child(1n) button {

  margin-left: 6.5em;

  background: #fedceb;

}

.screen-2 .songs .song:nth-child(1n) button ion-icon {

  color: #a9939d;

}

.screen-2 .songs .song:nth-child(3n) button {

  background: #fedceb;

  margin-left: 4.5em;

}

.screen-2 .songs .song:nth-child(3n) button ion-icon {

  color: #a9939d;

}

.screen-2 .songs .song:nth-child(2n) button {

  margin-left: 8.5em;

  background: #eda6c8;

}

.screen-2 .songs .song:nth-child(2n) button ion-icon {

  color: white;

}

.screen-2 .songs .song:nth-child(4n) button {

  background: #fedceb;

  margin-left: 2.9em;

}

.screen-2 .songs .song:nth-child(4n) button ion-icon {

  color: #a9939d;

}

.screen-2 .songs .song:nth-child(5n) button {

  margin-left: 8.5em;

  background: #fedceb;

}

.screen-2 .songs .song:nth-child(5n) button ion-icon {

  color: #a9939d;

}

.screen-2 .songs .song:nth-child(6n) button {

  margin-left: 5.5em;

  background: #fedceb;

}

.screen-2 .songs .song:nth-child(6n) button ion-icon {

  color: #a9939d;

}

.screen-2 .songs .song:nth-child(7n) button {

  margin-left: 7.5em;

  background: #fedceb;

}

.screen-2 .songs .song:nth-child(7n) button ion-icon {

  color: #a9939d;

}



@media screen and (max-width: 730px) {

  body {

    flex-direction: column;

  }



  .screen-1, .screen-2 {

    margin: auto;

  }

}

// Span Change

let start = document.querySelector(".start"),

input = document.querySelector(".input");



addEventListener("input", () => {

  let x = Math.abs(Math.round(input.value / 30)),

  y = Math.round(input.value / 76 * 10);

  start.innerHTML = `${x}` + ":" + `${y}`;

  if (y === 0) {

    start.innerHTML = `${x}` + ":" + `${y}0`;

  } else if (y === 1) {

    start.innerHTML = `${x}` + ":" + `${y}1`;

  } else if (y === 2) {

    start.innerHTML = `${x}` + ":" + `${y}2`;

  } else if (y === 3) {

    start.innerHTML = `${x}` + ":" + `${y}3`;

  } else if (y === 4) {

    start.innerHTML = `${x}` + ":" + `${y}4`;

  } else if (y === 5) {

    start.innerHTML = `${x}` + ":" + `${y}5`;

  } else if (y === 6) {

    start.innerHTML = `${x}` + ":" + `11`;

  } else if (y === 7) {

    start.innerHTML = `${x}` + ":" + `22`;

  } else if (y === 8) {

    start.innerHTML = `${x}` + ":" + `33`;

  } else if (y === 9) {

    start.innerHTML = `${x}` + ":" + `44`;

  }

});

//# sourceURL=pen.js