Changes to melodify.scroll.pub

+ buildHtml

+ baseUrl https://melodify.scroll.pub

+ metaTags

+ editButton /edit.html

+ title Melodify - Spotify Clone

+ style.css

+ header

+ class app-header

+ div

+ class header-content

+ div Melodify

+ class logo

+ div

+ class search-container

+ input

+ type text

+ placeholder Search for songs, artists, or albums

+ class search-input

+ id searchInput

+ button Search

+ class search-button

+ id searchButton

+ div

+ class user-menu

+ div

+ class user-avatar

+ main

+ class main-content

+ div

+ class sidebar

+ nav

+ class nav-menu

+ a Home

+ href #

+ class nav-link active

+ id homeLink

+ a Search

+ href #

+ class nav-link

+ id searchLink

+ a Your Library

+ href #

+ class nav-link

+ id libraryLink

+ div

+ class playlist-header

+ h3 PLAYLISTS

+ ul

+ class playlist-list

+ id playlistList

+ div

+ class content-area

+ div

+ class featured-section

+ h2 Featured Playlists

+ div

+ class playlist-grid

+ id featuredPlaylists

+ div

+ class recently-played

+ h2 Recently Played

+ div

+ class track-list

+ id recentTracks

+ div

+ class now-playing

+ div

+ class player-controls

+ button

+ class control-button

+ id prevButton

+ title Previous

+ button

+ class control-button play-button

+ id playButton

+ title Play

+ button

+ class control-button

+ id nextButton

+ title Next

+ div

+ class progress-container

+ div

+ class progress-time

+ id currentTime 0:00

+ div

+ class progress-bar

+ div

+ class progress

+ id progress

+ div

+ class progress-time

+ id duration 0:00

+ div

+ class track-info

+ div

+ class track-image

+ id trackImage

+ div

+ class track-details

+ h3

+ id trackTitle No track selected

+ p

+ id trackArtist -

+ script.js

+ {

+ "id": "647a3b62-67af-40c1-b2a6-37aa23cf247d",

+ "object": "chat.completion",

+ "created": 1749899038,

+ "model": "deepseek-chat",

+ "choices": [

+ {

+ "index": 0,

+ "message": {

+ "role": "assistant",

+ "content": "I'll create a Spotify clone called \"Melodify\" using the public Deezer API for music data. Here's the implementation:\n\n---domain---\nmelodify.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://melodify.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Melodify - Spotify Clone\nstyle.css\nheader\n class app-header\n div\n class header-content\n div Melodify\n class logo\n div\n class search-container\n input\n type text\n placeholder Search for songs, artists, or albums\n class search-input\n id searchInput\n button Search\n class search-button\n id searchButton\n div\n class user-menu\n div\n class user-avatar\nmain\n class main-content\n div\n class sidebar\n nav\n class nav-menu\n a Home\n href #\n class nav-link active\n id homeLink\n a Search\n href #\n class nav-link\n id searchLink\n a Your Library\n href #\n class nav-link\n id libraryLink\n div\n class playlist-header\n h3 PLAYLISTS\n ul\n class playlist-list\n id playlistList\n div\n class content-area\n div\n class featured-section\n h2 Featured Playlists\n div\n class playlist-grid\n id featuredPlaylists\n div\n class recently-played\n h2 Recently Played\n div\n class track-list\n id recentTracks\n div\n class now-playing\n div\n class player-controls\n button\n class control-button\n id prevButton\n title Previous\n button\n class control-button play-button\n id playButton\n title Play\n button\n class control-button\n id nextButton\n title Next\n div\n class progress-container\n div\n class progress-time\n id currentTime 0:00\n div\n class progress-bar\n div\n class progress\n id progress\n div\n class progress-time\n id duration 0:00\n div\n class track-info\n div\n class track-image\n id trackImage\n div\n class track-details\n h3\n id trackTitle No track selected\n p\n id trackArtist -\nscript.js\n---style.css---\n:root {\n --primary: #1db954;\n --dark: #121212;\n --light-dark: #181818;\n --lighter-dark: #282828;\n --lightest: #b3b3b3;\n --white: #ffffff;\n --sidebar-width: 240px;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\nbody {\n background-color: var(--dark);\n color: var(--white);\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.app-header {\n background-color: var(--light-dark);\n padding: 1rem;\n position: fixed;\n width: 100%;\n z-index: 100;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 1200px;\n margin: 0 auto;\n}\n\n.logo {\n font-size: 1.8rem;\n font-weight: bold;\n color: var(--primary);\n cursor: pointer;\n}\n\n.search-container {\n display: flex;\n align-items: center;\n width: 40%;\n}\n\n.search-input {\n width: 100%;\n padding: 0.5rem 1rem;\n border-radius: 20px;\n border: none;\n background-color: var(--lighter-dark);\n color: var(--white);\n outline: none;\n}\n\n.search-button {\n background-color: var(--primary);\n color: white;\n border: none;\n border-radius: 20px;\n padding: 0.5rem 1rem;\n margin-left: 0.5rem;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.search-button:hover {\n transform: scale(1.05);\n}\n\n.user-menu {\n display: flex;\n align-items: center;\n}\n\n.user-avatar {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background-color: var(--lighter-dark);\n cursor: pointer;\n}\n\n.main-content {\n display: flex;\n flex: 1;\n padding-top: 70px;\n}\n\n.sidebar {\n width: var(--sidebar-width);\n background-color: var(--light-dark);\n height: calc(100vh - 70px);\n position: fixed;\n padding: 1rem;\n overflow-y: auto;\n}\n\n.nav-menu {\n margin-bottom: 2rem;\n}\n\n.nav-link {\n display: block;\n color: var(--lightest);\n text-decoration: none;\n padding: 0.5rem 0;\n font-weight: bold;\n transition: color 0.3s;\n}\n\n.nav-link:hover, .nav-link.active {\n color: var(--white);\n}\n\n.playlist-header {\n color: var(--lightest);\n margin: 1rem 0;\n font-size: 0.8rem;\n text-transform: uppercase;\n}\n\n.playlist-list {\n list-style: none;\n}\n\n.playlist-list li {\n margin: 0.5rem 0;\n color: var(--lightest);\n cursor: pointer;\n transition: color 0.3s;\n}\n\n.playlist-list li:hover {\n color: var(--white);\n}\n\n.content-area {\n flex: 1;\n margin-left: var(--sidebar-width);\n padding: 1rem 2rem;\n background: linear-gradient(to bottom, #1a1a1a, var(--dark));\n}\n\n.featured-section, .recently-played {\n margin-bottom: 2rem;\n}\n\nh2 {\n margin-bottom: 1rem;\n font-size: 1.5rem;\n}\n\n.playlist-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n gap: 1.5rem;\n}\n\n.playlist-card {\n background-color: var(--lighter-dark);\n border-radius: 6px;\n padding: 1rem;\n transition: all 0.3s;\n cursor: pointer;\n}\n\n.playlist-card:hover {\n background-color: #333;\n transform: translateY(-5px);\n}\n\n.playlist-image {\n width: 100%;\n aspect-ratio: 1;\n background-color: #333;\n border-radius: 4px;\n margin-bottom: 1rem;\n overflow: hidden;\n}\n\n.playlist-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.playlist-title {\n font-weight: bold;\n margin-bottom: 0.5rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.playlist-description {\n color: var(--lightest);\n font-size: 0.9rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.track-list {\n background-color: var(--lighter-dark);\n border-radius: 6px;\n overflow: hidden;\n}\n\n.track-row {\n display: grid;\n grid-template-columns: 50px 1fr 1fr 50px;\n align-items: center;\n padding: 0.5rem 1rem;\n transition: background-color 0.3s;\n}\n\n.track-row:hover {\n background-color: #333;\n}\n\n.track-number {\n color: var(--lightest);\n}\n\n.track-title {\n font-weight: bold;\n}\n\n.track-artist {\n color: var(--lightest);\n font-size: 0.9rem;\n}\n\n.track-duration {\n color: var(--lightest);\n text-align: right;\n}\n\n.now-playing {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background-color: var(--lighter-dark);\n padding: 1rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.player-controls {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.control-button {\n background: none;\n border: none;\n color: var(--white);\n font-size: 1.2rem;\n cursor: pointer;\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 50%;\n}\n\n.control-button:hover {\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.play-button {\n background-color: var(--white);\n color: var(--dark);\n}\n\n.play-button:hover {\n transform: scale(1.1);\n}\n\n.progress-container {\n flex: 1;\n display: flex;\n align-items: center;\n gap: 1rem;\n margin: 0 2rem;\n}\n\n.progress-time {\n color: var(--lightest);\n font-size: 0.8rem;\n min-width: 40px;\n}\n\n.progress-bar {\n flex: 1;\n height: 4px;\n background-color: #535353;\n border-radius: 2px;\n cursor: pointer;\n}\n\n.progress {\n height: 100%;\n background-color: var(--lightest);\n border-radius: 2px;\n width: 0%;\n}\n\n.track-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n min-width: 200px;\n}\n\n.track-image {\n width: 56px;\n height: 56px;\n background-color: #333;\n border-radius: 4px;\n overflow: hidden;\n}\n\n.track-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.track-details h3 {\n font-size: 0.9rem;\n margin-bottom: 0.2rem;\n}\n\n.track-details p {\n color: var(--lightest);\n font-size: 0.8rem;\n}\n\n@media (max-width: 768px) {\n .sidebar {\n width: 70px;\n overflow: hidden;\n }\n \n .content-area {\n margin-left: 70px;\n }\n \n .nav-link span, .playlist-header, .playlist-list li {\n display: none;\n }\n \n .search-container {\n width: 60%;\n }\n \n .playlist-grid {\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n }\n \n .track-row {\n grid-template-columns: 30px 1fr 30px;\n }\n \n .track-artist {\n display: none;\n }\n}\n\n@media (max-width: 480px) {\n .header-content {\n flex-direction: column;\n gap: 1rem;\n }\n \n .search-container {\n width: 100%;\n }\n \n .sidebar {\n display: none;\n }\n \n .content-area {\n margin-left: 0;\n padding-bottom: 100px;\n }\n \n .now-playing {\n flex-direction: column;\n padding: 0.5rem;\n }\n \n .progress-container {\n width: 100%;\n margin: 0.5rem 0;\n }\n \n .track-info {\n display: none;\n }\n}\n---script.js---\ndocument.addEventListener('DOMContentLoaded', function() {\n // DOM Elements\n const searchInput = document.getElementById('searchInput');\n const searchButton = document.getElementById('searchButton');\n const featuredPlaylists = document.getElementById('featuredPlaylists');\n const recentTracks = document.getElementById('recentTracks');\n const playlistList = document.getElementById('playlistList');\n const playButton = document.getElementById('playButton');\n const prevButton = document.getElementById('prevButton');\n const nextButton = document.getElementById('nextButton');\n const progress = document.getElementById('progress');\n const progressBar = document.querySelector('.progress-bar');\n const currentTimeEl = document.getElementById('currentTime');\n const durationEl = document.getElementById('duration');\n const trackTitle = document.getElementById('trackTitle');\n const trackArtist = document.getElementById('trackArtist');\n const trackImage = document.getElementById('trackImage');\n \n // Audio element\n const audio = new Audio();\n let isPlaying = false;\n let currentTrackIndex = 0;\n let tracks = [];\n \n // Deezer API base URL\n const DEEZER_API = 'https://api.deezer.com';\n \n // Fetch featured playlists\n function fetchFeaturedPlaylists() {\n fetch(`${DEEZER_API}/chart/0/playlists`)\n .then(response => response.json())\n .then(data => {\n featuredPlaylists.innerHTML = '';\n data.data.forEach(playlist => {\n const playlistCard = document.createElement('div');\n playlistCard.className = 'playlist-card';\n playlistCard.innerHTML = `\n \n

${playlist.title}

\n

${playlist.nb_tracks} tracks

\n `;\n playlistCard.addEventListener('click', () => fetchPlaylistTracks(playlist.id));\n featuredPlaylists.appendChild(playlistCard);\n });\n })\n .catch(error => console.error('Error fetching playlists:', error));\n }\n \n // Fetch playlist tracks\n function fetchPlaylistTracks(playlistId) {\n fetch(`${DEEZER_API}/playlist/${playlistId}/tracks`)\n .then(response => response.json())\n .then(data => {\n tracks = data.data;\n displayTracks(tracks);\n // Play the first track automatically\n if (tracks.length > 0) {\n playTrack(0);\n }\n })\n .catch(error => console.error('Error fetching playlist tracks:', error));\n }\n \n // Display tracks\n function displayTracks(tracks) {\n recentTracks.innerHTML = '';\n tracks.forEach((track, index) => {\n const trackRow = document.createElement('div');\n trackRow.className = 'track-row';\n trackRow.innerHTML = `\n \n \n \n \n `;\n trackRow.addEventListener('click', () => playTrack(index));\n recentTracks.appendChild(trackRow);\n });\n }\n \n // Play track\n function playTrack(index) {\n currentTrackIndex = index;\n const track = tracks[index];\n \n audio.src = track.preview;\n audio.play();\n isPlaying = true;\n playButton.innerHTML = '❚❚';\n \n // Update track info\n trackTitle.textContent = track.title;\n trackArtist.textContent = track.artist.name;\n trackImage.innerHTML = ``;\n \n // Set duration\n durationEl.textContent = formatTime(track.duration);\n }\n \n // Format time (seconds to MM:SS)\n function formatTime(seconds) {\n const mins = Math.floor(seconds / 60);\n const secs = Math.floor(seconds % 60);\n return `${mins}:${secs < 10 ? '0' : ''}${secs}`;\n }\n \n // Update progress bar\n function updateProgress() {\n const { duration, currentTime } = audio;\n const progressPercent = (currentTime / duration) * 100;\n progress.style.width = `${progressPercent}%`;\n currentTimeEl.textContent = formatTime(currentTime);\n }\n \n // Set progress bar\n function setProgress(e) {\n const width = this.clientWidth;\n const clickX = e.offsetX;\n const duration = audio.duration;\n audio.currentTime = (clickX / width) * duration;\n }\n \n // Search function\n function searchTracks(query) {\n if (!query) return;\n \n fetch(`${DEEZER_API}/search?q=${encodeURIComponent(query)}`)\n .then(response => response.json())\n .then(data => {\n tracks = data.data;\n displayTracks(tracks);\n // Play the first track if available\n if (tracks.length > 0) {\n playTrack(0);\n }\n })\n .catch(error => console.error('Error searching tracks:', error));\n }\n \n // Event listeners\n playButton.addEventListener('click', () => {\n if (isPlaying) {\n audio.pause();\n playButton.innerHTML = '▶';\n } else {\n audio.play();\n playButton.innerHTML = '❚❚';\n }\n isPlaying = !isPlaying;\n });\n \n prevButton.addEventListener('click', () => {\n currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;\n playTrack(currentTrackIndex);\n });\n \n nextButton.addEventListener('click', () => {\n currentTrackIndex = (currentTrackIndex + 1) % tracks.length;\n playTrack(currentTrackIndex);\n });\n \n progressBar.addEventListener('click', setProgress);\n \n audio.addEventListener('timeupdate', updateProgress);\n \n audio.addEventListener('ended', () => {\n nextButton.click();\n });\n \n searchButton.addEventListener('click', () => {\n searchTracks(searchInput.value);\n });\n \n searchInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n searchTracks(searchInput.value);\n }\n });\n \n // Initialize with featured playlists\n fetchFeaturedPlaylists();\n \n // Create sample playlists in sidebar\n const samplePlaylists = ['Favorites', 'Workout Mix', 'Chill Vibes', 'Road Trip'];\n playlistList.innerHTML = samplePlaylists.map(playlist => \n `

${playlist}

`\n ).join('');\n});\n---end---"

+ },

+ "logprobs": null,

+ "finish_reason": "stop"

+ }

+ ],

+ "usage": {

+ "prompt_tokens": 737,

+ "completion_tokens": 4060,

+ "total_tokens": 4797,

+ "prompt_tokens_details": {

+ "cached_tokens": 0

+ },

+ "prompt_cache_hit_tokens": 0,

+ "prompt_cache_miss_tokens": 737

+ },

+ "system_fingerprint": "fp_8802369eaa_prod0425fp8"

+ }

+ # melodify.scroll.pub

+

+ Prompt: website

+ Agent: deepseek

+ Model: deepseek-chat

+

+ ## User prompt

+ create an clone of spotify with all functionalties of it and use any public api for music and songs

+

+ ## System prompt

+ You are an expert web developer. Create a website based on this request: "create an clone of spotify with all functionalties of it and use any public api for music and songs"

+

+ Requirements:

+ - Use only Scroll, CSS, and JavaScript (NO frameworks, NO external dependencies)

+ - Create clean, semantic HTML5

+ - Make it mobile-responsive

+ - Follow modern best practices and accessibility guidelines

+ - Keep it simple but professional

+ - Use only relative links and no external resources

+ - Do not put a copyright symbol or all rights reserved in the footer.

+ - Make it beautiful. Dazzling. Advanced used of CSS.

+

+ As a refresher, for doing the html body, Scroll is a whitespace based language that uses a single indented space to mark a line (aka particle) as a subparticle of a parent line.

+

+ For example:

+

+ header

+ class hero

+ nav

+ div Scroll

+ class logo

+ div

+ class nav-links

+ a Features

+ href #features

+ a Examples

+ href #examples

+ a Edit

+ href edit.html

+ a GitHub

+ class cta-button

+ href https://github.com/breck7/scroll

+ div

+ class hero-content

+ h1 Write Better with Scroll

+ p The extendible markup language that makes source beautiful and compiles to anything

+ a Get Started

+ class primary-button

+ href https://hub.scroll.pub/

+ main

+ section

+ id features

+ class features

+ h2 Why Scroll?

+ div

+ class feature-grid

+ div

+ class feature-card

+ div ⚡

+ class feature-icon

+ h3 Simple Syntax

+ p Like Markdown, but more powerful. No parentheses needed.

+ div

+ class feature-card

+ div 🧩

+ class feature-icon

+ h3 Extendible

+ p Build your own custom parsers.

+ div

+ class feature-card

+ div 🎨

+ class feature-icon

+ h3 Beautiful Output

+ p Create stunning documents with minimal effort.

+ div

+ class feature-card

+ div 🚀

+ class feature-icon

+ h3 Fast & Light

+ p Built on the efficient PPS Stack.

+ section

+ id examples

+ class code-demo

+ h2 See It In Action

+ div

+ class code-container

+ pre

+ class code-example

+ div

+ class code-output

+ footer

+ div

+ class footer-content

+ div

+ class footer-links

+ a Documentation

+ href https://scroll.pub/tutorial.html

+ a Community

+ href https://www.reddit.com/r/WorldWideScroll/

+ a Blog

+ href https://scroll.pub/blog

+ p Started by Breck Yunits. Evolved by a community.

+ https://twitter.com/breckyunits Breck Yunits

+ https://github.com/breck7/scroll/graphs/contributors community

+

+

+ First suggest a short, memorable domain name ending in scroll.pub that represents this website. Then provide the website files. Use this exact format:

+

+ ---domain---

+ (domainscroll.pub here)

+ ---index.scroll---

+ buildHtml

+ baseUrl https://(domainscroll.pub here)

+ metaTags

+ editButton /edit.html

+ title (Title here)

+ style.css

+

+ (body content here. no blank lines please.)

+

+ script.js

+ ---style.css---

+ (CSS content here)

+ ---script.js---

+ (JavaScript content here)

+ ---end---

+ document.addEventListener('DOMContentLoaded', function() {

+ // DOM Elements

+ const searchInput = document.getElementById('searchInput');

+ const searchButton = document.getElementById('searchButton');

+ const featuredPlaylists = document.getElementById('featuredPlaylists');

+ const recentTracks = document.getElementById('recentTracks');

+ const playlistList = document.getElementById('playlistList');

+ const playButton = document.getElementById('playButton');

+ const prevButton = document.getElementById('prevButton');

+ const nextButton = document.getElementById('nextButton');

+ const progress = document.getElementById('progress');

+ const progressBar = document.querySelector('.progress-bar');

+ const currentTimeEl = document.getElementById('currentTime');

+ const durationEl = document.getElementById('duration');

+ const trackTitle = document.getElementById('trackTitle');

+ const trackArtist = document.getElementById('trackArtist');

+ const trackImage = document.getElementById('trackImage');

+

+ // Audio element

+ const audio = new Audio();

+ let isPlaying = false;

+ let currentTrackIndex = 0;

+ let tracks = [];

+

+ // Deezer API base URL

+ const DEEZER_API = 'https://api.deezer.com';

+

+ // Fetch featured playlists

+ function fetchFeaturedPlaylists() {

+ fetch(`${DEEZER_API}/chart/0/playlists`)

+ .then(response => response.json())

+ .then(data => {

+ featuredPlaylists.innerHTML = '';

+ data.data.forEach(playlist => {

+ const playlistCard = document.createElement('div');

+ playlistCard.className = 'playlist-card';

+ playlistCard.innerHTML = `

+

+

${playlist.title}

+

${playlist.nb_tracks} tracks

+ `;

+ playlistCard.addEventListener('click', () => fetchPlaylistTracks(playlist.id));

+ featuredPlaylists.appendChild(playlistCard);

+ });

+ })

+ .catch(error => console.error('Error fetching playlists:', error));

+ }

+

+ // Fetch playlist tracks

+ function fetchPlaylistTracks(playlistId) {

+ fetch(`${DEEZER_API}/playlist/${playlistId}/tracks`)

+ .then(response => response.json())

+ .then(data => {

+ tracks = data.data;

+ displayTracks(tracks);

+ // Play the first track automatically

+ if (tracks.length > 0) {

+ playTrack(0);

+ }

+ })

+ .catch(error => console.error('Error fetching playlist tracks:', error));

+ }

+

+ // Display tracks

+ function displayTracks(tracks) {

+ recentTracks.innerHTML = '';

+ tracks.forEach((track, index) => {

+ const trackRow = document.createElement('div');

+ trackRow.className = 'track-row';

+ trackRow.innerHTML = `

+

+

+

+

+ `;

+ trackRow.addEventListener('click', () => playTrack(index));

+ recentTracks.appendChild(trackRow);

+ });

+ }

+

+ // Play track

+ function playTrack(index) {

+ currentTrackIndex = index;

+ const track = tracks[index];

+

+ audio.src = track.preview;

+ audio.play();

+ isPlaying = true;

+ playButton.innerHTML = '❚❚';

+

+ // Update track info

+ trackTitle.textContent = track.title;

+ trackArtist.textContent = track.artist.name;

+ trackImage.innerHTML = ``;

+

+ // Set duration

+ durationEl.textContent = formatTime(track.duration);

+ }

+

+ // Format time (seconds to MM:SS)

+ function formatTime(seconds) {

+ const mins = Math.floor(seconds / 60);

+ const secs = Math.floor(seconds % 60);

+ return `${mins}:${secs < 10 ? '0' : ''}${secs}`;

+ }

+

+ // Update progress bar

+ function updateProgress() {

+ const { duration, currentTime } = audio;

+ const progressPercent = (currentTime / duration) * 100;

+ progress.style.width = `${progressPercent}%`;

+ currentTimeEl.textContent = formatTime(currentTime);

+ }

+

+ // Set progress bar

+ function setProgress(e) {

+ const width = this.clientWidth;

+ const clickX = e.offsetX;

+ const duration = audio.duration;

+ audio.currentTime = (clickX / width) * duration;

+ }

+

+ // Search function

+ function searchTracks(query) {

+ if (!query) return;

+

+ fetch(`${DEEZER_API}/search?q=${encodeURIComponent(query)}`)

+ .then(response => response.json())

+ .then(data => {

+ tracks = data.data;

+ displayTracks(tracks);

+ // Play the first track if available

+ if (tracks.length > 0) {

+ playTrack(0);

+ }

+ })

+ .catch(error => console.error('Error searching tracks:', error));

+ }

+

+ // Event listeners

+ playButton.addEventListener('click', () => {

+ if (isPlaying) {

+ audio.pause();

+ playButton.innerHTML = '▶';

+ } else {

+ audio.play();

+ playButton.innerHTML = '❚❚';

+ }

+ isPlaying = !isPlaying;

+ });

+

+ prevButton.addEventListener('click', () => {

+ currentTrackIndex = (currentTrackIndex - 1 + tracks.length) % tracks.length;

+ playTrack(currentTrackIndex);

+ });

+

+ nextButton.addEventListener('click', () => {

+ currentTrackIndex = (currentTrackIndex + 1) % tracks.length;

+ playTrack(currentTrackIndex);

+ });

+

+ progressBar.addEventListener('click', setProgress);

+

+ audio.addEventListener('timeupdate', updateProgress);

+

+ audio.addEventListener('ended', () => {

+ nextButton.click();

+ });

+

+ searchButton.addEventListener('click', () => {

+ searchTracks(searchInput.value);

+ });

+

+ searchInput.addEventListener('keypress', (e) => {

+ if (e.key === 'Enter') {

+ searchTracks(searchInput.value);

+ }

+ });

+

+ // Initialize with featured playlists

+ fetchFeaturedPlaylists();

+

+ // Create sample playlists in sidebar

+ const samplePlaylists = ['Favorites', 'Workout Mix', 'Chill Vibes', 'Road Trip'];

+ playlistList.innerHTML = samplePlaylists.map(playlist =>

+ `

${playlist}

`

+ ).join('');

+ });

+ :root {

+ --primary: #1db954;

+ --dark: #121212;

+ --light-dark: #181818;

+ --lighter-dark: #282828;

+ --lightest: #b3b3b3;

+ --white: #ffffff;

+ --sidebar-width: 240px;

+ }

+

+ * {

+ margin: 0;

+ padding: 0;

+ box-sizing: border-box;

+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

+ }

+

+ body {

+ background-color: var(--dark);

+ color: var(--white);

+ min-height: 100vh;

+ display: flex;

+ flex-direction: column;

+ }

+

+ .app-header {

+ background-color: var(--light-dark);

+ padding: 1rem;

+ position: fixed;

+ width: 100%;

+ z-index: 100;

+ }

+

+ .header-content {

+ display: flex;

+ align-items: center;

+ justify-content: space-between;

+ max-width: 1200px;

+ margin: 0 auto;

+ }

+

+ .logo {

+ font-size: 1.8rem;

+ font-weight: bold;

+ color: var(--primary);

+ cursor: pointer;

+ }

+

+ .search-container {

+ display: flex;

+ align-items: center;

+ width: 40%;

+ }

+

+ .search-input {

+ width: 100%;

+ padding: 0.5rem 1rem;

+ border-radius: 20px;

+ border: none;

+ background-color: var(--lighter-dark);

+ color: var(--white);

+ outline: none;

+ }

+

+ .search-button {

+ background-color: var(--primary);

+ color: white;

+ border: none;

+ border-radius: 20px;

+ padding: 0.5rem 1rem;

+ margin-left: 0.5rem;

+ cursor: pointer;

+ transition: all 0.3s;

+ }

+

+ .search-button:hover {

+ transform: scale(1.05);

+ }

+

+ .user-menu {

+ display: flex;

+ align-items: center;

+ }

+

+ .user-avatar {

+ width: 32px;

+ height: 32px;

+ border-radius: 50%;

+ background-color: var(--lighter-dark);

+ cursor: pointer;

+ }

+

+ .main-content {

+ display: flex;

+ flex: 1;

+ padding-top: 70px;

+ }

+

+ .sidebar {

+ width: var(--sidebar-width);

+ background-color: var(--light-dark);

+ height: calc(100vh - 70px);

+ position: fixed;

+ padding: 1rem;

+ overflow-y: auto;

+ }

+

+ .nav-menu {

+ margin-bottom: 2rem;

+ }

+

+ .nav-link {

+ display: block;

+ color: var(--lightest);

+ text-decoration: none;

+ padding: 0.5rem 0;

+ font-weight: bold;

+ transition: color 0.3s;

+ }

+

+ .nav-link:hover, .nav-link.active {

+ color: var(--white);

+ }

+

+ .playlist-header {

+ color: var(--lightest);

+ margin: 1rem 0;

+ font-size: 0.8rem;

+ text-transform: uppercase;

+ }

+

+ .playlist-list {

+ list-style: none;

+ }

+

+ .playlist-list li {

+ margin: 0.5rem 0;

+ color: var(--lightest);

+ cursor: pointer;

+ transition: color 0.3s;

+ }

+

+ .playlist-list li:hover {

+ color: var(--white);

+ }

+

+ .content-area {

+ flex: 1;

+ margin-left: var(--sidebar-width);

+ padding: 1rem 2rem;

+ background: linear-gradient(to bottom, #1a1a1a, var(--dark));

+ }

+

+ .featured-section, .recently-played {

+ margin-bottom: 2rem;

+ }

+

+ h2 {

+ margin-bottom: 1rem;

+ font-size: 1.5rem;

+ }

+

+ .playlist-grid {

+ display: grid;

+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

+ gap: 1.5rem;

+ }

+

+ .playlist-card {

+ background-color: var(--lighter-dark);

+ border-radius: 6px;

+ padding: 1rem;

+ transition: all 0.3s;

+ cursor: pointer;

+ }

+

+ .playlist-card:hover {

+ background-color: #333;

+ transform: translateY(-5px);

+ }

+

+ .playlist-image {

+ width: 100%;

+ aspect-ratio: 1;

+ background-color: #333;

+ border-radius: 4px;

+ margin-bottom: 1rem;

+ overflow: hidden;

+ }

+

+ .playlist-image img {

+ width: 100%;

+ height: 100%;

+ object-fit: cover;

+ }

+

+ .playlist-title {

+ font-weight: bold;

+ margin-bottom: 0.5rem;

+ white-space: nowrap;

+ overflow: hidden;

+ text-overflow: ellipsis;

+ }

+

+ .playlist-description {

+ color: var(--lightest);

+ font-size: 0.9rem;

+ white-space: nowrap;

+ overflow: hidden;

+ text-overflow: ellipsis;

+ }

+

+ .track-list {

+ background-color: var(--lighter-dark);

+ border-radius: 6px;

+ overflow: hidden;

+ }

+

+ .track-row {

+ display: grid;

+ grid-template-columns: 50px 1fr 1fr 50px;

+ align-items: center;

+ padding: 0.5rem 1rem;

+ transition: background-color 0.3s;

+ }

+

+ .track-row:hover {

+ background-color: #333;

+ }

+

+ .track-number {

+ color: var(--lightest);

+ }

+

+ .track-title {

+ font-weight: bold;

+ }

+

+ .track-artist {

+ color: var(--lightest);

+ font-size: 0.9rem;

+ }

+

+ .track-duration {

+ color: var(--lightest);

+ text-align: right;

+ }

+

+ .now-playing {

+ position: fixed;

+ bottom: 0;

+ left: 0;

+ right: 0;

+ background-color: var(--lighter-dark);

+ padding: 1rem;

+ display: flex;

+ align-items: center;

+ justify-content: space-between;

+ }

+

+ .player-controls {

+ display: flex;

+ align-items: center;

+ gap: 1rem;

+ }

+

+ .control-button {

+ background: none;

+ border: none;

+ color: var(--white);

+ font-size: 1.2rem;

+ cursor: pointer;

+ width: 32px;

+ height: 32px;

+ display: flex;

+ align-items: center;

+ justify-content: center;

+ border-radius: 50%;

+ }

+

+ .control-button:hover {

+ background-color: rgba(255, 255, 255, 0.1);

+ }

+

+ .play-button {

+ background-color: var(--white);

+ color: var(--dark);

+ }

+

+ .play-button:hover {

+ transform: scale(1.1);

+ }

+

+ .progress-container {

+ flex: 1;

+ display: flex;

+ align-items: center;

+ gap: 1rem;

+ margin: 0 2rem;

+ }

+

+ .progress-time {

+ color: var(--lightest);

+ font-size: 0.8rem;

+ min-width: 40px;

+ }

+

+ .progress-bar {

+ flex: 1;

+ height: 4px;

+ background-color: #535353;

+ border-radius: 2px;

+ cursor: pointer;

+ }

+

+ .progress {

+ height: 100%;

+ background-color: var(--lightest);

+ border-radius: 2px;

+ width: 0%;

+ }

+

+ .track-info {

+ display: flex;

+ align-items: center;

+ gap: 1rem;

+ min-width: 200px;

+ }

+

+ .track-image {

+ width: 56px;

+ height: 56px;

+ background-color: #333;

+ border-radius: 4px;

+ overflow: hidden;

+ }

+

+ .track-image img {

+ width: 100%;

+ height: 100%;

+ object-fit: cover;

+ }

+

+ .track-details h3 {

+ font-size: 0.9rem;

+ margin-bottom: 0.2rem;

+ }

+

+ .track-details p {

+ color: var(--lightest);

+ font-size: 0.8rem;

+ }

+

+ @media (max-width: 768px) {

+ .sidebar {

+ width: 70px;

+ overflow: hidden;

+ }

+

+ .content-area {

+ margin-left: 70px;

+ }

+

+ .nav-link span, .playlist-header, .playlist-list li {

+ display: none;

+ }

+

+ .search-container {

+ width: 60%;

+ }

+

+ .playlist-grid {

+ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

+ }

+

+ .track-row {

+ grid-template-columns: 30px 1fr 30px;

+ }

+

+ .track-artist {

+ display: none;

+ }

+ }

+

+ @media (max-width: 480px) {

+ .header-content {

+ flex-direction: column;

+ gap: 1rem;

+ }

+

+ .search-container {

+ width: 100%;

+ }

+

+ .sidebar {

+ display: none;

+ }

+

+ .content-area {

+ margin-left: 0;

+ padding-bottom: 100px;

+ }

+

+ .now-playing {

+ flex-direction: column;

+ padding: 0.5rem;

+ }

+

+ .progress-container {

+ width: 100%;

+ margin: 0.5rem 0;

+ }

+

+ .track-info {

+ display: none;

+ }

+ }