External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

projects page re-design and a ton of other stuff

Browse Source
This commit is contained in:
Maze Winther
2026-01-26 16:10:16 +01:00
parent 954160d03b
commit 0c10bbf5ce
33 changed files with 1794 additions and 1185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/design1.html
+66 -2
View File
@@ -85,7 +85,7 @@
<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">
<input id="search-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">
@@ -123,7 +123,7 @@
</div>
<!-- Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<div id="projects-grid" 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">
@@ -232,6 +232,20 @@
</div>
</div>
<!-- Empty State -->
<div id="empty-state" class="hidden flex flex-col items-center justify-center py-24 text-center">
<div class="w-16 h-16 bg-slate-50 rounded-2xl flex items-center justify-center mb-6 ring-1 ring-slate-900/5">
<i data-lucide="search" class="w-8 h-8 text-slate-400"></i>
</div>
<h3 class="text-slate-900 font-semibold text-lg mb-2">No projects found</h3>
<p class="text-slate-500 text-sm max-w-[280px] mx-auto leading-relaxed mb-8">
We couldn't find any projects matching your search. Try adjusting your terms.
</p>
<button onclick="clearSearch()" class="inline-flex items-center justify-center px-6 py-2.5 text-sm font-medium text-slate-700 bg-white border border-slate-200 rounded-full hover:bg-slate-50 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-200">
Clear search
</button>
</div>
</div>
</main>
@@ -313,6 +327,56 @@
});
}
syncSelectionState();
// Search functionality
const searchInput = document.getElementById('search-input');
const emptyState = document.getElementById('empty-state');
const projectsGrid = document.getElementById('projects-grid');
if (searchInput) {
searchInput.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase().trim();
const cards = document.querySelectorAll('.project-card');
let hasVisibleProjects = false;
cards.forEach(card => {
const titleElement = card.querySelector('h3');
if (!titleElement) return;
const title = titleElement.textContent.toLowerCase();
const isMatch = title.includes(query);
if (isMatch) {
card.classList.remove('hidden');
hasVisibleProjects = true;
} else {
card.classList.add('hidden');
}
});
// Toggle empty state
if (hasVisibleProjects) {
emptyState.classList.add('hidden');
projectsGrid.classList.remove('hidden');
} else {
emptyState.classList.remove('hidden');
projectsGrid.classList.add('hidden');
}
// Re-initialize icons for new elements (if any dynamic ones were added, though here we just hide/show)
// But importantly, the empty state icon needs to be rendered if it wasn't visible initially
lucide.createIcons();
});
}
// Expose clearSearch globally
window.clearSearch = function() {
if (searchInput) {
searchInput.value = '';
searchInput.dispatchEvent(new Event('input'));
searchInput.focus();
}
};
});
</script>
</body>