mirror of
https://github.com/wowlikon/LiB.git
synced 2026-02-04 20:34:38 +00:00
300 lines
13 KiB
HTML
300 lines
13 KiB
HTML
{% extends "base.html" %} {% block title %}LiB - Книга{% endblock %}
|
||
{% block content %}
|
||
<div class="container mx-auto p-4 max-w-6xl">
|
||
<div id="book-card" class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<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"
|
||
></path>
|
||
</svg>
|
||
Вернуться к списку книг
|
||
</a>
|
||
<a
|
||
id="edit-book-btn"
|
||
href="#"
|
||
class="hidden p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
||
title="Редактировать книгу"
|
||
>
|
||
<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.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||
></path>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
<div
|
||
id="book-loader"
|
||
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 w-full">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div
|
||
id="book-content"
|
||
class="hidden flex flex-col md:flex-row items-start"
|
||
>
|
||
<div
|
||
class="flex flex-col items-center mb-6 md:mb-0 md:mr-8 flex-shrink-0 w-full md:w-auto"
|
||
>
|
||
<div
|
||
class="w-40 h-56 bg-gradient-to-br from-gray-400 to-gray-600 rounded-lg flex items-center justify-center shadow-md mb-4"
|
||
>
|
||
<svg
|
||
class="w-20 h-20 text-white opacity-80"
|
||
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"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div
|
||
id="book-status-container"
|
||
class="relative w-full flex justify-center z-10 mb-4"
|
||
></div>
|
||
<div id="book-actions-container" class="w-full"></div>
|
||
</div>
|
||
|
||
<div class="flex-1 w-full">
|
||
<div
|
||
class="flex flex-col md:flex-row md:items-start md:justify-between mb-2"
|
||
>
|
||
<h1
|
||
id="book-title"
|
||
class="text-3xl font-bold text-gray-900 leading-tight"
|
||
></h1>
|
||
<span
|
||
id="book-id"
|
||
class="hidden md:inline-block text-xs font-mono text-gray-400 mt-2 md:mt-0 md:ml-4"
|
||
></span>
|
||
</div>
|
||
<p
|
||
id="book-authors-text"
|
||
class="text-lg text-gray-600 font-medium mb-6"
|
||
></p>
|
||
<div class="prose prose-gray max-w-none mb-8">
|
||
<h3
|
||
class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-2"
|
||
>
|
||
Описание
|
||
</h3>
|
||
<p
|
||
id="book-description"
|
||
class="text-gray-700 leading-relaxed"
|
||
></p>
|
||
</div>
|
||
<div id="genres-section" class="mb-6 hidden">
|
||
<h3
|
||
class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-2"
|
||
>
|
||
Жанры
|
||
</h3>
|
||
<div
|
||
id="genres-container"
|
||
class="flex flex-wrap gap-2"
|
||
></div>
|
||
</div>
|
||
<div id="authors-section" class="mb-6 hidden">
|
||
<h3
|
||
class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-2"
|
||
>
|
||
Авторы (детально)
|
||
</h3>
|
||
<div
|
||
id="authors-container"
|
||
class="flex flex-wrap gap-3"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="loans-section" class="hidden bg-white rounded-lg shadow-md p-6">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-xl font-bold text-gray-900">Выдачи книги</h2>
|
||
<button
|
||
id="refresh-loans-btn"
|
||
class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
||
title="Обновить список выдач"
|
||
>
|
||
<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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div id="loans-container" class="space-y-3">
|
||
<div class="text-center text-gray-500 py-8">
|
||
Загрузка информации о выдачах...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
id="loan-modal"
|
||
class="hidden fixed inset-0 z-50 overflow-y-auto"
|
||
aria-labelledby="modal-title"
|
||
role="dialog"
|
||
aria-modal="true"
|
||
>
|
||
<div
|
||
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
|
||
>
|
||
<div
|
||
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||
aria-hidden="true"
|
||
></div>
|
||
<span
|
||
class="hidden sm:inline-block sm:align-middle sm:h-screen"
|
||
aria-hidden="true"
|
||
>​</span
|
||
>
|
||
<div
|
||
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
|
||
>
|
||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||
<div class="sm:flex sm:items-start">
|
||
<div
|
||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
|
||
>
|
||
<svg
|
||
class="h-6 w-6 text-blue-600"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M12 4v16m8-8H4"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div
|
||
class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full"
|
||
>
|
||
<h3
|
||
class="text-lg leading-6 font-medium text-gray-900"
|
||
id="modal-title"
|
||
>
|
||
Оформить выдачу книги
|
||
</h3>
|
||
<div class="mt-4">
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
id="user-search-input"
|
||
class="w-full border border-gray-300 rounded-md px-4 py-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||
placeholder="Поиск пользователя (имя, email)..."
|
||
/>
|
||
<svg
|
||
class="w-5 h-5 text-gray-400 absolute left-3 top-2.5"
|
||
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"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div
|
||
id="users-list-container"
|
||
class="mt-4 border border-gray-200 rounded-md max-h-60 overflow-y-auto divide-y divide-gray-100"
|
||
>
|
||
<div
|
||
class="p-4 text-center text-gray-500 text-sm"
|
||
>
|
||
Начните ввод для поиска...
|
||
</div>
|
||
</div>
|
||
<div class="mt-4">
|
||
<label
|
||
class="block text-sm font-medium text-gray-700"
|
||
>Срок возврата</label
|
||
>
|
||
<input
|
||
type="date"
|
||
id="loan-due-date"
|
||
class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 sm:text-sm"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
|
||
>
|
||
<button
|
||
type="button"
|
||
id="confirm-loan-btn"
|
||
disabled
|
||
class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed"
|
||
>
|
||
Выдать
|
||
</button>
|
||
<button
|
||
type="button"
|
||
id="cancel-loan-btn"
|
||
class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %} {% block scripts %}
|
||
<script src="/static/page/book.js"></script>
|
||
{% endblock %}
|