Initial commit

.gitignore

@@ -0,0 +1,25 @@
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
+.env
+.venv
+venv/
+ENV/
+.DS_Store 

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.9-slim
+
+WORKDIR /code
+
+# Install system dependencies
+RUN apt-get update && \
+    apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first to leverage Docker cache
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application
+COPY . .
+
+# Make port 7860 available to the world outside this container
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"] 

README.md

@@ -1,10 +1,37 @@
 ---
-title: MusicPlayer ThreeJS
-emoji: 🐨
-colorFrom: gray
+title: Soundscape - 3D Music Visualizer
+emoji: 🎵
+colorFrom: green
 colorTo: blue
 sdk: docker
-pinned: false
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Soundscape - 3D Music Visualizer
+
+An interactive 3D music visualization web application built with Flask, Three.js, and Web Audio API. Upload your music and watch it come to life with stunning 3D visualizations.
+
+## Features
+
+- Multiple visualization modes (Circular Bars, Sphere, Particles)
+- Audio file upload support (MP3, WAV, OGG, FLAC)
+- Metadata extraction and display
+- Playlist management
+- Dark/Light theme support
+- Responsive design
+- Real-time audio visualization
+
+## Technical Stack
+
+- Backend: Flask
+- Frontend: Three.js, Web Audio API
+- Audio Processing: Mutagen
+- Styling: CSS3 with modern features
+
+## Usage
+
+1. Click the upload button or drag and drop audio files
+2. Select visualization type from the dropdown
+3. Use player controls to manage playback
+4. Toggle between different visualization modes
+5. Enjoy the 3D visualization of your music!

app.py

@@ -0,0 +1,225 @@
+from flask import Flask, render_template, request, jsonify, send_from_directory
+import os
+import tempfile
+import atexit
+import shutil
+from datetime import datetime, timedelta
+import threading
+import time
+from mutagen import File
+from mutagen.easyid3 import EasyID3
+import json
+import mutagen.mp3
+import mutagen.flac
+import mutagen.oggvorbis
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+# Create a temporary directory for uploads
+TEMP_UPLOAD_DIR = tempfile.mkdtemp()
+app.config['UPLOAD_FOLDER'] = TEMP_UPLOAD_DIR
+app.config['MAX_CONTENT_LENGTH'] = 200 * 1024 * 1024  # 200MB max file size
+app.config['MAX_FILES'] = 10  # Maximum number of files that can be uploaded at once
+
+ALLOWED_EXTENSIONS = {'mp3', 'wav', 'ogg', 'flac'}  # Added FLAC support
+FILE_LIFETIME = timedelta(hours=1)  # Files will be deleted after 1 hour
+
+# Store file creation times
+file_timestamps = {}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+# Add function to extract metadata
+def extract_metadata(filepath):
+    try:
+        audio = File(filepath)
+        if audio is None:
+            return {}
+            
+        metadata = {
+            'duration': round(audio.info.length) if hasattr(audio.info, 'length') else None,
+            'bitrate': round(audio.info.bitrate / 1000) if hasattr(audio.info, 'bitrate') else None,
+            'sample_rate': audio.info.sample_rate if hasattr(audio.info, 'sample_rate') else None,
+            'channels': audio.info.channels if hasattr(audio.info, 'channels') else None,
+            'title': None,
+            'artist': 'Unknown Artist',
+            'album': None,
+            'genre': None,
+            'date': None
+        }
+
+        # Get the original filename without timestamp prefix and extension
+        original_filename = os.path.splitext(os.path.basename(filepath))[0]
+        if '_' in original_filename:
+            # Remove timestamp prefix (YYYYMMDD_HHMMSS_)
+            original_filename = '_'.join(original_filename.split('_')[2:])
+       
+        try:
+            # Handle MP3 files
+            if isinstance(audio, mutagen.mp3.MP3):
+                try:
+                    id3 = EasyID3(filepath)
+                    metadata.update({
+                        'title': id3.get('title', [''])[0],
+                        'artist': id3.get('artist', ['Unknown Artist'])[0],
+                        'album': id3.get('album', [''])[0],
+                        'genre': id3.get('genre', [''])[0],
+                        'date': id3.get('date', [''])[0]
+                    })
+                except:
+                    metadata['title'] = original_filename
+            
+            # Handle FLAC files
+            elif isinstance(audio, mutagen.flac.FLAC):
+                metadata.update({
+                    'title': audio.tags.get('TITLE', [''])[0] if audio.tags and 'TITLE' in audio.tags else None,
+                    'artist': audio.tags.get('ARTIST', ['Unknown Artist'])[0] if audio.tags and 'ARTIST' in audio.tags else 'Unknown Artist',
+                    'album': audio.tags.get('ALBUM', [''])[0] if audio.tags and 'ALBUM' in audio.tags else None,
+                    'genre': audio.tags.get('GENRE', [''])[0] if audio.tags and 'GENRE' in audio.tags else None,
+                    'date': audio.tags.get('DATE', [''])[0] if audio.tags and 'DATE' in audio.tags else None
+                })
+            
+            # Handle OGG files
+            elif isinstance(audio, mutagen.oggvorbis.OggVorbis):
+                metadata.update({
+                    'title': audio.get('title', [''])[0] if 'title' in audio else None,
+                    'artist': audio.get('artist', ['Unknown Artist'])[0] if 'artist' in audio else 'Unknown Artist',
+                    'album': audio.get('album', [''])[0] if 'album' in audio else None,
+                    'genre': audio.get('genre', [''])[0] if 'genre' in audio else None,
+                    'date': audio.get('date', [''])[0] if 'date' in audio else None
+                })
+            
+            # If title is not found or empty, use original filename
+            if not metadata['title']:
+                metadata['title'] = original_filename
+                
+        except Exception as e:
+            app.logger.error(f"Error reading tags: {str(e)}")
+            metadata['title'] = original_filename
+            
+        return metadata
+    except Exception as e:
+        app.logger.error(f"Error extracting metadata: {str(e)}")
+        return {
+            'title': os.path.splitext(os.path.basename(filepath))[0].split('_', 2)[-1],
+            'artist': 'Unknown Artist'
+        }
+
+@app.route('/favicon.ico')
+def favicon():
+    return send_from_directory('static', 'favicon.ico', mimetype='image/x-icon')
+
+@app.route('/')
+def index():
+    return render_template('index.html', title="Soundscape - 3D Music Visualizer")
+
+def cleanup_old_files():
+    while True:
+        current_time = datetime.now()
+        files_to_delete = []
+        
+        # Check all files
+        for filename, timestamp in file_timestamps.items():
+            if current_time - timestamp > FILE_LIFETIME:
+                filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                try:
+                    if os.path.exists(filepath):
+                        os.remove(filepath)
+                    files_to_delete.append(filename)
+                except Exception as e:
+                    app.logger.error(f"Error deleting file {filename}: {str(e)}")
+        
+        # Remove deleted files from timestamps
+        for filename in files_to_delete:
+            file_timestamps.pop(filename, None)
+            
+        time.sleep(300)  # Check every 5 minutes
+
+# Start cleanup thread
+cleanup_thread = threading.Thread(target=cleanup_old_files, daemon=True)
+cleanup_thread.start()
+
+@app.errorhandler(413)
+def request_entity_too_large(error):
+    return jsonify({
+        'success': False,
+        'error': 'File too large. Maximum total size is 200MB'
+    }), 413
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    if 'files[]' not in request.files:
+        return jsonify({'success': False, 'error': 'No files uploaded'}), 400
+    
+    files = request.files.getlist('files[]')
+    if not files or all(file.filename == '' for file in files):
+        return jsonify({'success': False, 'error': 'No selected files'}), 400
+
+    if len(files) > app.config['MAX_FILES']:
+        return jsonify({
+            'success': False,
+            'error': f"Maximum {app.config['MAX_FILES']} files can be uploaded at once"
+        }), 400
+
+    results = []
+    for file in files:
+        if file and allowed_file(file.filename):
+            try:
+                filename = secure_filename(file.filename)
+                timestamp = datetime.now().strftime('%Y%m%d_%H%M%S_')
+                filename = timestamp + filename
+                
+                filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                file.save(filepath)
+                
+                file_timestamps[filename] = datetime.now()
+                
+                if not os.path.exists(filepath):
+                    results.append({
+                        'filename': file.filename,
+                        'success': False,
+                        'error': 'Failed to save file'
+                    })
+                    continue
+                
+                # Extract metadata
+                metadata = extract_metadata(filepath)
+                    
+                results.append({
+                    'filename': file.filename,
+                    'success': True,
+                    'filepath': f'/static/uploads/{filename}',
+                    'metadata': metadata
+                })
+            except Exception as e:
+                app.logger.error(f"Upload error for {file.filename}: {str(e)}")
+                results.append({
+                    'filename': file.filename,
+                    'success': False,
+                    'error': 'Server error during upload'
+                })
+        else:
+            results.append({
+                'filename': file.filename,
+                'success': False,
+                'error': 'Invalid file type'
+            })
+
+    return jsonify({
+        'success': True,
+        'files': results
+    })
+
+@app.route('/static/uploads/<filename>')
+def serve_audio(filename):
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
+
+# Cleanup function to remove temp directory on shutdown
+def cleanup():
+    shutil.rmtree(TEMP_UPLOAD_DIR, ignore_errors=True)
+
+atexit.register(cleanup)
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860) 

requirements.txt

@@ -0,0 +1,3 @@
+flask==2.0.1
+mutagen==1.45.1
+Werkzeug==2.0.1 

static/css/style.css

@@ -0,0 +1,889 @@
+:root {
+    --primary-color: #4CAF50;
+    --primary-hover: #45a049;
+    --bg-color: #0a0a0a;
+    --surface-color: rgba(15, 23, 42, 0.8);
+    --text-primary: #ffffff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --error-color: #ff4444;
+}
+
+/* Light theme variables */
+[data-theme="light"] {
+    --bg-color: #f5f5f5;
+    --surface-color: rgba(255, 255, 255, 0.9);
+    --text-primary: #1a1a1a;
+    --text-secondary: rgba(0, 0, 0, 0.7);
+}
+
+.app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1.5rem;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    z-index: 100;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.controls-container {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 800px;
+    z-index: 100;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    padding: 1.5rem;
+}
+
+.upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.upload-content i {
+    font-size: 3rem;
+    color: var(--primary-color);
+}
+
+.upload-text h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+}
+
+.upload-text p {
+    margin: 0.5rem 0;
+    color: var(--text-secondary);
+}
+
+.file-types {
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+}
+
+.error-toast {
+    position: fixed;
+    top: 90px;
+    left: 50%;
+    transform: translateX(-50%) translateY(-150%);
+    background: rgba(255, 68, 68, 0.95);
+    color: white;
+    padding: 0.75rem 2rem;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.2);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 1001;
+    text-align: center;
+    max-width: 90%;
+    pointer-events: none;
+    font-size: 0.9rem;
+    font-weight: 500;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    opacity: 0;
+}
+
+.error-toast.visible {
+    transform: translateX(-50%) translateY(0);
+    opacity: 1;
+}
+
+select {
+    padding: 8px 12px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: white;
+    cursor: pointer;
+    font-size: 14px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding-right: 30px;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    background-size: 16px;
+}
+
+select:focus {
+    outline: none;
+    border-color: #4CAF50;
+}
+
+select option {
+    background-color: #1a1a1a;
+    color: white;
+    padding: 8px;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+input[type="range"] {
+    /* ... existing properties ... */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;  /* Add standard property */
+    /* ... rest of properties ... */
+}
+
+.track-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+}
+
+.track-duration {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-left: 8px;
+}
+
+.track-metadata {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.playlist-item {
+    padding: 8px 12px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+}
+
+.playlist-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.playlist-item.active {
+    background: rgba(76, 175, 80, 0.3);
+}
+
+.music-controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 16px;
+    margin-top: 12px;
+}
+
+.control-btn {
+    background: transparent;
+    border: none;
+    color: white;
+    padding: 8px;
+    min-width: auto;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.control-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(1.1);
+}
+
+.control-btn:active {
+    transform: scale(0.95);
+}
+
+.play-pause-btn {
+    background: #4CAF50;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.play-pause-btn:hover {
+    background: #45a049;
+}
+
+.previous-btn,
+.next-btn {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.control-btn i {
+    font-size: 1.2em;
+}
+
+.play-pause-btn i {
+    font-size: 1.4em;
+}
+
+.control-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* Update volume control styles */
+.volume-control {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
+    min-width: 120px;
+}
+
+.volume-btn {
+    background: transparent;
+    border: none;
+    padding: 8px;
+    min-width: auto;
+    color: var(--text-primary);
+}
+
+.volume-slider-container {
+    position: relative;
+    width: 80px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+}
+
+.volume-progress {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--primary-color);
+    border-radius: 2px;
+    pointer-events: none;
+    width: 50%;
+}
+
+#volume {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+/* Add tooltip styles */
+.tooltip {
+    position: fixed;
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    font-size: 0.8rem;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 1002;
+}
+
+.tooltip.visible {
+    opacity: 1;
+}
+
+.playlist-container {
+    background: var(--surface-color);
+    border-radius: 1rem;
+    margin: 0;
+    max-height: 100%;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.playlist-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.playlist-header h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.tracks-list {
+    max-height: 300px;
+    overflow-y: auto;
+    padding: 0.5rem;
+}
+
+.playlist-item {
+    padding: 0.75rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.playlist-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.playlist-item.active {
+    background: rgba(76, 175, 80, 0.2);
+}
+
+.track-info {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.track-number {
+    color: var(--text-secondary);
+    min-width: 2rem;
+    text-align: right;
+}
+
+.track-content {
+    flex: 1;
+}
+
+.track-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.25rem;
+}
+
+.track-duration {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.track-metadata {
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.track-controls {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.playlist-item:hover .track-controls,
+.playlist-item.active .track-controls {
+    opacity: 1;
+}
+
+/* Add custom scrollbar for the tracks list */
+.tracks-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.tracks-list::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+}
+
+.tracks-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+
+.tracks-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+@media screen and (max-width: 768px) {
+    .app-header {
+        padding: 0.75rem 1rem;
+    }
+
+    .logo span {
+        display: none; /* Hide logo text on mobile */
+    }
+
+    .main-content {
+        position: fixed;
+        top: auto;
+        right: 0;
+        bottom: 140px; /* Position above player controls */
+        width: 100%;
+        max-height: 40vh;
+        padding: 0 1rem;
+        z-index: 10;
+    }
+
+    .upload-area {
+        margin: 0.5rem 0;
+        padding: 1rem;
+    }
+
+    .controls-container {
+        bottom: 0;
+        width: 100%;
+        border-radius: 1rem 1rem 0 0;
+        padding: 1rem;
+    }
+
+    .music-controls {
+        gap: 12px;
+    }
+
+    .control-btn {
+        padding: 6px;
+    }
+
+    .volume-control {
+        display: none; /* Hide volume control on mobile */
+    }
+
+    .playlist-container {
+        border-radius: 1rem;
+        max-height: 100%;
+    }
+
+    .tracks-list {
+        max-height: calc(40vh - 60px); /* Adjust based on playlist header height */
+    }
+
+    .track-metadata {
+        max-width: 200px; /* Prevent long metadata from breaking layout */
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+/* Add specific adjustments for very small screens */
+@media screen and (max-width: 380px) {
+    .music-controls {
+        gap: 8px;
+    }
+
+    .control-btn {
+        width: 28px;
+        height: 28px;
+    }
+
+    .play-pause-btn {
+        width: 36px;
+        height: 36px;
+    }
+
+    .track-title {
+        font-size: 0.9rem;
+    }
+
+    .track-metadata {
+        font-size: 0.8rem;
+        max-width: 150px;
+    }
+}
+
+/* Add these styles for the now playing info */
+.now-playing-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.now-playing-text {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    flex: 1;
+    margin-right: 16px;
+}
+
+.now-playing-title {
+    font-size: 1rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    margin-bottom: 4px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.now-playing-artist {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.time-display {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    white-space: nowrap;
+}
+
+/* Update mobile styles */
+@media screen and (max-width: 768px) {
+    .now-playing-info {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 4px;
+    }
+
+    .now-playing-text {
+        width: 100%;
+        margin-right: 0;
+    }
+
+    .time-display {
+        align-self: flex-end;
+    }
+}
+
+/* Update very small screen styles */
+@media screen and (max-width: 380px) {
+    .now-playing-title {
+        font-size: 0.9rem;
+    }
+
+    .now-playing-artist {
+        font-size: 0.8rem;
+    }
+}
+
+/* Add these styles at the appropriate location in your CSS file */
+
+/* Ensure the canvas container takes full viewport */
+body {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    margin: 0;
+    overflow: hidden;
+}
+
+/* Position the THREE.js canvas */
+canvas {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+/* Adjust the header positioning */
+.app-header {
+    /* ... existing styles ... */
+    z-index: 100;
+}
+
+/* Create a main content area for the playlist */
+.main-content {
+    position: fixed;
+    top: 80px; /* Adjust based on your header height */
+    right: 2rem;
+    width: 400px;
+    max-height: calc(100vh - 260px); /* Adjust based on your controls height */
+    z-index: 10;
+    overflow: visible;
+}
+
+/* Adjust the playlist container */
+.playlist-container {
+    margin: 0;
+    max-height: 100%;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+}
+
+/* Adjust the controls container */
+.controls-container {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 90%;
+    max-width: 800px;
+    z-index: 100;
+    background: var(--surface-color);
+    backdrop-filter: blur(12px);
+}
+
+/* Adjust the upload area to be inside the playlist */
+.upload-area {
+    margin: 1rem;
+}
+
+/* Add these styles for the progress bar */
+.progress-bar {
+    position: relative;
+    width: 100%;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
+    margin: 8px 0;
+    cursor: pointer;
+}
+
+.progress {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: var(--primary-color);
+    border-radius: 2px;
+    pointer-events: none;
+    width: 0;
+}
+
+.seek-slider {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+}
+
+/* Add styles for the playlist buttons */
+.playlist-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    padding: 8px;
+    cursor: pointer;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+}
+
+.playlist-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    transform: scale(1.1);
+}
+
+.playlist-btn.active {
+    color: var(--primary-color);
+}
+
+/* Add loading spinner styles */
+.loading {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    padding: 1rem;
+}
+
+.loading.visible {
+    display: flex;
+}
+
+.spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: var(--primary-color);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Add styles for dragover state */
+.upload-area.dragover {
+    border-color: var(--primary-color);
+    background: rgba(76, 175, 80, 0.1);
+}
+
+/* Add styles for the main container */
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    padding: 80px 2rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
+
+/* Update body styles */
+body {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    background: var(--bg-color);
+    color: var(--text-primary);
+    overflow-x: hidden;
+    line-height: 1.5;
+}
+
+/* Add styles for buttons */
+button {
+    font-family: 'Inter', sans-serif;
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0;
+    color: inherit;
+}
+
+button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Hide file input */
+input[type="file"] {
+    display: none;
+}
+
+/* Add transition for theme changes */
+* {
+    transition: background-color 0.3s, color 0.3s;
+}
+
+/* Add styles for mobile responsiveness */
+@media (max-width: 768px) {
+    .container {
+        padding: 60px 1rem 1rem;
+    }
+
+    .controls-container {
+        padding: 1rem;
+    }
+
+    .music-controls {
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .volume-control {
+        width: 100%;
+        order: 3;
+    }
+
+    #visualization-type {
+        width: 100%;
+        order: 4;
+    }
+}
+
+/* Add styles for the error message */
+#error-message {
+    color: var(--error-color);
+    text-align: center;
+    margin: 8px 0;
+    font-size: 0.9rem;
+}
+
+/* Add styles for file name display */
+#file-name {
+    margin-top: 8px;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    text-align: center;
+    word-break: break-word;
+}
+
+/* Add styles for header buttons */
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.header-btn {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.header-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.header-btn.active {
+    color: var(--primary-color);
+    background: rgba(76, 175, 80, 0.1);
+}
+
+/* Update main content styles */
+.main-content {
+    position: fixed;
+    top: 80px;
+    right: -420px; /* Hide by default */
+    width: 400px;
+    max-height: calc(100vh - 260px);
+    z-index: 10;
+    overflow: visible;
+    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.main-content.visible {
+    right: 2rem;
+}
+
+/* Update upload area styles */
+.upload-area {
+    display: none;
+    margin: 1rem;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: all 0.3s ease;
+}
+
+.upload-area.visible {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Update playlist container styles */
+.playlist-container {
+    display: none;
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: all 0.3s ease;
+}
+
+.playlist-container.visible {
+    display: block;
+    opacity: 1;
+    transform: translateY(0);
+}

static/js/main.js

@@ -0,0 +1,612 @@
+// Initialize Three.js scene and renderer
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+const renderer = new THREE.WebGLRenderer({ antialias: true });
+renderer.setSize(window.innerWidth, window.innerHeight);
+
+// Set initial background color based on theme
+const savedTheme = localStorage.getItem('theme') || 'dark';
+document.documentElement.setAttribute('data-theme', savedTheme);
+renderer.setClearColor(savedTheme === 'light' ? 0xf5f5f5 : 0x000000);
+document.body.appendChild(renderer.domElement);
+
+// Initialize controls
+const controls = new THREE.OrbitControls(camera, renderer.domElement);
+setupOrbitControls();
+
+// Initialize other variables
+let audioContext;
+let analyser;
+let audioElement;
+let playlist = [];
+let currentTrackIndex = 0;
+let isPlaying = false;
+let visualizationType = 'bars';
+let visualizers = {
+    bars: [],
+    sphere: null,
+    particles: null
+};
+let isShuffleActive = false;
+let isRepeatActive = false;
+
+// Theme button functionality
+const themeBtn = document.querySelector('.theme-btn');
+if (themeBtn) {
+    themeBtn.innerHTML = savedTheme === 'light' ? 
+        '<i class="fas fa-moon"></i>' : 
+        '<i class="fas fa-sun"></i>';
+
+    themeBtn.addEventListener('click', () => {
+        const currentTheme = document.documentElement.getAttribute('data-theme');
+        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+        
+        document.documentElement.setAttribute('data-theme', newTheme);
+        localStorage.setItem('theme', newTheme);
+        
+        themeBtn.innerHTML = newTheme === 'light' ? 
+            '<i class="fas fa-moon"></i>' : 
+            '<i class="fas fa-sun"></i>';
+            
+        renderer.setClearColor(newTheme === 'light' ? 0xf5f5f5 : 0x000000);
+    });
+}
+
+// Initialize audio context
+function initAudio() {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    audioElement = new Audio();
+    const source = audioContext.createMediaElementSource(audioElement);
+    analyser = audioContext.createAnalyser();
+    analyser.fftSize = 2048;
+    source.connect(analyser);
+    analyser.connect(audioContext.destination);
+}
+
+// Visualization creation functions
+function createBarsVisualization() {
+    const geometry = new THREE.BoxGeometry(0.1, 1, 0.1);
+    const material = new THREE.MeshPhongMaterial({ color: 0x4CAF50 });
+    const numBars = 64;
+    
+    for (let i = 0; i < numBars; i++) {
+        const bar = new THREE.Mesh(geometry, material);
+        const angle = (i / numBars) * Math.PI * 2;
+        bar.position.x = Math.cos(angle) * 2;
+        bar.position.z = Math.sin(angle) * 2;
+        scene.add(bar);
+        visualizers.bars.push(bar);
+    }
+
+    // Add lighting
+    const light = new THREE.PointLight(0xffffff, 1, 100);
+    light.position.set(0, 5, 0);
+    scene.add(light);
+    
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    scene.add(ambientLight);
+}
+
+function createSphereVisualization() {
+    const geometry = new THREE.SphereGeometry(1, 32, 32);
+    const material = new THREE.MeshPhongMaterial({
+        color: 0x4CAF50,
+        wireframe: true
+    });
+    visualizers.sphere = new THREE.Mesh(geometry, material);
+    scene.add(visualizers.sphere);
+
+    // Add lighting
+    const light = new THREE.PointLight(0xffffff, 1, 100);
+    light.position.set(0, 5, 0);
+    scene.add(light);
+}
+
+function createParticlesVisualization() {
+    const particleCount = 1000;
+    const geometry = new THREE.BufferGeometry();
+    const positions = new Float32Array(particleCount * 3);
+    
+    for (let i = 0; i < particleCount * 3; i += 3) {
+        positions[i] = (Math.random() - 0.5) * 5;
+        positions[i + 1] = (Math.random() - 0.5) * 5;
+        positions[i + 2] = (Math.random() - 0.5) * 5;
+    }
+    
+    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    
+    const material = new THREE.PointsMaterial({
+        color: 0x4CAF50,
+        size: 0.05,
+        transparent: true
+    });
+    
+    visualizers.particles = new THREE.Points(geometry, material);
+    scene.add(visualizers.particles);
+}
+
+// Visualization update functions
+function updateBarsVisualization(dataArray) {
+    const multiplier = 0.01;
+    visualizers.bars.forEach((bar, i) => {
+        const value = dataArray[i] * multiplier;
+        bar.scale.y = value + 0.1;
+        bar.position.y = value / 2;
+    });
+}
+
+function updateSphereVisualization(dataArray) {
+    if (!visualizers.sphere) return;
+    
+    const averageFrequency = dataArray.reduce((a, b) => a + b) / dataArray.length;
+    const scale = 1 + (averageFrequency * 0.003);
+    visualizers.sphere.scale.set(scale, scale, scale);
+    visualizers.sphere.rotation.y += 0.01;
+}
+
+function updateParticlesVisualization(dataArray) {
+    if (!visualizers.particles) return;
+    
+    const positions = visualizers.particles.geometry.attributes.position.array;
+    const multiplier = 0.02;
+    
+    for (let i = 0; i < positions.length; i += 3) {
+        const value = dataArray[i / 3] * multiplier;
+        const distance = Math.sqrt(
+            positions[i] * positions[i] +
+            positions[i + 1] * positions[i + 1] +
+            positions[i + 2] * positions[i + 2]
+        );
+        
+        positions[i] *= 1 + (value / distance);
+        positions[i + 1] *= 1 + (value / distance);
+        positions[i + 2] *= 1 + (value / distance);
+    }
+    
+    visualizers.particles.geometry.attributes.position.needsUpdate = true;
+    visualizers.particles.rotation.y += 0.001;
+}
+
+// Animation loop
+function animate() {
+    requestAnimationFrame(animate);
+    controls.update();
+    
+    if (analyser && isPlaying) {
+        const dataArray = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteFrequencyData(dataArray);
+        updateVisualization(dataArray);
+    }
+    
+    renderer.render(scene, camera);
+}
+
+// Start animation
+animate();
+
+// Event listeners for window resize
+window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+});
+
+// Initialize the application
+document.addEventListener('DOMContentLoaded', () => {
+    setupUploadHandlers();
+    setupPlayerControls();
+    setupToggleHandlers();
+    createVisualization();
+});
+
+// Export necessary functions and variables
+window.playTrack = playTrack;
+window.createPlaylist = createPlaylist;
+window.updateNowPlayingInfo = updateNowPlayingInfo;
+
+// Setup orbit controls
+function setupOrbitControls() {
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    controls.enableZoom = true;
+    controls.autoRotate = true;
+    controls.autoRotateSpeed = 2.0;
+    camera.position.z = 5;
+}
+
+// Handle file uploads
+function setupUploadHandlers() {
+    const uploadArea = document.getElementById('upload-area');
+    const fileInput = document.getElementById('audio-upload');
+    const errorToast = document.querySelector('.error-toast');
+
+    uploadArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadArea.classList.add('dragover');
+    });
+
+    uploadArea.addEventListener('dragleave', () => {
+        uploadArea.classList.remove('dragover');
+    });
+
+    uploadArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadArea.classList.remove('dragover');
+        handleFiles(e.dataTransfer.files);
+    });
+
+    uploadArea.addEventListener('click', () => {
+        fileInput.click();
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        handleFiles(e.target.files);
+    });
+
+    // Setup shuffle and repeat buttons
+    const shuffleBtn = document.querySelector('.shuffle-btn');
+    const repeatBtn = document.querySelector('.repeat-btn');
+
+    shuffleBtn?.addEventListener('click', () => {
+        isShuffleActive = !isShuffleActive;
+        shuffleBtn.classList.toggle('active');
+    });
+
+    repeatBtn?.addEventListener('click', () => {
+        isRepeatActive = !isRepeatActive;
+        repeatBtn.classList.toggle('active');
+    });
+}
+
+// Handle the uploaded files
+async function handleFiles(files) {
+    if (!audioContext) initAudio();
+    
+    const formData = new FormData();
+    Array.from(files).forEach(file => {
+        formData.append('files[]', file);
+    });
+
+    try {
+        const response = await fetch('/upload', {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+        
+        if (data.success) {
+            playlist = data.files.map(file => ({
+                name: file.filename,
+                url: file.filepath,
+                metadata: file.metadata
+            }));
+            
+            createPlaylist();
+            if (playlist.length > 0) {
+                playTrack(0);
+            }
+        } else {
+            showError(data.error);
+        }
+    } catch (error) {
+        showError('Error uploading files');
+        console.error('Upload error:', error);
+    }
+}
+
+// Show error message
+function showError(message) {
+    const errorToast = document.querySelector('.error-toast');
+    errorToast.textContent = message;
+    errorToast.classList.add('visible');
+    setTimeout(() => {
+        errorToast.classList.remove('visible');
+    }, 3000);
+}
+
+// Setup player controls
+function setupPlayerControls() {
+    const playPauseBtn = document.getElementById('play-pause');
+    const prevBtn = document.querySelector('.previous-btn');
+    const nextBtn = document.querySelector('.next-btn');
+    const volumeSlider = document.getElementById('volume');
+    const seekSlider = document.querySelector('.seek-slider');
+    const visualizationSelect = document.getElementById('visualization-type');
+
+    playPauseBtn.addEventListener('click', togglePlayPause);
+    prevBtn.addEventListener('click', playPrevious);
+    nextBtn.addEventListener('click', playNext);
+    volumeSlider.addEventListener('input', updateVolume);
+    seekSlider.addEventListener('input', seekTo);
+    
+    visualizationSelect.addEventListener('change', (e) => {
+        visualizationType = e.target.value;
+        createVisualization();
+    });
+
+    // Add keyboard controls
+    document.addEventListener('keydown', (e) => {
+        if (e.code === 'Space') {
+            e.preventDefault();
+            togglePlayPause();
+        } else if (e.code === 'ArrowLeft') {
+            playPrevious();
+        } else if (e.code === 'ArrowRight') {
+            playNext();
+        }
+    });
+
+    // Update time display
+    if (audioElement) {
+        audioElement.addEventListener('timeupdate', updateTimeDisplay);
+        audioElement.addEventListener('ended', handleTrackEnd);
+    }
+}
+
+// Toggle play/pause
+function togglePlayPause() {
+    if (!audioElement) return;
+    
+    if (audioElement.paused) {
+        audioElement.play();
+        isPlaying = true;
+        document.getElementById('play-pause').innerHTML = '<i class="fas fa-pause"></i>';
+    } else {
+        audioElement.pause();
+        isPlaying = false;
+        document.getElementById('play-pause').innerHTML = '<i class="fas fa-play"></i>';
+    }
+}
+
+// Play previous track
+function playPrevious() {
+    if (playlist.length === 0) return;
+    let newIndex = currentTrackIndex - 1;
+    if (newIndex < 0) newIndex = playlist.length - 1;
+    playTrack(newIndex);
+}
+
+// Play next track
+function playNext() {
+    if (playlist.length === 0) return;
+    let newIndex = currentTrackIndex + 1;
+    if (newIndex >= playlist.length) newIndex = 0;
+    playTrack(newIndex);
+}
+
+// Update volume
+function updateVolume(e) {
+    if (audioElement) {
+        audioElement.volume = e.target.value;
+        const volumeProgress = document.querySelector('.volume-progress');
+        volumeProgress.style.width = `${e.target.value * 100}%`;
+    }
+}
+
+// Seek to position
+function seekTo(e) {
+    if (audioElement && audioElement.duration) {
+        const time = (e.target.value / 100) * audioElement.duration;
+        audioElement.currentTime = time;
+    }
+}
+
+// Update time display
+function updateTimeDisplay() {
+    if (!audioElement) return;
+
+    const currentTime = document.querySelector('.current-time');
+    const totalTime = document.querySelector('.total-time');
+    const seekSlider = document.querySelector('.seek-slider');
+    const progress = document.querySelector('.progress');
+
+    const current = formatTime(audioElement.currentTime);
+    const total = formatTime(audioElement.duration);
+    const progressPercent = (audioElement.currentTime / audioElement.duration) * 100;
+
+    currentTime.textContent = current;
+    totalTime.textContent = total;
+    seekSlider.value = progressPercent;
+    progress.style.width = `${progressPercent}%`;
+}
+
+// Format time in MM:SS
+function formatTime(seconds) {
+    if (!seconds || isNaN(seconds)) return '0:00';
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
+    return `${mins}:${secs}`;
+}
+
+// Handle track end
+function handleTrackEnd() {
+    if (isRepeatActive) {
+        audioElement.currentTime = 0;
+        audioElement.play();
+    } else {
+        playNext();
+    }
+}
+
+// Create visualization
+function createVisualization() {
+    // Clear existing visualization
+    while(scene.children.length > 0) { 
+        scene.remove(scene.children[0]); 
+    }
+    visualizers = {
+        bars: [],
+        sphere: null,
+        particles: null
+    };
+
+    switch(visualizationType) {
+        case 'bars':
+            createBarsVisualization();
+            break;
+        case 'sphere':
+            createSphereVisualization();
+            break;
+        case 'particles':
+            createParticlesVisualization();
+            break;
+    }
+}
+
+// Update visualization
+function updateVisualization(dataArray) {
+    switch(visualizationType) {
+        case 'bars':
+            updateBarsVisualization(dataArray);
+            break;
+        case 'sphere':
+            updateSphereVisualization(dataArray);
+            break;
+        case 'particles':
+            updateParticlesVisualization(dataArray);
+            break;
+    }
+}
+
+// Create playlist UI
+function createPlaylist() {
+    const tracksList = document.querySelector('.tracks-list');
+    tracksList.innerHTML = '';
+    
+    playlist.forEach((track, index) => {
+        const metadata = track.metadata || {};
+        const duration = metadata.duration ? formatTime(metadata.duration) : '0:00';
+        const artist = metadata.artist || 'Unknown Artist';
+        const title = metadata.title || track.name;
+        
+        const trackElement = document.createElement('div');
+        trackElement.className = 'playlist-item';
+        trackElement.innerHTML = `
+            <div class="track-info">
+                <span class="track-number">${index + 1}</span>
+                <div class="track-content">
+                    <div class="track-title">
+                        ${title}
+                        <span class="track-duration">${duration}</span>
+                    </div>
+                    <div class="track-metadata">
+                        ${artist}
+                        ${metadata.album ? ` • ${metadata.album}` : ''}
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        trackElement.addEventListener('click', () => playTrack(index));
+        tracksList.appendChild(trackElement);
+    });
+}
+
+// Update now playing information
+function updateNowPlayingInfo() {
+    if (currentTrackIndex >= 0 && currentTrackIndex < playlist.length) {
+        const track = playlist[currentTrackIndex];
+        const metadata = track.metadata || {};
+        
+        const nowPlayingTitle = document.querySelector('.now-playing-title');
+        const nowPlayingArtist = document.querySelector('.now-playing-artist');
+        
+        if (nowPlayingTitle) {
+            nowPlayingTitle.textContent = metadata.title || track.name;
+        }
+        
+        if (nowPlayingArtist) {
+            let artistInfo = metadata.artist || 'Unknown Artist';
+            if (metadata.album) {
+                artistInfo += ` • ${metadata.album}`;
+            }
+            nowPlayingArtist.textContent = artistInfo;
+        }
+    }
+}
+
+// Play selected track
+function playTrack(index) {
+    if (index < 0 || index >= playlist.length) return;
+    
+    currentTrackIndex = index;
+    const track = playlist[index];
+    
+    if (!audioElement) {
+        initAudio();
+    }
+
+    // Update playlist UI
+    document.querySelectorAll('.playlist-item').forEach((item, i) => {
+        item.classList.toggle('active', i === index);
+    });
+
+    // Enable controls
+    document.getElementById('play-pause').disabled = false;
+    document.querySelector('.previous-btn').disabled = false;
+    document.querySelector('.next-btn').disabled = false;
+
+    // Update audio source and play
+    audioElement.src = track.url;
+    audioElement.play()
+        .then(() => {
+            isPlaying = true;
+            document.getElementById('play-pause').innerHTML = '<i class="fas fa-pause"></i>';
+            updateNowPlayingInfo();
+
+            // Add event listeners for time updates if not already added
+            if (!audioElement.onended) {
+                audioElement.addEventListener('timeupdate', updateTimeDisplay);
+                audioElement.addEventListener('ended', handleTrackEnd);
+            }
+        })
+        .catch(error => {
+            console.error('Error playing track:', error);
+            showError('Error playing track');
+        });
+}
+
+// Add these functions after the existing initialization code
+function setupToggleHandlers() {
+    const mainContent = document.querySelector('.main-content');
+    const uploadArea = document.querySelector('.upload-area');
+    const playlistContainer = document.querySelector('.playlist-container');
+    const uploadToggleBtn = document.querySelector('.upload-toggle-btn');
+    const playlistToggleBtn = document.querySelector('.playlist-toggle-btn');
+
+    // Show playlist by default
+    mainContent.classList.add('visible');
+    playlistContainer.classList.add('visible');
+    playlistToggleBtn.classList.add('active');
+
+    uploadToggleBtn?.addEventListener('click', () => {
+        const isVisible = uploadArea.classList.contains('visible');
+        
+        // Hide playlist if it's visible
+        playlistContainer.classList.remove('visible');
+        playlistToggleBtn.classList.remove('active');
+        
+        // Toggle upload area
+        uploadArea.classList.toggle('visible');
+        uploadToggleBtn.classList.toggle('active');
+        
+        // Show/hide main content
+        mainContent.classList.toggle('visible', !isVisible || playlistContainer.classList.contains('visible'));
+    });
+
+    playlistToggleBtn?.addEventListener('click', () => {
+        const isVisible = playlistContainer.classList.contains('visible');
+        
+        // Hide upload area if it's visible
+        uploadArea.classList.remove('visible');
+        uploadToggleBtn.classList.remove('active');
+        
+        // Toggle playlist
+        playlistContainer.classList.toggle('visible');
+        playlistToggleBtn.classList.toggle('active');
+        
+        // Show/hide main content
+        mainContent.classList.toggle('visible', !isVisible || uploadArea.classList.contains('visible'));
+    });
+}

templates/index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>3D Music Visualizer</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+</head>
+<body>
+    <header class="app-header">
+        <div class="logo">
+            <i class="fas fa-music"></i>
+            <span>Soundscape</span>
+        </div>
+        <div class="header-controls">
+            <button class="header-btn upload-toggle-btn" title="Show upload">
+                <i class="fas fa-cloud-upload-alt"></i>
+            </button>
+            <button class="header-btn playlist-toggle-btn" title="Show playlist">
+                <i class="fas fa-list"></i>
+            </button>
+            <button class="header-btn theme-btn" title="Toggle theme">
+                <i class="fas fa-moon"></i>
+            </button>
+        </div>
+    </header>
+
+    <div class="main-content">
+        <div class="upload-area" id="upload-area">
+            <div class="upload-content">
+                <i class="fas fa-cloud-upload-alt"></i>
+                <div class="upload-text">
+                    <h3>Drop your audio files here</h3>
+                    <p>or click to browse</p>
+                    <span class="file-types">Supports MP3, WAV, OGG, FLAC</span>
+                </div>
+                <div id="file-name"></div>
+            </div>
+            <input type="file" id="audio-upload" accept=".mp3,.wav,.ogg,.flac" multiple>
+        </div>
+        
+        <div class="playlist-container">
+            <div class="playlist-header">
+                <h3>Playlist</h3>
+                <div class="playlist-controls">
+                    <button class="playlist-btn shuffle-btn" title="Shuffle">
+                        <i class="fas fa-random"></i>
+                    </button>
+                    <button class="playlist-btn repeat-btn" title="Repeat">
+                        <i class="fas fa-redo"></i>
+                    </button>
+                </div>
+            </div>
+            <div class="tracks-list">
+                <!-- Tracks will be dynamically added here -->
+            </div>
+        </div>
+    </div>
+    
+    <div id="controls" class="controls-container">
+        <div class="now-playing-info">
+            <div class="now-playing-text">
+                <div class="now-playing-title">No track selected</div>
+                <div class="now-playing-artist">Upload some music to begin</div>
+            </div>
+            <div class="time-display">
+                <span class="current-time">0:00</span> / 
+                <span class="total-time">0:00</span>
+            </div>
+        </div>
+
+        <div class="progress-bar">
+            <div class="progress"></div>
+            <input type="range" class="seek-slider" min="0" max="100" value="0">
+        </div>
+
+        <div class="music-controls">
+            <button class="control-btn previous-btn" disabled>
+                <i class="fas fa-backward"></i>
+            </button>
+            <button class="control-btn play-pause-btn" id="play-pause" disabled>
+                <i class="fas fa-play"></i>
+            </button>
+            <button class="control-btn next-btn" disabled>
+                <i class="fas fa-forward"></i>
+            </button>
+            
+            <div class="volume-control">
+                <button class="volume-btn">
+                    <i class="fas fa-volume-up"></i>
+                </button>
+                <div class="volume-slider-container">
+                    <div class="volume-progress"></div>
+                    <input type="range" id="volume" min="0" max="1" step="0.1" value="0.5">
+                </div>
+            </div>
+
+            <select id="visualization-type">
+                <option value="bars">Circular Bars</option>
+                <option value="sphere">Sphere</option>
+                <option value="particles">Particles</option>
+            </select>
+        </div>
+    </div>
+
+    <div class="error-toast"></div>
+    <div class="tooltip"></div>
+
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>