minimal_winamp_3.html•10.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimal Winamp Player</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
* {
font-family: 'Inter', sans-serif;
}
.minimal-container {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1),
0 8px 16px rgba(0, 0, 0, 0.08);
}
.display-minimal {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
color: #e2e8f0;
}
.control-minimal {
background: #ffffff;
border: 1px solid #e2e8f0;
transition: all 0.2s ease;
}
.control-minimal:hover {
background: #f7fafc;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.control-minimal:active {
transform: translateY(0);
background: #edf2f7;
}
.play-button {
background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
color: white;
}
.play-button:hover {
background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
}
.progress-minimal {
background: linear-gradient(90deg, #4299e1 0%, #63b3ed 100%);
border-radius: 8px;
}
.volume-minimal {
background: linear-gradient(90deg, #a0aec0 0%, #4299e1 100%);
border-radius: 4px;
}
@keyframes minimal-viz {
0%, 100% { height: 8px; opacity: 0.3; }
50% { height: 32px; opacity: 1; }
}
.viz-minimal {
background: linear-gradient(to top, #4299e1 0%, #63b3ed 100%);
animation: minimal-viz 1s ease-in-out infinite;
border-radius: 2px;
margin: 0 2px;
}
.eq-minimal {
background: linear-gradient(to top, #e2e8f0 0%, #4299e1 100%);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.text-accent {
color: #4299e1;
}
.card-minimal {
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
<div class="minimal-container rounded-2xl p-8 w-full max-w-md border border-gray-200">
<!-- Clean Header -->
<div class="flex justify-between items-center mb-8">
<div class="text-2xl font-semibold text-gray-800">Music Player</div>
<div class="flex gap-2">
<div class="w-3 h-3 bg-green-400 rounded-full"></div>
<div class="w-3 h-3 bg-yellow-400 rounded-full"></div>
<div class="w-3 h-3 bg-red-400 rounded-full"></div>
</div>
</div>
<!-- Clean Display -->
<div class="display-minimal p-6 mb-8 rounded-xl">
<div class="text-lg font-medium mb-2" id="minimal-track">Now Playing</div>
<div class="text-sm opacity-75 mb-4" id="minimal-artist">Artist Name - Album Title</div>
<div class="flex justify-between items-center">
<div class="text-sm font-mono" id="minimal-time">2:34</div>
<div class="flex gap-3 text-xs opacity-60">
<span>MP3</span>
<span>320kbps</span>
<span>Stereo</span>
</div>
</div>
</div>
<!-- Minimal Visualizer -->
<div class="card-minimal p-4 mb-8">
<div class="text-sm text-gray-500 mb-3 text-center">Audio Visualization</div>
<div class="flex items-end justify-center h-12">
<div class="viz-minimal w-2" style="animation-delay: 0s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 0.2s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 0.4s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 0.6s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 0.8s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 1.0s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 1.2s;"></div>
<div class="viz-minimal w-2" style="animation-delay: 1.4s;"></div>
</div>
</div>
<!-- Clean Controls -->
<div class="flex justify-center gap-4 mb-8">
<button class="control-minimal p-3 rounded-xl" onclick="previousTrack()">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M8.445 14.832A1 1 0 0010 14v-2.798l5.445 3.63A1 1 0 0017 14V6a1 1 0 00-1.555-.832L10 8.798V6a1 1 0 00-1.555-.832l-6 4a1 1 0 000 1.664l6 4z"/>
</svg>
</button>
<button class="play-button control-minimal p-4 rounded-xl" onclick="togglePlay()" id="minimal-play">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" id="play-icon">
<path d="M8 5v10l8-5-8-5z"/>
</svg>
</button>
<button class="control-minimal p-3 rounded-xl" onclick="nextTrack()">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path d="M4.555 5.168A1 1 0 003 6v8a1 1 0 001.555.832L10 11.202V14a1 1 0 001.555.832l6-4a1 1 0 000-1.664l-6-4A1 1 0 0010 6v2.798L4.555 5.168z"/>
</svg>
</button>
</div>
<!-- Progress Bar -->
<div class="card-minimal p-4 mb-6">
<div class="text-sm text-gray-500 mb-2">Progress</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="progress-minimal h-2" style="width: 55%"></div>
</div>
</div>
<!-- Volume Controls -->
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="card-minimal p-4">
<div class="text-sm text-gray-500 mb-2">Volume</div>
<div class="bg-gray-200 rounded-full h-2">
<div class="volume-minimal h-2" style="width: 80%"></div>
</div>
</div>
<div class="card-minimal p-4">
<div class="text-sm text-gray-500 mb-2">Balance</div>
<div class="bg-gray-200 rounded-full h-2 relative">
<div class="absolute top-0 bg-blue-400 h-2 rounded-full" style="width: 8px; left: calc(50% - 4px);"></div>
</div>
</div>
</div>
<!-- Minimal Equalizer -->
<div class="card-minimal p-6">
<div class="text-sm text-gray-500 mb-4 text-center">Equalizer</div>
<div class="flex justify-center gap-3">
<div class="eq-minimal w-3" style="height: 40px;"></div>
<div class="eq-minimal w-3" style="height: 55px;"></div>
<div class="eq-minimal w-3" style="height: 48px;"></div>
<div class="eq-minimal w-3" style="height: 60px;"></div>
<div class="eq-minimal w-3" style="height: 52px;"></div>
<div class="eq-minimal w-3" style="height: 58px;"></div>
</div>
<div class="flex justify-between text-xs text-gray-400 mt-2">
<span>60Hz</span>
<span>170Hz</span>
<span>310Hz</span>
<span>600Hz</span>
<span>1kHz</span>
<span>3kHz</span>
</div>
</div>
</div>
<script>
let isPlaying = false;
let currentTrack = 1;
let currentTime = 154; // 2:34 in seconds
const minimalTracks = [
{ title: "Peaceful Morning", artist: "Ambient Collective - Nature Sounds" },
{ title: "Coffee Shop Jazz", artist: "Lo-Fi Beats - Chill Vibes" },
{ title: "Rainy Day Blues", artist: "Indie Folk - Acoustic Sessions" },
{ title: "Sunset Drive", artist: "Synthwave - Retro Nights" }
];
function updateMinimalDisplay() {
const minutes = Math.floor(currentTime / 60);
const seconds = currentTime % 60;
document.getElementById('minimal-time').textContent =
`${minutes}:${seconds.toString().padStart(2, '0')}`;
const track = minimalTracks[currentTrack - 1];
document.getElementById('minimal-track').textContent = track.title;
document.getElementById('minimal-artist').textContent = track.artist;
}
function togglePlay() {
isPlaying = !isPlaying;
const icon = document.getElementById('play-icon');
if (isPlaying) {
icon.innerHTML = '<path d="M5.5 3.5A1.5 1.5 0 017 5v10a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5zM13.5 3.5A1.5 1.5 0 0115 5v10a1.5 1.5 0 01-3 0V5a1.5 1.5 0 011.5-1.5z"/>';
startMinimalTimer();
} else {
icon.innerHTML = '<path d="M8 5v10l8-5-8-5z"/>';
stopMinimalTimer();
}
}
function nextTrack() {
currentTrack = currentTrack < minimalTracks.length ? currentTrack + 1 : 1;
currentTime = Math.floor(Math.random() * 200) + 60;
updateMinimalDisplay();
}
function previousTrack() {
currentTrack = currentTrack > 1 ? currentTrack - 1 : minimalTracks.length;
currentTime = Math.floor(Math.random() * 200) + 60;
updateMinimalDisplay();
}
let minimalTimer;
function startMinimalTimer() {
minimalTimer = setInterval(() => {
if (isPlaying) {
currentTime++;
updateMinimalDisplay();
}
}, 1000);
}
function stopMinimalTimer() {
if (minimalTimer) {
clearInterval(minimalTimer);
}
}
// Initialize
updateMinimalDisplay();
</script>
</body>
</html>