index.html

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workout Video Archiver</title>
    <base href="/">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .video-upload-area {
            border: 2px dashed #ccc;
            transition: all 0.3s;
        }
        .video-upload-area:hover {
            border-color: #4f46e5;
            background-color: rgba(79, 70, 229, 0.05);
        }
        .video-upload-area.dragover {
            border-color: #4f46e5;
            background-color: rgba(79, 70, 229, 0.1);
        }
        .video-thumbnail {
            aspect-ratio: 16/9;
            background-color: #f3f4f6;
            transition: transform 0.2s;
        }
        .video-thumbnail:hover {
            transform: scale(1.02);
        }
        .tag {
            transition: all 0.2s;
        }
        .tag:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .dark .video-thumbnail {
            background-color: #1f2937;
        }
        .dark .tag {
            background-color: #374151;
        }
        .dark .video-upload-area {
            border-color: #4b5563;
        }
        .dark .video-upload-area:hover {
            border-color: #818cf8;
            background-color: rgba(129, 140, 248, 0.05);
        }
        .dark .video-upload-area.dragover {
            border-color: #818cf8;
            background-color: rgba(129, 140, 248, 0.1);
        }
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        ::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        .dark ::-webkit-scrollbar-track {
            background: #1f2937;
        }
        .dark ::-webkit-scrollbar-thumb {
            background: #4b5563;
        }
        .dark ::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-200 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- Header -->
        <header class="flex justify-between items-center mb-8">
            <div>
                <h1 class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">Workout Video Archiver</h1>
                <p class="text-gray-600 dark:text-gray-400">Organize and share your training videos</p>
            </div>
            <div class="flex items-center space-x-4">
                <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600">
                    <i class="fas fa-moon dark:hidden"></i>
                    <i class="fas fa-sun hidden dark:inline"></i>
                </button>
                <div class="relative">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="w-10 h-10 rounded-full cursor-pointer">
                    <div class="absolute right-0 bottom-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></div>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <!-- Sidebar -->
            <aside class="lg:col-span-1 space-y-6">
                <!-- Navigation -->
                <nav class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <ul class="space-y-2">
                        <li>
                            <a href="#" class="flex items-center space-x-3 p-2 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300">
                                <i class="fas fa-home w-5"></i>
                                <span>Dashboard</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                                <i class="fas fa-video w-5"></i>
                                <span>My Videos</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                                <i class="fas fa-tags w-5"></i>
                                <span>Tags</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                                <i class="fas fa-chart-line w-5"></i>
                                <span>Analytics</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="flex items-center space-x-3 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
                                <i class="fas fa-cog w-5"></i>
                                <span>Settings</span>
                            </a>
                        </li>
                    </ul>
                </nav>

                <!-- Quick Stats -->
                <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4">
                    <h3 class="font-medium mb-3">Quick Stats</h3>
                    <div class="space-y-3">
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Total Videos</p>
                            <p class="text-xl font-semibold">124</p>
                        </div>
                        <div>
                            <p class="text-sm text-gray-5
</html>