dashboard.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard | Groovy Tunes Explorer</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <link rel="stylesheet" href="/css/styles.css">
</head>
<body class="flex h-screen overflow-hidden">
    <!--#include virtual="/components/sidebar.html" -->
    
    <div class="flex-1 flex flex-col overflow-hidden">
        <!--#include virtual="/components/header.html" -->
<!-- Dashboard Content -->
        <main class="flex-1 overflow-y-auto p-8">
            <div class="max-w-4xl mx-auto">
                <!-- Upload Section -->
                <div class="bg-gray-800 bg-opacity-60 rounded-xl p-8 mb-8">
                    <div class="upload-area rounded-lg p-10 text-center cursor-pointer">
                        <i data-feather="upload-cloud" class="h-12 w-12 mx-auto text-gray-400 mb-4"></i>
                        <h3 class="text-xl font-medium mb-2">Drag and drop your music here</h3>
                        <p class="text-gray-400 mb-6">Or click to browse files</p>
                        <input type="file" id="musicUpload" accept="audio/*" class="hidden">
                        <button id="uploadBtn" class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-full transition duration-200">
                            Select Files
                        </button>
                    </div>
                    <div class="mt-6">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="bg-green-500 bg-opacity-20 p-3 rounded-full mr-4">
                                        <i data-feather="file" class="h-5 w-5 text-green-500"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-400">Uploaded Tracks</p>
                                        <p class="text-xl font-medium" id="uploadedCount">0</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="bg-blue-500 bg-opacity-20 p-3 rounded-full mr-4">
                                        <i data-feather="play" class="h-5 w-5 text-blue-500"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-400">Total Plays</p>
                                        <p class="text-xl font-medium" id="totalPlays">0</p>
                                    </div>
                                </div>
                            </div>
                            <div class="bg-gray-700 bg-opacity-50 rounded-lg p-4">
                                <div class="flex items-center">
                                    <div class="bg-purple-500 bg-opacity-20 p-3 rounded-full mr-4">
                                        <i data-feather="users" class="h-5 w-5 text-purple-500"></i>
                                    </div>
                                    <div>
                                        <p class="text-sm text-gray-400">Listeners</p>
                                        <p class="text-xl font-medium" id="listenersCount">0</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Your Uploads Section -->
                <h2 class="text-2xl font-bold mb-6">Your Uploads</h2>
                <div class="bg-gray-800 bg-opacity-60 rounded-xl overflow-hidden">
                    <div class="grid grid-cols-12 bg-gray-700 bg-opacity-50 p-4 border-b border-gray-700">
                        <div class="col-span-6 text-sm text-gray-400 font-medium">TRACK</div>
                        <div class="col-span-2 text-sm text-gray-400 font-medium">DATE ADDED</div>
                        <div class="col-span-2 text-sm text-gray-400 font-medium">PLAYS</div>
                        <div class="col-span-2 text-sm text-gray-400 font-medium">DURATION</div>
                    </div>
                    <div id="tracksList">
                        <!-- Tracks will be added here dynamically -->
                    </div>
                </div>
            </div>
        </main>
    </div>
        <!--#include virtual="/components/player.html" -->
    <script src="/js/script.js"></script>
</body>
</html>