daniil/digital-home-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

redesign: modern dark dashboard with gradients and animations

Browse Source 
- New color system: deep #0a0a0f bg with indigo/violet/emerald accents
- Sidebar redesign: gradient DH badge, improved active state, cleaner typography
- Card system: .card class with colored top-border accents, hover glow
- WeatherWidget: large temperature display, gradient bg, better 7-day grid
- CalendarWidget: gradient today highlight, violet accents, improved events panel
- TasksWidget: priority dots, hover states, max-height scroll
- System page: circular SVG gauges with glow, accent cards, better bars
- Bookmarks page: hover lift effect, colored category headers
- Claude widgets: gradient badge headers, accent borders
- DashboardHeader: live clock, gradient greeting text
- ServicesGrid: pulsing online indicator (animate-ping), card lift on hover
- globals.css: Inter font, custom scrollbar, card/glass-card, gradient-text helper
- tailwind.config.ts: dash colors, gradient BG images, glow/float animations
This commit is contained in:
Cosmo
2026-04-16 07:47:58 +00:00
parent ae1b75f0fd
commit f16318ff8e
14 changed files with 493 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/widgets/TasksWidget.tsx
View File

@@ -29,45 +29,48 @@ export function TasksWidget() {
useEffect(() => { fetchTasks(); }, []);
const priorityColor: Record<string, string> = {
high: "text-red-400",
medium: "text-yellow-400",
low: "text-green-400",
const priorityDot: Record<string, string> = {
high: "bg-red-500",
medium: "bg-amber-500",
low: "bg-emerald-500",
};
return (
<div className="glass-card p-5">
<div className="card card-accent-emerald p-5">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-2">
<CheckSquare className="w-4 h-4 text-emerald-400" />
<span className="text-sm font-medium text-slate-300">Задачи сегодня</span>
<span className="text-sm font-semibold text-white">Задачи</span>
</div>
<button onClick={fetchTasks} className="text-slate-500 hover:text-slate-300 transition-colors">
<RefreshCw className="w-3.5 h-3.5" />
<button onClick={fetchTasks} className="text-slate-600 hover:text-slate-300 transition-colors p-1 rounded-lg hover:bg-white/5">
<RefreshCw className={`w-3.5 h-3.5 ${loading ? "animate-spin" : ""}`} />
</button>
</div>
{loading ? (
<div className="space-y-2 animate-pulse">
{[1,2,3].map(i => <div key={i} className="h-8 bg-slate-700/50 rounded" />)}
{[1,2,3].map(i => <div key={i} className="h-9 bg-white/5 rounded-xl" />)}
</div>
) : tasks.length === 0 ? (
<div className="flex flex-col items-center justify-center py-4 text-slate-500">
<div className="flex flex-col items-center justify-center py-8 text-slate-600">
<CheckSquare className="w-8 h-8 mb-2 opacity-30" />
<span className="text-sm">Задач нет</span>
</div>
) : (
<div className="space-y-1.5 max-h-36 overflow-y-auto">
<div className="space-y-1.5 max-h-[320px] overflow-y-auto">
{tasks.map((task) => (
<div key={task.id} className="flex items-start gap-2 p-2 rounded-lg hover:bg-slate-800/40 transition-colors">
<div key={task.id} className="flex items-start gap-2.5 p-2.5 rounded-xl hover:bg-white/3 transition-colors group">
{task.done ? (
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
) : (
<Circle className="w-4 h-4 text-slate-500 shrink-0 mt-0.5" />
<Circle className="w-4 h-4 text-slate-600 shrink-0 mt-0.5 group-hover:text-slate-400 transition-colors" />
)}
<span className={"text-sm " + (task.done ? "text-slate-500 line-through" : "text-slate-200")}>
<span className={`text-sm flex-1 ${task.done ? "text-slate-600 line-through" : "text-slate-200"}`}>
{task.title}
</span>
{task.priority && !task.done && (
<div className={`w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${priorityDot[task.priority] ?? "bg-slate-600"}`} />
)}
</div>
))}
</div>