301 lines
17 KiB
HTML
301 lines
17 KiB
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>Projects - Design 2</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');
|
|
body { font-family: 'Inter', sans-serif; background-color: #09090b; color: #e4e4e7; }
|
|
.font-mono { font-family: 'JetBrains Mono', monospace; }
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #09090b; }
|
|
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
|
|
</style>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
zinc: {
|
|
850: '#1f1f22',
|
|
900: '#18181b',
|
|
950: '#09090b',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="h-screen flex overflow-hidden selection:bg-indigo-500/30">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="w-72 bg-zinc-950 border-r border-zinc-800 flex flex-col flex-shrink-0">
|
|
<!-- Brand -->
|
|
<div class="h-14 flex items-center px-4 border-b border-zinc-900">
|
|
<div class="flex items-center gap-2 text-zinc-100">
|
|
<div class="w-6 h-6 bg-indigo-600 rounded flex items-center justify-center">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
|
|
</div>
|
|
<span class="font-bold tracking-tight">STUDIO</span>
|
|
<span class="text-xs font-mono text-zinc-500 ml-auto">v2.4</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User -->
|
|
<div class="p-3">
|
|
<button class="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-zinc-900 transition-colors text-left group">
|
|
<div class="w-8 h-8 rounded bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-xs font-bold text-white shadow-lg shadow-indigo-900/20">
|
|
JD
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium text-zinc-200 truncate">John Doe</div>
|
|
<div class="text-xs text-zinc-500 truncate group-hover:text-zinc-400">Pro Plan</div>
|
|
</div>
|
|
<i data-lucide="chevron-down" class="w-4 h-4 text-zinc-600"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Nav -->
|
|
<nav class="flex-1 overflow-y-auto px-3 py-2 space-y-6">
|
|
<div>
|
|
<div class="text-[10px] font-bold text-zinc-600 uppercase tracking-wider mb-2 px-2">Workspace</div>
|
|
<div class="space-y-0.5">
|
|
<a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium bg-zinc-900 text-indigo-400 rounded-md border border-zinc-800/50">
|
|
<i data-lucide="grid" class="w-4 h-4"></i>
|
|
Projects
|
|
</a>
|
|
<a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
|
|
<i data-lucide="film" class="w-4 h-4"></i>
|
|
Media Library
|
|
</a>
|
|
<a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
|
|
<i data-lucide="wand-2" class="w-4 h-4"></i>
|
|
Templates
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center justify-between px-2 mb-2 group">
|
|
<div class="text-[10px] font-bold text-zinc-600 uppercase tracking-wider">Folders</div>
|
|
<button class="text-zinc-600 hover:text-zinc-300 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<i data-lucide="plus" class="w-3 h-3"></i>
|
|
</button>
|
|
</div>
|
|
<div class="space-y-0.5">
|
|
<a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
|
|
<i data-lucide="folder" class="w-4 h-4 text-zinc-700"></i>
|
|
Client Work
|
|
</a>
|
|
<a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
|
|
<i data-lucide="folder" class="w-4 h-4 text-purple-900/50"></i>
|
|
Personal
|
|
</a>
|
|
<a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
|
|
<i data-lucide="folder" class="w-4 h-4 text-zinc-700"></i>
|
|
Archive 2024
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Storage Status -->
|
|
<div class="p-4 border-t border-zinc-900">
|
|
<div class="flex items-center justify-between text-xs mb-2">
|
|
<span class="text-zinc-400">Storage</span>
|
|
<span class="text-zinc-500">75%</span>
|
|
</div>
|
|
<div class="h-1 bg-zinc-800 rounded-full overflow-hidden">
|
|
<div class="h-full bg-indigo-600 w-3/4"></div>
|
|
</div>
|
|
<div class="mt-2 text-[10px] text-zinc-600">15GB of 20GB used</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main -->
|
|
<main class="flex-1 flex flex-col min-w-0 bg-zinc-950">
|
|
<!-- Top Bar -->
|
|
<header class="h-14 border-b border-zinc-800 flex items-center justify-between px-6 bg-zinc-950/50 backdrop-blur sticky top-0 z-20">
|
|
<div class="flex items-center gap-4">
|
|
<h1 class="text-sm font-semibold text-zinc-100">All Projects</h1>
|
|
<div class="h-4 w-px bg-zinc-800"></div>
|
|
<div class="flex items-center gap-2 text-xs text-zinc-500">
|
|
<span>Sort by:</span>
|
|
<button class="flex items-center gap-1 text-zinc-300 hover:text-white">
|
|
Last Modified
|
|
<i data-lucide="chevron-down" class="w-3 h-3"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<div class="relative">
|
|
<i data-lucide="search" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500"></i>
|
|
<input type="text" placeholder="Search..." class="w-64 bg-zinc-900 border border-zinc-800 text-zinc-300 text-sm rounded-md pl-9 pr-3 py-1.5 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all placeholder:text-zinc-600">
|
|
</div>
|
|
<div class="flex bg-zinc-900 rounded-md border border-zinc-800 p-0.5">
|
|
<button class="p-1.5 rounded bg-zinc-800 text-zinc-200 shadow-sm">
|
|
<i data-lucide="layout-grid" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<button class="p-1.5 rounded text-zinc-500 hover:text-zinc-300">
|
|
<i data-lucide="list" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
<button class="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2 transition-colors shadow-lg shadow-indigo-900/20">
|
|
<i data-lucide="plus" class="w-3.5 h-3.5"></i>
|
|
New
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Content -->
|
|
<div class="flex-1 overflow-y-auto p-6">
|
|
|
|
<!-- Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
|
|
|
|
<!-- Project Card 1 -->
|
|
<div class="group relative bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-lg overflow-hidden transition-all hover:shadow-xl hover:shadow-black/50">
|
|
<!-- Hover Actions -->
|
|
<div class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
|
|
<button class="p-1.5 bg-black/80 backdrop-blur rounded text-zinc-400 hover:text-white hover:bg-black">
|
|
<i data-lucide="more-vertical" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Selection -->
|
|
<div class="absolute top-2 left-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<div class="bg-black/50 backdrop-blur rounded p-0.5">
|
|
<input type="checkbox" class="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-zinc-900">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thumbnail -->
|
|
<div class="aspect-video bg-zinc-950 relative group-hover:opacity-90 transition-opacity">
|
|
<img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover" alt="Project">
|
|
<!-- Progress Bar -->
|
|
<div class="absolute bottom-0 left-0 right-0 h-1 bg-zinc-800/50">
|
|
<div class="h-full bg-indigo-500 w-1/3"></div>
|
|
</div>
|
|
<div class="absolute bottom-2 right-2 bg-black/80 text-zinc-300 text-[10px] font-mono px-1.5 py-0.5 rounded border border-white/10">
|
|
1080p
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Meta -->
|
|
<div class="p-3">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="text-sm font-medium text-zinc-200 truncate group-hover:text-white transition-colors">Cyberpunk Intro</h3>
|
|
<span class="text-[10px] text-zinc-500 font-mono whitespace-nowrap">00:15</span>
|
|
</div>
|
|
<div class="mt-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-[11px] text-zinc-500">
|
|
<span class="w-2 h-2 rounded-full bg-green-500/20 border border-green-500/50"></span>
|
|
2h ago
|
|
</div>
|
|
<div class="flex -space-x-1.5">
|
|
<div class="w-5 h-5 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">JD</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Card 2 -->
|
|
<div class="group relative bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-lg overflow-hidden transition-all hover:shadow-xl hover:shadow-black/50">
|
|
<div class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
|
|
<button class="p-1.5 bg-black/80 backdrop-blur rounded text-zinc-400 hover:text-white hover:bg-black">
|
|
<i data-lucide="more-vertical" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="aspect-video bg-zinc-950 relative group-hover:opacity-90 transition-opacity flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-900"></div>
|
|
<i data-lucide="clapperboard" class="w-8 h-8 text-zinc-700"></i>
|
|
<div class="absolute bottom-2 right-2 bg-black/80 text-zinc-300 text-[10px] font-mono px-1.5 py-0.5 rounded border border-white/10">
|
|
4K
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-3">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="text-sm font-medium text-zinc-200 truncate group-hover:text-white transition-colors">Documentary_Final_v2</h3>
|
|
<span class="text-[10px] text-zinc-500 font-mono whitespace-nowrap">45:20</span>
|
|
</div>
|
|
<div class="mt-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-[11px] text-zinc-500">
|
|
<span class="w-2 h-2 rounded-full bg-yellow-500/20 border border-yellow-500/50"></span>
|
|
1d ago
|
|
</div>
|
|
<div class="flex -space-x-1.5">
|
|
<div class="w-5 h-5 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">JD</div>
|
|
<div class="w-5 h-5 rounded-full bg-indigo-900 border border-zinc-900 flex items-center justify-center text-[8px] text-indigo-200">AK</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Card 3 (Selected) -->
|
|
<div class="group relative bg-zinc-800/50 border border-indigo-500/50 rounded-lg overflow-hidden transition-all shadow-lg shadow-indigo-900/10">
|
|
<div class="absolute top-2 right-2 z-10 opacity-100 flex gap-1">
|
|
<button class="p-1.5 bg-black/80 backdrop-blur rounded text-zinc-400 hover:text-white hover:bg-black">
|
|
<i data-lucide="more-vertical" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="absolute top-2 left-2 z-10 opacity-100">
|
|
<div class="bg-black/50 backdrop-blur rounded p-0.5">
|
|
<input type="checkbox" checked class="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-zinc-900">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="aspect-video bg-zinc-950 relative">
|
|
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover opacity-80" alt="Project">
|
|
<div class="absolute inset-0 ring-1 ring-inset ring-indigo-500/20"></div>
|
|
</div>
|
|
|
|
<div class="p-3">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<h3 class="text-sm font-medium text-indigo-200 truncate">Tech Review 2025</h3>
|
|
<span class="text-[10px] text-zinc-500 font-mono whitespace-nowrap">12:00</span>
|
|
</div>
|
|
<div class="mt-2 flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-[11px] text-zinc-500">
|
|
<span class="w-2 h-2 rounded-full bg-blue-500/20 border border-blue-500/50"></span>
|
|
5h ago
|
|
</div>
|
|
<div class="flex -space-x-1.5">
|
|
<div class="w-5 h-5 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">JD</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer / Status Bar -->
|
|
<footer class="h-8 border-t border-zinc-800 bg-zinc-950 flex items-center px-4 justify-between text-[10px] text-zinc-500 select-none">
|
|
<div class="flex items-center gap-4">
|
|
<span>3 Projects</span>
|
|
<span>1 Selected</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-green-500"></div> Online</span>
|
|
<span>v2.4.0</span>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
|
|
<script>
|
|
lucide.createIcons();
|
|
</script>
|
|
</body>
|
|
</html> |