Загрузка...
Адаптивный календарь-дашборд на Tailwind: неделя, мини-месяц, задачи, AI, поиск. Для планировщиков и приложений.
<div class="sm:px-6 pr-4 pl-4">
<div
class="bg-[#000000]/80 border-white/10 border rounded-2xl ring-white/10 ring-1 relative shadow-2xl backdrop-blur">
<!-- Top Glow -->
<div
class="pointer-events-none absolute -top-6 left-1/2 h-16 w-[80%] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,rgba(168,85,247,0.4),rgba(0,0,0,0))] blur-2xl">
</div>
<!-- App Header -->
<div class="flex sm:px-6 border-white/10 border-b pt-3 pr-4 pb-3 pl-4 items-center justify-between">
<div class="flex items-center gap-2">
<div class="hidden sm:block">
<p class="text-sm font-medium text-white tracking-tight">Nura Planner</p>
<p class="text-[11px] text-slate-400">November 2025</p>
</div>
</div>
<div class="flex items-center gap-2 sm:gap-3">
<!-- Search -->
<div class="hidden md:flex items-center gap-2 h-10 rounded-lg border border-white/10 bg-white/5 pl-3 pr-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"
class="h-4 w-4 text-slate-300 shrink-0">
<path d="m21 21-4.34-4.34" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
<input type="text" placeholder="Search your schedule…" class="h-full bg-transparent text-sm placeholder:text-slate-400 focus:outline-none text-slate-200 w-56">
</div>
<!-- Prev -->
<button class="inline-flex h-10 items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 text-sm text-slate-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" class="h-4 w-4"><path d="m15 18-6-6 6-6" class=""></path></svg>
<span class="hidden sm:block">Prev</span>
</button>
<!-- Next -->
<button class="inline-flex h-10 items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 text-sm text-slate-200">
<span class="hidden sm:block">Next</span>
<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" class="h-4 w-4"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
<!-- Dropdowns -->
<div class="hidden sm:flex items-center gap-2">
<button class="inline-flex h-10 items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 text-sm text-slate-200">
AdaFlow Workspace
<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" class="h-4 w-4"><path d="m6 9 6 6 6-6" class=""></path></svg>
</button>
</div>
<!-- Avatar -->
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ea777f21-df8c-431d-956a-57390ff9e591_320w.jpg" alt="User Avatar" class="ml-2 hidden sm:block h-8 w-8 rounded-full ring-1 ring-white/10 object-cover">
</div>
</div>
<!-- Body -->
<div class="flex">
<!-- Sidebar -->
<aside class="hidden lg:block w-72 border-white/10 border-r pt-4 pr-4 pb-4 pl-4">
<!-- Mini Calendar -->
<div class="bg-white/5 border-white/10 border rounded-xl pt-3 pr-3 pb-3 pl-3">
<div class="flex items-center justify-between">
<button class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
<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" class="h-4 w-4 text-slate-300"><path d="m15 18-6-6 6-6" class=""></path></svg>
</button>
<div class="text-sm font-medium tracking-tight text-white">November 2025</div>
<button class="inline-flex h-8 w-8 items-center justify-center rounded-md border border-white/10 bg-white/5">
<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" class="h-4 w-4 text-slate-300"><path d="m9 18 6-6-6-6" class=""></path></svg>
</button>
</div>
<div class="mt-3 grid grid-cols-7 gap-1 text-center text-[11px] text-slate-400">
<span>Su</span><span>Mo</span><span class="">Tu</span><span class="">We</span><span>Th</span><span>Fr</span><span>Sa</span>
</div>
<div class="mt-2 grid grid-cols-7 gap-1 text-center">
<span class="py-1 text-[12px] text-slate-500">26</span>
<span class="py-1 text-[12px] text-slate-500">27</span>
<span class="py-1 text-[12px] text-slate-500">28</span>
<span class="py-1 text-[12px] text-slate-500">29</span>
<span class="py-1 text-[12px] text-slate-500">30</span>
<span class="py-1 text-[12px] text-slate-300">1</span>
<span class="py-1 text-[12px] text-slate-300">2</span>
<span class="py-1 text-[12px] text-slate-300">3</span>
<span class="py-1 text-[12px] text-slate-300">4</span>
<span class="py-1 text-[12px] text-slate-300">5</span>
<span class="py-1 text-[12px] text-slate-300">6</span>
<span class="py-1 text-[12px] text-slate-300">7</span>
<span class="py-1 text-[12px] text-slate-300">8</span>
<span class="py-1 text-[12px] text-slate-300">9</span>
<span class="py-1 text-[12px] text-slate-300">10</span>
<span class="py-1 text-[12px] text-slate-300">11</span>
<span class="py-1 text-[12px] text-slate-300">12</span>
<span class="py-1 text-[12px] text-slate-300">13</span>
<span class="py-1 text-[12px] text-slate-300">14</span>
<span class="py-1 text-[12px] text-slate-300">15</span>
<span class="py-1 text-[12px] text-slate-300">16</span>
<span class="py-1 text-[12px] text-slate-300">17</span>
<span class="py-1 text-[12px] text-slate-300">18</span>
<span class="py-1 text-[12px] text-slate-300">19</span>
<span class="py-1 text-[12px] text-slate-300">20</span>
<span class="py-1 text-[12px] text-slate-300">21</span>
<span class="py-1 text-[12px] text-slate-300">22</span>
<span class="py-1 text-[12px] text-slate-300">23</span>
<span class="py-1 text-[12px] text-slate-300">24</span>
<span class="py-1 text-[12px] text-slate-300">25</span>
<span class="py-1 text-[12px] text-white rounded-md bg-gradient-to-r from-violet-500/40 to-fuchsia-600/40 ring-1 ring-white/10">26</span>
<span class="py-1 text-[12px] text-slate-300">27</span>
<span class="py-1 text-[12px] text-slate-300">28</span>
<span class="py-1 text-[12px] text-slate-300">29</span>
<span class="py-1 text-[12px] text-slate-300">30</span>
</div>
</div>
<!-- My Calendars -->
<div class="mt-5">
<p class="mb-2 text-sm font-medium tracking-tight text-white">Linked Calendars</p>
<div class="space-y-2">
<div class="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 px-3 py-2">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-emerald-400"></span>
<span class="text-sm text-slate-200">Work</span>
</div>
<button class="relative h-5 w-9 rounded-full bg-white/10 ring-1 ring-white/10 transition aria-checked:bg-emerald-500/60" aria-checked="true">
<span class="absolute left-4 top-0.5 h-4 w-4 rounded-full bg-white shadow transition aria-checked:left-[18px]"></span>
</button>
</div>
<div class="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 px-3 py-2">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-sky-400"></span>
<span class="text-sm text-slate-200">Personal</span>
</div>
<button class="relative h-5 w-9 rounded-full bg-white/10 ring-1 ring-white/10 transition aria-checked:bg-sky-500/60" aria-checked="true">
<span class="absolute left-4 top-0.5 h-4 w-4 rounded-full bg-white shadow transition aria-checked:left-[18px]"></span>
</button>
</div>
<div class="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 px-3 py-2">
<div class="flex items-center gap-2">
<span class="h-2 w-2 rounded-full bg-fuchsia-400"></span>
<span class="text-sm text-slate-200">Team</span>
</div>
<button class="relative h-5 w-9 rounded-full bg-white/10 ring-1 ring-white/10 transition aria-checked:bg-fuchsia-500/60" aria-checked="false">
<span class="absolute left-1 top-0.5 h-4 w-4 rounded-full bg-white shadow transition aria-checked:left-[18px]"></span>
</button>
</div>
</div>
</div>
<!-- Tasks -->
<div class="mt-6">
<p class="mb-2 text-sm font-medium tracking-tight text-white">Next Up</p>
<div class="space-y-2">
<div class="flex items-start gap-2 rounded-lg border border-white/10 bg-white/5 p-3">
<input type="checkbox" class="mt-1 h-4 w-4 accent-violet-500">
<div>
<p class="text-sm text-slate-200">Prep monthly review deck</p>
<p class="text-xs text-slate-400">Today • 2:00 PM</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Week View -->
<div class="min-w-0 flex-1 sm:p-4 pt-3 pr-3 pb-3 pl-3">
<div class="overflow-x-auto">
<div class="w-full">
<!-- Days Header -->
<div class="grid gap-2 mb-3" style="grid-template-columns:72px repeat(5,1fr);">
<div class="text-xs text-slate-400"></div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center">Mon 24</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center">Tue 25</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center">Wed 26</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center">Thu 27</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center">Fri 28</div>
</div>
<!-- Calendar Grid -->
<div class="grid" style="grid-template-columns:72px repeat(5,1fr); grid-auto-rows:64px; gap:0;">
<!-- 7:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:1;">07:00</div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:1;"></div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:1;"></div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:1;"></div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:1;"></div>
<div class="border-white/10 border-l border-r border-t bg-white/5 relative" style="grid-row:1;"></div>
<!-- 8:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:2;">08:00</div>
<!-- Mon Daily Kickoff 08:30–09:00 -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:2;">
<div
class="evt evt-at-30 evt-h-30 ring-1 ring-emerald-400/30 bg-gradient-to-r from-emerald-500/20 to-emerald-400/10">
<p class="text-[11px] text-emerald-300 leading-tight">Daily Kickoff</p>
<p class="text-[10px] text-slate-400">08:30 - 09:00</p>
</div>
</div>
<!-- Tue Daily Kickoff -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:2;">
<div
class="evt evt-at-30 evt-h-30 ring-1 ring-emerald-400/30 bg-gradient-to-r from-emerald-500/20 to-emerald-400/10">
<p class="text-[11px] text-emerald-300 leading-tight">Daily Kickoff</p>
<p class="text-[10px] text-slate-400">08:30 - 09:00</p>
</div>
</div>
<!-- Wed Daily Kickoff -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:2;">
<div
class="evt evt-at-30 evt-h-30 ring-1 ring-emerald-400/30 bg-gradient-to-r from-emerald-500/20 to-emerald-400/10">
<p class="text-[11px] text-emerald-300 leading-tight">Daily Kickoff</p>
<p class="text-[10px] text-slate-400">08:30 - 09:00</p>
</div>
</div>
<!-- Thu Daily Kickoff -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:2;">
<div
class="evt evt-at-30 evt-h-30 ring-1 ring-emerald-400/30 bg-gradient-to-r from-emerald-500/20 to-emerald-400/10">
<p class="text-[11px] text-emerald-300 leading-tight">Daily Kickoff</p>
<p class="text-[10px] text-slate-400">08:30 - 09:00</p>
</div>
</div>
<!-- Fri Daily Kickoff -->
<div class="border-white/10 border-l border-r border-t bg-white/5 relative" style="grid-row:2;">
<div
class="evt evt-at-30 evt-h-30 ring-1 ring-emerald-400/30 bg-gradient-to-r from-emerald-500/20 to-emerald-400/10">
<p class="text-[11px] text-emerald-300 leading-tight">Daily Kickoff</p>
<p class="text-[10px] text-slate-400">08:30 - 09:00</p>
</div>
</div>
<!-- 9:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:3;">09:00</div>
<!-- Mon UX Jam 09:30–11:00 (row 3→5, start at :30) -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:3 / 5;">
<div class="evt ring-1 ring-fuchsia-400/30 bg-gradient-to-r from-fuchsia-500/20 to-violet-500/10"
style="top:calc(50%); bottom:var(--evt-pad);">
<p class="text-[11px] text-fuchsia-300 leading-tight">UX Jam Session</p>
<p class="text-[10px] text-slate-400">09:30 - 11:00</p>
</div>
</div>
<!-- Tue Quarterly Planning 09:30–10:30 (row 3→4, start at :30) -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:3 / 4;">
<div class="evt ring-1 ring-violet-400/30 bg-gradient-to-r from-violet-500/20 to-fuchsia-500/10"
style="top:50%; height:64px;">
<p class="text-[11px] text-violet-300 leading-tight">Quarterly Planning</p>
<p class="text-[10px] text-slate-400">09:30 - 10:30</p>
</div>
</div>
<!-- Wed Stakeholder Sync 09:45–11:30 (row 3→5, start ~:45) -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:3 / 5;">
<div class="evt ring-1 ring-rose-400/30 bg-gradient-to-r from-rose-500/20 to-fuchsia-500/10"
style="top:calc(64px * 0.75); bottom:var(--evt-pad);">
<p class="text-[11px] text-rose-300 leading-tight">Stakeholder Sync</p>
<p class="text-[10px] text-slate-400">09:45 - 11:30</p>
</div>
</div>
<!-- Thu Dept All-Hands 09:30–10:30 -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:3 / 4;">
<div class="evt ring-1 ring-amber-400/30 bg-gradient-to-r from-amber-500/20 to-orange-500/10"
style="top:50%; height:64px;">
<p class="text-[11px] text-amber-300 leading-tight">Dept All-Hands</p>
<p class="text-[10px] text-slate-400">09:30 - 10:30</p>
</div>
</div>
<div class="border-white/10 border-l border-r border-t bg-white/5 relative" style="grid-row:3;"></div>
<!-- 10:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:4;">10:00</div>
<!-- Tue Build Sprint 10:45–12:00 (row 4→6; start at :45) -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:4 / 6;">
<div class="evt ring-1 ring-cyan-400/30 bg-gradient-to-r from-cyan-500/20 to-sky-500/10"
style="top:calc(64px * 0.75); bottom:calc(64px + var(--evt-pad));">
<p class="text-[11px] text-cyan-300 leading-tight">Build Sprint</p>
<p class="text-[10px] text-slate-400">10:45 - 12:00</p>
</div>
</div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:4;"></div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:4;"></div>
<!-- Fri 1:1 Coaching 10:00–11:30 (row 4→5) -->
<div class="border-white/10 border-l border-r border-t bg-white/5 relative" style="grid-row:4 / 5;">
</div>
<!-- 11:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:5;">11:00</div>
<!-- Mon Client Demo 11:00–11:30 -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:5;">
<div
class="evt evt-at-00 evt-h-30 ring-1 ring-sky-400/30 bg-gradient-to-r from-sky-500/20 to-cyan-500/10">
<p class="text-[11px] text-sky-300 leading-tight">Client Demo</p>
<p class="text-[10px] text-slate-400">11:00 - 11:30</p>
</div>
</div>
<div class="bg-white/5 border-white/10 border-t border-l relative" style="grid-row:5;"></div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:5;"></div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:5;"></div>
<div class="border-white/10 border-l border-r border-t bg-white/5 relative" style="grid-row:5;"></div>
<!-- 12:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:6;">12:00</div>
<!-- Lunch (all days) 12:00–13:00 -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:6;">
<div
class="evt evt-h-60 evt-at-00 ring-1 ring-purple-400/30 bg-gradient-to-r from-purple-500/20 to-pink-500/10">
<p class="text-[11px] text-purple-300 leading-tight">Lunch</p>
<p class="text-[10px] text-slate-400">12:00 - 13:00</p>
</div>
</div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:6;">
<div
class="evt evt-h-60 evt-at-00 ring-1 ring-purple-400/30 bg-gradient-to-r from-purple-500/20 to-pink-500/10">
<p class="text-[11px] text-purple-300 leading-tight">Lunch</p>
<p class="text-[10px] text-slate-400">12:00 - 13:00</p>
</div>
</div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:6;">
<div
class="evt evt-h-60 evt-at-00 ring-1 ring-purple-400/30 bg-gradient-to-r from-purple-500/20 to-pink-500/10">
<p class="text-[11px] text-purple-300 leading-tight">Lunch</p>
<p class="text-[10px] text-slate-400">12:00 - 13:00</p>
</div>
</div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:6;">
<div
class="evt evt-h-60 evt-at-00 ring-1 ring-purple-400/30 bg-gradient-to-r from-purple-500/20 to-pink-500/10">
<p class="text-[11px] text-purple-300 leading-tight">Lunch</p>
<p class="text-[10px] text-slate-400">12:00 - 13:00</p>
</div>
</div>
<div class="border-white/10 border-l border-r border-t bg-white/5 relative" style="grid-row:6;">
<div
class="evt evt-h-60 evt-at-00 ring-1 ring-purple-400/30 bg-gradient-to-r from-purple-500/20 to-pink-500/10">
<p class="text-[11px] text-purple-300 leading-tight">Lunch</p>
<p class="text-[10px] text-slate-400">12:00 - 13:00</p>
</div>
</div>
<!-- 13:00 -->
<div class="flex items-center pr-2 text-[11px] text-slate-500" style="grid-row:7;">13:00</div>
<!-- Mon AdaFlow hint (1h ghost slot) -->
<div class="bg-white/5 border-white/10 border-t border-l relative" style="grid-row:7;">
<div class="evt ring-1 ring-violet-400/30 border border-dashed border-violet-400/30 bg-transparent"
style="top:var(--evt-pad); height:56px;">
<p class="text-[11px] text-violet-300 leading-tight">AdaFlow AI Hint</p>
<p class="text-[10px] text-slate-400">Suggested slot</p>
</div>
</div>
<!-- Tue AdaFlow hint 13:30–14:00 -->
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:7;">
<div
class="evt evt-at-30 evt-h-30 ring-1 ring-violet-400/30 border border-dashed border-violet-400/30 bg-transparent">
<p class="text-[11px] text-violet-300 leading-tight">AdaFlow AI Hint</p>
<p class="text-[10px] text-slate-400">1:30 PM - 2:00 PM</p>
</div>
</div>
<div class="border-white/10 border-l border-t border-b bg-white/5 relative" style="grid-row:7;"></div>
<div class="border-white/10 border-l border-t border-b bg-white/5 relative" style="grid-row:7;"></div>
<div class="border-white/10 border-l border-r border-t border-b bg-white/5 relative" style="grid-row:7;">
</div>
</div>
<!-- Footer Bar -->
<div class="mt-4 flex items-center justify-between rounded-xl border border-white/10 bg-white/5 p-3">
<div class="flex text-xs text-slate-300 gap-x-2 gap-y-2 items-center">Nura AI Scheduling is on</div>
<div class="flex items-center gap-2">
<button class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="share-2" class="lucide lucide-share-2 w-[16px] h-[16px]" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(226, 232, 240); width: 16px; height: 16px;"><circle cx="18" cy="5" r="3" class=""></circle><circle cx="6" cy="12" r="3" class=""></circle><circle cx="18" cy="19" r="3" class=""></circle><line x1="8.59" x2="15.42" y1="13.51" y2="17.49" class=""></line><line x1="15.41" x2="8.59" y1="6.51" y2="10.49" class=""></line></svg>
Share
</button>
<button class="inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-xs text-slate-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="download" class="lucide lucide-download" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(226, 232, 240);"><path d="M12 15V3" class=""></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path><path d="m7 10 5 5 5-5" class=""></path></svg>
Export
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>