LibraryAPI/library_service/templates/create_book.html

{% extends "base.html" %}{% block content %}
<style>
    .typing-cursor::after {
        content: '▋';
        display: inline-block;
        vertical-align: bottom;
        animation: blink 1s step-end infinite;
        margin-left: 2px;
        opacity: 0.7;
    }
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    .fade-in {
        animation: fadeIn 0.3s ease-in-out forwards;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
</style>
<div class="container mx-auto p-4 max-w-3xl">
    <div class="bg-white rounded-lg shadow-md p-6 md:p-8">
        <div class="mb-8 border-b border-gray-100 pb-4">
            <h1
                class="text-2xl font-bold text-gray-800 flex items-center gap-3"
            >
                <svg
                    class="w-8 h-8 text-gray-600"
                    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>
                Добавить новую книгу
            </h1>
            <p class="text-gray-500 mt-2 text-sm ml-11">
                Заполните информацию о книге, укажите авторов и жанры.
            </p>
        </div>
        <form id="create-book-form" class="space-y-6">

          <div id="ai-widget" class="hidden border border-gray-200 rounded-lg overflow-hidden bg-white shadow-sm transition-shadow hover:shadow-md">
              <div class="bg-gray-50 border-b border-gray-200 px-4 py-2.5 flex justify-between items-center select-none">
                  <div class="flex items-center gap-2.5">
                      <div id="ai-logo" class="cursor-pointer p-1 bg-white border border-gray-200 rounded shadow-sm">
                        <svg class="w-5 h-5 text-gray-800" fill="currentColor" viewBox="0 0 24 24">
                            <rect x="2" y="19" width="20" height="3" rx="0.8" fill="currentColor" opacity="0.9"/>
                            <path d="M12 17V7c0 0-2.5-2-6-2-1.8 0-3 .4-3.5.6V17c.8-.3 2-.5 3.5-.5 3.2 0 6 1.5 6 1.5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                            <path d="M12 17V7c0 0 2.5-2 6-2 1.8 0 3 .4 3.5.6V17c-.8-.3-2-.5-3.5-.5-3.2 0-6 1.5-6 1.5z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                            <circle cx="12" cy="2.8" r="2" fill="currentColor"/>
                            <circle cx="7.5" cy="3.8" r="1" fill="currentColor"/>
                            <circle cx="16.5" cy="3.8" r="1" fill="currentColor"/>
                            <line x1="10.2" y1="3" x2="8.4" y2="3.6" stroke="currentColor" stroke-width="1"/>
                            <line x1="13.8" y1="3" x2="15.6" y2="3.6" stroke="currentColor" stroke-width="1"/>
                        </svg>
                      </div>
                      <span class="text-xs font-bold text-gray-700 tracking-[0.15em] uppercase">ИИ-помощник</span>
                  </div>
                  <div class="flex items-center gap-2">
                      <span class="text-[10px] font-mono uppercase text-gray-400" id="ai-status-text">Готов</span>
                      <span class="relative flex h-2 w-2">
                          <span id="ai-status-ping" class="hidden animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
                          <span id="ai-status-dot" class="relative inline-flex rounded-full h-2 w-2 bg-gray-300 transition-colors duration-300"></span>
                      </span>
                  </div>
              </div>

              <div id="ai-log-container" class="hidden border-b border-gray-100 bg-white max-h-80 overflow-y-auto">
                  <div id="ai-log-entries"></div>
              </div>

              <div class="flex relative bg-white">
                  <input
                      type="text"
                      id="ai-input"
                      class="flex-1 px-4 py-3.5 text-sm text-gray-900 placeholder-gray-400 bg-transparent focus:outline-none focus:bg-gray-50 transition-colors"
                      placeholder="Напишите задачу (например: 'Придумай драматичное описание')..."
                      autocomplete="off"
                  />
                  <div class="flex border-l border-gray-100 items-center">
                      <button type="button" id="ai-btn-stop"
                              class="hidden px-5 py-2 h-full bg-white text-red-600 text-xs font-bold tracking-widest hover:bg-red-50 transition-colors flex items-center gap-2">
                          <span>СТОП</span>
                          <span class="block w-2 h-2 bg-red-600 rounded-sm"></span>
                      </button>
                      <button type="button" id="ai-btn-run"
                              class="group px-6 py-2 h-full bg-white text-gray-900 text-xs font-bold tracking-widest hover:bg-gray-900 hover:text-white transition-all duration-300 flex items-center gap-2">
                          <span>СТАРТ</span>
                          <svg class="w-3 h-3 transition-transform group-hover:translate-x-0.5"
                               fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                          </svg>
                      </button>
                  </div>
              </div>
          </div>

            <div>
                <label
                    for="book-title"
                    class="block text-sm font-semibold text-gray-700 mb-2"
                >
                    Название книги <span class="text-red-500">*</span>
                </label>
                <input
                    type="text"
                    id="book-title"
                    name="title"
                    required
                    maxlength="255"
                    class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-400 transition"
                    placeholder="Название книги..."
                />
                <div class="flex justify-end mt-1">
                    <span id="title-counter" class="text-xs text-gray-400"
                        >0/255</span
                    >
                </div>
            </div>
            <div>
                <label
                    for="book-description"
                    class="block text-sm font-semibold text-gray-700 mb-2"
                >
                    Описание
                </label>
                <textarea
                    id="book-description"
                    name="description"
                    rows="5"
                    maxlength="2000"
                    class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-400 resize-none transition"
                    placeholder="Краткое описание сюжета..."
                ></textarea>
                <div class="flex justify-end mt-1">
                    <span id="desc-counter" class="text-xs text-gray-400"
                        >0/2000</span
                    >
                </div>
            </div>
            <div>
                <label
                    for="book-page-count"
                    class="block text-sm font-semibold text-gray-700 mb-2"
                >
                    Количество страниц
                </label>
                <input
                    type="number"
                    id="book-page-count"
                    name="page_count"
                    min="1"
                    class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-gray-400 transition"
                    placeholder="Укажите количество страниц"
                />
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="bg-white p-4 rounded-lg border border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700 mb-3">
                        Авторы
                    </h2>
                    <div
                        id="selected-authors-container"
                        class="flex flex-wrap gap-2 mb-3 min-h-[0px]"
                    ></div>
                    <div class="relative">
                        <input
                            type="text"
                            id="author-search-input"
                            placeholder="Поиск автора..."
                            class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400"
                            autocomplete="off"
                        />
                        <div
                            id="author-dropdown"
                            class="hidden absolute z-50 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto mt-1"
                        ></div>
                    </div>
                </div>
                <div class="bg-white p-4 rounded-lg border border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700 mb-3">
                        Жанры
                    </h2>
                    <div
                        id="selected-genres-container"
                        class="flex flex-wrap gap-2 mb-3 min-h-[0px]"
                    ></div>
                    <div class="relative">
                        <input
                            type="text"
                            id="genre-search-input"
                            placeholder="Поиск жанра..."
                            class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400"
                            autocomplete="off"
                        />
                        <div
                            id="genre-dropdown"
                            class="hidden absolute z-50 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto mt-1"
                        ></div>
                    </div>
                </div>
            </div>
            <div
                class="flex flex-col sm:flex-row gap-3 pt-6 border-t border-gray-100"
            >
                <button
                    type="submit"
                    id="submit-btn"
                    class="flex-1 flex justify-center items-center px-6 py-3 bg-green-600 text-white font-bold rounded-lg hover:bg-green-700 focus:outline-none focus:ring-4 focus:ring-green-300 transition disabled:opacity-50 disabled:cursor-not-allowed"
                >
                    <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 4v16m8-8H4"
                        />
                    </svg>
                    <span id="submit-text">Создать книгу</span>
                    <svg
                        id="loading-spinner"
                        class="hidden animate-spin ml-2 h-5 w-5 text-white"
                        fill="none"
                        viewBox="0 0 24 24"
                    >
                        <circle
                            class="opacity-25"
                            cx="12"
                            cy="12"
                            r="10"
                            stroke="currentColor"
                            stroke-width="4"
                        ></circle>
                        <path
                            class="opacity-75"
                            fill="currentColor"
                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        ></path>
                    </svg>
                </button>
                <a
                    href="/books"
                    class="flex-1 flex justify-center items-center px-6 py-3 bg-white border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition text-center"
                >
                    Отмена
                </a>
            </div>
        </form>
    </div>
</div>
<div
    id="success-modal"
    class="hidden fixed inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full z-50 flex items-center justify-center"
>
    <div
        class="relative p-5 border w-full max-w-md shadow-lg rounded-lg bg-white"
    >
        <div class="mt-3 text-center">
            <div
                class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4"
            >
                <svg
                    class="h-6 w-6 text-green-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M5 13l4 4L19 7"
                    ></path>
                </svg>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900">
                Книга успешно добавлена!
            </h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    Книга
                    <span
                        id="modal-book-title"
                        class="font-bold text-gray-800"
                    ></span>
                    сохранена в каталоге.
                </p>
            </div>
            <div class="flex gap-3 mt-4 justify-center">
                <a
                    id="modal-link-btn"
                    href="#"
                    class="px-4 py-2 bg-gray-600 text-white text-base font-medium rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
                >
                    Перейти к книге
                </a>
                <button
                    id="modal-close-btn"
                    class="px-4 py-2 bg-white text-gray-700 border border-gray-300 text-base font-medium rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-200"
                >
                    Создать ещё
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %} {% block scripts %}
<script src="/static/page/create_book.js"></script>
{% endblock %}