mirror of
https://github.com/OpenCut-app/OpenCut.git
synced 2026-07-13 21:52:53 +02:00
lots of stuff
This commit is contained in:
Maze Winther
@@ -0,0 +1,319 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Projects - Brand Design</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=Inter:wght@300;400;500;600&display=swap');
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
|
||||
/* Brand Colors */
|
||||
:root {
|
||||
--brand-blue: #00A3FF;
|
||||
}
|
||||
|
||||
.project-card:hover .card-actions { opacity: 1; }
|
||||
.checkbox-wrapper:checked + div { border-color: var(--brand-blue); background-color: #eff6ff; }
|
||||
.controls-row.has-selection .controls-select { opacity: 1; }
|
||||
.project-select-wrapper { opacity: 0; }
|
||||
.project-card:hover .project-select-wrapper { opacity: 1; }
|
||||
.project-card:has(.project-select:checked) .project-select-wrapper { opacity: 1; }
|
||||
.multi-select .project-menu { opacity: 0 !important; pointer-events: none; }
|
||||
|
||||
/* Custom Checkbox - Softer and Rounder */
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
background-color: #fff;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 8px; /* Rounder checkbox */
|
||||
display: inline-grid;
|
||||
place-content: center;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: var(--brand-blue);
|
||||
border-color: var(--brand-blue);
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 24%, 86% 10%, 40% 70%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#ffffff] text-slate-900 h-screen flex overflow-hidden">
|
||||
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 bg-white border-r border-slate-100 flex flex-col flex-shrink-0">
|
||||
<div class="p-6 pl-8 flex items-center gap-3">
|
||||
<img src="../apps/web/public/logos/opencut/1k/logo-black.png" alt="OpenCut Logo" class="size-6">
|
||||
<span class="font-semibold text-lg tracking-tight text-slate-900">OpenCut</span>
|
||||
</div>
|
||||
|
||||
<nav class="flex-1 px-4 space-y-2 mt-2">
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-sm font-medium bg-blue-50/50 text-[#00A3FF] rounded-2xl">
|
||||
<i data-lucide="layout-grid" class="w-5 h-5"></i>
|
||||
Projects
|
||||
</a>
|
||||
<div class="pt-6 pb-2 px-4">
|
||||
<p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Folders</p>
|
||||
</div>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900 rounded-2xl">
|
||||
<i data-lucide="folder" class="w-5 h-5 text-slate-400"></i>
|
||||
Marketing
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 px-4 py-3 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900 rounded-2xl">
|
||||
<i data-lucide="folder" class="w-5 h-5 text-slate-400"></i>
|
||||
Social media
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col min-w-0">
|
||||
<!-- Header -->
|
||||
<header class="h-20 flex items-center justify-between px-8 flex-shrink-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-xl font-bold text-slate-900">All projects</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<i data-lucide="search" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
|
||||
<input type="text" placeholder="Search..." class="w-64 bg-white border border-slate-200 text-slate-900 text-sm rounded-full pl-10 pr-4 py-2.5 focus:outline-none focus:border-[#00A3FF] focus:ring-4 focus:ring-blue-500/10 placeholder:text-slate-400 shadow-sm">
|
||||
</div>
|
||||
|
||||
<div class="flex bg-white rounded-full border border-slate-200 p-1 shadow-sm">
|
||||
<button class="p-2 rounded-full bg-slate-100 text-slate-900 shadow-sm">
|
||||
<i data-lucide="layout-grid" class="w-4 h-4"></i>
|
||||
</button>
|
||||
<button class="p-2 rounded-full text-slate-400 hover:text-slate-600">
|
||||
<i data-lucide="list" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button class="bg-[#00A3FF] hover:bg-[#008BE0] text-white px-5 py-2.5 rounded-full text-sm font-semibold flex items-center gap-2 active:scale-95">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
New project
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 overflow-y-auto px-8 pb-8">
|
||||
|
||||
<!-- Controls Row (Select all + Sort) -->
|
||||
<div id="controls-row" class="controls-row group mb-4 flex items-center gap-3 text-slate-700">
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="flex items-center gap-3 text-sm font-medium cursor-pointer select-none p-1 rounded-lg">
|
||||
<input id="select-all" type="checkbox" class="custom-checkbox controls-select size-5" />
|
||||
<span class="text-slate-500 group-hover:text-slate-700">Select all</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="h-4 w-px bg-slate-200 mx-2"></div>
|
||||
<button type="button" class="inline-flex items-center gap-1.5 rounded-lg p-1 text-sm font-medium text-slate-500 hover:text-slate-900">
|
||||
Name
|
||||
<i data-lucide="arrow-down" class="size-3.5"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Grid -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
|
||||
|
||||
<!-- Project Card 1 -->
|
||||
<div class="project-card group rounded-[24px] overflow-hidden relative h-auto flex flex-col">
|
||||
|
||||
<!-- Selection Checkbox -->
|
||||
<div class="project-select-wrapper absolute top-4 left-4 z-20">
|
||||
<input type="checkbox" class="custom-checkbox project-select w-6 h-6 cursor-pointer shadow-md" onchange="toggleSelection(this)">
|
||||
</div>
|
||||
|
||||
<!-- Menu -->
|
||||
<div class="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
|
||||
<button class="p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-slate-600 hover:text-[#00A3FF]">
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<div class="aspect-video bg-slate-50 relative overflow-hidden m-1 rounded-lg">
|
||||
<img src="C:\Users\heart\Downloads\download.jpg" class="w-full h-full object-cover" alt="Project">
|
||||
<div class="absolute bottom-2 right-2 bg-black/60 text-white text-[11px] font-semibold px-2 py-1 rounded-lg">
|
||||
02:14
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="px-2 pb-5 pt-3 flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-semibold text-slate-900 truncate text-[15px]">Summer Vlog 2025</h3>
|
||||
<div class="flex items-center gap-2 mt-2 text-slate-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" className="">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8V12L14 14" />
|
||||
</svg>
|
||||
<p class="text-xs font-medium">Created Jan 20, 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Card 2 -->
|
||||
<div class="project-card group rounded-[24px] overflow-hidden relative h-auto flex flex-col">
|
||||
<!-- Selection Checkbox -->
|
||||
<div class="project-select-wrapper absolute top-4 left-4 z-20">
|
||||
<input type="checkbox" class="custom-checkbox project-select w-6 h-6 cursor-pointer shadow-md" onchange="toggleSelection(this)">
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
|
||||
<button class="p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-slate-600 hover:text-[#00A3FF]">
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="aspect-video bg-slate-50 relative overflow-hidden m-1 rounded-lg">
|
||||
<img src="C:\Users\heart\Downloads\download.jpg" class="w-full h-full object-cover" alt="Project">
|
||||
<div class="absolute bottom-2 right-2 bg-black/60 text-white text-[11px] font-semibold px-2 py-1 rounded-lg">
|
||||
00:45
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 pb-5 pt-3 flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-semibold text-slate-900 truncate text-[15px]">Product Launch Teaser</h3>
|
||||
<div class="flex items-center gap-2 mt-2 text-slate-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" className="">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8V12L14 14" />
|
||||
</svg>
|
||||
<p class="text-xs font-medium">Created Jan 20, 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Project Card 3 -->
|
||||
<div class="project-card group rounded-[24px] overflow-hidden relative h-auto flex flex-col">
|
||||
<!-- Selection Checkbox -->
|
||||
<div class="project-select-wrapper absolute top-4 left-4 z-20">
|
||||
<input type="checkbox" class="custom-checkbox project-select w-6 h-6 cursor-pointer shadow-md" onchange="toggleSelection(this)">
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
|
||||
<button class="p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-slate-600 hover:text-[#00A3FF]">
|
||||
<i data-lucide="more-horizontal" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="aspect-video bg-slate-50 relative overflow-hidden m-1 rounded-lg">
|
||||
<img src="C:\Users\heart\Downloads\download.jpg" class="w-full h-full object-cover" alt="Project">
|
||||
<div class="absolute bottom-2 right-2 bg-black/60 text-white text-[11px] font-semibold px-2 py-1 rounded-lg">
|
||||
03:30
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 pb-5 pt-3 flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 class="font-semibold text-slate-900 truncate text-[15px]">Podcast Ep. 4</h3>
|
||||
<div class="flex items-center gap-2 mt-2 text-slate-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" className="">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8V12L14 14" />
|
||||
</svg>
|
||||
<p class="text-xs font-medium">Created Jan 18, 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
const selectedProjectIds = new Set();
|
||||
|
||||
function getProjectId({ card, index }) {
|
||||
return card.getAttribute('data-project-id') ?? `project-${index}`;
|
||||
}
|
||||
|
||||
|
||||
function updateControlsSelectionState() {
|
||||
const controlsRow = document.getElementById('controls-row');
|
||||
const selectAll = document.getElementById('select-all');
|
||||
const projectCheckboxes = document.querySelectorAll('.project-select');
|
||||
if (!controlsRow || !selectAll) {
|
||||
return;
|
||||
}
|
||||
const selectedCount = selectedProjectIds.size;
|
||||
document.body.classList.toggle('multi-select', selectedCount > 1);
|
||||
controlsRow.classList.toggle('has-selection', selectedCount > 0);
|
||||
const totalCount = projectCheckboxes.length;
|
||||
selectAll.checked = selectedCount > 0 && selectedCount === totalCount;
|
||||
selectAll.indeterminate = selectedCount > 0 && selectedCount < totalCount;
|
||||
}
|
||||
|
||||
function syncSelectionState() {
|
||||
const projectCards = Array.from(document.querySelectorAll('.project-card'));
|
||||
for (const [index, card] of projectCards.entries()) {
|
||||
const checkbox = card.querySelector('.project-select');
|
||||
if (!checkbox) {
|
||||
continue;
|
||||
}
|
||||
const projectId = getProjectId({ card, index });
|
||||
const isSelected = selectedProjectIds.has(projectId);
|
||||
checkbox.checked = isSelected;
|
||||
}
|
||||
updateControlsSelectionState();
|
||||
}
|
||||
|
||||
function toggleSelection(checkbox) {
|
||||
const card = checkbox.closest('.project-card');
|
||||
if (!card) {
|
||||
return;
|
||||
}
|
||||
const projectCards = Array.from(document.querySelectorAll('.project-card'));
|
||||
const projectId = getProjectId({
|
||||
card,
|
||||
index: projectCards.indexOf(card),
|
||||
});
|
||||
if (checkbox.checked) {
|
||||
selectedProjectIds.add(projectId);
|
||||
} else {
|
||||
selectedProjectIds.delete(projectId);
|
||||
}
|
||||
syncSelectionState();
|
||||
}
|
||||
|
||||
function toggleSelectAll({ isSelected }) {
|
||||
const projectCards = Array.from(document.querySelectorAll('.project-card'));
|
||||
if (!isSelected) {
|
||||
selectedProjectIds.clear();
|
||||
syncSelectionState();
|
||||
return;
|
||||
}
|
||||
for (const [index, card] of projectCards.entries()) {
|
||||
selectedProjectIds.add(getProjectId({ card, index }));
|
||||
}
|
||||
syncSelectionState();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const selectAll = document.getElementById('select-all');
|
||||
if (selectAll) {
|
||||
selectAll.addEventListener('change', () => {
|
||||
toggleSelectAll({ isSelected: selectAll.checked });
|
||||
});
|
||||
}
|
||||
syncSelectionState();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,301 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,217 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Projects - Design 3</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=Space+Grotesk:wght@300;400;500;600;700&display=swap');
|
||||
body { font-family: 'Space Grotesk', sans-serif; }
|
||||
.border-b-1 { border-bottom-width: 1px; }
|
||||
|
||||
/* Brutalist hover effect */
|
||||
.project-row:hover {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
}
|
||||
.project-row:hover .meta-text { color: #9ca3af; }
|
||||
.project-row:hover .icon-btn { color: #fff; border-color: #fff; }
|
||||
|
||||
/* Custom Checkbox */
|
||||
.custom-checkbox {
|
||||
appearance: none;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
.custom-checkbox:checked {
|
||||
background-color: #000;
|
||||
}
|
||||
.custom-checkbox:checked::after {
|
||||
content: '✓';
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.project-row:hover .custom-checkbox { border-color: #fff; }
|
||||
.project-row:hover .custom-checkbox:checked { background-color: #fff; }
|
||||
.project-row:hover .custom-checkbox:checked::after { color: #000; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-white text-black min-h-screen flex flex-col">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="border-b-2 border-black h-20 flex items-center justify-between px-8 sticky top-0 bg-white z-50">
|
||||
<div class="flex items-center gap-12">
|
||||
<a href="#" class="text-3xl font-bold tracking-tighter uppercase">Editor<span class="text-gray-400">.</span></a>
|
||||
<div class="hidden md:flex gap-8 text-sm font-medium tracking-wide">
|
||||
<a href="#" class="uppercase border-b-2 border-black pb-1">Projects</a>
|
||||
<a href="#" class="uppercase text-gray-400 hover:text-black transition-colors">Assets</a>
|
||||
<a href="#" class="uppercase text-gray-400 hover:text-black transition-colors">Team</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative group">
|
||||
<input type="text" placeholder="SEARCH" class="border-b-2 border-gray-200 focus:border-black outline-none py-1 w-48 text-sm uppercase placeholder-gray-300 transition-all">
|
||||
<i data-lucide="search" class="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-300 group-focus-within:text-black"></i>
|
||||
</div>
|
||||
<button class="w-10 h-10 border-2 border-black rounded-full flex items-center justify-center hover:bg-black hover:text-white transition-colors">
|
||||
<span class="font-bold text-sm">JD</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 flex flex-col max-w-7xl mx-auto w-full px-8 py-12">
|
||||
|
||||
<!-- Header Actions -->
|
||||
<div class="flex items-end justify-between mb-16">
|
||||
<div>
|
||||
<h1 class="text-6xl font-bold tracking-tighter mb-4">WORK</h1>
|
||||
<p class="text-xl text-gray-500 max-w-md leading-relaxed">Manage your creative output. Organize, edit, and publish your stories.</p>
|
||||
</div>
|
||||
<div class="flex gap-4">
|
||||
<button class="px-8 py-4 border-2 border-black font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-all flex items-center gap-3">
|
||||
<i data-lucide="plus" class="w-5 h-5"></i>
|
||||
New Project
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters / Sort -->
|
||||
<div class="flex items-center justify-between border-b-2 border-black pb-4 mb-0">
|
||||
<div class="flex gap-8 text-sm font-bold uppercase tracking-wider">
|
||||
<button class="text-black">All (12)</button>
|
||||
<button class="text-gray-400 hover:text-black">Drafts (4)</button>
|
||||
<button class="text-gray-400 hover:text-black">Published (8)</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:bg-gray-100 rounded">
|
||||
<i data-lucide="layout-list" class="w-5 h-5"></i>
|
||||
</button>
|
||||
<button class="p-2 text-gray-400 hover:text-black">
|
||||
<i data-lucide="layout-grid" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- List View (Table-ish) -->
|
||||
<div class="flex flex-col">
|
||||
<!-- Header Row -->
|
||||
<div class="grid grid-cols-12 gap-4 py-4 border-b border-gray-200 text-xs font-bold uppercase text-gray-400 tracking-wider">
|
||||
<div class="col-span-1 flex justify-center">
|
||||
<input type="checkbox" class="custom-checkbox">
|
||||
</div>
|
||||
<div class="col-span-5">Project Name</div>
|
||||
<div class="col-span-2">Last Edited</div>
|
||||
<div class="col-span-2">Duration</div>
|
||||
<div class="col-span-2 text-right">Actions</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 1 -->
|
||||
<div class="project-row group grid grid-cols-12 gap-4 py-6 border-b border-gray-200 items-center transition-colors cursor-pointer">
|
||||
<div class="col-span-1 flex justify-center">
|
||||
<input type="checkbox" class="custom-checkbox">
|
||||
</div>
|
||||
<div class="col-span-5 flex items-center gap-6">
|
||||
<div class="w-24 h-16 bg-gray-100 overflow-hidden relative border border-gray-200 group-hover:border-white/20">
|
||||
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all" alt="Thumb">
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold uppercase tracking-tight">Nike Commercial_V3</h3>
|
||||
<span class="text-xs text-gray-400 meta-text uppercase tracking-wider">Client: Nike</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 font-mono text-sm text-gray-500 meta-text">Today, 10:23 AM</div>
|
||||
<div class="col-span-2 font-mono text-sm text-gray-500 meta-text">00:30:00</div>
|
||||
<div class="col-span-2 flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
|
||||
<i data-lucide="pencil" class="w-3 h-3"></i>
|
||||
</button>
|
||||
<button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
|
||||
<i data-lucide="trash-2" class="w-3 h-3"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2 -->
|
||||
<div class="project-row group grid grid-cols-12 gap-4 py-6 border-b border-gray-200 items-center transition-colors cursor-pointer bg-gray-50">
|
||||
<div class="col-span-1 flex justify-center">
|
||||
<input type="checkbox" class="custom-checkbox" checked>
|
||||
</div>
|
||||
<div class="col-span-5 flex items-center gap-6">
|
||||
<div class="w-24 h-16 bg-gray-100 overflow-hidden relative border border-gray-200 group-hover:border-white/20">
|
||||
<img src="https://images.unsplash.com/photo-1558655146-d09347e0b7a8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all" alt="Thumb">
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold uppercase tracking-tight">Fashion Week Recap</h3>
|
||||
<span class="text-xs text-gray-400 meta-text uppercase tracking-wider">Personal</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 font-mono text-sm text-gray-500 meta-text">Yesterday</div>
|
||||
<div class="col-span-2 font-mono text-sm text-gray-500 meta-text">02:15:00</div>
|
||||
<div class="col-span-2 flex justify-end gap-2 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
|
||||
<button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
|
||||
<i data-lucide="pencil" class="w-3 h-3"></i>
|
||||
</button>
|
||||
<button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
|
||||
<i data-lucide="trash-2" class="w-3 h-3"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 3 -->
|
||||
<div class="project-row group grid grid-cols-12 gap-4 py-6 border-b border-gray-200 items-center transition-colors cursor-pointer">
|
||||
<div class="col-span-1 flex justify-center">
|
||||
<input type="checkbox" class="custom-checkbox">
|
||||
</div>
|
||||
<div class="col-span-5 flex items-center gap-6">
|
||||
<div class="w-24 h-16 bg-gray-100 overflow-hidden relative border border-gray-200 group-hover:border-white/20">
|
||||
<div class="w-full h-full flex items-center justify-center bg-gray-200 text-gray-400">
|
||||
<i data-lucide="film" class="w-6 h-6"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-bold uppercase tracking-tight">Untitled Project 04</h3>
|
||||
<span class="text-xs text-gray-400 meta-text uppercase tracking-wider">Draft</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 font-mono text-sm text-gray-500 meta-text">Oct 24, 2025</div>
|
||||
<div class="col-span-2 font-mono text-sm text-gray-500 meta-text">--:--:--</div>
|
||||
<div class="col-span-2 flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
|
||||
<i data-lucide="pencil" class="w-3 h-3"></i>
|
||||
</button>
|
||||
<button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
|
||||
<i data-lucide="trash-2" class="w-3 h-3"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Selection Action Bar (Sticky Bottom) -->
|
||||
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-black text-white px-8 py-4 flex items-center gap-8 shadow-2xl z-50">
|
||||
<span class="font-mono text-sm uppercase tracking-wider">1 Selected</span>
|
||||
<div class="h-4 w-px bg-gray-700"></div>
|
||||
<div class="flex gap-6">
|
||||
<button class="hover:text-gray-300 uppercase text-sm font-bold tracking-wider">Delete</button>
|
||||
<button class="hover:text-gray-300 uppercase text-sm font-bold tracking-wider">Duplicate</button>
|
||||
<button class="hover:text-gray-300 uppercase text-sm font-bold tracking-wider">Archive</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,98 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dropdown Options</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=Inter:wght@300;400;500;600&display=swap');
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
|
||||
:root {
|
||||
--brand-blue: #00A3FF;
|
||||
}
|
||||
|
||||
/* Utility to hide/show */
|
||||
.dropdown-menu { display: none; }
|
||||
.dropdown-menu.open { display: block; }
|
||||
|
||||
/* Custom scrollbar for dropdowns if needed */
|
||||
.custom-scroll::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#ffffff] text-slate-900 min-h-screen p-12">
|
||||
|
||||
<div class="max-w-6xl mx-auto space-y-4 mb-12">
|
||||
<h1 class="text-2xl font-bold">Dropdown Design Explorations</h1>
|
||||
<p class="text-slate-500">Single interaction for the same brand language. Click the button to toggle.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-16 items-start max-w-6xl mx-auto">
|
||||
|
||||
<!-- Option 1: The "Soft & Minimal" -->
|
||||
<!-- Characteristics: Extra rounded corners, blue text on hover, very subtle dividers -->
|
||||
<div class="space-y-4">
|
||||
<h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider">Option 1: Soft & Minimal</h2>
|
||||
<div class="relative w-72">
|
||||
<button onclick="toggle(1)" class="w-72 bg-white border border-slate-200 px-3 py-2 rounded-2xl flex items-center justify-between font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900 shadow-sm">
|
||||
<span>Sort by</span>
|
||||
<i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
|
||||
</button>
|
||||
|
||||
<div id="menu-1" class="dropdown-menu absolute top-full left-0 mt-2 w-72 bg-white rounded-[20px] shadow-lg border border-slate-200 overflow-hidden py-2 z-10">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<div class="px-2 pb-2 mb-2 border-b border-slate-50">
|
||||
<p class="text-[11px] font-bold text-slate-400 uppercase px-3 pt-2 pb-1">Order</p>
|
||||
</div>
|
||||
|
||||
<a href="#" class="block px-4 py-2.5 mx-2 text-sm text-[#00A3FF] bg-blue-50 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center justify-between group">
|
||||
<span>Date created</span>
|
||||
<i data-lucide="check" class="w-4 h-4 text-[#00A3FF]"></i>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2.5 mx-2 text-sm text-slate-600 rounded-xl hover:bg-slate-50 flex items-center justify-between group">
|
||||
<span>Last modified</span>
|
||||
</a>
|
||||
<a href="#" class="block px-4 py-2.5 mx-2 text-sm text-slate-600 rounded-xl hover:bg-slate-50 flex items-center justify-between group">
|
||||
<span>Alphabetical</span>
|
||||
</a>
|
||||
|
||||
<div class="h-px bg-slate-50 my-2 mx-2"></div>
|
||||
|
||||
<a href="#" class="block px-4 py-2.5 mx-2 text-sm text-red-500 rounded-xl hover:bg-red-50 flex items-center gap-2">
|
||||
<i data-lucide="trash" class="w-4 h-4"></i>
|
||||
<span>Reset sort</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
|
||||
function toggle(id) {
|
||||
const menu = document.getElementById(`menu-${id}`);
|
||||
if (menu) {
|
||||
menu.classList.toggle('open');
|
||||
}
|
||||
}
|
||||
|
||||
// Close when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('button') && !e.target.closest('.dropdown-menu')) {
|
||||
document.querySelectorAll('.dropdown-menu').forEach(el => el.classList.remove('open'));
|
||||
}
|
||||
});
|
||||
|
||||
// Open all by default for the demo view so user doesn't have to click
|
||||
// toggle(1);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user