Apply Second Brain design: Fira Mono, Aubade cards, brand palette

ROADMAP.md

@@ -21,20 +21,35 @@
 
 ---
 
-## Этап 1 — Курсы → Модули → Уроки (CRUD в админке)
+## Этап 1 — Курсы → Модули → Уроки (CRUD в админке) ✅ ЗАВЕРШЁН (07.04.2026)
-**Цель:** могу создать полную структуру курса из браузера.
 
-- [ ] Prisma-схема: Course, Module, Lesson (с порядком, статусом published)
+- [x] Prisma-схема: Course, Module, Lesson (с порядком, статусом published)
-- [ ] Admin: список курсов, создать / редактировать / удалить курс
+- [x] Admin: список курсов, создать / редактировать / удалить курс
-- [ ] Admin: список модулей внутри курса, drag-and-drop сортировка
+- [x] Admin: список модулей внутри курса, drag-and-drop сортировка
-- [ ] Admin: список уроков внутри модуля, drag-and-drop сортировка
+- [x] Admin: список уроков внутри модуля, drag-and-drop сортировка
-- [ ] Admin: редактор урока с TipTap (заголовки, списки, цитаты, код, картинки, ссылки)
+- [x] Admin: редактор урока с TipTap (заголовки, списки, цитаты, код, картинки, ссылки)
-- [ ] Загрузка картинок в уроке → Hetzner Object Storage
+- [x] Загрузка картинок в уроке → Hetzner Object Storage (second-brain-lms, Nuremberg)
-- [ ] Поле для Kinescope ID в уроке (просто текстовое, без интеграции — это Этап 2)
+- [x] Поле для Kinescope ID в уроке (просто текстовое, без интеграции — это Этап 2)
-- [ ] Публикация/скрытие курса и урока (черновик / опубликован)
+- [x] Публикация/скрытие курса и урока (черновик / опубликован)
-- [ ] Управление доступом: выдать / забрать доступ к курсу для пользователя
+- [x] Управление доступом: выдать / забрать доступ к курсу для пользователя
+- [x] Дизайн в стиле Second Brain: Fira Mono, #F5F5F0, Aubade-карточки
+- [x] Admin: таблица пользователей (/admin/users)
 
-**Критерий готовности:** создаю курс «Obsidian PKM», добавляю 2 модуля, в каждом по 3 урока с текстом и картинкой, публикую.
+---
+
+---
+
+## Этап 1.5 — Расширенное управление доступом (из emdesell)
+**Цель:** способы выдачи доступа как в emdesell — ключи активации, срок доступа, категории.
+
+- [ ] **Ключи активации:** генерировать N одноразовых кодов для курса → ученик вводит код и получает доступ
+- [ ] **Срок доступа:** поле `expiresAt` в `CourseEnrollment` + автоблокировка по дате
+- [ ] **Категории курсов:** таблица `Category`, поле `categoryId` в `Course`, фильтрация в списке
+- [ ] **Расширенный энролл:** Admin может дать доступ к нескольким курсам сразу (пакеты)
+- [ ] **История доступа:** лог выдачи/отзыва доступа (кто, когда, каким методом)
+- [ ] **Страница активации** для ученика: `/activate` — ввод кода → редирект на курс
+
+**Критерий готовности:** генерирую 10 ключей, отдаю ученику, ученик вводит — получает доступ с датой истечения через 3 месяца.
 
 ---
 

src/app/(auth)/login/login-form.tsx

@@ -39,9 +39,9 @@ export function LoginForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-5">
-      <div>
+      <div className="space-y-1.5">
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+        <label className="block text-xs uppercase tracking-widest font-bold" style={{ color: "var(--muted-foreground)" }}>
           Email
         </label>
         <input
@@ -49,12 +49,20 @@ export function LoginForm() {
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400"
+          className="w-full px-3 py-2 text-sm bg-transparent"
+          style={{
+            border: "2px solid var(--border)",
+            color: "var(--foreground)",
+            fontFamily: "var(--font-sans)",
+            outline: "none",
+          }}
+          onFocus={(e) => (e.target.style.borderColor = "var(--foreground)")}
+          onBlur={(e) => (e.target.style.borderColor = "var(--border)")}
           placeholder="you@example.com"
         />
       </div>
-      <div>
+      <div className="space-y-1.5">
-        <label className="block text-sm font-medium text-gray-700 mb-1">
+        <label className="block text-xs uppercase tracking-widest font-bold" style={{ color: "var(--muted-foreground)" }}>
           Пароль
         </label>
         <input
@@ -62,21 +70,34 @@ export function LoginForm() {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           required
-          className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400"
+          className="w-full px-3 py-2 text-sm bg-transparent"
+          style={{
+            border: "2px solid var(--border)",
+            color: "var(--foreground)",
+            fontFamily: "var(--font-sans)",
+            outline: "none",
+          }}
+          onFocus={(e) => (e.target.style.borderColor = "var(--foreground)")}
+          onBlur={(e) => (e.target.style.borderColor = "var(--border)")}
           placeholder="••••••••"
         />
       </div>
-      {error && <p className="text-red-500 text-sm">{error}</p>}
+      {error && (
+        <p className="text-sm" style={{ color: "var(--destructive)" }}>
+          {error}
+        </p>
+      )}
       <button
         type="submit"
         disabled={loading}
-        className="w-full bg-amber-500 hover:bg-amber-600 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50"
+        className="btn-aubade w-full justify-center"
+        style={loading ? { opacity: 0.6, cursor: "not-allowed" } : undefined}
       >
         {loading ? "Вход..." : "Войти"}
       </button>
-      <p className="text-center text-sm text-gray-500">
+      <p className="text-center text-xs" style={{ color: "var(--muted-foreground)" }}>
         Нет аккаунта?{" "}
-        <Link href="/register" className="text-amber-600 hover:underline">
+        <Link href="/register" className="underline" style={{ color: "var(--foreground)" }}>
           Зарегистрироваться
         </Link>
       </p>

src/app/(auth)/login/page.tsx

@@ -2,13 +2,17 @@ import { LoginForm } from "./login-form";
 
 export default function LoginPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-amber-50">
+    <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: "var(--background)" }}>
-      <div className="w-full max-w-md">
+      <div className="w-full max-w-sm">
         <div className="text-center mb-8">
-          <h1 className="text-3xl font-bold text-amber-900">Second Brain</h1>
+          <h1 className="text-2xl font-bold tracking-wide" style={{ color: "var(--foreground)" }}>
-          <p className="text-amber-700 mt-2">Войдите в свой аккаунт</p>
+            Second Brain
+          </h1>
+          <p className="mt-1 text-sm uppercase tracking-widest" style={{ color: "var(--muted-foreground)", fontSize: "0.65rem" }}>
+            Образовательная платформа
+          </p>
         </div>
-        <div className="bg-white rounded-2xl shadow-sm border border-amber-100 p-8">
+        <div className="card-aubade p-8">
           <LoginForm />
         </div>
       </div>

src/app/admin/layout.tsx

@@ -10,21 +10,46 @@ export default async function AdminLayout({ children }: { children: React.ReactN
   if (session.user.role !== "admin") redirect("/dashboard");
 
   return (
-    <div className="min-h-screen flex bg-slate-50">
+    <div className="min-h-screen flex">
-      <aside className="w-56 bg-slate-900 text-white flex flex-col shrink-0 fixed h-full z-10">
+      {/* Sidebar */}
-        <div className="px-5 py-5 border-b border-slate-800">
+      <aside
-          <p className="font-bold text-amber-400 text-base">Second Brain</p>
+        className="w-52 flex flex-col shrink-0 fixed h-full z-10"
-          <p className="text-xs text-slate-400 mt-0.5">Админ-панель</p>
+        style={{ backgroundColor: "var(--sidebar-bg)", color: "var(--sidebar-text)" }}
+      >
+        {/* Logo */}
+        <div
+          className="px-5 py-5"
+          style={{ borderBottom: "2px solid var(--sidebar-border)" }}
+        >
+          <p className="font-bold text-base tracking-wide" style={{ color: "#E8F0D8" }}>
+            Second Brain
+          </p>
+          <p className="text-xs mt-0.5 uppercase tracking-widest" style={{ color: "var(--sidebar-text)", fontSize: "0.6rem" }}>
+            Администратор
+          </p>
         </div>
-        <nav className="flex-1 p-3 space-y-0.5 overflow-y-auto">
+
+        {/* Navigation */}
+        <nav className="flex-1 px-2 py-4 space-y-0.5 overflow-y-auto">
           <AdminNav />
         </nav>
-        <div className="p-4 border-t border-slate-800">
+
-          <p className="text-xs text-slate-400 mb-3 truncate">{session.user.name}</p>
+        {/* User info */}
+        <div
+          className="px-4 py-4"
+          style={{ borderTop: "2px solid var(--sidebar-border)" }}
+        >
+          <p className="text-xs mb-3 truncate" style={{ color: "var(--sidebar-text)" }}>
+            {session.user.name}
+          </p>
           <LogoutButton />
         </div>
       </aside>
-      <div className="ml-56 flex-1 min-h-screen">{children}</div>
+
+      {/* Main content */}
+      <div className="ml-52 flex-1 min-h-screen" style={{ backgroundColor: "var(--background)" }}>
+        {children}
+      </div>
     </div>
   );
 }

src/app/globals.css

@@ -5,127 +5,169 @@
 
 @custom-variant dark (&:is(.dark *));
 
+/* ── Second Brain brand tokens ─────────────────────────────────────── */
 @theme inline {
+  --font-sans: var(--font-fira), ui-monospace, monospace;
+  --font-mono: var(--font-fira), ui-monospace, monospace;
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-geist-mono);
-  --font-heading: var(--font-sans);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * 1.4);
   --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
+/* ── Light mode: Second Brain palette ──────────────────────────────── */
 :root {
-  --background: oklch(1 0 0);
+  --background:         #F5F5F0;
-  --foreground: oklch(0.145 0 0);
+  --foreground:         #323232;
-  --card: oklch(1 0 0);
+  --card:               #F5F5F0;
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground:    #323232;
-  --popover: oklch(1 0 0);
+  --popover:            #F5F5F0;
-  --popover-foreground: oklch(0.145 0 0);
+  --popover-foreground: #323232;
-  --primary: oklch(0.205 0 0);
+  --primary:            #323232;
-  --primary-foreground: oklch(0.985 0 0);
+  --primary-foreground: #F5F5F0;
-  --secondary: oklch(0.97 0 0);
+  --secondary:          #E8E8E0;
-  --secondary-foreground: oklch(0.205 0 0);
+  --secondary-foreground: #323232;
-  --muted: oklch(0.97 0 0);
+  --muted:              #E8E8E0;
-  --muted-foreground: oklch(0.556 0 0);
+  --muted-foreground:   #666666;
-  --accent: oklch(0.97 0 0);
+  --accent:             #E8F0D8;
-  --accent-foreground: oklch(0.205 0 0);
+  --accent-foreground:  #323232;
-  --destructive: oklch(0.577 0.245 27.325);
+  --destructive:        oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
+  --border:             #AAAAAA;
-  --input: oklch(0.922 0 0);
+  --input:              #AAAAAA;
-  --ring: oklch(0.708 0 0);
+  --ring:               #323232;
-  --chart-1: oklch(0.87 0 0);
+  --radius:             2px;
-  --chart-2: oklch(0.556 0 0);
+
-  --chart-3: oklch(0.439 0 0);
+  /* Aubade */
-  --chart-4: oklch(0.371 0 0);
+  --aubade-thickness:    2px;
-  --chart-5: oklch(0.269 0 0);
+  --aubade-shadow-offset: 4px;
-  --radius: 0.625rem;
+  --color-divider:       #AAAAAA;
-  --sidebar: oklch(0.985 0 0);
+  --color-hover:         #D8D8D0;
-  --sidebar-foreground: oklch(0.145 0 0);
+  --color-surface:       #E8E8E0;
-  --sidebar-primary: oklch(0.205 0 0);
+  --color-highlight:     #E8F0D8;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
+
-  --sidebar-accent: oklch(0.97 0 0);
+  /* Admin sidebar */
-  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-bg:         #2A2A28;
-  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-surface:    #1E1E1C;
-  --sidebar-ring: oklch(0.708 0 0);
+  --sidebar-text:       #b3b3b3;
-}
+  --sidebar-border:     #4A4A48;
-
+  --sidebar-highlight:  #2A3A2A;
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
 }
 
+/* ── Base ────────────────────────────────────────────────────────────── */
 @layer base {
   * {
     @apply border-border outline-ring/50;
-  }
+    box-sizing: border-box;
-  body {
-    @apply bg-background text-foreground;
   }
   html {
-    @apply font-sans;
+    font-family: var(--font-sans);
+    font-size: 16px;
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
   }
 }
+
+/* ── Aubade utility classes ─────────────────────────────────────────── */
+.card-aubade {
+  border: var(--aubade-thickness) solid var(--color-divider);
+  box-shadow: var(--aubade-shadow-offset) var(--aubade-shadow-offset) 0 0 var(--color-divider);
+  background-color: var(--background);
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+}
+.card-aubade:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 0 var(--color-divider);
+}
+
+.btn-aubade {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px 16px;
+  font-family: var(--font-sans);
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: var(--aubade-thickness) solid var(--foreground);
+  box-shadow: var(--aubade-shadow-offset) var(--aubade-shadow-offset) 0 0 var(--foreground);
+  background-color: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.1s ease;
+  text-decoration: none;
+}
+.btn-aubade:hover {
+  transform: translate(-2px, -2px);
+  box-shadow: 6px 6px 0 0 var(--foreground);
+}
+.btn-aubade:active {
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}
+
+.btn-aubade-accent {
+  background-color: var(--color-highlight);
+  border-color: var(--foreground);
+  box-shadow: var(--aubade-shadow-offset) var(--aubade-shadow-offset) 0 0 var(--foreground);
+}
+
+.tag-aubade {
+  background-color: var(--color-surface);
+  border: var(--aubade-thickness) solid transparent;
+  padding: 2px 8px;
+  font-size: 0.65rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  transition: border-color 0.15s ease;
+  font-family: var(--font-sans);
+}
+.tag-aubade:hover {
+  border-color: var(--foreground);
+}
+
+/* Admin sidebar (dark) */
+.admin-sidebar {
+  background-color: var(--sidebar-bg);
+  color: var(--sidebar-text);
+}
+.admin-sidebar-nav-link {
+  display: block;
+  padding: 8px 12px;
+  font-size: 0.875rem;
+  color: var(--sidebar-text);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
+}
+.admin-sidebar-nav-link:hover {
+  color: #F5F5F0;
+  background-color: var(--sidebar-surface);
+}
+.admin-sidebar-nav-link.active {
+  color: #E8F0D8;
+  border-left-color: #E8F0D8;
+  background-color: var(--sidebar-surface);
+}

src/app/layout.tsx

@@ -1,20 +1,17 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Fira_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
+const firaMono = Fira_Mono({
-  variable: "--font-geist-sans",
+  weight: ["400", "500", "700"],
-  subsets: ["latin"],
+  subsets: ["latin", "cyrillic"],
-});
+  variable: "--font-fira",
-
+  display: "swap",
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "Second Brain — Обучение",
-  description: "Generated by create next app",
+  description: "Образовательная платформа Second Brain",
 };
 
 export default function RootLayout({
@@ -23,10 +20,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
+    <html lang="ru" className={`${firaMono.variable} h-full antialiased`}>
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
   );

src/components/admin/admin-nav.tsx

@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils";
 
 const links = [
   { href: "/admin/dashboard", label: "Обзор" },
@@ -15,20 +14,29 @@ export function AdminNav() {
 
   return (
     <>
-      {links.map(({ href, label }) => (
+      {links.map(({ href, label }) => {
-        <Link
+        const active =
-          key={href}
+          pathname === href ||
-          href={href}
+          (href !== "/admin/dashboard" && pathname.startsWith(href));
-          className={cn(
+        return (
-            "block px-3 py-2 rounded-lg text-sm transition-colors",
+          <Link
-            pathname === href || (href !== "/admin/dashboard" && pathname.startsWith(href))
+            key={href}
-              ? "bg-slate-700 text-white"
+            href={href}
-              : "text-slate-300 hover:bg-slate-800 hover:text-white"
+            className="admin-sidebar-nav-link"
-          )}
+            style={
-        >
+              active
-          {label}
+                ? {
-        </Link>
+                    color: "#E8F0D8",
-      ))}
+                    borderLeftColor: "#E8F0D8",
+                    backgroundColor: "var(--sidebar-surface)",
+                  }
+                : undefined
+            }
+          >
+            {label}
+          </Link>
+        );
+      })}
     </>
   );
 }