Matufy: Müzik Çalar Arayüzü Promptu

Gerçek müzik çalan, tek HTML dosyasından oluşan bir müzik çalar arayüzü promptu. Çalma işini Spotify Web Playback SDK ve Web API üzerinden yapıyor: ana sayfa, arama, kitaplık, sanatçı, albüm ve çalma listesi sayfaları, sürükleyip sıralanan bir sıra paneli ve şarkılar arası yumuşak geçiş isteniyor.

Kullanmak için Spotify Developer panelinden kendi uygulamanı oluşturup Client ID'yi "YOUR_SPOTIFY_CLIENT_ID" yazan yere koyman gerekir. Tarayıcıda çalma özelliği Spotify Premium hesabı istiyor. Prompt İngilizce.

Create a fully functional Spotify clone called "Matufy" as a SINGLE self-contained HTML file with real music playback.

## Authentication
- Use Spotify OAuth 2.0 PKCE flow (no backend needed)
- Client ID: YOUR_SPOTIFY_CLIENT_ID
- Redirect URI: http://127.0.0.1:5500
- The HTML file is opened via VS Code Live Server at http://127.0.0.1:5500 (NOT file://)
- After login, automatically parse the auth code from URL and complete token exchange
- Required scopes: streaming, user-read-email, user-read-private, user-read-playback-state, user-modify-playback-state, user-read-currently-playing, user-read-recently-played, user-top-read, playlist-read-private, playlist-read-collaborative
- Store tokens in localStorage, handle expiry silently

## Web Playback SDK (CRITICAL)
- Load Spotify Web Playback SDK: https://sdk.scdn.co/spotify-player.js
- Initialize player with name "Matu Edition"
- Implement window.onSpotifyWebPlaybackSDKReady callback
- Use player.connect() to activate device
- Use Spotify API PUT /v1/me/player/play with device_id to start playback
- Implement: play, pause, next track, previous track, seek (progress bar drag), volume control
- Crossfade effect: smoothly fade audio between tracks (500ms fade out → fade in) using player.setVolume()
- Show current device as "Matu Edition" in the player

## Queue System
- Maintain a local queue array of track objects
- "Add to Queue" button on every track (on hover)
- Dedicated Queue panel (slide-in from right side)
- Show: currently playing + up next list with drag-to-reorder
- Play next / Play later options on right-click context menu
- Clear queue button
- When a track ends, automatically play next in queue

## Pages (Single Page App)
1. **Home** — Personalized greeting by time of day, featured playlists, recently played, new releases grid
2. **Search** — Real-time search with 400ms debounce, tabs for Tracks / Albums / Artists / Playlists
3. **Library** — User's playlists with cover art, liked songs
4. **Artist Page** — Top tracks, discography (albums/singles), related artists carousel
5. **Album Page** — Full tracklist with track numbers, duration, release info
6. **Playlist Page** — Full tracklist, total duration, play all button

## Now Playing Bar (Fixed Bottom)
- Album art (64x64, rounded)
- Track name + artist (scrolling marquee if too long)
- Progress bar with drag-to-seek and timestamp (current / total)
- Controls: shuffle, previous, play/pause, next, repeat
- Volume slider with mute toggle
- Queue button (opens queue panel)
- Heart / like button

## Design
- Background: #121212
- Sidebar: #000000
- Cards: #181818, hover: #282828
- Accent: #1DB954 (Spotify green)
- Primary text: #FFFFFF, secondary: #B3B3B3
- Font: DM Sans from Google Fonts
- Left sidebar: navigation icons + user playlists list
- Top bar: back/forward buttons + search + user avatar with dropdown
- Cards grid: auto-fill, minmax(180px, 1fr)
- Smooth fade-in page transitions
- Skeleton loading cards while fetching
- Hover on cards: scale(1.03) + green play button overlay appears
- Toast notifications (bottom right, auto-dismiss 3s)

## Technical
- Single HTML file, no frameworks, no build tools
- Vanilla JS only
- All CSS in <style>, all JS in <script>
- Spotify API endpoints to use:
  - GET /v1/me
  - GET /v1/me/top/tracks
  - GET /v1/me/player/recently-played
  - GET /v1/me/playlists
  - GET /v1/search?q=...&type=track,album,artist,playlist
  - GET /v1/artists/{id}, /top-tracks, /albums, /related-artists
  - GET /v1/albums/{id}
  - GET /v1/browse/new-releases
  - GET /v1/browse/featured-playlists
  - PUT /v1/me/player/play
  - POST /v1/me/player/queue
  - GET /v1/me/player/queue
- Error handling: 401 → re-auth, 429 → toast "Rate limited, slow down", 403 → toast "Premium required"

## Login Screen
giriş ekranını kaldır. direkt bir demo kullanıcı olarak girdiğimiz bir arayüz açılsın