Загрузка...
Анимированная панель управления проектами на Tailwind CSS. UI с навигацией, задачами, прогрессом, AI-ассистентом. Для трекинга проектов.
<div class="relative w-full animate-blur-in animate-delay-1000 animated mt-16">
<!-- Outer glow ring -->
<div class="pointer-events-none absolute inset-x-0 -top-6 mx-auto h-40 max-w-5xl rounded-full bg-gradient-to-r from-fuchsia-500/25 via-violet-500/35 to-indigo-500/25 blur-2xl"></div>
<div class="app-preview-container relative mx-auto max-w-7xl rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.08] via-white/[0.04] to-white/[0.02] p-3 sm:p-4 shadow-[0_30px_120px_-20px_rgba(139,92,246,0.45)] backdrop-blur-2xl supports-[backdrop-filter]:bg-white/[0.03]" style="transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0px);">
<!-- Custom cursor -->
<div class="custom-cursor" style="opacity: 0; left: 1195.72px; top: 901.483px;"></div>
<!-- Window header - Layer 1 (Top) -->
<div class="parallax-layer-1 window-header flex items-center justify-between rounded-xl border border-white/15 bg-white/[0.08] px-3 py-2.5 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
<div class="flex items-center gap-2 float-element float-1" style="transform: translate(0px, 0px);">
<span class="h-2.5 w-2.5 rounded-full bg-red-500/70"></span>
<span class="h-2.5 w-2.5 rounded-full bg-yellow-500/70"></span>
<span class="h-2.5 w-2.5 rounded-full bg-emerald-500/70"></span>
</div>
<div class="flex items-center gap-2 w-full max-w-md mx-4 float-element float-2" style="transform: translate(0px, 0px);">
<div class="relative flex-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="search" class="lucide lucide-search pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-white/40"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
<input class="w-full rounded-lg border border-white/15 bg-white/[0.08] py-2.5 pl-10 pr-4 text-sm text-white/90 placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-violet-500/40 focus:border-violet-500/30 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]" placeholder="Search projects, docs, people...">
</div>
<button class="hidden sm:inline-flex items-center gap-1.5 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-colors backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles" class="lucide lucide-sparkles h-4 w-4 text-violet-400"><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"></path><path d="M20 2v4"></path><path d="M22 4h-4"></path><circle cx="4" cy="20" r="2"></circle></svg>
<span>Ask AI</span>
</button>
</div>
<div class="flex items-center gap-2 float-element float-3" style="transform: translate(0px, 0px);">
<button class="hidden lg:inline-flex h-8 w-8 items-center justify-center rounded-lg border border-white/15 bg-white/[0.08] text-white/70 hover:bg-white/[0.12] backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bell" class="lucide lucide-bell h-4 w-4"><path d="M10.268 21a2 2 0 0 0 3.464 0"></path><path d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"></path></svg>
</button>
<div class="flex -space-x-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4d745c35-5c89-45ed-821c-ffaca58883fb_320w.jpg" class="h-7 w-7 rounded-full ring-2 ring-white/20 object-cover" alt="User">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/794112a2-89b3-41cb-9c68-582e6af6132f_800w.jpg" class="h-7 w-7 rounded-full ring-2 ring-white/20 object-cover" alt="User">
<span class="flex h-7 w-7 items-center justify-center rounded-full bg-violet-600/20 ring-2 ring-white/20 text-xs text-white/80">+3</span>
</div>
</div>
</div>
<!-- Content area -->
<div class="mt-4 grid grid-cols-1 lg:grid-cols-12 gap-3 sm:gap-4">
<!-- Sidebar - Layer 4 (Furthest) -->
<aside class="parallax-layer-4 sidebar lg:col-span-3 rounded-xl border border-white/15 bg-white/[0.08] p-3 sm:p-4 space-y-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
<!-- Workspace switcher -->
<div class="flex items-center justify-between pb-3 border-b border-white/15 float-element float-1" style="transform: translate(0px, 0px);">
<div class="flex items-center gap-2">
<div class="h-7 w-7 rounded-lg bg-gradient-to-br from-violet-500 to-fuchsia-600 flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="building-2" class="lucide lucide-building-2 h-4 w-4 text-white"><path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path><path d="M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2"></path><path d="M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2"></path><path d="M10 6h4"></path><path d="M10 10h4"></path><path d="M10 14h4"></path><path d="M10 18h4"></path></svg>
</div>
<div>
<div class="text-sm font-medium">Acme Corp</div>
<div class="text-xs text-white/50">Pro Plan</div>
</div>
</div>
<button class="h-6 w-6 flex items-center justify-center rounded text-white/70 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-down" class="lucide lucide-chevron-down h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>
</button>
</div>
<!-- Navigation -->
<nav class="space-y-1">
<a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/90 bg-white/[0.12] ring-1 ring-white/15 backdrop-blur-sm float-element float-2" style="transform: translate(0px, 0px);">
<span class="inline-flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="layout-dashboard" class="lucide lucide-layout-dashboard h-4 w-4 text-violet-300"><rect width="7" height="9" x="3" y="3" rx="1"></rect><rect width="7" height="5" x="14" y="3" rx="1"></rect><rect width="7" height="9" x="14" y="12" rx="1"></rect><rect width="7" height="5" x="3" y="16" rx="1"></rect></svg>
Dashboard
</span>
</a>
<a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm float-element float-3" style="transform: translate(0px, 0px);">
<span class="inline-flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="folder" class="lucide lucide-folder h-4 w-4 text-white/50"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"></path></svg>
Projects
</span>
<span class="text-xs text-white/40 bg-white/15 px-2 py-1 rounded-full backdrop-blur-sm">12</span>
</a>
<a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
<span class="inline-flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="users" class="lucide lucide-users h-4 w-4 text-white/50"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><path d="M16 3.128a4 4 0 0 1 0 7.744"></path><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><circle cx="9" cy="7" r="4"></circle></svg>
Team
</span>
<span class="flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
</span>
</a>
<a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
<span class="inline-flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar" class="lucide lucide-calendar h-4 w-4 text-white/50"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>
Calendar
</span>
</a>
<a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
<span class="inline-flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text" class="lucide lucide-file-text h-4 w-4 text-white/50"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
Documents
</span>
<span class="text-xs text-white/40 bg-white/15 px-2 py-1 rounded-full backdrop-blur-sm">24</span>
</a>
<a href="#" class="group flex items-center justify-between rounded-lg px-3 py-2.5 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] transition-colors backdrop-blur-sm">
<span class="inline-flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="bar-chart-3" class="lucide lucide-bar-chart-3 h-4 w-4 text-white/50"><path d="M3 3v16a2 2 0 0 0 2 2h16"></path><path d="M18 17V9"></path><path d="M13 17V5"></path><path d="M8 17v-3"></path></svg>
Analytics
</span>
</a>
</nav>
<!-- Recent files -->
<div class="pt-3 border-t border-white/15">
<div class="text-xs text-white/50 mb-3 uppercase tracking-wider">Recent</div>
<div class="space-y-2">
<a href="#" class="flex items-center gap-2 rounded-lg px-2 py-2 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] backdrop-blur-sm float-element float-4" style="transform: translate(0px, 0px);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file" class="lucide lucide-file h-4 w-4 text-blue-400"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path></svg>
<span class="truncate">Q4 Strategy.pdf</span>
</a>
<a href="#" class="flex items-center gap-2 rounded-lg px-2 py-2 text-sm text-white/70 hover:text-white hover:bg-white/[0.08] backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="presentation" class="lucide lucide-presentation h-4 w-4 text-orange-400"><path d="M2 3h20"></path><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"></path><path d="m7 21 5-5 5 5"></path></svg>
<span class="truncate">Brand Redesign</span>
</a>
</div>
</div>
</aside>
<!-- Main content - Layer 2 (Second highest) -->
<main class="parallax-layer-2 main-content lg:col-span-6 rounded-xl border border-white/15 bg-white/[0.08] p-4 sm:p-6 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06]">
<!-- Header -->
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 float-element float-1" style="transform: translate(0px, 0px);">
<div class="">
<div class="flex items-center gap-2 text-sm text-white/60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-4 w-4"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
<span>Updated <span id="last-updated">2 minutes ago</span></span>
</div>
<h3 class="mt-2 text-xl sm:text-2xl font-semibold tracking-tight">Mobile App Redesign</h3>
<div class="mt-2 flex items-center gap-4">
<span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-500/20 px-2.5 py-1 text-xs text-emerald-300 backdrop-blur-sm">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="play" class="lucide lucide-play h-3 w-3"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg>
In Progress
</span>
<span class="text-sm text-white/60">Due Dec 15</span>
</div>
</div>
<div class="flex items-center gap-2">
<button class="inline-flex items-center gap-2 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2 text-sm text-white/80 hover:bg-white/[0.12] backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] transition-all duration-200 hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share" class="lucide lucide-share h-4 w-4"><path d="M12 2v13"></path><path d="m16 6-4-4-4 4"></path><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path></svg>
<span class="hidden sm:inline">Share</span>
</button>
<button id="new-task-btn" class="inline-flex items-center gap-2 rounded-lg bg-violet-600 px-3 py-2 text-sm font-medium text-white hover:bg-violet-500 transition-all duration-200 hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="plus" class="lucide lucide-plus h-4 w-4"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
<span class="hidden sm:inline">New task</span>
</button>
</div>
</div>
<!-- Interactive Progress bar -->
<div class="mt-6 float-element float-2" style="transform: translate(0px, 0px);">
<div class="flex items-center justify-between text-sm mb-2">
<span class="text-white/70">Project Progress</span>
<span class="text-white/90"><span id="progress-value">68</span>%</span>
</div>
<div class="h-2 bg-white/15 rounded-full overflow-hidden backdrop-blur-sm cursor-pointer" id="progress-bar">
<div class="h-full bg-gradient-to-r from-violet-500 to-fuchsia-500 rounded-full transition-all duration-500" id="progress-fill" style="width: 68%"></div>
</div>
</div>
<!-- Interactive Task List -->
<div class="mt-6 space-y-3">
<div class="flex items-center justify-between float-element float-3" style="transform: translate(0px, 0px);">
<h4 class="text-sm font-medium text-white/90">Tasks (<span id="task-count">5</span>)</h4>
<div class="flex items-center gap-2 text-xs text-white/60">
<span id="completed-count">2</span> completed
</div>
</div>
<div class="space-y-2 float-element float-4" id="task-list" style="transform: translate(0px, 0px);">
<!-- Task items with enhanced floating effects -->
<div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30 checked:bg-violet-500 checked:border-violet-500" checked="">
<div class="task-content flex-1 min-w-0 opacity-60">
<p class="text-sm text-white/90 line-through">Complete user research interviews</p>
<div class="mt-1 flex items-center gap-4 text-xs text-white/60">
<span>Sarah Chen</span>
<span class="">Completed 3 hours ago</span>
</div>
</div>
<button class="opacity-0 group-hover:opacity-100 text-white/50 hover:text-red-400 transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="trash-2" class="lucide lucide-trash-2 h-4 w-4"><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
</button>
</div>
<div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30" checked="">
<div class="task-content flex-1 min-w-0 opacity-60">
<p class="text-sm text-white/90 line-through">Design system documentation</p>
<div class="mt-1 flex items-center gap-4 text-xs text-white/60">
<span>Alex Thompson</span>
<span>Completed 1 day ago</span>
</div>
</div>
</div>
<!-- Active tasks -->
<div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] hover:border-violet-500/30 group">
<input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30">
<div class="task-content flex-1 min-w-0">
<p class="text-sm text-white/90">Create high-fidelity wireframes</p>
<div class="mt-1 flex items-center gap-4 text-xs text-white/60">
<span>Maria Garcia</span>
<span class="inline-flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock" class="lucide lucide-clock h-3 w-3"><path d="M12 6v6l4 2"></path><circle cx="12" cy="12" r="10"></circle></svg>
Due tomorrow
</span>
</div>
</div>
<div class="flex items-center gap-2">
<span class="inline-flex items-center gap-1 rounded-full bg-orange-500/20 px-2 py-1 text-xs text-orange-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="flame" class="lucide lucide-flame h-3 w-3"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"></path></svg>
High Priority
</span>
</div>
</div>
<div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] hover:border-violet-500/30 group">
<input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30">
<div class="task-content flex-1 min-w-0">
<p class="text-sm text-white/90">Prototype user flow testing</p>
<div class="mt-1 flex items-center gap-4 text-xs text-white/60">
<span>Development Team</span>
<span>Due Dec 12</span>
</div>
</div>
</div>
<div class="task-item flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] p-3 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05] hover:border-violet-500/30 group">
<input type="checkbox" class="task-checkbox h-4 w-4 rounded border-2 border-white/30 bg-white/10 text-violet-500 focus:ring-violet-500/30">
<div class="task-content flex-1 min-w-0">
<p class="text-sm text-white/90">Accessibility audit and fixes</p>
<div class="mt-1 flex items-center gap-4 text-xs text-white/60">
<span>QA Team</span>
<span>Due Dec 18</span>
</div>
</div>
</div>
</div>
</div>
<!-- Enhanced AI Assistant with typing animation -->
<div class="mt-6 rounded-xl border border-violet-500/20 bg-gradient-to-br from-violet-500/10 to-fuchsia-500/10 p-4 backdrop-blur-sm float-element float-1" style="transform: translate(0px, 0px);">
<div class="flex items-center gap-2 text-sm text-violet-300 mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brain" class="lucide lucide-brain h-4 w-4"><path d="M12 18V5"></path><path d="M15 13a4.17 4.17 0 0 1-3-4 4.17 4.17 0 0 1-3 4"></path><path d="M17.598 6.5A3 3 0 1 0 12 5a3 3 0 1 0-5.598 1.5"></path><path d="M17.997 5.125a4 4 0 0 1 2.526 5.77"></path><path d="M18 18a4 4 0 0 0 2-7.464"></path><path d="M19.967 17.483A4 4 0 1 1 12 18a4 4 0 1 1-7.967-.517"></path><path d="M6 18a4 4 0 0 1-2-7.464"></path><path d="M6.003 5.125a4 4 0 0 0-2.526 5.77"></path></svg>
AI Assistant
<span class="inline-flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-violet-400 opacity-75 animated"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-violet-500"></span>
</span>
</div>
<div id="ai-suggestions" class="">
<p class="text-sm text-white/90">"Based on your timeline, I recommend scheduling user testing sessions by December 10th to stay on track."</p>
</div>
<div class="mt-3 flex gap-2">
<button id="schedule-sessions-btn" class="text-xs bg-white/15 hover:bg-white/20 px-3 py-1.5 rounded-full text-white/80 backdrop-blur-sm transition-all duration-200 hover:scale-105">Schedule sessions</button>
<button id="ask-ai-btn" class="text-xs bg-violet-600/20 hover:bg-violet-600/30 px-3 py-1.5 rounded-full text-violet-300 backdrop-blur-sm transition-all duration-200 hover:scale-105">Ask AI</button>
<button id="dismiss-suggestion-btn" class="text-xs text-white/60 hover:text-white/80 transition-colors duration-200">Dismiss</button>
</div>
</div>
</main>
<!-- Right sidebar - Layer 3 -->
<aside class="parallax-layer-3 right-sidebar lg:col-span-3 space-y-4">
<!-- Team members -->
<div class="rounded-xl border border-white/15 bg-white/[0.08] p-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06] float-element float-1" style="transform: translate(0px, 0px);">
<div class="flex items-center justify-between mb-4">
<h4 class="text-sm font-medium text-white/90">Team Members</h4>
<button class="text-white/60 hover:text-white transition-all duration-200 hover:scale-110">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="user-plus" class="lucide lucide-user-plus h-4 w-4"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line x1="22" x2="16" y1="11" y2="11"></line></svg>
</button>
</div>
<div class="space-y-3">
<div class="flex items-center gap-3 hover:bg-white/5 rounded-lg p-2 -m-2 transition-colors cursor-pointer" style="transform: translateX(0px); transition: transform 0.2s;">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/2911b4b5-c0c3-445a-a157-93edee63f9af_320w.jpg" class="h-8 w-8 rounded-full object-cover" alt="User" style="">
<div class="flex-1 min-w-0">
<div class="text-sm text-white/90">Alex Thompson</div>
<div class="text-xs text-white/60">Product Designer</div>
</div>
<div class="flex h-2 w-2">
<div class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></div>
<div class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></div>
</div>
</div>
<div class="flex items-center gap-3 hover:bg-white/5 rounded-lg p-2 -m-2 transition-colors cursor-pointer">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/a923c29b-fee0-4c67-9737-34ddbce2dc31_320w.jpg" class="h-8 w-8 rounded-full object-cover" alt="User" style="transition: outline 0.1s ease-in-out;">
<div class="flex-1 min-w-0">
<div class="text-sm text-white/90">Sarah Chen</div>
<div class="text-xs text-white/60">UX Researcher</div>
</div>
<div class="h-2 w-2 rounded-full bg-white/30"></div>
</div>
<div class="flex items-center gap-3 hover:bg-white/5 rounded-lg p-2 -m-2 transition-colors cursor-pointer" style="transform: translateX(0px);">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/94f325d2-00ce-48ec-9c3d-a87ff77bb836_320w.jpg" class="h-8 w-8 rounded-full object-cover" alt="User" style="">
<div class="flex-1 min-w-0">
<div class="text-sm text-white/90">Maria Garcia</div>
<div class="text-xs text-white/60">Frontend Dev</div>
</div>
<div class="flex h-2 w-2">
<div class="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-emerald-400 opacity-75 animated"></div>
<div class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></div>
</div>
</div>
</div>
</div>
<!-- Mini calendar -->
<div class="rounded-xl border border-white/15 bg-white/[0.08] p-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06] float-element float-2" style="transform: translate(0px, 0px);">
<div class="flex items-center justify-between mb-4">
<div class="">
<div class="text-sm text-white/90 font-medium">December 2024</div>
<div class="text-xs text-white/60">3 upcoming deadlines</div>
</div>
<div class="flex items-center gap-1">
<button class="h-6 w-6 flex items-center justify-center rounded border border-white/15 bg-white/[0.08] text-white/70 hover:bg-white/[0.12] backdrop-blur-sm transition-all duration-200 hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-left" class="lucide lucide-chevron-left h-3 w-3"><path d="m15 18-6-6 6-6"></path></svg>
</button>
<button class="h-6 w-6 flex items-center justify-center rounded border border-white/15 bg-white/[0.08] text-white/70 hover:bg-white/[0.12] backdrop-blur-sm transition-all duration-200 hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="chevron-right" class="lucide lucide-chevron-right h-3 w-3"><path d="m9 18 6-6-6-6"></path></svg>
</button>
</div>
</div>
<!-- Calendar grid -->
<div class="grid grid-cols-7 gap-1 text-center text-xs text-white/50 mb-2">
<span>Mo</span><span>Tu</span><span>We</span><span class="">Th</span><span>Fr</span><span>Sa</span><span>Su</span>
</div>
<div class="grid grid-cols-7 gap-1 text-sm">
<span class="h-6 flex items-center justify-center text-white/30">25</span>
<span class="h-6 flex items-center justify-center text-white/30">26</span>
<span class="h-6 flex items-center justify-center text-white/30">27</span>
<span class="h-6 flex items-center justify-center text-white/30">28</span>
<span class="h-6 flex items-center justify-center text-white/30">29</span>
<span class="h-6 flex items-center justify-center text-white/30">30</span>
<span class="h-6 flex items-center justify-center">1</span>
<span class="h-6 flex items-center justify-center">2</span>
<span class="h-6 flex items-center justify-center">3</span>
<span class="h-6 flex items-center justify-center">4</span>
<span class="h-6 flex items-center justify-center">5</span>
<span class="h-6 flex items-center justify-center">6</span>
<span class="h-6 flex items-center justify-center">7</span>
<span class="h-6 flex items-center justify-center rounded-full bg-violet-600/30 text-violet-200 cursor-pointer hover:bg-violet-600/40 transition-colors">8</span>
<span class="h-6 flex items-center justify-center">9</span>
<span class="h-6 flex items-center justify-center">10</span>
<span class="h-6 flex items-center justify-center">11</span>
<span class="h-6 flex items-center justify-center">12</span>
<span class="h-6 flex items-center justify-center">13</span>
<span class="h-6 flex items-center justify-center">14</span>
<span class="h-6 flex items-center justify-center rounded-full bg-orange-500/20 text-orange-300 cursor-pointer hover:bg-orange-500/30 transition-colors">15</span>
<span class="h-6 flex items-center justify-center">16</span>
<span class="h-6 flex items-center justify-center">17</span>
<span class="h-6 flex items-center justify-center">18</span>
<span class="h-6 flex items-center justify-center">19</span>
<span class="h-6 flex items-center justify-center rounded-full bg-emerald-500/20 text-emerald-300 cursor-pointer hover:bg-emerald-500/30 transition-colors">20</span>
<span class="h-6 flex items-center justify-center">21</span>
<span class="h-6 flex items-center justify-center">22</span>
<span class="h-6 flex items-center justify-center">23</span>
<span class="h-6 flex items-center justify-center">24</span>
<span class="h-6 flex items-center justify-center">25</span>
<span class="h-6 flex items-center justify-center">26</span>
<span class="h-6 flex items-center justify-center">27</span>
<span class="h-6 flex items-center justify-center">28</span>
<span class="h-6 flex items-center justify-center">29</span>
</div>
</div>
<!-- Quick actions -->
<div class="rounded-xl border border-white/15 bg-white/[0.08] p-4 backdrop-blur-xl supports-[backdrop-filter]:bg-white/[0.06] float-element float-3" style="transform: translate(0px, 0px);">
<h4 class="text-sm font-medium text-white/90 mb-3">Quick Actions</h4>
<div class="space-y-2">
<button class="w-full flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-all duration-200 hover:scale-105 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="video" class="lucide lucide-video h-4 w-4 text-blue-400"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"></path><rect x="2" y="6" width="14" height="12" rx="2"></rect></svg>
Start meeting
</button>
<button class="w-full flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-all duration-200 hover:scale-105 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-plus" class="lucide lucide-file-plus h-4 w-4 text-violet-400"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M9 15h6"></path><path d="M12 18v-6"></path></svg>
Create document
</button>
<button class="w-full flex items-center gap-3 rounded-lg border border-white/15 bg-white/[0.08] px-3 py-2.5 text-sm text-white/80 hover:bg-white/[0.12] transition-all duration-200 hover:scale-105 backdrop-blur-sm supports-[backdrop-filter]:bg-white/[0.05]">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="message-square" class="lucide lucide-message-square h-4 w-4 text-emerald-400"><path d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"></path></svg>
Send message
</button>
</div>
</div>
</aside>
</div>
</div>
</div>