Добавление выдач

Добавление страницы профиля
Доабвлеие страниц на фронтэнде
2026-02-04 04:31:09 +00:00 · 2025-12-20 11:06:13 +03:00 · 2025-12-20 09:59:16 +03:00 · 2025-12-20 09:25:00 +03:00
34 changed files with 2199 additions and 126 deletions
@@ -2,8 +2,8 @@ import requests
 from typing import Optional

 # Конфигурация
-USERNAME = "sys-admin"
-PASSWORD = "wTKPVqTIMqzXL2EZxYz80w"
+USERNAME = "admin"
+PASSWORD = "7WaVlcj8EWzEbbdab9kqRw"
 BASE_URL = "http://localhost:8000"


@@ -127,7 +127,6 @@ def main():
        print("Не удалось авторизоваться. Проверьте логин и пароль.")
        return

-    # === АВТОРЫ (12 авторов) ===
    print("\n📚 Создание авторов...")
    authors_data = [
        "Лев Толстой",
@@ -150,7 +149,6 @@ def main():
        if author_id:
            authors[name] = author_id

-    # === ЖАНРЫ (8 жанров) ===
    print("\n🏷️ Создание жанров...")
    genres_data = [
        "Роман",
@@ -169,7 +167,6 @@ def main():
        if genre_id:
            genres[name] = genre_id

-    # === КНИГИ (25 книг) ===
    print("\n📖 Создание книг...")
    books_data = [
        {
@@ -334,23 +331,19 @@ def main():
                "genres": book["genres"]
            }

-    # === СОЗДАНИЕ СВЯЗЕЙ ===
    print("\n🔗 Создание связей...")

    for book_title, book_info in books.items():
        book_id = book_info["id"]

-        # Связи с авторами
        for author_name in book_info["authors"]:
            if author_name in authors:
                api.link_author_book(authors[author_name], book_id)
-
-        # Связи с жанрами
+                
        for genre_name in book_info["genres"]:
            if genre_name in genres:
                api.link_genre_book(genres[genre_name], book_id)

-    # === ИТОГИ ===
    print("\n" + "=" * 50)
    print("📊 ИТОГИ:")
    print(f"  • Авторов создано: {len(authors)}")
@@ -147,8 +147,8 @@ def seed_roles(session: Session) -> dict[str, Role]:
    """Создаёт роли по умолчанию, если их нет."""
    default_roles = [
        {"name": "admin", "description": "Администратор системы"},
-        {"name": "moderator", "description": "Модератор"},
-        {"name": "user", "description": "Обычный пользователь"},
+        {"name": "librarian", "description": "Библиотекарь"},
+        {"name": "member", "description": "Посетитель библиотеки"},
    ]

    roles = {}
@@ -1,3 +1,4 @@
 """Модуль моделей"""
 from .db import *
 from .dto import *
+from .enums import *
@@ -5,6 +5,7 @@ from sqlmodel import Field, Relationship

 from library_service.models.dto.book import BookBase
 from library_service.models.db.links import AuthorBookLink, GenreBookLink
+from library_service.models.enums import BookStatus

 if TYPE_CHECKING:
    from .author import Author
@@ -14,9 +15,11 @@ if TYPE_CHECKING:
 class Book(BookBase, table=True):
    """Модель книги в базе данных"""
    id: int | None = Field(default=None, primary_key=True, index=True)
+    status: BookStatus = Field(default=BookStatus.ACTIVE)
    authors: List["Author"] = Relationship(
        back_populates="books", link_model=AuthorBookLink
    )
    genres: List["Genre"] = Relationship(
        back_populates="books", link_model=GenreBookLink
    )
+    loans: List["BookUserLink"] = Relationship(sa_relationship_kwargs={"cascade": "all, delete"})
@@ -1,4 +1,5 @@
 """Модуль связей между сущностями в БД"""
+from datetime import datetime
 from sqlmodel import SQLModel, Field


@@ -22,3 +23,20 @@ class UserRoleLink(SQLModel, table=True):

    user_id: int | None = Field(default=None, foreign_key="users.id", primary_key=True)
    role_id: int | None = Field(default=None, foreign_key="roles.id", primary_key=True)
+
+
+class BookUserLink(SQLModel, table=True):
+    """
+    Модель истории выдачи книг (Loan).
+    Связывает книгу и пользователя с фиксацией времени.
+    """
+    __tablename__ = "book_loans"
+
+    id: int | None = Field(default=None, primary_key=True, index=True)
+    
+    book_id: int = Field(foreign_key="book.id")
+    user_id: int = Field(foreign_key="users.id")
+    
+    borrowed_at: datetime = Field(default_factory=datetime.utcnow)
+    due_date: datetime
+    returned_at: datetime | None = Field(default=None)
@@ -16,5 +16,4 @@ class Role(RoleBase, table=True):

    id: int | None = Field(default=None, primary_key=True, index=True)

-    # Связи
    users: List["User"] = Relationship(back_populates="roles", link_model=UserRoleLink)
@@ -26,3 +26,4 @@ class User(UserBase, table=True):

    # Связи
    roles: List["Role"] = Relationship(back_populates="users", link_model=UserRoleLink)
+    loans: List["BookUserLink"] = Relationship(sa_relationship_kwargs={"cascade": "all, delete"})
@@ -3,10 +3,11 @@ from .author import AuthorBase, AuthorCreate, AuthorList, AuthorRead, AuthorUpda
 from .genre import GenreBase, GenreCreate, GenreList, GenreRead, GenreUpdate
 from .book import BookBase, BookCreate, BookList, BookRead, BookUpdate
 from .role import RoleBase, RoleCreate, RoleList, RoleRead, RoleUpdate
-from .user import UserBase, UserCreate, UserLogin, UserRead, UserUpdate
+from .user import UserBase, UserCreate, UserList, UserRead, UserUpdate, UserLogin
+from .loan import LoanBase, LoanCreate, LoanList, LoanRead, LoanUpdate
 from .token import Token, TokenData
 from .combined import (AuthorWithBooks, GenreWithBooks, BookWithAuthors, BookWithGenres,
-    BookWithAuthorsAndGenres, BookFilteredList)
+    BookWithAuthorsAndGenres, BookFilteredList, BookStatusUpdate, LoanWithBook)

 __all__ = [
    "AuthorBase",
@@ -20,11 +21,24 @@ __all__ = [
    "BookRead",
    "BookList",
    "BookFilteredList",
+    "BookStatusUpdate",
    "GenreBase",
    "GenreCreate",
    "GenreUpdate",
    "GenreRead",
    "GenreList",
+    "LoanBase",
+    "LoanCreate",
+    "LoanUpdate",
+    "LoanRead",
+    "LoanList",
+    "LoanWithBook",
+    "UserBase",
+    "UserCreate",
+    "UserUpdate",
+    "UserRead",
+    "UserList",
+    "UserLogin",
    "RoleBase",
    "RoleCreate",
    "RoleUpdate",
@@ -32,9 +46,4 @@ __all__ = [
    "RoleList",
    "Token",
    "TokenData",
-    "UserBase",
-    "UserCreate",
-    "UserRead",
-    "UserUpdate",
-    "UserLogin",
 ]
@@ -1,11 +1,10 @@
 """Модуль DTO-моделей книг"""
-from typing import List, TYPE_CHECKING
+from typing import List

 from pydantic import ConfigDict
 from sqlmodel import SQLModel

-if TYPE_CHECKING:
-    from .combined import BookWithAuthorsAndGenres
+from library_service.models.enums import BookStatus


 class BookBase(SQLModel):
@@ -29,11 +28,13 @@ class BookUpdate(SQLModel):
    """Модель книги для обновления"""
    title: str | None = None
    description: str | None = None
+    status: BookStatus | None = None


 class BookRead(BookBase):
    """Модель книги для чтения"""
    id: int
+    status: BookStatus


 class BookList(SQLModel):
@@ -5,13 +5,13 @@ from sqlmodel import SQLModel, Field
 from .author import AuthorRead
 from .genre import GenreRead
 from .book import BookRead
+from .loan import LoanRead


 class AuthorWithBooks(SQLModel):
    """Модель автора с книгами"""
    id: int
    name: str
-    bio: str
    books: List[BookRead] = Field(default_factory=list)


@@ -51,3 +51,11 @@ class BookFilteredList(SQLModel):
    """Список книг с фильтрацией"""
    books: List[BookWithAuthorsAndGenres]
    total: int
+
+class LoanWithBook(LoanRead):
+    """Модель выдачи, включающая данные о книге"""
+    book: BookRead
+    
+class BookStatusUpdate(SQLModel):
+    """Модель для ручного изменения статуса библиотекарем"""
+    status: str
@@ -0,0 +1,35 @@
+"""Модуль DTO-моделей для выдачи книг"""
+from typing import List
+
+from datetime import datetime
+from sqlmodel import SQLModel
+
+
+class LoanBase(SQLModel):
+    """Базовая модель выдачи"""
+    book_id: int
+    user_id: int
+    due_date: datetime
+
+
+class LoanCreate(LoanBase):
+    """Модель для создания записи о выдаче"""
+    pass
+
+
+class LoanUpdate(SQLModel):
+    """Модель для обновления записи о выдаче"""
+    returned_at: datetime | None = None
+
+
+class LoanRead(LoanBase):
+    """Модель чтения записи о выдаче"""
+    id: int
+    borrowed_at: datetime
+    returned_at: datetime | None = None
+
+
+class LoanList(SQLModel):
+    """Список выдач"""
+    loans: List[LoanRead]
+    total: int
@@ -59,3 +59,9 @@ class UserUpdate(SQLModel):
    email: EmailStr | None = None
    full_name: str | None = None
    password: str | None = None
+
+
+class UserList(SQLModel):
+    """Список пользователей"""
+    users: List[UserRead]
+    total: int
@@ -0,0 +1,10 @@
+"""Модуль перечислений (Enums)"""
+from enum import Enum
+
+class BookStatus(str, Enum):
+    """Статусы книги"""
+    ACTIVE = "active"           
+    BORROWED = "borrowed"       
+    RESERVED = "reserved"       
+    RESTORATION = "restoration" 
+    WRITTEN_OFF = "written_off" 
@@ -7,7 +7,7 @@ from fastapi.security import OAuth2PasswordRequestForm
 from sqlmodel import Session, select

 from library_service.models.db import Role, User
-from library_service.models.dto import Token, UserCreate, UserRead, UserUpdate
+from library_service.models.dto import Token, UserCreate, UserRead, UserUpdate, UserList, RoleRead, RoleList
 from library_service.settings import get_session
 from library_service.auth import (ACCESS_TOKEN_EXPIRE_MINUTES, RequireAdmin,
                                  RequireAuth, authenticate_user, get_password_hash,
@@ -44,13 +44,11 @@ def register(user_data: UserCreate, session: Session = Depends(get_session)):
            status_code=status.HTTP_400_BAD_REQUEST, detail="Email already registered"
        )

-    # Создание пользователя
    db_user = User(
        **user_data.model_dump(exclude={"password"}),
        hashed_password=get_password_hash(user_data.password)
    )

-    # Назначение роли по умолчанию
    default_role = session.exec(select(Role).where(Role.name == "user")).first()
    if default_role:
        db_user.roles.append(default_role)
@@ -138,7 +136,7 @@ def update_user_me(

@router.get(
    "/users",
-    response_model=list[UserRead],
+    response_model=UserList,
    summary="Список пользователей",
    description="Получить список всех пользователей (только для админов)",
 )
@@ -150,7 +148,106 @@ def read_users(
 ):
    """Эндпоинт получения списка всех пользователей"""
    users = session.exec(select(User).offset(skip).limit(limit)).all()
-    return [
-        UserRead(**user.model_dump(), roles=[role.name for role in user.roles])
-        for user in users
-    ]
+    return UserList(
+        users=[UserRead(**user.model_dump()) for user in users],
+        total=len(users),
+    )
+
+
+@router.post(
+    "/users/{user_id}/roles/{role_name}",
+    response_model=UserRead,
+    summary="Назначить роль пользователю",
+    description="Добавить указанную роль пользователю",
+)
+def add_role_to_user(
+    user_id: int,
+    role_name: str,
+    admin: RequireAdmin,
+    session: Session = Depends(get_session),
+):
+    """Эндпоинт добавления роли пользователю"""
+    user = session.get(User, user_id)
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="User not found",
+        )
+
+    role = session.exec(select(Role).where(Role.name == role_name)).first()
+    if not role:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Role '{role_name}' not found",
+        )
+
+    if role in user.roles:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="User already has this role",
+        )
+
+    user.roles.append(role)
+    session.add(user)
+    session.commit()
+    session.refresh(user)
+
+    return UserRead(**user.model_dump(), roles=[r.name for r in user.roles])
+
+
+@router.delete(
+    "/users/{user_id}/roles/{role_name}",
+    response_model=UserRead,
+    summary="Удалить роль у пользователя",
+    description="Убрать указанную роль у пользователя",
+)
+def remove_role_from_user(
+    user_id: int,
+    role_name: str,
+    admin: RequireAdmin,
+    session: Session = Depends(get_session),
+):
+    """Эндпоинт удаления роли у пользователя"""
+    user = session.get(User, user_id)
+    if not user:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail="User not found",
+        )
+
+    role = session.exec(select(Role).where(Role.name == role_name)).first()
+    if not role:
+        raise HTTPException(
+            status_code=status.HTTP_404_NOT_FOUND,
+            detail=f"Role '{role_name}' not found",
+        )
+
+    if role not in user.roles:
+        raise HTTPException(
+            status_code=status.HTTP_400_BAD_REQUEST,
+            detail="User does not have this role",
+        )
+
+    user.roles.remove(role)
+    session.add(user)
+    session.commit()
+    session.refresh(user)
+
+    return UserRead(**user.model_dump(), roles=[r.name for r in user.roles])
+
+
+@router.get(
+    "/roles",
+    response_model=RoleList,
+    summary="Получить список ролей",
+    description="Возвращает список ролей",
+)
+def get_roles(
+    session: Session = Depends(get_session),
+):
+    """Эндпоинт получения списа ролей"""
+    roles = session.exec(select(Role)).all()
+    return RoleList(
+        roles=[RoleRead(**role.model_dump()) for role in roles],
+        total=len(roles),
+    )
@@ -6,7 +6,7 @@ from sqlmodel import Session, select, col, func

 from library_service.auth import RequireAuth
 from library_service.settings import get_session
-from library_service.models.db import Author, AuthorBookLink, Book, GenreBookLink
+from library_service.models.db import Author, AuthorBookLink, Book, GenreBookLink, Genre
 from library_service.models.dto import AuthorRead, BookCreate, BookList, BookRead, BookUpdate, GenreRead
 from library_service.models.dto.combined import (
    BookWithAuthorsAndGenres,
@@ -10,7 +10,6 @@ from library_service.settings import get_session
 router = APIRouter(prefix="/genres", tags=["genres"])


-# Создание жанра
@router.post(
    "/",
    response_model=GenreRead,
@@ -30,7 +29,6 @@ def create_genre(
    return GenreRead(**db_genre.model_dump())


-# Чтение жанров
@router.get(
    "/",
    response_model=GenreList,
@@ -45,7 +43,6 @@ def read_genres(session: Session = Depends(get_session)):
    )


-# Чтение жанра с его книгами
@router.get(
    "/{genre_id}",
    response_model=GenreWithBooks,
@@ -73,7 +70,6 @@ def get_genre(
    return GenreWithBooks(**genre_data)


-# Обновление жанра
@router.put(
    "/{genre_id}",
    response_model=GenreRead,
@@ -100,7 +96,6 @@ def update_genre(
    return GenreRead(**db_genre.model_dump())


-# Удаление жанра
@router.delete(
    "/{genre_id}",
    response_model=GenreRead,
@@ -31,23 +31,46 @@ def get_info(app) -> Dict:


@router.get("/", include_in_schema=False)
-async def root(request: Request, app=Depends(lambda: get_app())):
+async def root(request: Request):
    """Эндпоинт главной страницы"""
-    return templates.TemplateResponse(request, "index.html", get_info(app))
+    return templates.TemplateResponse(request, "index.html")
+
+
+@router.get("/authors", include_in_schema=False)
+async def authors(request: Request):
+    """Эндпоинт страницы выбора автора"""
+    return templates.TemplateResponse(request, "authors.html")
+
+
+@router.get("/author/{author_id}", include_in_schema=False)
+async def author(request: Request, author_id: int):
+    """Эндпоинт страницы автора"""
+    return templates.TemplateResponse(request, "author.html")


@router.get("/books", include_in_schema=False)
-async def books(request: Request, app=Depends(lambda: get_app())):
+async def books(request: Request):
    """Эндпоинт страницы выбора книг"""
-    return templates.TemplateResponse(request, "books.html", get_info(app))
+    return templates.TemplateResponse(request, "books.html")
+
+
+@router.get("/book/{book_id}", include_in_schema=False)
+async def book(request: Request, book_id: int):
+    """Эндпоинт страницы книги"""
+    return templates.TemplateResponse(request, "book.html")


@router.get("/auth", include_in_schema=False)
-async def auth(request: Request, app=Depends(lambda: get_app())):
+async def auth(request: Request):
    """Эндпоинт страницы авторизации"""
-    return templates.TemplateResponse(request, "auth.html", get_info(app))
+    return templates.TemplateResponse(request, "auth.html")


+@router.get("/profile", include_in_schema=False)
+async def profile(request: Request):
+    """Эндпоинт страницы профиля"""
+    return templates.TemplateResponse(request, "profile.html")
+

@router.get("/api", include_in_schema=False)
 async def api(request: Request, app=Depends(lambda: get_app())):
@@ -0,0 +1,305 @@
+$(document).ready(() => {
+    const pathParts = window.location.pathname.split("/");
+    const authorId = pathParts[pathParts.length - 1];
+  
+    if (!authorId || isNaN(authorId)) {
+      showErrorState("Некорректный ID автора");
+      return;
+    }
+  
+    loadAuthor(authorId);
+  
+    function loadAuthor(id) {
+      showLoadingState();
+  
+      fetch(`/api/authors/${id}`)
+        .then((response) => {
+          if (!response.ok) {
+            if (response.status === 404) {
+              throw new Error("Автор не найден");
+            }
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((author) => {
+          renderAuthor(author);
+          renderBooks(author.books);
+          document.title = `LiB - ${author.name}`;
+        })
+        .catch((error) => {
+          console.error("Error loading author:", error);
+          showErrorState(error.message);
+        });
+    }
+  
+    function renderAuthor(author) {
+      const $card = $("#author-card");
+      const firstLetter = author.name.charAt(0).toUpperCase();
+      const booksCount = author.books ? author.books.length : 0;
+      const booksWord = getWordForm(booksCount, ["книга", "книги", "книг"]);
+  
+      $card.html(`
+        <div class="flex items-start">
+          <!-- Аватар -->
+          <div class="w-24 h-24 bg-gray-500 text-white rounded-full flex items-center justify-center text-4xl font-bold mr-6 flex-shrink-0">
+            ${firstLetter}
+          </div>
+          
+          <!-- Информация -->
+          <div class="flex-1">
+            <div class="flex items-center justify-between mb-2">
+              <h1 class="text-3xl font-bold text-gray-900">${escapeHtml(author.name)}</h1>
+              <span class="text-sm text-gray-500">ID: ${author.id}</span>
+            </div>
+            
+            <div class="flex items-center text-gray-600 mb-4">
+              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+              </svg>
+              <span>${booksCount} ${booksWord} в библиотеке</span>
+            </div>
+  
+            <!-- Кнопка назад -->
+            <a href="/authors" class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors">
+              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+              </svg>
+              Вернуться к списку авторов
+            </a>
+          </div>
+        </div>
+      `);
+    }
+  
+    function renderBooks(books) {
+      const $container = $("#books-container");
+      $container.empty();
+  
+      if (!books || books.length === 0) {
+        $container.html(`
+          <div class="text-center py-8">
+            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+            </svg>
+            <p class="text-gray-500">У этого автора пока нет книг в библиотеке</p>
+          </div>
+        `);
+        return;
+      }
+  
+      const $grid = $('<div class="space-y-4"></div>');
+  
+      books.forEach((book) => {
+        const $bookCard = $(`
+          <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow duration-200 cursor-pointer book-card" data-id="${book.id}">
+            <div class="flex justify-between items-start">
+              <div class="flex-1">
+                <h3 class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors mb-2">
+                  ${escapeHtml(book.title)}
+                </h3>
+                <p class="text-gray-600 text-sm line-clamp-3">
+                  ${escapeHtml(book.description || "Описание отсутствует")}
+                </p>
+              </div>
+              <svg class="w-5 h-5 text-gray-400 ml-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+        `);
+  
+        $grid.append($bookCard);
+      });
+  
+      $container.append($grid);
+  
+      $container.off("click", ".book-card").on("click", ".book-card", function () {
+        const bookId = $(this).data("id");
+        window.location.href = `/book/${bookId}`;
+      });
+    }
+  
+    function showLoadingState() {
+      const $authorCard = $("#author-card");
+      const $booksContainer = $("#books-container");
+  
+      $authorCard.html(`
+        <div class="flex items-start animate-pulse">
+          <div class="w-24 h-24 bg-gray-200 rounded-full mr-6"></div>
+          <div class="flex-1">
+            <div class="h-8 bg-gray-200 rounded w-1/3 mb-4"></div>
+            <div class="h-4 bg-gray-200 rounded w-1/4 mb-4"></div>
+            <div class="h-4 bg-gray-200 rounded w-1/5"></div>
+          </div>
+        </div>
+      `);
+  
+      $booksContainer.html(`
+        <div class="space-y-4">
+          ${Array(3)
+            .fill()
+            .map(
+              () => `
+            <div class="border border-gray-200 rounded-lg p-4 animate-pulse">
+              <div class="h-5 bg-gray-200 rounded w-1/2 mb-2"></div>
+              <div class="h-4 bg-gray-200 rounded w-full mb-1"></div>
+              <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+            </div>
+          `
+            )
+            .join("")}
+        </div>
+      `);
+    }
+  
+    function showErrorState(message) {
+      const $authorCard = $("#author-card");
+      const $booksSection = $("#books-section");
+  
+      $booksSection.hide();
+  
+      $authorCard.html(`
+        <div class="text-center py-8">
+          <svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+          </svg>
+          <h3 class="text-xl font-medium text-gray-900 mb-2">${escapeHtml(message)}</h3>
+          <p class="text-gray-500 mb-6">Не удалось загрузить информацию об авторе</p>
+          <div class="flex justify-center gap-4">
+            <button id="retry-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors">
+              Попробовать снова
+            </button>
+            <a href="/authors" class="bg-white text-gray-700 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
+              К списку авторов
+            </a>
+          </div>
+        </div>
+      `);
+  
+      $("#retry-btn").on("click", function () {
+        $booksSection.show();
+        loadAuthor(authorId);
+      });
+    }
+  
+    function getWordForm(number, forms) {
+      const cases = [2, 0, 1, 1, 1, 2];
+      const index =
+        number % 100 > 4 && number % 100 < 20
+          ? 2
+          : cases[Math.min(number % 10, 5)];
+      return forms[index];
+    }
+  
+    function escapeHtml(text) {
+      if (!text) return "";
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    }
+  
+    const $guestLink = $("#guest-link");
+    const $userBtn = $("#user-btn");
+    const $userDropdown = $("#user-dropdown");
+    const $userArrow = $("#user-arrow");
+    const $userAvatar = $("#user-avatar");
+    const $dropdownName = $("#dropdown-name");
+    const $dropdownUsername = $("#dropdown-username");
+    const $dropdownEmail = $("#dropdown-email");
+    const $logoutBtn = $("#logout-btn");
+  
+    let isDropdownOpen = false;
+  
+    function openDropdown() {
+      isDropdownOpen = true;
+      $userDropdown.removeClass("hidden");
+      $userArrow.addClass("rotate-180");
+    }
+  
+    function closeDropdown() {
+      isDropdownOpen = false;
+      $userDropdown.addClass("hidden");
+      $userArrow.removeClass("rotate-180");
+    }
+  
+    $userBtn.on("click", function (e) {
+      e.stopPropagation();
+      isDropdownOpen ? closeDropdown() : openDropdown();
+    });
+  
+    $(document).on("click", function (e) {
+      if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+        closeDropdown();
+      }
+    });
+  
+    $(document).on("keydown", function (e) {
+      if (e.key === "Escape" && isDropdownOpen) {
+        closeDropdown();
+      }
+    });
+  
+    $logoutBtn.on("click", function () {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      window.location.reload();
+    });
+  
+    function showGuest() {
+      $guestLink.removeClass("hidden");
+      $userBtn.addClass("hidden").removeClass("flex");
+      closeDropdown();
+    }
+  
+    function showUser(user) {
+      $guestLink.addClass("hidden");
+      $userBtn.removeClass("hidden").addClass("flex");
+  
+      const displayName = user.full_name || user.username;
+      const firstLetter = displayName.charAt(0).toUpperCase();
+  
+      $userAvatar.text(firstLetter);
+      $dropdownName.text(displayName);
+      $dropdownUsername.text("@" + user.username);
+      $dropdownEmail.text(user.email);
+    }
+  
+    function updateUserAvatar(email) {
+      if (!email) return;
+      const cleanEmail = email.trim().toLowerCase();
+      const emailHash = sha256(cleanEmail);
+  
+      const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+      const avatarImg = document.getElementById("user-avatar");
+      if (avatarImg) {
+        avatarImg.src = avatarUrl;
+      }
+    }
+  
+    const token = localStorage.getItem("access_token");
+  
+    if (!token) {
+      showGuest();
+    } else {
+      fetch("/api/auth/me", {
+        headers: { Authorization: "Bearer " + token },
+      })
+        .then((response) => {
+          if (response.ok) return response.json();
+          throw new Error("Unauthorized");
+        })
+        .then((user) => {
+          showUser(user);
+          updateUserAvatar(user.email);
+  
+          document.getElementById("user-btn").classList.remove("hidden");
+          document.getElementById("guest-link").classList.add("hidden");
+        })
+        .catch(() => {
+          localStorage.removeItem("access_token");
+          localStorage.removeItem("refresh_token");
+          showGuest();
+        });
+    }
+  });
@@ -0,0 +1,417 @@
+$(document).ready(() => {
+    let allAuthors = [];
+    let filteredAuthors = [];
+    let currentPage = 1;
+    let pageSize = 12;
+    let currentSort = "name_asc";
+  
+    loadAuthors();
+  
+    function loadAuthors() {
+      showLoadingState();
+  
+      fetch("/api/authors")
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        })
+        .then((data) => {
+          allAuthors = data.authors;
+          applyFiltersAndSort();
+        })
+        .catch((error) => {
+          console.error("Error loading authors:", error);
+          showErrorState();
+        });
+    }
+  
+    function applyFiltersAndSort() {
+      const searchQuery = $("#author-search-input").val().trim().toLowerCase();
+  
+      filteredAuthors = allAuthors.filter((author) =>
+        author.name.toLowerCase().includes(searchQuery)
+      );
+  
+      filteredAuthors.sort((a, b) => {
+        const nameA = a.name.toLowerCase();
+        const nameB = b.name.toLowerCase();
+  
+        if (currentSort === "name_asc") {
+          return nameA.localeCompare(nameB, "ru");
+        } else {
+          return nameB.localeCompare(nameA, "ru");
+        }
+      });
+  
+      updateResultsCounter();
+  
+      renderAuthors();
+      renderPagination();
+    }
+  
+    function updateResultsCounter() {
+      const $counter = $("#results-counter");
+      const total = filteredAuthors.length;
+  
+      if (total === 0) {
+        $counter.text("Авторы не найдены");
+      } else {
+        const wordForm = getWordForm(total, ["автор", "автора", "авторов"]);
+        $counter.text(`Найдено: ${total} ${wordForm}`);
+      }
+    }
+
+    function getWordForm(number, forms) {
+      const cases = [2, 0, 1, 1, 1, 2];
+      const index =
+        number % 100 > 4 && number % 100 < 20
+          ? 2
+          : cases[Math.min(number % 10, 5)];
+      return forms[index];
+    }
+  
+    function renderAuthors() {
+      const $container = $("#authors-container");
+      $container.empty();
+  
+      if (filteredAuthors.length === 0) {
+        $container.html(`
+          <div class="bg-white p-8 rounded-lg shadow-md text-center">
+            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+            </svg>
+            <h3 class="text-lg font-medium text-gray-900 mb-2">Авторы не найдены</h3>
+            <p class="text-gray-500">Попробуйте изменить параметры поиска</p>
+          </div>
+        `);
+        return;
+      }
+  
+      const startIndex = (currentPage - 1) * pageSize;
+      const endIndex = startIndex + pageSize;
+      const pageAuthors = filteredAuthors.slice(startIndex, endIndex);
+  
+      const $grid = $('<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"></div>');
+  
+      pageAuthors.forEach((author) => {
+        const firstLetter = author.name.charAt(0).toUpperCase();
+  
+        const $authorCard = $(`
+          <div class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 cursor-pointer author-card" data-id="${author.id}">
+            <div class="flex items-center">
+              <div class="w-12 h-12 bg-gray-500 text-white rounded-full flex items-center justify-center text-xl font-bold mr-4">
+                ${firstLetter}
+              </div>
+              <div class="flex-1">
+                <h3 class="text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors">
+                  ${escapeHtml(author.name)}
+                </h3>
+                <p class="text-sm text-gray-500">ID: ${author.id}</p>
+              </div>
+              <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+              </svg>
+            </div>
+          </div>
+        `);
+  
+        $grid.append($authorCard);
+      });
+  
+      $container.append($grid);
+  
+      $container.off("click", ".author-card").on("click", ".author-card", function () {
+        const authorId = $(this).data("id");
+        window.location.href = `/author/${authorId}`;
+      });
+    }
+  
+    function renderPagination() {
+      const $paginationContainer = $("#pagination-container");
+      $paginationContainer.empty();
+  
+      const totalPages = Math.ceil(filteredAuthors.length / pageSize);
+  
+      if (totalPages <= 1) return;
+  
+      const $pagination = $(`
+        <div class="flex justify-center items-center gap-2 mt-6 mb-4">
+          <button id="prev-page" class="px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" ${currentPage === 1 ? "disabled" : ""}>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+            </svg>
+          </button>
+          <div id="page-numbers" class="flex gap-1"></div>
+          <button id="next-page" class="px-3 py-2 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" ${currentPage === totalPages ? "disabled" : ""}>
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </button>
+        </div>
+      `);
+  
+      const $pageNumbers = $pagination.find("#page-numbers");
+  
+      const pages = generatePageNumbers(currentPage, totalPages);
+  
+      pages.forEach((page) => {
+        if (page === "...") {
+          $pageNumbers.append(`<span class="px-3 py-2">...</span>`);
+        } else {
+          const isActive = page === currentPage;
+          $pageNumbers.append(`
+            <button class="page-btn px-3 py-2 rounded-lg ${isActive ? "bg-gray-500 text-white" : "bg-white border border-gray-300 hover:bg-gray-50"}" data-page="${page}">
+              ${page}
+            </button>
+          `);
+        }
+      });
+  
+      $paginationContainer.append($pagination);
+  
+      $paginationContainer.find("#prev-page").on("click", function () {
+        if (currentPage > 1) {
+          currentPage--;
+          renderAuthors();
+          renderPagination();
+          scrollToTop();
+        }
+      });
+  
+      $paginationContainer.find("#next-page").on("click", function () {
+        if (currentPage < totalPages) {
+          currentPage++;
+          renderAuthors();
+          renderPagination();
+          scrollToTop();
+        }
+      });
+  
+      $paginationContainer.find(".page-btn").on("click", function () {
+        const page = parseInt($(this).data("page"));
+        if (page !== currentPage) {
+          currentPage = page;
+          renderAuthors();
+          renderPagination();
+          scrollToTop();
+        }
+      });
+    }
+  
+    function generatePageNumbers(current, total) {
+      const pages = [];
+      const delta = 2;
+  
+      for (let i = 1; i <= total; i++) {
+        if (
+          i === 1 ||
+          i === total ||
+          (i >= current - delta && i <= current + delta)
+        ) {
+          pages.push(i);
+        } else if (pages[pages.length - 1] !== "...") {
+          pages.push("...");
+        }
+      }
+  
+      return pages;
+    }
+  
+    function scrollToTop() {
+      $("html, body").animate({ scrollTop: 0 }, 300);
+    }
+  
+    function showLoadingState() {
+      const $container = $("#authors-container");
+      $container.html(`
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          ${Array(6)
+            .fill()
+            .map(
+              () => `
+            <div class="bg-white p-4 rounded-lg shadow-md animate-pulse">
+              <div class="flex items-center">
+                <div class="w-12 h-12 bg-gray-200 rounded-full mr-4"></div>
+                <div class="flex-1">
+                  <div class="h-5 bg-gray-200 rounded w-3/4 mb-2"></div>
+                  <div class="h-4 bg-gray-200 rounded w-1/4"></div>
+                </div>
+              </div>
+            </div>
+          `
+            )
+            .join("")}
+        </div>
+      `);
+    }
+  
+    function showErrorState() {
+      const $container = $("#authors-container");
+      $container.html(`
+        <div class="bg-red-50 p-8 rounded-lg shadow-md text-center">
+          <svg class="mx-auto h-12 w-12 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+          </svg>
+          <h3 class="text-lg font-medium text-red-900 mb-2">Ошибка загрузки</h3>
+          <p class="text-red-700 mb-4">Не удалось загрузить список авторов</p>
+          <button id="retry-btn" class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700">
+            Попробовать снова
+          </button>
+        </div>
+      `);
+  
+      $("#retry-btn").on("click", loadAuthors);
+    }
+  
+    function escapeHtml(text) {
+      if (!text) return "";
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    }
+  
+    function initializeFilters() {
+      const $authorSearch = $("#author-search-input");
+      const $resetBtn = $("#reset-filters-btn");
+      const $sortRadios = $('input[name="sort"]');
+  
+      let searchTimeout;
+      $authorSearch.on("input", function () {
+        clearTimeout(searchTimeout);
+        searchTimeout = setTimeout(() => {
+          currentPage = 1;
+          applyFiltersAndSort();
+        }, 300);
+      });
+  
+      $authorSearch.on("keypress", function (e) {
+        if (e.which === 13) {
+          clearTimeout(searchTimeout);
+          currentPage = 1;
+          applyFiltersAndSort();
+        }
+      });
+  
+      $sortRadios.on("change", function () {
+        currentSort = $(this).val();
+        currentPage = 1;
+        applyFiltersAndSort();
+      });
+  
+      $resetBtn.on("click", function () {
+        $authorSearch.val("");
+        $('input[name="sort"][value="name_asc"]').prop("checked", true);
+        currentSort = "name_asc";
+        currentPage = 1;
+        applyFiltersAndSort();
+      });
+    }
+  
+    initializeFilters();
+  
+    const $guestLink = $("#guest-link");
+    const $userBtn = $("#user-btn");
+    const $userDropdown = $("#user-dropdown");
+    const $userArrow = $("#user-arrow");
+    const $userAvatar = $("#user-avatar");
+    const $dropdownName = $("#dropdown-name");
+    const $dropdownUsername = $("#dropdown-username");
+    const $dropdownEmail = $("#dropdown-email");
+    const $logoutBtn = $("#logout-btn");
+  
+    let isDropdownOpen = false;
+  
+    function openDropdown() {
+      isDropdownOpen = true;
+      $userDropdown.removeClass("hidden");
+      $userArrow.addClass("rotate-180");
+    }
+  
+    function closeDropdown() {
+      isDropdownOpen = false;
+      $userDropdown.addClass("hidden");
+      $userArrow.removeClass("rotate-180");
+    }
+  
+    $userBtn.on("click", function (e) {
+      e.stopPropagation();
+      isDropdownOpen ? closeDropdown() : openDropdown();
+    });
+  
+    $(document).on("click", function (e) {
+      if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+        closeDropdown();
+      }
+    });
+  
+    $(document).on("keydown", function (e) {
+      if (e.key === "Escape" && isDropdownOpen) {
+        closeDropdown();
+      }
+    });
+  
+    $logoutBtn.on("click", function () {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      window.location.reload();
+    });
+  
+    function showGuest() {
+      $guestLink.removeClass("hidden");
+      $userBtn.addClass("hidden").removeClass("flex");
+      closeDropdown();
+    }
+  
+    function showUser(user) {
+      $guestLink.addClass("hidden");
+      $userBtn.removeClass("hidden").addClass("flex");
+  
+      const displayName = user.full_name || user.username;
+      const firstLetter = displayName.charAt(0).toUpperCase();
+  
+      $userAvatar.text(firstLetter);
+      $dropdownName.text(displayName);
+      $dropdownUsername.text("@" + user.username);
+      $dropdownEmail.text(user.email);
+    }
+  
+    function updateUserAvatar(email) {
+      if (!email) return;
+      const cleanEmail = email.trim().toLowerCase();
+      const emailHash = sha256(cleanEmail);
+  
+      const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+      const avatarImg = document.getElementById("user-avatar");
+      if (avatarImg) {
+        avatarImg.src = avatarUrl;
+      }
+    }
+  
+    const token = localStorage.getItem("access_token");
+  
+    if (!token) {
+      showGuest();
+    } else {
+      fetch("/api/auth/me", {
+        headers: { Authorization: "Bearer " + token },
+      })
+        .then((response) => {
+          if (response.ok) return response.json();
+          throw new Error("Unauthorized");
+        })
+        .then((user) => {
+          showUser(user);
+          updateUserAvatar(user.email);
+  
+          document.getElementById("user-btn").classList.remove("hidden");
+          document.getElementById("guest-link").classList.add("hidden");
+        })
+        .catch(() => {
+          localStorage.removeItem("access_token");
+          localStorage.removeItem("refresh_token");
+          showGuest();
+        });
+    }
+  });
@@ -0,0 +1,321 @@
+$(document).ready(() => {
+    const pathParts = window.location.pathname.split("/");
+    const bookId = pathParts[pathParts.length - 1];
+
+    if (!bookId || isNaN(bookId)) {
+        showErrorState("Некорректный ID книги");
+        return;
+    }
+
+    loadBook(bookId);
+
+    function loadBook(id) {
+        showLoadingState();
+
+        fetch(`/api/books/${id}`)
+        .then((response) => {
+            if (!response.ok) {
+            if (response.status === 404) {
+                throw new Error("Книга не найдена");
+            }
+            throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then((book) => {
+            renderBook(book);
+            renderAuthors(book.authors);
+            renderGenres(book.genres);
+            document.title = `LiB - ${book.title}`;
+        })
+        .catch((error) => {
+            console.error("Error loading book:", error);
+            showErrorState(error.message);
+        });
+    }
+
+    function renderBook(book) {
+        const $card = $("#book-card");
+        const authorsText = book.authors.map((a) => a.name).join(", ") || "Автор неизвестен";
+
+        $card.html(`
+        <div class="flex flex-col md:flex-row items-start">
+            <!-- Иконка книги -->
+            <div class="w-32 h-40 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center mb-4 md:mb-0 md:mr-6 flex-shrink-0 shadow-md">
+            <svg class="w-16 h-16 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+            </svg>
+            </div>
+            
+            <!-- Информация о книге -->
+            <div class="flex-1">
+            <div class="flex items-start justify-between mb-2">
+                <h1 class="text-3xl font-bold text-gray-900">${escapeHtml(book.title)}</h1>
+                <span class="text-sm text-gray-500 ml-4">ID: ${book.id}</span>
+            </div>
+            
+            <p class="text-lg text-gray-600 mb-4">
+                ${escapeHtml(authorsText)}
+            </p>
+            
+            <div class="prose prose-gray max-w-none mb-6">
+                <p class="text-gray-700 leading-relaxed">
+                ${escapeHtml(book.description || "Описание отсутствует")}
+                </p>
+            </div>
+
+            <!-- Кнопка назад -->
+            <a href="/books" class="inline-flex items-center text-gray-500 hover:text-gray-700 transition-colors">
+                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+                </svg>
+                Вернуться к списку книг
+            </a>
+            </div>
+        </div>
+        `);
+    }
+
+    function renderAuthors(authors) {
+        const $container = $("#authors-container");
+        const $section = $("#authors-section");
+        $container.empty();
+
+        if (!authors || authors.length === 0) {
+            $section.hide();
+            return;
+        }
+
+        const $grid = $('<div class="flex flex-wrap gap-3"></div>');
+
+        authors.forEach((author) => {
+        const firstLetter = author.name.charAt(0).toUpperCase();
+
+        const $authorCard = $(`
+            <a href="/author/${author.id}" class="flex items-center bg-gray-50 hover:bg-gray-100 rounded-lg p-3 transition-colors duration-200 border border-gray-200">
+            <div class="w-10 h-10 bg-gray-500 text-white rounded-full flex items-center justify-center text-lg font-bold mr-3">
+                ${firstLetter}
+            </div>
+            <span class="text-gray-900 font-medium">${escapeHtml(author.name)}</span>
+            <svg class="w-4 h-4 text-gray-400 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+            </a>
+        `);
+
+        $grid.append($authorCard);
+        });
+
+        $container.append($grid);
+    }
+
+    function renderGenres(genres) {
+        const $container = $("#genres-container");
+        const $section = $("#genres-section");
+        $container.empty();
+
+        if (!genres || genres.length === 0) {
+        $section.hide();
+        return;
+        }
+
+        const $grid = $('<div class="flex flex-wrap gap-2"></div>');
+
+        genres.forEach((genre) => {
+        const $genreTag = $(`
+            <a href="/books?genre_id=${genre.id}" class="inline-flex items-center bg-gray-100 hover:bg-gray-200 text-gray-700 px-4 py-2 rounded-full transition-colors duration-200">
+            <svg class="w-4 h-4 mr-2 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
+            </svg>
+            ${escapeHtml(genre.name)}
+            </a>
+        `);
+
+        $grid.append($genreTag);
+        });
+
+        $container.append($grid);
+    }
+
+    function showLoadingState() {
+        const $bookCard = $("#book-card");
+        const $authorsContainer = $("#authors-container");
+        const $genresContainer = $("#genres-container");
+
+        $bookCard.html(`
+        <div class="flex flex-col md:flex-row items-start animate-pulse">
+            <div class="w-32 h-40 bg-gray-200 rounded-lg mb-4 md:mb-0 md:mr-6"></div>
+            <div class="flex-1">
+            <div class="h-8 bg-gray-200 rounded w-2/3 mb-4"></div>
+            <div class="h-5 bg-gray-200 rounded w-1/3 mb-4"></div>
+            <div class="space-y-2 mb-6">
+                <div class="h-4 bg-gray-200 rounded w-full"></div>
+                <div class="h-4 bg-gray-200 rounded w-full"></div>
+                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+            </div>
+            <div class="h-4 bg-gray-200 rounded w-1/4"></div>
+            </div>
+        </div>
+        `);
+
+        $authorsContainer.html(`
+        <div class="flex gap-3 animate-pulse">
+            <div class="flex items-center bg-gray-100 rounded-lg p-3">
+            <div class="w-10 h-10 bg-gray-200 rounded-full mr-3"></div>
+            <div class="h-5 bg-gray-200 rounded w-24"></div>
+            </div>
+        </div>
+        `);
+
+        $genresContainer.html(`
+        <div class="flex gap-2 animate-pulse">
+            <div class="h-10 bg-gray-200 rounded-full w-24"></div>
+            <div class="h-10 bg-gray-200 rounded-full w-32"></div>
+        </div>
+        `);
+    }
+
+    function showErrorState(message) {
+        const $bookCard = $("#book-card");
+        const $authorsSection = $("#authors-section");
+        const $genresSection = $("#genres-section");
+
+        $authorsSection.hide();
+        $genresSection.hide();
+
+        $bookCard.html(`
+        <div class="text-center py-8">
+            <svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+            </svg>
+            <h3 class="text-xl font-medium text-gray-900 mb-2">${escapeHtml(message)}</h3>
+            <p class="text-gray-500 mb-6">Не удалось загрузить информацию о книге</p>
+            <div class="flex justify-center gap-4">
+            <button id="retry-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors">
+                Попробовать снова
+            </button>
+            <a href="/books" class="bg-white text-gray-700 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
+                К списку книг
+            </a>
+            </div>
+        </div>
+        `);
+
+        $("#retry-btn").on("click", function () {
+        $authorsSection.show();
+        $genresSection.show();
+        loadBook(bookId);
+        });
+    }
+
+    function escapeHtml(text) {
+        if (!text) return "";
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    const $guestLink = $("#guest-link");
+    const $userBtn = $("#user-btn");
+    const $userDropdown = $("#user-dropdown");
+    const $userArrow = $("#user-arrow");
+    const $userAvatar = $("#user-avatar");
+    const $dropdownName = $("#dropdown-name");
+    const $dropdownUsername = $("#dropdown-username");
+    const $dropdownEmail = $("#dropdown-email");
+    const $logoutBtn = $("#logout-btn");
+
+    let isDropdownOpen = false;
+
+    function openDropdown() {
+        isDropdownOpen = true;
+        $userDropdown.removeClass("hidden");
+        $userArrow.addClass("rotate-180");
+    }
+
+    function closeDropdown() {
+        isDropdownOpen = false;
+        $userDropdown.addClass("hidden");
+        $userArrow.removeClass("rotate-180");
+    }
+
+    $userBtn.on("click", function (e) {
+        e.stopPropagation();
+        isDropdownOpen ? closeDropdown() : openDropdown();
+    });
+
+    $(document).on("click", function (e) {
+        if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+        closeDropdown();
+        }
+    });
+
+    $(document).on("keydown", function (e) {
+        if (e.key === "Escape" && isDropdownOpen) {
+        closeDropdown();
+        }
+    });
+
+    $logoutBtn.on("click", function () {
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+        window.location.reload();
+    });
+
+    function showGuest() {
+        $guestLink.removeClass("hidden");
+        $userBtn.addClass("hidden").removeClass("flex");
+        closeDropdown();
+    }
+
+    function showUser(user) {
+        $guestLink.addClass("hidden");
+        $userBtn.removeClass("hidden").addClass("flex");
+
+        const displayName = user.full_name || user.username;
+        const firstLetter = displayName.charAt(0).toUpperCase();
+
+        $userAvatar.text(firstLetter);
+        $dropdownName.text(displayName);
+        $dropdownUsername.text("@" + user.username);
+        $dropdownEmail.text(user.email);
+    }
+
+    function updateUserAvatar(email) {
+        if (!email) return;
+        const cleanEmail = email.trim().toLowerCase();
+        const emailHash = sha256(cleanEmail);
+
+        const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+        const avatarImg = document.getElementById("user-avatar");
+        if (avatarImg) {
+        avatarImg.src = avatarUrl;
+        }
+    }
+
+    const token = localStorage.getItem("access_token");
+
+    if (!token) {
+        showGuest();
+    } else {
+        fetch("/api/auth/me", {
+        headers: { Authorization: "Bearer " + token },
+        })
+        .then((response) => {
+            if (response.ok) return response.json();
+            throw new Error("Unauthorized");
+        })
+        .then((user) => {
+            showUser(user);
+            updateUserAvatar(user.email);
+
+            document.getElementById("user-btn").classList.remove("hidden");
+            document.getElementById("guest-link").classList.add("hidden");
+        })
+        .catch(() => {
+            localStorage.removeItem("access_token");
+            localStorage.removeItem("refresh_token");
+            showGuest();
+        });
+    }
+    });
@@ -1,6 +1,6 @@
-$(document).ready(function () {
-  let selectedAuthors = new Map(); // Map<id, name>
-  let selectedGenres = new Map(); // Map<id, name>
+$(document).ready(() => {
+  let selectedAuthors = new Map();
+  let selectedGenres = new Map();
  let currentPage = 1;
  let pageSize = 20;
  let totalBooks = 0;
@@ -36,41 +36,32 @@ $(document).ready(function () {

      initializeAuthorDropdown();
      initializeFilters();
-
-      // Загружаем книги при старте
+      
      loadBooks();
    })
    .catch((error) => console.error("Error loading data:", error));

-  // === Функция загрузки книг ===
  function loadBooks() {
    const searchQuery = $("#book-search-input").val().trim();

-    // Формируем URL с параметрами
    const params = new URLSearchParams();
-
-    // Добавляем поиск (минимум 3 символа)
    if (searchQuery.length >= 3) {
      params.append("q", searchQuery);
    }

-    // Добавляем авторов
    selectedAuthors.forEach((name, id) => {
      params.append("author_ids", id);
    });

-    // Добавляем жанры
    selectedGenres.forEach((name, id) => {
      params.append("genre_ids", id);
    });

-    // Пагинация
    params.append("page", currentPage);
    params.append("size", pageSize);

    const url = `/api/books/filter?${params.toString()}`;

-    // Показываем индикатор загрузки
    showLoadingState();

    fetch(url)
@@ -91,7 +82,6 @@ $(document).ready(function () {
      });
  }

-  // === Отображение книг ===
  function renderBooks(books) {
    const $container = $("#books-container");
    $container.empty();
@@ -146,17 +136,14 @@ $(document).ready(function () {

      $container.append($bookCard);
    });
-
-    // Обработчик клика на карточку книги
+    
    $container.on("click", ".book-card", function () {
      const bookId = $(this).data("id");
-      window.location.href = `/books/${bookId}`;
+      window.location.href = `/book/${bookId}`;
    });
  }

-  // === Пагинация ===
  function renderPagination() {
-    // Удаляем старую пагинацию
    $("#pagination-container").remove();

    const totalPages = Math.ceil(totalBooks / pageSize);
@@ -181,7 +168,6 @@ $(document).ready(function () {

    const $pageNumbers = $pagination.find("#page-numbers");

-    // Генерируем номера страниц
    const pages = generatePageNumbers(currentPage, totalPages);

    pages.forEach((page) => {
@@ -199,7 +185,6 @@ $(document).ready(function () {

    $("#books-container").after($pagination);

-    // Обработчики пагинации
    $("#prev-page").on("click", function () {
      if (currentPage > 1) {
        currentPage--;
@@ -249,7 +234,6 @@ $(document).ready(function () {
    $("html, body").animate({ scrollTop: 0 }, 300);
  }

-  // === Состояния загрузки ===
  function showLoadingState() {
    const $container = $("#books-container");
    $container.html(`
@@ -292,7 +276,6 @@ $(document).ready(function () {
    $("#retry-btn").on("click", loadBooks);
  }

-  // === Экранирование HTML ===
  function escapeHtml(text) {
    if (!text) return "";
    const div = document.createElement("div");
@@ -300,7 +283,6 @@ $(document).ready(function () {
    return div.innerHTML;
  }

-  // === Dropdown авторов ===
  function initializeAuthorDropdown() {
    const $input = $("#author-search-input");
    const $dropdown = $("#author-dropdown");
@@ -390,13 +372,11 @@ $(document).ready(function () {
    window.updateAuthorHighlights = updateHighlights;
  }

-  // === Инициализация фильтров ===
  function initializeFilters() {
    const $bookSearch = $("#book-search-input");
    const $applyBtn = $("#apply-filters-btn");
    const $resetBtn = $("#reset-filters-btn");

-    // Обработка жанров
    $("#genres-list").on("change", "input[type='checkbox']", function () {
      const id = parseInt($(this).attr("data-id"));
      const name = $(this).attr("data-name");
@@ -407,13 +387,11 @@ $(document).ready(function () {
      }
    });

-    // Применить фильтры
    $applyBtn.on("click", function () {
-      currentPage = 1; // Сбрасываем на первую страницу
+      currentPage = 1;
      loadBooks();
    });

-    // Сбросить фильтры
    $resetBtn.on("click", function () {
      $bookSearch.val("");

@@ -428,13 +406,11 @@ $(document).ready(function () {
      loadBooks();
    });

-    // Поиск с дебаунсом
    let searchTimeout;
    $bookSearch.on("input", function () {
      clearTimeout(searchTimeout);
      const query = $(this).val().trim();

-      // Автопоиск только если >= 3 символов или пусто
      if (query.length >= 3 || query.length === 0) {
        searchTimeout = setTimeout(() => {
          currentPage = 1;
@@ -443,7 +419,6 @@ $(document).ready(function () {
      }
    });

-    // Поиск по Enter
    $bookSearch.on("keypress", function (e) {
      if (e.which === 13) {
        clearTimeout(searchTimeout);
@@ -453,7 +428,6 @@ $(document).ready(function () {
    });
  }

-  // === Остальной код (пользователь/авторизация) ===
  const $guestLink = $("#guest-link");
  const $userBtn = $("#user-btn");
  const $userDropdown = $("#user-dropdown");
@@ -1,4 +1,4 @@
-const svg = document.getElementById("bookSvg");
+const $svg = $("#bookSvg");
 const NS = "http://www.w3.org/2000/svg";

 const svgWidth = 200;
@@ -48,27 +48,27 @@ const disappearDuration =
 const pauseDuration = 30;

 const book = document.createElementNS(NS, "rect");
-book.setAttribute("x", bookX);
-book.setAttribute("y", bookY);
-book.setAttribute("width", bookWidth);
-book.setAttribute("height", bookHeight);
-book.setAttribute("fill", "#374151");
-book.setAttribute("rx", "4");
-svg.appendChild(book);
+$(book)
+  .attr("x", bookX)
+  .attr("y", bookY)
+  .attr("width", bookWidth)
+  .attr("height", bookHeight)
+  .attr("fill", "#374151")
+  .attr("rx", "4");
+$svg.append(book);

 const lines = [];
 for (let i = 0; i < lineCount; i++) {
  const line = document.createElementNS(NS, "rect");
-  line.setAttribute("fill", "#ffffff");
-  line.setAttribute("rx", "1");
-  svg.appendChild(line);
+  $(line).attr("fill", "#ffffff").attr("rx", "1");
+  $svg.append(line);

  const baseX = lineStartX + i * lineSpacing;
  const targetX = leftLimit + i * lineSpacing;
  const moveDistance = baseX - targetX;

  lines.push({
-    el: line,
+    el: $(line),
    baseX,
    targetX,
    moveDistance,
@@ -91,13 +91,14 @@ function easeInQuad(t) {
 }

 function updateLine(line) {
-  const el = line.el;
+  const $el = line.el;
  const centerY = bookY + bookHeight / 2;

-  el.setAttribute("x", line.currentX);
-  el.setAttribute("y", centerY - line.height / 2);
-  el.setAttribute("width", line.width);
-  el.setAttribute("height", Math.max(0, line.height));
+  $el
+    .attr("x", line.currentX)
+    .attr("y", centerY - line.height / 2)
+    .attr("width", line.width)
+    .attr("height", Math.max(0, line.height));
 }

 function animateBook() {
@@ -171,7 +172,7 @@ function animateBook() {

 animateBook();

-function animateCounter(element, target, duration = 2000) {
+function animateCounter($element, target, duration = 2000) {
  const start = 0;
  const startTime = performance.now();

@@ -182,12 +183,12 @@ function animateCounter(element, target, duration = 2000) {
    const easedProgress = 1 - Math.pow(1 - progress, 3);
    const current = Math.floor(start + (target - start) * easedProgress);

-    element.textContent = current.toLocaleString("ru-RU");
+    $element.text(current.toLocaleString("ru-RU"));

    if (progress < 1) {
      requestAnimationFrame(update);
    } else {
-      element.textContent = target.toLocaleString("ru-RU");
+      $element.text(target.toLocaleString("ru-RU"));
    }
  }

@@ -204,71 +205,180 @@ async function loadStats() {
    const stats = await response.json();

    setTimeout(() => {
-      const booksEl = document.getElementById("stat-books");
-      const authorsEl = document.getElementById("stat-authors");
-      const genresEl = document.getElementById("stat-genres");
-      const usersEl = document.getElementById("stat-users");
+      const $booksEl = $("#stat-books");
+      const $authorsEl = $("#stat-authors");
+      const $genresEl = $("#stat-genres");
+      const $usersEl = $("#stat-users");

-      if (booksEl) {
-        animateCounter(booksEl, stats.books, 1500);
+      if ($booksEl.length) {
+        animateCounter($booksEl, stats.books, 1500);
      }

      setTimeout(() => {
-        if (authorsEl) {
-          animateCounter(authorsEl, stats.authors, 1500);
+        if ($authorsEl.length) {
+          animateCounter($authorsEl, stats.authors, 1500);
        }
      }, 150);

      setTimeout(() => {
-        if (genresEl) {
-          animateCounter(genresEl, stats.genres, 1500);
+        if ($genresEl.length) {
+          animateCounter($genresEl, stats.genres, 1500);
        }
      }, 300);

      setTimeout(() => {
-        if (usersEl) {
-          animateCounter(usersEl, stats.users, 1500);
+        if ($usersEl.length) {
+          animateCounter($usersEl, stats.users, 1500);
        }
      }, 450);
    }, 500);
  } catch (error) {
    console.error("Ошибка загрузки статистики:", error);

-    document.getElementById("stat-books").textContent = "—";
-    document.getElementById("stat-authors").textContent = "—";
-    document.getElementById("stat-genres").textContent = "—";
-    document.getElementById("stat-users").textContent = "—";
+    $("#stat-books").text("—");
+    $("#stat-authors").text("—");
+    $("#stat-genres").text("—");
+    $("#stat-users").text("—");
  }
 }

 function observeStatCards() {
-  const cards = document.querySelectorAll(".stat-card");
+  const $cards = $(".stat-card");

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
-            entry.target.classList.add("animate-fade-in");
-            entry.target.style.opacity = "1";
-            entry.target.style.transform = "translateY(0)";
+            $(entry.target)
+              .addClass("animate-fade-in")
+              .css({
+                opacity: "1",
+                transform: "translateY(0)",
+              });
          }, index * 100);
          observer.unobserve(entry.target);
        }
      });
    },
-    { threshold: 0.1 },
+    { threshold: 0.1 }
  );

-  cards.forEach((card) => {
-    card.style.opacity = "0";
-    card.style.transform = "translateY(20px)";
-    card.style.transition = "opacity 0.5s ease, transform 0.5s ease";
+  $cards.each((index, card) => {
+    $(card).css({
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 0.5s ease, transform 0.5s ease",
+    });
    observer.observe(card);
  });
 }

-document.addEventListener("DOMContentLoaded", () => {
+$(document).ready(() => {
  loadStats();
  observeStatCards();
+
+  const $guestLink = $("#guest-link");
+  const $userBtn = $("#user-btn");
+  const $userDropdown = $("#user-dropdown");
+  const $userArrow = $("#user-arrow");
+  const $userAvatar = $("#user-avatar");
+  const $dropdownName = $("#dropdown-name");
+  const $dropdownUsername = $("#dropdown-username");
+  const $dropdownEmail = $("#dropdown-email");
+  const $logoutBtn = $("#logout-btn");
+
+  let isDropdownOpen = false;
+
+  function openDropdown() {
+    isDropdownOpen = true;
+    $userDropdown.removeClass("hidden");
+    $userArrow.addClass("rotate-180");
+  }
+
+  function closeDropdown() {
+    isDropdownOpen = false;
+    $userDropdown.addClass("hidden");
+    $userArrow.removeClass("rotate-180");
+  }
+
+  $userBtn.on("click", function (e) {
+    e.stopPropagation();
+    isDropdownOpen ? closeDropdown() : openDropdown();
+  });
+
+  $(document).on("click", function (e) {
+    if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+      closeDropdown();
+    }
+  });
+
+  $(document).on("keydown", function (e) {
+    if (e.key === "Escape" && isDropdownOpen) {
+      closeDropdown();
+    }
+  });
+
+  $logoutBtn.on("click", function () {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    window.location.reload();
+  });
+
+  function showGuest() {
+    $guestLink.removeClass("hidden");
+    $userBtn.addClass("hidden").removeClass("flex");
+    closeDropdown();
+  }
+
+  function showUser(user) {
+    $guestLink.addClass("hidden");
+    $userBtn.removeClass("hidden").addClass("flex");
+
+    const displayName = user.full_name || user.username;
+    const firstLetter = displayName.charAt(0).toUpperCase();
+
+    $userAvatar.text(firstLetter);
+    $dropdownName.text(displayName);
+    $dropdownUsername.text("@" + user.username);
+    $dropdownEmail.text(user.email);
+  }
+
+  function updateUserAvatar(email) {
+    if (!email) return;
+    const cleanEmail = email.trim().toLowerCase();
+    const emailHash = sha256(cleanEmail);
+
+    const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+    const avatarImg = document.getElementById("user-avatar");
+    if (avatarImg) {
+      avatarImg.src = avatarUrl;
+    }
+  }
+
+  const token = localStorage.getItem("access_token");
+
+  if (!token) {
+    showGuest();
+  } else {
+    fetch("/api/auth/me", {
+      headers: { Authorization: "Bearer " + token },
+    })
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error("Unauthorized");
+      })
+      .then((user) => {
+        showUser(user);
+        updateUserAvatar(user.email);
+
+        document.getElementById("user-btn").classList.remove("hidden");
+        document.getElementById("guest-link").classList.add("hidden");
+      })
+      .catch(() => {
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+        showGuest();
+      });
+  }
 });
@@ -0,0 +1,509 @@
+$(document).ready(() => {
+    let currentUser = null;
+    let allRoles = [];
+    
+    const token = localStorage.getItem("access_token");
+  
+    if (!token) {
+      window.location.href = "/login";
+      return;
+    }
+  
+    loadProfile();
+  
+    function loadProfile() {
+      showLoadingState();
+  
+      Promise.all([
+        fetch("/api/auth/me", {
+          headers: { Authorization: "Bearer " + token },
+        }).then((response) => {
+          if (!response.ok) {
+            if (response.status === 401) {
+              throw new Error("Unauthorized");
+            }
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+          return response.json();
+        }),
+        fetch("/api/auth/roles", {
+          headers: { Authorization: "Bearer " + token },
+        }).then((response) => {
+          if (response.ok) return response.json();
+          return { roles: [] };
+        }),
+      ])
+        .then(([user, rolesData]) => {
+          currentUser = user;
+          allRoles = rolesData.roles || [];
+          renderProfile(user);
+          renderAccountInfo(user);
+          renderRoles(user.roles, allRoles);
+          renderActions();
+          document.title = `LiB - ${user.full_name || user.username}`;
+        })
+        .catch((error) => {
+          console.error("Error loading profile:", error);
+          if (error.message === "Unauthorized") {
+            localStorage.removeItem("access_token");
+            localStorage.removeItem("refresh_token");
+            window.location.href = "/login";
+          } else {
+            showErrorState(error.message);
+          }
+        });
+    }
+  
+    function renderProfile(user) {
+      const $card = $("#profile-card");
+      const displayName = user.full_name || user.username;
+      const firstLetter = displayName.charAt(0).toUpperCase();
+  
+      const emailHash = sha256(user.email.trim().toLowerCase());
+      const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+  
+      $card.html(`
+        <div class="flex flex-col sm:flex-row items-center sm:items-start">
+          <!-- Аватар -->
+          <div class="relative mb-4 sm:mb-0 sm:mr-6">
+            <img src="${avatarUrl}" alt="Аватар" 
+              class="w-24 h-24 rounded-full object-cover border-4 border-gray-200"
+              onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+            <div class="w-24 h-24 bg-gray-500 text-white rounded-full items-center justify-center text-4xl font-bold hidden">
+              ${firstLetter}
+            </div>
+            <!-- Статус верификации -->
+            ${user.is_verified ? `
+              <div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1" title="Подтверждённый аккаунт">
+                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
+                </svg>
+              </div>
+            ` : ''}
+          </div>
+          
+          <!-- Информация -->
+          <div class="flex-1 text-center sm:text-left">
+            <h1 class="text-2xl font-bold text-gray-900 mb-1">${escapeHtml(displayName)}</h1>
+            <p class="text-gray-500 mb-3">@${escapeHtml(user.username)}</p>
+            
+            <!-- Статусы -->
+            <div class="flex flex-wrap justify-center sm:justify-start gap-2">
+              ${user.is_active ? `
+                <span class="inline-flex items-center bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">
+                  <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                  Активен
+                </span>
+              ` : `
+                <span class="inline-flex items-center bg-red-100 text-red-800 text-sm px-3 py-1 rounded-full">
+                  <span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
+                  Заблокирован
+                </span>
+              `}
+              ${user.is_verified ? `
+                <span class="inline-flex items-center bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">
+                  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+                  </svg>
+                  Подтверждён
+                </span>
+              ` : `
+                <span class="inline-flex items-center bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">
+                  <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+                  </svg>
+                  Не подтверждён
+                </span>
+              `}
+            </div>
+          </div>
+        </div>
+      `);
+    }
+  
+    function renderAccountInfo(user) {
+      const $container = $("#account-container");
+  
+      $container.html(`
+        <div class="space-y-4">
+          <!-- ID пользователя -->
+            <div class="flex items-center justify-between py-3 border-b border-gray-100">
+              <div class="flex items-center">
+                <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
+                </svg>
+                <div>
+                  <p class="text-sm text-gray-500">ID пользователя</p>
+                  <p class="text-gray-900">${user.id}</p>
+                </div>
+            </div>
+          </div>
+          <!-- Имя пользователя -->
+          <div class="flex items-center justify-between py-3 border-b border-gray-100">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+              </svg>
+              <div>
+                <p class="text-sm text-gray-500">Имя пользователя</p>
+                <p class="text-gray-900">@${escapeHtml(user.username)}</p>
+              </div>
+            </div>
+          </div>
+  
+          <!-- Полное имя -->
+          <div class="flex items-center justify-between py-3 border-b border-gray-100">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/>
+              </svg>
+              <div>
+                <p class="text-sm text-gray-500">Полное имя</p>
+                <p class="text-gray-900">${escapeHtml(user.full_name || "Не указано")}</p>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Email -->
+          <div class="flex items-center justify-between py-3">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+              </svg>
+              <div>
+                <p class="text-sm text-gray-500">Email</p>
+                <p class="text-gray-900">${escapeHtml(user.email)}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      `);
+    }
+  
+    function renderRoles(userRoles, allRoles) {
+      const $container = $("#roles-container");
+  
+      if (!userRoles || userRoles.length === 0) {
+        $container.html(`
+          <p class="text-gray-500">У вас нет назначенных ролей</p>
+        `);
+        return;
+      }
+  
+      const roleDescriptions = {};
+      allRoles.forEach((role) => {
+        roleDescriptions[role.name] = role.description;
+      });
+  
+      const roleIcons = {
+        admin: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
+        </svg>`,
+        librarian: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+        </svg>`,
+        member: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+        </svg>`,
+      };
+  
+      const roleColors = {
+        admin: "bg-red-100 text-red-800 border-red-200",
+        librarian: "bg-blue-100 text-blue-800 border-blue-200",
+        member: "bg-green-100 text-green-800 border-green-200",
+      };
+    
+      let rolesHtml = '<div class="space-y-3">';
+    
+      userRoles.forEach((roleName) => {
+        const description = roleDescriptions[roleName] || "Описание недоступно";
+        const icon = roleIcons[roleName] || roleIcons.member;
+        const colorClass = roleColors[roleName] || roleColors.member;
+    
+        rolesHtml += `
+          <div class="flex items-center p-4 rounded-lg border ${colorClass}">
+            <div class="flex-shrink-0 mr-4">
+              ${icon}
+            </div>
+            <div>
+              <h4 class="font-medium capitalize">${escapeHtml(roleName)}</h4>
+              <p class="text-sm opacity-75">${escapeHtml(description)}</p>
+            </div>
+          </div>
+        `;
+      });
+    
+      rolesHtml += '</div>';
+  
+      $container.html(rolesHtml);
+    }
+  
+    function renderActions() {
+      const $container = $("#actions-container");
+  
+      $container.html(`
+        <div class="space-y-3">
+          <!-- Смена пароля -->
+          <button id="change-password-btn" class="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
+              </svg>
+              <span class="text-gray-700">Сменить пароль</span>
+            </div>
+            <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </button>
+  
+          <!-- Выход -->
+          <button id="logout-profile-btn" class="w-full flex items-center justify-between p-4 bg-red-50 hover:bg-red-100 rounded-lg transition-colors">
+            <div class="flex items-center">
+              <svg class="w-5 h-5 text-red-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+              </svg>
+              <span class="text-red-700">Выйти из аккаунта</span>
+            </div>
+            <svg class="w-5 h-5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+          </button>
+        </div>
+      `);
+  
+      $("#change-password-btn").on("click", openPasswordModal);
+      $("#logout-profile-btn").on("click", logout);
+    }
+  
+    function openPasswordModal() {
+      $("#password-modal").removeClass("hidden").addClass("flex");
+      $("#current-password").focus();
+    }
+  
+    function closePasswordModal() {
+      $("#password-modal").removeClass("flex").addClass("hidden");
+      $("#password-form")[0].reset();
+      $("#password-error").addClass("hidden").text("");
+    }
+  
+    $("#close-password-modal, #cancel-password").on("click", closePasswordModal);
+  
+    $("#password-modal").on("click", function (e) {
+      if (e.target === this) {
+        closePasswordModal();
+      }
+    });
+  
+    $(document).on("keydown", function (e) {
+      if (e.key === "Escape" && $("#password-modal").hasClass("flex")) {
+        closePasswordModal();
+      }
+    });
+  
+    $("#password-form").on("submit", function (e) {
+      e.preventDefault();
+  
+      const currentPassword = $("#current-password").val();
+      const newPassword = $("#new-password").val();
+      const confirmPassword = $("#confirm-password").val();
+      const $error = $("#password-error");
+  
+      if (newPassword !== confirmPassword) {
+        $error.text("Пароли не совпадают").removeClass("hidden");
+        return;
+      }
+  
+      if (newPassword.length < 6) {
+        $error.text("Пароль должен содержать минимум 6 символов").removeClass("hidden");
+        return;
+      }
+  
+      // TODO: смена пароля, 2FA
+      // fetch("/api/auth/change-password", {
+      //   method: "POST",
+      //   headers: {
+      //     "Content-Type": "application/json",
+      //     Authorization: "Bearer " + token,
+      //   },
+      //   body: JSON.stringify({
+      //     current_password: currentPassword,
+      //     new_password: newPassword,
+      //   }),
+      // })
+      //   .then((response) => {
+      //     if (!response.ok) throw new Error("Ошибка смены пароля");
+      //     return response.json();
+      //   })
+      //   .then(() => {
+      //     closePasswordModal();
+      //     showNotification("Пароль успешно изменён", "success");
+      //   })
+      //   .catch((error) => {
+      //     $error.text(error.message).removeClass("hidden");
+      //   });
+  
+      $error.text("Функция смены пароля временно недоступна").removeClass("hidden");
+    });
+  
+    function logout() {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      window.location.href = "/login";
+    }
+  
+    function showLoadingState() {
+      const $profileCard = $("#profile-card");
+      const $accountContainer = $("#account-container");
+      const $rolesContainer = $("#roles-container");
+      const $actionsContainer = $("#actions-container");
+  
+      $profileCard.html(`
+        <div class="flex flex-col sm:flex-row items-center sm:items-start animate-pulse">
+          <div class="w-24 h-24 bg-gray-200 rounded-full mb-4 sm:mb-0 sm:mr-6"></div>
+          <div class="flex-1 text-center sm:text-left">
+            <div class="h-7 bg-gray-200 rounded w-48 mx-auto sm:mx-0 mb-2"></div>
+            <div class="h-5 bg-gray-200 rounded w-32 mx-auto sm:mx-0 mb-3"></div>
+            <div class="flex justify-center sm:justify-start gap-2">
+              <div class="h-7 bg-gray-200 rounded-full w-20"></div>
+              <div class="h-7 bg-gray-200 rounded-full w-28"></div>
+            </div>
+          </div>
+        </div>
+      `);
+  
+      $accountContainer.html(`
+        <div class="space-y-4 animate-pulse">
+          ${Array(4)
+            .fill()
+            .map(
+              () => `
+            <div class="flex items-center py-3 border-b border-gray-100">
+              <div class="w-5 h-5 bg-gray-200 rounded mr-3"></div>
+              <div>
+                <div class="h-3 bg-gray-200 rounded w-16 mb-2"></div>
+                <div class="h-4 bg-gray-200 rounded w-40"></div>
+              </div>
+            </div>
+          `
+            )
+            .join("")}
+        </div>
+      `);
+  
+      $rolesContainer.html(`
+        <div class="space-y-3 animate-pulse">
+          <div class="h-16 bg-gray-200 rounded-lg"></div>
+        </div>
+      `);
+  
+      $actionsContainer.html(`
+        <div class="space-y-3 animate-pulse">
+          <div class="h-14 bg-gray-200 rounded-lg"></div>
+          <div class="h-14 bg-gray-200 rounded-lg"></div>
+        </div>
+      `);
+    }
+  
+    function showErrorState(message) {
+      const $profileCard = $("#profile-card");
+      const $accountSection = $("#account-section");
+      const $rolesSection = $("#roles-section");
+      const $actionsSection = $("#actions-section");
+  
+      $accountSection.hide();
+      $rolesSection.hide();
+      $actionsSection.hide();
+  
+      $profileCard.html(`
+        <div class="text-center py-8">
+          <svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+          </svg>
+          <h3 class="text-xl font-medium text-gray-900 mb-2">${escapeHtml(message)}</h3>
+          <p class="text-gray-500 mb-6">Не удалось загрузить профиль</p>
+          <div class="flex justify-center gap-4">
+            <button id="retry-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors">
+              Попробовать снова
+            </button>
+            <a href="/" class="bg-white text-gray-700 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
+              На главную
+            </a>
+          </div>
+        </div>
+      `);
+  
+      $("#retry-btn").on("click", function () {
+        $accountSection.show();
+        $rolesSection.show();
+        $actionsSection.show();
+        loadProfile();
+      });
+    }
+  
+    function escapeHtml(text) {
+      if (!text) return "";
+      const div = document.createElement("div");
+      div.textContent = text;
+      return div.innerHTML;
+    }
+  
+    const $guestLink = $("#guest-link");
+    const $userBtn = $("#user-btn");
+    const $userDropdown = $("#user-dropdown");
+    const $userArrow = $("#user-arrow");
+    const $userAvatar = $("#user-avatar");
+    const $dropdownName = $("#dropdown-name");
+    const $dropdownUsername = $("#dropdown-username");
+    const $dropdownEmail = $("#dropdown-email");
+    const $logoutBtn = $("#logout-btn");
+  
+    let isDropdownOpen = false;
+  
+    function openDropdown() {
+      isDropdownOpen = true;
+      $userDropdown.removeClass("hidden");
+      $userArrow.addClass("rotate-180");
+    }
+  
+    function closeDropdown() {
+      isDropdownOpen = false;
+      $userDropdown.addClass("hidden");
+      $userArrow.removeClass("rotate-180");
+    }
+  
+    $userBtn.on("click", function (e) {
+      e.stopPropagation();
+      isDropdownOpen ? closeDropdown() : openDropdown();
+    });
+  
+    $(document).on("click", function (e) {
+      if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+        closeDropdown();
+      }
+    });
+  
+    $logoutBtn.on("click", logout);
+  
+    function showGuest() {
+      $guestLink.removeClass("hidden");
+      $userBtn.addClass("hidden").removeClass("flex");
+      closeDropdown();
+    }
+  
+    function showUser(user) {
+      $guestLink.addClass("hidden");
+      $userBtn.removeClass("hidden").addClass("flex");
+  
+      const displayName = user.full_name || user.username;
+      const firstLetter = displayName.charAt(0).toUpperCase();
+  
+      $userAvatar.text(firstLetter);
+      $dropdownName.text(displayName);
+      $dropdownUsername.text("@" + user.username);
+      $dropdownEmail.text(user.email);
+    }
+
+    if (currentUser) {
+      showUser(currentUser);
+    }
+  });
@@ -243,3 +243,10 @@ button:disabled {
    -webkit-text-fill-color: transparent;
    background-clip: text;
 }
+
+.line-clamp-3 {
+display: -webkit-box;
+-webkit-line-clamp: 3;
+-webkit-box-orient: vertical;
+overflow: hidden;
+}
@@ -0,0 +1,16 @@
+{% extends "base.html" %} {% block title %}LiB - Автор{% endblock %} {% block
+content %}
+<div class="flex flex-1 mt-4 p-4">
+    <main class="flex-1 max-w-4xl mx-auto">
+        <div id="author-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
+        </div>
+        <div id="books-section" class="bg-white p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-semibold mb-4">Книги автора</h2>
+            <div id="books-container">
+            </div>
+        </div>
+    </main>
+</div>
+{% endblock %} {% block scripts %}
+<script type="text/javascript" src="/static/author.js"></script>
+{% endblock %}
@@ -0,0 +1,72 @@
+{% extends "base.html" %} {% block title %}LiB - Авторы{% endblock %} {% block
+content %}
+<div class="flex flex-1 mt-4 p-4">
+    <aside
+        class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96"
+    >
+        <h2 class="text-xl font-semibold mb-4">Поиск</h2>
+        <div class="relative mb-4">
+            <input
+                type="text"
+                id="author-search-input"
+                class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
+                placeholder="Поиск авторов..."
+                maxlength="50"
+            />
+            <svg
+                class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                />
+            </svg>
+        </div>
+        <h2 class="text-xl font-semibold mb-4">Сортировка</h2>
+        <div class="mb-4">
+            <div class="space-y-2">
+                <label class="flex items-center cursor-pointer">
+                    <input
+                        type="radio"
+                        name="sort"
+                        value="name_asc"
+                        checked
+                        class="w-4 h-4 text-gray-500 focus:ring-gray-500"
+                    />
+                    <span class="ml-2 text-gray-700">По имени (А-Я)</span>
+                </label>
+                <label class="flex items-center cursor-pointer">
+                    <input
+                        type="radio"
+                        name="sort"
+                        value="name_desc"
+                        class="w-4 h-4 text-gray-500 focus:ring-gray-500"
+                    />
+                    <span class="ml-2 text-gray-700">По имени (Я-А)</span>
+                </label>
+            </div>
+        </div>
+        <button
+            id="reset-filters-btn"
+            class="w-full bg-white text-gray-500 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition duration-200"
+        >
+            Сбросить
+        </button>
+        <div
+            id="results-counter"
+            class="mt-4 text-center text-sm text-gray-500"
+        ></div>
+    </aside>
+    <main class="flex-1">
+        <div id="authors-container"></div>
+        <div id="pagination-container"></div>
+    </main>
+</div>
+{% endblock %} {% block scripts %}
+<script type="text/javascript" src="/static/authors.js"></script>
+{% endblock %}
@@ -21,6 +21,7 @@
                    <ul class="flex space-x-4">
                        <li><a href="/" class="hover:text-gray-200">Главная</a></li>
                        <li><a href="/books" class="hover:text-gray-200">Книги</a></li>
+                        <li><a href="/authors" class="hover:text-gray-200">Авторы</a></li>
                        <li><a href="/about" class="hover:text-gray-200">О нас</a></li>
                        <li><a href="/api" class="hover:text-gray-200">API</a></li>
                    </ul>
@@ -0,0 +1,21 @@
+{% extends "base.html" %} {% block title %}LiB - Книга{% endblock %} {% block
+content %}
+<div class="flex flex-1 mt-4 p-4">
+    <main class="flex-1 max-w-4xl mx-auto">
+        <div id="book-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
+        </div>
+        <div id="authors-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
+            <h2 class="text-xl font-semibold mb-4">Авторы</h2>
+            <div id="authors-container">
+            </div>
+        </div>
+        <div id="genres-section" class="bg-white p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-semibold mb-4">Жанры</h2>
+            <div id="genres-container">
+            </div>
+        </div>
+    </main>
+</div>
+{% endblock %} {% block scripts %}
+<script type="text/javascript" src="/static/book.js"></script>
+{% endblock %}
@@ -0,0 +1,69 @@
+{% extends "base.html" %} {% block title %}LiB - Профиль{% endblock %} {% block
+content %}
+
+<div class="flex flex-1 mt-4 p-4">
+    <main class="flex-1 max-w-2xl mx-auto">
+        <div id="profile-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
+        </div>
+        <div id="account-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
+            <h2 class="text-xl font-semibold mb-4">Информация об аккаунте</h2>
+            <div id="account-container">
+            </div>
+        </div>
+        <div id="roles-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
+            <h2 class="text-xl font-semibold mb-4">Роли и права</h2>
+            <div id="roles-container">
+            </div>
+        </div>
+        <div id="actions-section" class="bg-white p-6 rounded-lg shadow-md">
+            <h2 class="text-xl font-semibold mb-4">Действия</h2>
+            <div id="actions-container">
+            </div>
+        </div>
+    </main>
+</div>
+<div id="password-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
+    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
+        <div class="flex justify-between items-center mb-4">
+            <h3 class="text-xl font-semibold">Смена пароля</h3>
+            <button id="close-password-modal" class="text-gray-400 hover:text-gray-600">
+                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+            </button>
+        </div>
+        <form id="password-form">
+            <div class="mb-4">
+                <label class="block text-gray-700 text-sm font-medium mb-2">Текущий пароль</label>
+                <input type="password" id="current-password" 
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
+                    required minlength="6">
+            </div>
+            <div class="mb-4">
+                <label class="block text-gray-700 text-sm font-medium mb-2">Новый пароль</label>
+                <input type="password" id="new-password" 
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
+                    required minlength="6">
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-700 text-sm font-medium mb-2">Подтвердите новый пароль</label>
+                <input type="password" id="confirm-password" 
+                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
+                    required minlength="6">
+            </div>
+            <div id="password-error" class="mb-4 text-red-600 text-sm hidden"></div>
+            <div class="flex gap-3">
+                <button type="submit" class="flex-1 bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-colors">
+                    Сменить пароль
+                </button>
+                <button type="button" id="cancel-password" class="flex-1 bg-white text-gray-700 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
+                    Отмена
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+{% endblock %} {% block scripts %}
+<script type="text/javascript" src="/static/profile.js"></script>
+{% endblock %}
@@ -20,6 +20,7 @@ if config.config_file_name is not None:

 # add your model's MetaData object here
 # for 'autogenerate' support
+from library_service.models.enums import *
 from library_service.models.db import *

 target_metadata = SQLModel.metadata
@@ -0,0 +1,51 @@
+"""Loans
+
+Revision ID: 02ed6e775351
+Revises: b838606ad8d1
+Create Date: 2025-12-20 10:36:30.853896
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+import sqlmodel
+
+
+# revision identifiers, used by Alembic.
+revision: str = '02ed6e775351'
+down_revision: Union[str, None] = 'b838606ad8d1'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    book_status_enum = sa.Enum('active', 'borrowed', 'reserved', 'restoration', 'written_off', name='bookstatus')
+    book_status_enum.create(op.get_bind())
+    op.create_table('book_loans',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('book_id', sa.Integer(), nullable=False),
+    sa.Column('user_id', sa.Integer(), nullable=False),
+    sa.Column('borrowed_at', sa.DateTime(), nullable=False),
+    sa.Column('due_date', sa.DateTime(), nullable=False),
+    sa.Column('returned_at', sa.DateTime(), nullable=True),
+    sa.ForeignKeyConstraint(['book_id'], ['book.id'], ),
+    sa.ForeignKeyConstraint(['user_id'], ['users.id'], ),
+    sa.PrimaryKeyConstraint('id')
+    )
+    op.create_index(op.f('ix_book_loans_id'), 'book_loans', ['id'], unique=False)
+    op.add_column('book', sa.Column('status', book_status_enum, nullable=False, server_default='active'))
+    op.drop_index(op.f('ix_roles_name'), table_name='roles')
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_index(op.f('ix_roles_name'), 'roles', ['name'], unique=True)
+    op.drop_column('book', 'status')
+    op.drop_index(op.f('ix_book_loans_id'), table_name='book_loans')
+    op.drop_table('book_loans')
+    book_status_enum = sa.Enum('active', 'borrowed', 'reserved', 'restoration', 'written_off', name='bookstatus')
+    book_status_enum.drop(op.get_bind())
+    # ### end Alembic commands ###
@@ -1,4 +1,4 @@
-"""genres
+"""Genres

 Revision ID: 9d7a43ac5dfc
 Revises: d266fdc61e99
@@ -1,4 +1,4 @@
-"""auth
+"""Auth

 Revision ID: b838606ad8d1
 Revises: 9d7a43ac5dfc
@@ -1,4 +1,4 @@
-"""init
+"""Init

 Revision ID: d266fdc61e99
 Revises:
Author	SHA1	Message	Date
wowlikon	09b7cb17a5	Добавление выдач	2025-12-20 11:06:13 +03:00
wowlikon	3473c31f73	Добавление страницы профиля	2025-12-20 09:59:16 +03:00
wowlikon	a3203d713d	Доабвлеие страниц на фронтэнде	2025-12-20 09:25:00 +03:00