feat: enhance UI with new background styles and animations for MainScreen
This commit is contained in:
+1
-1
@@ -199,7 +199,7 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-neutral-900 text-white">
|
||||
<div className="h-screen flex flex-col bg-[#09090b] text-white">
|
||||
<FontLoader />
|
||||
<TopBar stageRef={stageRef} onGoHome={handleGoToMainScreen} />
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
|
||||
+114
-77
@@ -55,168 +55,203 @@ export default function MainScreen({ onOpenEditor }: MainScreenProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-neutral-900 text-white">
|
||||
<div className="min-h-screen bg-[#09090b] text-white selection:bg-blue-500/30">
|
||||
|
||||
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-[#09090b]/95 backdrop-blur-xl border-b border-white/[0.08]">
|
||||
<div className="max-w-6xl mx-auto px-6 py-6">
|
||||
<header className="sticky top-0 z-50 bg-[#09090b]/80 backdrop-blur-xl border-b border-white/[0.08]">
|
||||
<div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<svg className="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-semibold">YvCode</h1>
|
||||
<p className="text-sm text-neutral-400">Create beautiful code screenshots</p>
|
||||
</div>
|
||||
<span className="font-bold text-lg tracking-tight">YvCode</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Add simplified user profile or links if needed later */}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-6xl mx-auto px-6 py-8">
|
||||
<main className="relative max-w-7xl mx-auto px-6 py-12">
|
||||
{/* Welcome Section */}
|
||||
<div className="mb-12 text-center">
|
||||
<h1 className="text-4xl font-bold mb-3 bg-gradient-to-r from-white to-white/60 bg-clip-text text-transparent">
|
||||
What will you create today?
|
||||
</h1>
|
||||
<p className="text-neutral-400">Create beautiful code snippets in seconds.</p>
|
||||
</div>
|
||||
|
||||
{/* Create New Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-lg font-medium mb-4">Create New</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<section className="mb-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* New Blank */}
|
||||
<button
|
||||
onClick={handleNewSnap}
|
||||
className="group relative bg-neutral-900 border border-white/10 rounded-xl p-6 hover:border-blue-500/50 hover:bg-white/[0.03] transition-all duration-200 text-left"
|
||||
className="group relative bg-white/[0.02] hover:bg-white/[0.04] border border-white/[0.08] hover:border-blue-500/30 rounded-2xl p-6 transition-all duration-300 text-left hover:shadow-2xl hover:shadow-blue-500/10 hover:-translate-y-1"
|
||||
>
|
||||
<div className="w-12 h-12 bg-white/[0.05] group-hover:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 transition-colors">
|
||||
<Plus className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
|
||||
<div className="w-12 h-12 bg-blue-500/10 text-blue-400 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<Plus className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2 text-white group-hover:text-blue-400 transition-colors">Blank Canvas</h3>
|
||||
<p className="text-sm text-neutral-500 mb-4">Start from scratch with a fresh canvas</p>
|
||||
|
||||
<div className="flex items-center text-xs font-medium text-neutral-500 group-hover:text-blue-400 transition-colors">
|
||||
<span>Create new</span>
|
||||
<ChevronRight className="w-3 h-3 ml-1" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-1">Blank Canvas</h3>
|
||||
<p className="text-sm text-neutral-500">Start from scratch with a fresh canvas</p>
|
||||
<ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
|
||||
</button>
|
||||
|
||||
{/* Import File */}
|
||||
<button
|
||||
onClick={handleImportFile}
|
||||
className="group relative bg-neutral-900 border border-white/10 rounded-xl p-6 hover:border-blue-500/50 hover:bg-white/[0.03] transition-all duration-200 text-left"
|
||||
className="group relative bg-white/[0.02] hover:bg-white/[0.04] border border-white/[0.08] hover:border-purple-500/30 rounded-2xl p-6 transition-all duration-300 text-left hover:shadow-2xl hover:shadow-purple-500/10 hover:-translate-y-1"
|
||||
>
|
||||
<div className="w-12 h-12 bg-white/[0.05] group-hover:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 transition-colors">
|
||||
<FileText className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
|
||||
<div className="w-12 h-12 bg-purple-500/10 text-purple-400 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<FileText className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2 text-white group-hover:text-purple-400 transition-colors">Import File</h3>
|
||||
<p className="text-sm text-neutral-500 mb-4">Open an existing .yvsnap project file</p>
|
||||
|
||||
<div className="flex items-center text-xs font-medium text-neutral-500 group-hover:text-purple-400 transition-colors">
|
||||
<span>Import</span>
|
||||
<ChevronRight className="w-3 h-3 ml-1" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-1">Import File</h3>
|
||||
<p className="text-sm text-neutral-500">Open an existing .yvsnap project file</p>
|
||||
<ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
|
||||
</button>
|
||||
|
||||
{/* Quick Template */}
|
||||
<button
|
||||
onClick={() => setActiveTab('templates')}
|
||||
className="group relative bg-neutral-900 border border-white/10 rounded-xl p-6 hover:border-blue-500/50 hover:bg-white/[0.03] transition-all duration-200 text-left"
|
||||
className="group relative bg-white/[0.02] hover:bg-white/[0.04] border border-white/[0.08] hover:border-emerald-500/30 rounded-2xl p-6 transition-all duration-300 text-left hover:shadow-2xl hover:shadow-emerald-500/10 hover:-translate-y-1"
|
||||
>
|
||||
<div className="w-12 h-12 bg-white/[0.05] group-hover:bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 transition-colors">
|
||||
<Layout className="w-6 h-6 text-neutral-400 group-hover:text-blue-400" />
|
||||
<div className="w-12 h-12 bg-emerald-500/10 text-emerald-400 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
<Layout className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2 text-white group-hover:text-emerald-400 transition-colors">Use Template</h3>
|
||||
<p className="text-sm text-neutral-500 mb-4">Start with a pre-designed template</p>
|
||||
|
||||
<div className="flex items-center text-xs font-medium text-neutral-500 group-hover:text-emerald-400 transition-colors">
|
||||
<span>Browse templates</span>
|
||||
<ChevronRight className="w-3 h-3 ml-1" />
|
||||
</div>
|
||||
<h3 className="font-medium mb-1">Use Template</h3>
|
||||
<p className="text-sm text-neutral-500">Start with a pre-designed template</p>
|
||||
<ChevronRight className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-neutral-600 group-hover:text-blue-400 opacity-0 group-hover:opacity-100 transition-all" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex items-center gap-1 border-b border-white/[0.08] mb-6">
|
||||
<div className="flex items-center gap-8 border-b border-white/[0.08] mb-8">
|
||||
<button
|
||||
onClick={() => setActiveTab('recent')}
|
||||
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
className={`pb-4 text-sm font-medium border-b-2 transition-colors relative ${
|
||||
activeTab === 'recent'
|
||||
? 'border-blue-500 text-white'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
<Clock className="w-4 h-4 inline-block mr-2 -mt-0.5" />
|
||||
Recent Work
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Recent Work</span>
|
||||
</div>
|
||||
{activeTab === 'recent' && (
|
||||
<div className="absolute bottom-[-2px] left-0 w-full h-[2px] bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('templates')}
|
||||
className={`px-4 py-3 text-sm font-medium border-b-2 transition-colors ${
|
||||
className={`pb-4 text-sm font-medium border-b-2 transition-colors relative ${
|
||||
activeTab === 'templates'
|
||||
? 'border-blue-500 text-white'
|
||||
: 'border-transparent text-neutral-500 hover:text-neutral-300'
|
||||
}`}
|
||||
>
|
||||
<Sparkles className="w-4 h-4 inline-block mr-2 -mt-0.5" />
|
||||
Templates
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<span>Templates</span>
|
||||
</div>
|
||||
{activeTab === 'templates' && (
|
||||
<div className="absolute bottom-[-2px] left-0 w-full h-[2px] bg-blue-500 shadow-[0_0_10px_rgba(59,130,246,0.5)]" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
{activeTab === 'recent' && (
|
||||
<section>
|
||||
<section className="animate-in fade-in duration-300 slide-in-from-bottom-4">
|
||||
{recentSnaps.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="w-16 h-16 bg-neutral-900 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<div className="text-center py-24 bg-white/[0.02] border border-white/[0.08] rounded-2xl border-dashed">
|
||||
<div className="w-16 h-16 bg-neutral-800/50 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<Clock className="w-8 h-8 text-neutral-600" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium mb-2">No recent work</h3>
|
||||
<p className="text-neutral-500 mb-6">Your recent projects will appear here</p>
|
||||
<h3 className="text-xl font-medium mb-2">No recent work</h3>
|
||||
<p className="text-neutral-500 mb-8 max-w-sm mx-auto">Projects you create or import will appear here for quick access.</p>
|
||||
<button
|
||||
onClick={handleNewSnap}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 rounded-xl transition-all hover:shadow-lg hover:shadow-blue-500/20 font-medium"
|
||||
>
|
||||
<Plus className="w-4 h-4" />
|
||||
<Plus className="w-5 h-5" />
|
||||
Create your first snap
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<p className="text-sm text-neutral-500">{recentSnaps.length} recent project{recentSnaps.length !== 1 ? 's' : ''}</p>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-sm text-neutral-400 font-medium">{recentSnaps.length} recent project{recentSnaps.length !== 1 ? 's' : ''}</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (confirm('Clear all recent projects?')) {
|
||||
clearRecentSnaps();
|
||||
}
|
||||
}}
|
||||
className="text-sm text-neutral-500 hover:text-red-400 transition-colors"
|
||||
className="text-sm text-neutral-500 hover:text-red-400 transition-colors px-3 py-1.5 hover:bg-red-400/10 rounded-lg"
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{recentSnaps.map((entry) => (
|
||||
<div
|
||||
key={entry.id}
|
||||
className="group relative bg-neutral-900 border border-white/10 rounded-xl overflow-hidden hover:border-white/20 transition-colors"
|
||||
className="group relative bg-neutral-900 border border-white/[0.08] rounded-2xl overflow-hidden hover:border-blue-500/30 transition-all hover:shadow-xl hover:shadow-blue-500/5 hover:-translate-y-1 duration-300"
|
||||
>
|
||||
{/* Preview */}
|
||||
<button
|
||||
onClick={() => handleOpenRecent(entry.snap)}
|
||||
className="w-full aspect-video relative overflow-hidden"
|
||||
className="w-full aspect-video relative overflow-hidden bg-[#1e1e1e]"
|
||||
>
|
||||
<SnapPreview snap={entry.snap} />
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
|
||||
<span className="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-lg text-sm">Open</span>
|
||||
<div className="absolute inset-0 transition-transform duration-500 group-hover:scale-105">
|
||||
<SnapPreview snap={entry.snap} />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span className="px-4 py-2 bg-white/10 backdrop-blur-md border border-white/20 rounded-xl text-sm font-medium shadow-xl">Open Project</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Info */}
|
||||
<div className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="p-5">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-medium truncate">{entry.title}</h3>
|
||||
<p className="text-sm text-neutral-500">{formatRelativeTime(entry.savedAt)}</p>
|
||||
<h3 className="font-medium text-lg truncate mb-1 group-hover:text-blue-400 transition-colors">{entry.title}</h3>
|
||||
<p className="text-xs text-neutral-500 font-medium uppercase tracking-wider">{formatRelativeTime(entry.savedAt)}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
removeRecentSnap(entry.id);
|
||||
}}
|
||||
className="p-1.5 text-neutral-600 hover:text-red-400 hover:bg-neutral-800 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
|
||||
className="p-2 text-neutral-500 hover:text-red-400 hover:bg-red-400/10 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
|
||||
title="Remove from recent"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-neutral-600">
|
||||
<span>{entry.snap.meta.width}×{entry.snap.meta.height}</span>
|
||||
<span>•</span>
|
||||
<span>{entry.snap.elements.length} element{entry.snap.elements.length !== 1 ? 's' : ''}</span>
|
||||
<div className="mt-4 pt-4 border-t border-white/[0.05] flex items-center gap-3 text-xs text-neutral-500 font-medium">
|
||||
<span className="px-2 py-1 bg-white/5 rounded-md border border-white/5">{entry.snap.meta.width} × {entry.snap.meta.height}</span>
|
||||
<span className="px-2 py-1 bg-white/5 rounded-md border border-white/5">{entry.snap.elements.length} element{entry.snap.elements.length !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -228,33 +263,35 @@ export default function MainScreen({ onOpenEditor }: MainScreenProps) {
|
||||
)}
|
||||
|
||||
{activeTab === 'templates' && (
|
||||
<section>
|
||||
<p className="text-sm text-neutral-500 mb-4">{templates.length} templates available</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<section className="animate-in fade-in duration-300 slide-in-from-bottom-4">
|
||||
<p className="text-sm text-neutral-400 font-medium mb-6">{templates.length} templates available</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{templates.map((template) => (
|
||||
<div
|
||||
key={template.id}
|
||||
className="group relative bg-neutral-900 border border-white/10 rounded-xl overflow-hidden hover:border-white/20 transition-colors"
|
||||
className="group relative bg-neutral-900 border border-white/[0.08] rounded-2xl overflow-hidden hover:border-emerald-500/30 transition-all hover:shadow-xl hover:shadow-emerald-500/5 hover:-translate-y-1 duration-300"
|
||||
>
|
||||
{/* Preview */}
|
||||
<button
|
||||
onClick={() => handleUseTemplate(template)}
|
||||
className="w-full aspect-video relative overflow-hidden"
|
||||
className="w-full aspect-video relative overflow-hidden bg-[#1e1e1e]"
|
||||
>
|
||||
<SnapPreview snap={template.snap} />
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30">
|
||||
<span className="px-3 py-1.5 bg-white/10 backdrop-blur-sm rounded-lg text-sm">Use Template</span>
|
||||
<div className="absolute inset-0 transition-transform duration-500 group-hover:scale-105">
|
||||
<SnapPreview snap={template.snap} />
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors duration-300" />
|
||||
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-2 group-hover:translate-y-0">
|
||||
<span className="px-4 py-2 bg-emerald-500/90 backdrop-blur-md rounded-xl text-sm font-medium shadow-xl">Use Template</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Info */}
|
||||
<div className="p-4">
|
||||
<h3 className="font-medium mb-1">{template.name}</h3>
|
||||
<p className="text-sm text-neutral-500">{template.description}</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-neutral-600">
|
||||
<span>{template.snap.meta.width}×{template.snap.meta.height}</span>
|
||||
<span>•</span>
|
||||
<span>{template.snap.elements.length} element{template.snap.elements.length !== 1 ? 's' : ''}</span>
|
||||
<div className="p-5">
|
||||
<h3 className="font-medium text-lg mb-2 group-hover:text-emerald-400 transition-colors">{template.name}</h3>
|
||||
<p className="text-sm text-neutral-400 line-clamp-2">{template.description}</p>
|
||||
<div className="mt-4 pt-4 border-t border-white/[0.05] flex items-center gap-3 text-xs text-neutral-500 font-medium">
|
||||
<span className="px-2 py-1 bg-white/5 rounded-md border border-white/5">{template.snap.meta.width} × {template.snap.meta.height}</span>
|
||||
<span className="px-2 py-1 bg-white/5 rounded-md border border-white/5">{template.snap.elements.length} element{template.snap.elements.length !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -89,3 +89,27 @@ select {
|
||||
background-size: 16px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes slideInFromBottom {
|
||||
from { transform: translateY(1rem); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.animate-in {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
.slide-in-from-bottom-4 {
|
||||
animation-name: slideInFromBottom;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user