Доабвлеие страниц на фронтэнде

library_service/templates/authors.html

@@ -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 %}