AudioApp/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CarPlay Audio Server - Admin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: #f5f5f7;
            color: #1d1d1f;
        }
        
        .header {
            background: white;
            border-bottom: 1px solid #d2d2d7;
            padding: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 28px;
            font-weight: 600;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .tabs {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            background: white;
            padding: 10px;
            border-radius: 10px;
        }
        
        .tab {
            padding: 10px 20px;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.2s;
        }
        
        .tab:hover {
            background: #f5f5f7;
        }
        
        .tab.active {
            background: #007aff;
            color: white;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .card h2 {
            font-size: 22px;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
        }
        
        .stat-card h3 {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 5px;
        }
        
        .stat-card .value {
            font-size: 32px;
            font-weight: 700;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 500;
            transition: all 0.2s;
        }
        
        .btn-primary {
            background: #007aff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0051d5;
        }
        
        .btn-secondary {
            background: #f5f5f7;
            color: #1d1d1f;
        }
        
        .btn-secondary:hover {
            background: #e8e8ed;
        }
        
        .btn-danger {
            background: #ff3b30;
            color: white;
        }
        
        input, select {
            padding: 10px;
            border: 1px solid #d2d2d7;
            border-radius: 6px;
            font-size: 15px;
            width: 100%;
            margin-bottom: 10px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .track-list, .playlist-list {
            list-style: none;
        }
        
        .track-item, .playlist-item {
            padding: 15px;
            border-bottom: 1px solid #f5f5f7;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .track-item:hover, .playlist-item:hover {
            background: #f5f5f7;
        }
        
        .track-info {
            flex: 1;
        }
        
        .track-title {
            font-weight: 600;
            margin-bottom: 3px;
        }
        
        .track-meta {
            font-size: 13px;
            color: #86868b;
        }
        
        .badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 600;
            margin-left: 8px;
        }
        
        .badge-single {
            background: #ff9500;
            color: white;
        }
        
        .badge-album {
            background: #34c759;
            color: white;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #86868b;
        }
        
        .alert {
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 15px;
        }
        
        .alert-success {
            background: #d1f4e0;
            color: #0f5132;
        }
        
        .alert-error {
            background: #f8d7da;
            color: #842029;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
        }
        
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-content {
            background: white;
            border-radius: 10px;
            padding: 30px;
            max-width: 500px;
            width: 90%;
        }
        
        .modal-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>🎵 CarPlay Audio Server</h1>
        </div>
    </div>

    <div class="container">
        <div class="tabs">
            <button class="tab active" onclick="switchTab('dashboard')">Dashboard</button>
            <button class="tab" onclick="switchTab('tracks')">Tracks</button>
            <button class="tab" onclick="switchTab('albums')">Albums</button>
            <button class="tab" onclick="switchTab('playlists')">Playlists</button>
            <button class="tab" onclick="switchTab('settings')">Settings</button>
        </div>

        <!-- Dashboard Tab -->
        <div id="dashboard" class="tab-content active">
            <div class="stats">
                <div class="stat-card">
                    <h3>Total Tracks</h3>
                    <div class="value" id="totalTracks">-</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
                    <h3>Albums</h3>
                    <div class="value" id="totalAlbums">-</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                    <h3>Singles</h3>
                    <div class="value" id="totalSingles">-</div>
                </div>
                <div class="stat-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
                    <h3>Playlists</h3>
                    <div class="value" id="totalPlaylists">-</div>
                </div>
            </div>

            <div class="card">
                <h2>Quick Actions</h2>
                <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                    <button class="btn btn-primary" onclick="scanLibrary()">🔍 Scan Library</button>
                    <button class="btn btn-secondary" onclick="switchTab('playlists')">📋 Manage Playlists</button>
                    <button class="btn btn-secondary" onclick="document.getElementById('uploadFile').click()">📤 Upload File</button>
                    <input type="file" id="uploadFile" accept="audio/*" style="display: none;" onchange="uploadAudio()">
                </div>
            </div>

            <div id="scanStatus" style="display: none;" class="card">
                <h2>Scanning Library...</h2>
                <div class="loading">Please wait while we scan your audio files...</div>
            </div>
        </div>

        <!-- Tracks Tab -->
        <div id="tracks" class="tab-content">
            <div class="card">
                <h2>All Tracks</h2>
                <div style="margin-bottom: 15px;">
                    <input type="text" id="searchTracks" placeholder="Search tracks..." onkeyup="searchTracks()">
                </div>
                <ul class="track-list" id="trackList">
                    <li class="loading">Loading tracks...</li>
                </ul>
            </div>
        </div>

        <!-- Albums Tab -->
        <div id="albums" class="tab-content">
            <div class="card">
                <h2>Albums</h2>
                <ul class="track-list" id="albumList">
                    <li class="loading">Loading albums...</li>
                </ul>
            </div>
        </div>

        <!-- Playlists Tab -->
        <div id="playlists" class="tab-content">
            <div class="card">
                <h2>Playlists</h2>
                <button class="btn btn-primary" onclick="showCreatePlaylist()" style="margin-bottom: 15px;">+ Create Playlist</button>
                <ul class="playlist-list" id="playlistList">
                    <li class="loading">Loading playlists...</li>
                </ul>
            </div>
        </div>

        <!-- Settings Tab -->
        <div id="settings" class="tab-content">
            <div class="card">
                <h2>Library Settings</h2>
                <div class="form-group">
                    <label>Library Path</label>
                    <input type="text" id="libraryPath" value="./audio_library" readonly>
                    <small style="color: #86868b;">Audio files location on server</small>
                </div>
                <button class="btn btn-primary" onclick="scanLibrary()">Scan Library Now</button>
            </div>

            <div class="card">
                <h2>Subsonic API</h2>
                <div class="form-group">
                    <label>Server URL</label>
                    <input type="text" id="subsonicUrl" readonly>
                </div>
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" value="admin" readonly>
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" value="admin" readonly>
                </div>
                <small style="color: #86868b;">⚠️ Change default credentials in src/routes/subsonic.js</small>
            </div>
        </div>
    </div>

    <!-- Create Playlist Modal -->
    <div id="createPlaylistModal" class="modal">
        <div class="modal-content">
            <h2>Create Playlist</h2>
            <div class="form-group">
                <label>Playlist Name</label>
                <input type="text" id="playlistName" placeholder="My Playlist">
            </div>
            <div class="form-group">
                <label>Description (optional)</label>
                <input type="text" id="playlistDescription" placeholder="Description">
            </div>
            <div class="modal-buttons">
                <button class="btn btn-primary" onclick="createPlaylist()">Create</button>
                <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>