All Prompts
All Prompts
calendarplannerschedulerdashboardinterfacedarkresponsivemodernui
Interactive Calendar Planner Interface
Интерактивный планировщик-календарь: навигация, мини-календарь, расписание, управление событиями. UI для продуктивности.
Prompt
<div class="bg-neutral-950/80 rounded-2xl ring-neutral-800 ring-1 pt-4 pr-4 pb-4 pl-4 backdrop-blur">
<style>@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap'); .font-geist { font-family: 'Geist', 'Inter', sans-serif; } .evt { position: absolute; left: var(--evt-pad, 4px); right: var(--evt-pad, 4px); border-radius: 6px; padding: 6px; font-size: 11px; } .evt-at-00 { top: var(--evt-pad, 4px); } .evt-at-30 { top: calc(50%); } .evt-h-30 { height: calc(32px - var(--evt-pad, 4px) * 2); } .evt-h-60 { height: calc(64px - var(--evt-pad, 4px) * 2); }</style>
<div class="overflow-hidden sm:p-6 md:p-8 sm:rounded-3xl rounded-2xl relative">
<div class="flex px-3 sm:px-6 border-white/10 border-b pt-3 pr-2 sm:pr-4
pb-3 pl-2 sm:pl-4 items-center justify-between gap-2
flex-wrap">
<div class="flex items-center gap-2">
<div class="hidden sm:block">
<p class="text-sm font-medium text-white tracking-tight font-geist">Nura Planner</p>
<p class="text-[11px] text-slate-400 font-geist">November 2025</p>
</div>
</div>
<div class="flex items-center gap-1.5 sm:gap-2 md:gap-3 flex-wrap">
<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"></path>
<circle cx="11" cy="11" r="8"></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>
<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"></path>
</svg>
<span class="hidden sm:block font-geist">Prev</span>
</button>
<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 font-geist">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"></path>
</svg>
</button>
<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
font-geist">
<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"></path>
</svg>
</button>
</div>
<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>
<div class="flex">
<aside class="hidden lg:block w-64 xl:w-72 border-white/10 border-r pt-4 pr-3 pb-4 pl-3">
<div class="bg-white/5 border-/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"></path>
</svg>
</button>
<div class="text-sm font-medium tracking-tight text-white font-geist">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"></path>
</svg>
</button>
</div>
<div class="mt-3 grid grid-cols-7 gap-1 text-center text-[11px] text-slate-400">
<span class="font-geist">Su</span>
<span class="font-geist">Mo</span>
<span class="font-geist">Tu</span>
<span class="font-geist">We</span>
<span class="font-geist">Th</span>
<span class="font-geist">Fr</span>
<span class="font-geist">Sa</span>
</div>
<div class="mt-2 grid grid-cols-7 gap-1 text-center">
<span class="py-1 text-[12px] text-slate-500 font-geist">26</span>
<span class="py-1 text-[12px] text-slate-500 font-geist">27</span>
<span class="py-1 text-[12px] text-slate-500 font-geist">28</span>
<span class="py-1 text-[12px] text-slate-500 font-geist">29</span>
<span class="py-1 text-[12px] text-slate-500 font-geist">30</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">1</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">2</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">3</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">4</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">5</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">6</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">7</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">8</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">9</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">10</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">11</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">12</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">13</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">14</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">15</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">16</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">17</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">18</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">19</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">20</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">21</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">22</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">23</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">24</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">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
font-geist">26</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">27</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">28</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">29</span>
<span class="py-1 text-[12px] text-slate-300 font-geist">30</span>
</div>
</div>
<div class="mt-5">
<p class="mb-2 text-sm font-medium tracking-tight text-white font-geist">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 font-geist">Work</span>
</div>
<button class="relative h-5 w-9 rounded-full bg-white/10 ring-1 ring-white/10 transition">
<span class="absolute left-4 top-0.5 h-4 w-4 rounded-full bg-white shadow transition"></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 font-geist">Personal</span>
</div>
<button class="relative h-5 w-9 rounded-full bg-white/10 ring-1 ring-white/10 transition">
<span class="absolute left-4 top-0.5 h-4 w-4 rounded-full bg-white shadow transition"></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 font-geist">Team</span>
</div>
<button class="relative h-5 w-9 rounded-full bg-white/10 ring-1 ring-white/10 transition">
<span class="absolute left-1 top-0.5 h-4 w-4 rounded-full bg-white shadow transition"></span>
</button>
</div>
</div>
</div>
<div class="mt-6">
<p class="mb-2 text-sm font-medium tracking-tight text-white font-geist">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 font-geist">Prep monthly review deck</p>
<p class="text-xs text-slate-400 font-geist">Today • 2:00 PM</p>
</div>
</div>
</div>
</div>
</aside>
<div class="min-w-0 flex-1 p-2 sm:p-3 md:p-4">
<div class="overflow-x-auto">
<div class="w-full">
<div class="grid gap-1 sm:gap-2 mb-2 sm:mb-3 text-[10px] sm:text-xs" 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 font-geist">Mon 24</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center font-geist">Tue 25</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center font-geist">Wed 26</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center font-geist">Thu 27</div>
<div class="text-xs font-medium tracking-tight text-slate-200 text-center font-geist">Fri 28</div>
</div>
<div class="grid" style="grid-template-columns:72px repeat(5,1fr); grid-auto-rows:64px; gap:0;">
<div class="flex items-center pr-2 text-[11px] text-slate-500 font-geist" 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>
<div class="flex items-center pr-2 text-[11px] text-slate-500 font-geist" style="grid-row: 2;">08:00</div>
<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-60 bg-gradient-to-r from-emerald-500/20
to-emerald-400/10 ring-emerald-400/30 ring-1">
<p class="text-[11px] text-emerald-300 leading-tight font-geist">Daily Kickoff</p>
<p class="text-[10px] text-slate-400 font-geist">08:30 - 09:00</p>
</div>
</div>
<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-60 bg-gradient-to-r from-emerald-500/20
to-emerald-400/10 ring-emerald-400/30 ring-1">
<p class="text-[11px] text-emerald-300 leading-tight font-geist">Daily Kickoff</p>
<p class="text-[10px] text-slate-400 font-geist">08:30 - 09:00</p>
</div>
</div>
<div class="border-white/10 border-l border-t bg-white/5 relative" style="grid-row:2;"></div>
<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-60 bg-gradient-to-r from-emerald-500/20
to-emerald-400/10 ring-emerald-400/30 ring-1">
<p class="text-[11px] text-emerald-300 leading-tight font-geist">Daily Kickoff</p>
<p class="text-[10px] text-slate-400 font-geist">08:30 - 09:00</p>
</div>
</div>
<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-60 bg-gradient-to-r from-emerald-500/20
to-emerald-400/10 ring-emerald-400/30 ring-1">
<p class="text-[11px] text-emerald-300 leading-tight font-geist">Daily Kickoff</p>
<p class="text-[10px] text-slate-400 font-geist">08:30 - 09:00</p>
</div>
</div>
<div class="flex items-center pr-2 text-[11px] text-slate-500 font-geist" style="grid-row: 3;">09:00</div>
<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(--evt-pad);">
<p class="text-[11px] text-fuchsia-300 leading-tight font-geist">UX Jam Session</p>
<p class="text-[10px] text-slate-400 font-geist">09:30 - 11:00</p>
</div>
</div>
<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 font-geist">Quarterly Planning</p>
<p class="text-[10px] text-slate-400 font-geist">09:30 - 10:30</p>
</div>
</div>
<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 font-geist">Stakeholder Sync</p>
<p class="text-[10px] text-slate-400 font-geist">09:45 - 11:30</p>
</div>
</div>
<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 font-geist">Dept All-Hands</p>
<p class="text-[10px] text-slate-400 font-geist">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>
</div>
<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 font-geist">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
font-geist">
<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" data-icon-set="lucide" data-icon-replaced="true" style="color: rgb(226, 232, 240);">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" x2="15.42" y1="13.51" y2="17.49"></line>
<line x1="15.41" x2="8.59" y1="6.51" y2="10.49"></line>
</svg>
</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
font-geist">
<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"></path>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>