<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SoundWave - Music Player</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary-color: #ff6b6b;
--primary-dark: #ff5252;
--bg-dark: #1a1a2e;
--bg-darker: #16213e;
--text-light: #aaa;
--card-bg: rgba(255, 255, 255, 0.05);
--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
body {
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
flex: 1;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 30px;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
}
.logo i {
font-size: 32px;
}
nav ul {
display: flex;
list-style: none;
gap: 30px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
padding: 8px 12px;
border-radius: 20px;
}
nav a:hover, nav a.active {
color: var(--primary-color);
background: rgba(255, 107, 107, 0.1);
}
.user-actions {
display: flex;
gap: 15px;
}
.btn {
padding: 10px 20px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
outline: none;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: #fff;
}
.btn-primary {
background: var(--primary-color);
border: 2px solid var(--primary-color);
color: #fff;
}
.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
}
.page {
display: none;
}
.page.active {
display: block;
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.player-container {
display: grid;
grid-template-columns: 1fr 350px;
gap: 30px;
margin-bottom: 30px;
}
.main-player {
background: var(--card-bg);
border-radius: 15px;
padding: 25px;
box-shadow: var(--card-shadow);
}
.track-info {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.track-cover {
width: 150px;
height: 150px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.track-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.track-details {
flex: 1;
}
.track-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 5px;
}
.track-artist {
font-size: 18px;
color: var(--text-light);
margin-bottom: 15px;
}
.track-stats {
display: flex;
gap: 20px;
color: var(--text-light);
font-size: 14px;
}
.waveform {
height: 120px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin-bottom: 25px;
position: relative;
overflow: hidden;
}
.wave-bars {
display: flex;
align-items: flex-end;
justify-content: space-between;
height: 100%;
padding: 0 10px;
}
.wave-bar {
width: 4px;
background: var(--primary-color);
border-radius: 2px;
}
.player-controls {
display: flex;
flex-direction: column;
gap: 20px;
}
.progress-bar {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
overflow: hidden;
margin-bottom: 5px;
cursor: pointer;
}
.progress {
height: 100%;
background: var(--primary-color);
width: 45%;
border-radius: 3px;
transition: width 0.1s linear;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 14px;
color: var(--text-light);
}
.control-buttons {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
}
.control-btn {
background: none;
border: none;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: color 0.3s;
}
.control-btn:hover {
color: var(--primary-color);
}
.control-btn.play-pause {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.control-btn.play-pause:hover {
background: var(--primary-dark);
color: #fff;
}
.volume-control {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.volume-slider {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
position: relative;
cursor: pointer;
}
.volume-level {
height: 100%;
background: var(--primary-color);
border-radius: 2px;
width: 70%;
}
.playlist {
background: var(--card-bg);
border-radius: 15px;
padding: 25px;
box-shadow: var(--card-shadow);
max-height: 600px;
overflow-y: auto;
}
.playlist-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.playlist-title {
font-size: 20px;
font-weight: 700;
}
.playlist-count {
color: var(--text-light);
font-size: 14px;
}
.playlist-items {
display: flex;
flex-direction: column;
gap: 15px;
}
.playlist-item {
display: flex;
align-items: center;
gap: 15px;
padding: 12px;
border-radius: 10px;
transition: background 0.3s;
cursor: pointer;
}
.playlist-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.playlist-item.active {
background: rgba(255, 107, 107, 0.2);
}
.item-cover {
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
}
.item-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item-details {
flex: 1;
}
.item-title {
font-weight: 600;
margin-bottom: 3px;
}
.item-artist {
font-size: 13px;
color: var(--text-light);
}
.item-duration {
color: var(--text-light);
font-size: 13px;
}
.social-actions {
display: flex;
gap: 20px;
margin-top: 20px;
}
.social-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.05);
padding: 8px 15px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: background 0.3s;
}
.social-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.social-btn.active {
color: var(--primary-color);
}
.comments-section {
background: var(--card-bg);
border-radius: 15px;
padding: 25px;
box-shadow: var(--card-shadow);
margin-top: 30px;
}
.comments-header {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
}
.comment {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.comment-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
}
.comment-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.comment-content {
flex: 1;
}
.comment-author {
font-weight: 600;
margin-bottom: 5px;
}
.comment-text {
color: #ddd;
line-height: 1.5;
margin-bottom: 8px;
}
.comment-actions {
display: flex;
gap: 15px;
font-size: 13px;
color: var(--text-light);
}
.comment-action {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
transition: color 0.3s;
}
.comment-action:hover {
color: var(--primary-color);
}
/* Upload Section */
.upload-container {
background: var(--card-bg);
border-radius: 15px;
padding: 30px;
box-shadow: var(--card-shadow);
margin-bottom: 30px;
}
.upload-header {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
}
.upload-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.form-group label {
font-weight: 600;
}
.form-group input, .form-group textarea {
padding: 12px 15px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: #fff;
font-size: 16px;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.upload-area {
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
}
.upload-area:hover {
border-color: var(--primary-color);
background: rgba(255, 107, 107, 0.05);
}
.upload-area i {
font-size: 48px;
color: var(--primary-color);
margin-bottom: 15px;
}
.upload-area p {
color: var(--text-light);
margin-bottom: 10px;
}
.upload-btn {
align-self: center;
margin-top: 10px;
}
/* Library Section */
.library-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.library-title {
font-size: 24px;
font-weight: 700;
}
.library-filters {
display: flex;
gap: 15px;
}
.filter-btn {
background: rgba(255, 255, 255, 0.05);
border: none;
color: #fff;
padding: 8px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s;
}
.filter-btn.active {
background: var(--primary-color);
}
.tracks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
.track-card {
background: var(--card-bg);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
cursor: pointer;
}
.track-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}
.track-card-cover {
width: 100%;
height: 180px;
overflow: hidden;
}
.track-card-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.track-card-info {
padding: 15px;
}
.track-card-title {
font-weight: 600;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.track-card-artist {
font-size: 14px;
color: var(--text-light);
}
/* Stream Section */
.stream-header {
font-size: 24px;
font-weight: 700;
margin-bottom: 25px;
}
.stream-feed {
display: flex;
flex-direction: column;
gap: 20px;
}
.feed-item {
background: var(--card-bg);
border-radius: 10px;
padding: 20px;
display: flex;
gap: 15px;
}
.feed-user-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
.feed-user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-content {
flex: 1;
}
.feed-user-name {
font-weight: 600;
margin-bottom: 5px;
}
.feed-action {
color: var(--text-light);
margin-bottom: 10px;
font-size: 14px;
}
.feed-track {
display: flex;
gap: 15px;
margin-top: 10px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
}
.feed-track-cover {
width: 60px;
height: 60px;
border-radius: 5px;
overflow: hidden;
}
.feed-track-cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.feed-track-info {
flex: 1;
}
.feed-track-title {
font-weight: 600;
margin-bottom: 5px;
}
.feed-track-artist {
font-size: 14px;
color: var(--text-light);
}
footer {
text-align: center;
padding: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 30px;
color: var(--text-light);
font-size: 14px;
}
/* Responsive adjustments */
@media (max-width: 900px) {
.player-container {
grid-template-columns: 1fr;
}
.track-info {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 600px) {
header {
flex-direction: column;
gap: 15px;
}
nav ul {
gap: 15px;
}
.user-actions {
width: 100%;
justify-content: center;
}
.tracks-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<i class="fas fa-wave-square"></i>
<span>SoundWave</span>
</div>
<nav>
<ul>
<li><a href="#" class="nav-link active" data-page="home">Home</a></li>
<li><a href="#" class="nav-link" data-page="stream">Stream</a></li>
<li><a href="#" class="nav-link" data-page="library">Library</a></li>
<li><a href="#" class="nav-link" data-page="upload">Upload</a></li>
</ul>
</nav>
<div class="user-actions">
<button class="btn btn-outline" id="signUpBtn">Sign Up</button>
<button class="btn btn-primary" id="signInBtn">Sign In</button>
</div>
</header>
<!-- Home Page -->
<div class="page active" id="home">
<div class="player-container">
<div class="main-player">
<div class="track-info">
<div class="track-cover">
<img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Track Cover">
</div>
<div class="track-details">
<h1 class="track-title">Midnight City</h1>
<p class="track-artist">M83</p>
<div class="track-stats">
<span><i class="fas fa-play"></i> 2.4M plays</span>
<span><i class="fas fa-heart"></i> 124K likes</span>
<span><i class="fas fa-retweet"></i> 12K reposts</span>
</div>
</div>
</div>
<div class="waveform">
<div class="wave-bars">
<!-- Wave bars will be generated by JavaScript -->
</div>
</div>
<div class="player-controls">
<div class="progress-bar" id="progressBar">
<div class="progress" id="progress"></div>
</div>
<div class="time-info">
<span id="currentTime">0:00</span>
<span id="duration">0:00</span>
</div>
<div class="control-buttons">
<button class="control-btn" id="shuffleBtn"><i class="fas fa-random"></i></button>
<button class="control-btn" id="prevBtn"><i class="fas fa-step-backward"></i></button>
<button class="control-btn play-pause" id="playPauseBtn"><i class="fas fa-play"></i></button>
<button class="control-btn" id="nextBtn"><i class="fas fa-step-forward"></i></button>
<button class="control-btn" id="repeatBtn"><i class="fas fa-redo"></i></button>
</div>
<div class="volume-control">
<i class="fas fa-volume-up"></i>
<div class="volume-slider" id="volumeSlider">
<div class="volume-level" id="volumeLevel"></div>
</div>
</div>
</div>
<div class="social-actions">
<div class="social-btn" id="likeBtn">
<i class="fas fa-heart"></i>
<span>Like</span>
</div>
<div class="social-btn" id="repostBtn">
<i class="fas fa-retweet"></i>
<span>Repost</span>
</div>
<div class="social-btn" id="shareBtn">
<i class="fas fa-share-alt"></i>
<span>Share</span>
</div>
<div class="social-btn" id="downloadBtn">
<i class="fas fa-download"></i>
<span>Download</span>
</div>
</div>
</div>
<div class="playlist">
<div class="playlist-header">
<h2 class="playlist-title">Next Up</h2>
<span class="playlist-count">12 tracks</span>
</div>
<div class="playlist-items" id="playlistItems">
<!-- Playlist items will be generated by JavaScript -->
</div>
</div>
</div>
<div class="comments-section">
<h2 class="comments-header">Comments (24)</h2>
<div class="comment">
<div class="comment-avatar">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="User Avatar">
</div>
<div class="comment-content">
<div class="comment-author">MusicLover42</div>
<div class="comment-text">This track takes me back to summer 2018. Such a vibe! 🔥</div>
<div class="comment-actions">
<div class="comment-action">
<i class="fas fa-heart"></i>
<span>24</span>
</div>
<div class="comment-action">
<i class="fas fa-reply"></i>
<span>Reply</span>
</div>
<div class="comment-action">
<i class="fas fa-flag"></i>
</div>
</div>
</div>
</div>
<div class="comment">
<div class="comment-avatar">
<img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="User Avatar">
</div>
<div class="comment-content">
<div class="comment-author">SynthWaveQueen</div>
<div class="comment-text">The production on this is incredible. That synth line is pure ear candy!</div>
<div class="comment-actions">
<div class="comment-action">
<i class="fas fa-heart"></i>
<span>18</span>
</div>
<div class="comment-action">
<i class="fas fa-reply"></i>
<span>Reply</span>
</div>
<div class="comment-action">
<i class="fas fa-flag"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Stream Page -->
<div class="page" id="stream">
<h2 class="stream-header">Your Stream</h2>
<div class="stream-feed">
<div class="feed-item">
<div class="feed-user-avatar">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="User Avatar">
</div>
<div class="feed-content">
<div class="feed-user-name">DJ_Prodigy</div>
<div class="feed-action">liked a track</div>
<div class="feed-track">
<div class="feed-track-cover">
<img src="https://images.unsplash.com/photo-1571330735066-03aaa9429d89?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Track Cover">
</div>
<div class="feed-track-info">
<div class="feed-track-title">Blinding Lights</div>
<div class="feed-track-artist">The Weeknd</div>
</div>
</div>
</div>
</div>
<div class="feed-item">
<div class="feed-user-avatar">
<img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="User Avatar">
</div>
<div class="feed-content">
<div class="feed-user-name">MusicLover42</div>
<div class="feed-action">reposted a track</div>
<div class="feed-track">
<div class="feed-track-cover">
<img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Track Cover">
</div>
<div class="feed-track-info">
<div class="feed-track-title">Levitating</div>
<div class="feed-track-artist">Dua Lipa</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Library Page -->
<div class="page" id="library">
<div class="library-header">
<h2 class="library-title">Your Library</h2>
<div class="library-filters">
<button class="filter-btn active">All</button>
<button class="filter-btn">Liked</button>
<button class="filter-btn">Playlists</button>
<button class="filter-btn">Albums</button>
</div>
</div>
<div class="tracks-grid" id="libraryTracks">
<!-- Library tracks will be generated by JavaScript -->
</div>
</div>
<!-- Upload Page -->
<div class="page" id="upload">
<div class="upload-container">
<h2 class="upload-header">Upload Your Music</h2>
<form class="upload-form" id="uploadForm">
<div class="form-group">
<label for="trackTitle">Track Title</label>
<input type="text" id="trackTitle" placeholder="Enter track title" required>
</div>
<div class="form-group">
<label for="trackArtist">Artist Name</label>
<input type="text" id="trackArtist" placeholder="Enter artist name" required>
</div>
<div class="form-group">
<label for="trackDescription">Description</label>
<textarea id="trackDescription" placeholder="Describe your track">
