Struttura HTML del lettore iPod neumorfico

103 alejandrokundrah

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Struttura HTML del lettore iPod neumorfico

Consigliato

12 July 2025

Contatore di clic della barra spaziatrice - JavaScript HTML

10 July 2025

Esempio HTML della schermata di caricamento animata CSS

19 November 2024

Collegamento al passaggio del mouse

HTML

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #e0e0e0;
  font-family: Arial, sans-serif;
}

.ipod-container {
  width: 300px;
  height: 500px;
  border-radius: 50px;
  background: #e0e0e0;
  box-shadow: 20px 20px 60px #bebebe,
              -20px -20px 60px #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.screen {
  width: 250px;
  height: 300px;
  background: #e0e0e0;
  border-radius: 20px;
  box-shadow: inset 10px 10px 30px #bebebe,
              inset -10px -10px 30px #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.song-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.artist, .track {
  color: #333;
  text-align: center;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background: #bebebe;
  border-radius: 5px;
  overflow: hidden;
}

.progress {
  width: 0;
  height: 100%;
  background: #4CAF50;
}

.click-wheel {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background: #e0e0e0;
  box-shadow: 10px 10px 30px #bebebe,
              -10px -10px 30px #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #e0e0e0;
  box-shadow: inset 5px 5px 15px #bebebe,
              inset -5px -5px 15px #ffffff;
  position: absolute;
  z-index: 10;
}

.menu-button, .prev-button, .next-button, .play-pause-button {
  position: absolute;
  background: #e0e0e0;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 3px 3px 6px #bebebe,
              -3px -3px 6px #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.menu-button {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.prev-button {
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.next-button {
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.play-pause-button {
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.menu-button:active, .prev-button:active, 
.next-button:active, .play-pause-button:active {
  box-shadow: inset 3px 3px 6px #bebebe,
              inset -3px -3px 6px #ffffff;
}

JS

// Sample playlist (replace with your own tracks)
const playlist = [
  {
    artist: 'Artist 1',
    track: 'Song Title 1',
    src: 'path/to/song1.mp3'
  },
  {
    artist: 'Artist 2',
    track: 'Song Title 2',
    src: 'path/to/song2.mp3'
  }
];

let currentTrackIndex = 0;
const audioPlayer = document.getElementById('audio-player');
const artistElement = document.querySelector('.artist');
const trackElement = document.querySelector('.track');
const progressBar = document.querySelector('.progress');

const menuButton = document.querySelector('.menu-button');
const prevButton = document.querySelector('.prev-button');
const nextButton = document.querySelector('.next-button');
const playPauseButton = document.querySelector('.play-pause-button');

function loadTrack(index) {
  const track = playlist[index];
  audioPlayer.src = track.src;
  artistElement.textContent = track.artist;
  trackElement.textContent = track.track;
}

function updateProgressBar() {
  const percentage = (audioPlayer.currentTime / audioPlayer.duration) * 100;
  progressBar.style.width = `${percentage}%`;
}

menuButton.addEventListener('click', () => {
  // Implement menu functionality
  console.log('Menu clicked');
});

prevButton.addEventListener('click', () => {
  currentTrackIndex = (currentTrackIndex - 1 + playlist.length) % playlist.length;
  loadTrack(currentTrackIndex);
  audioPlayer.play();
});

nextButton.addEventListener('click', () => {
  currentTrackIndex = (currentTrackIndex + 1) % playlist.length;
  loadTrack(currentTrackIndex);
  audioPlayer.play();
});

playPauseButton.addEventListener('click', () => {
  if (audioPlayer.paused) {
    audioPlayer.play();
  } else {
    audioPlayer.pause();
  }
});

audioPlayer.addEventListener('timeupdate', updateProgressBar);

// Initialize the first track
loadTrack(currentTrackIndex);

Consigliato

Contatore di clic della barra spaziatrice - JavaScript HTML

Esempio HTML della schermata di caricamento animata CSS

Collegamento al passaggio del mouse

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS