|
|
<!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); |
|
|
} |
|
|
|
|
|
::-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 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> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<aside class="lg:col-span-1 space-y-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
