wowlikon/LibraryAPI
1
0
Fork 0
mirror of https://github.com/wowlikon/LiB.git synced 2026-02-04 04:31:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Исправление фильтров

Browse Source
This commit is contained in:
wowlikon
2025-12-20 00:39:48 +03:00
parent 345ff8f23f
commit 85b531e6e1
3 changed files with 218 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
library_service/templates/books.html
+73 -24
View File
@@ -1,66 +1,115 @@
{% extends "base.html" %}
{% block title %}LiB - Главная{% endblock %}
{% block content %}
{% 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">
<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="book-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="Поиск книг..."
/>
<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">
<h3 class="font-medium mb-2">Авторы</h3>
<div class="relative">
<div class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white" id="selected-authors-container">
<input type="text" id="author-search-input" class="flex-grow outline-none bg-transparent" placeholder="Начните вводить..." />
<div
class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white"
id="selected-authors-container"
>
<input
type="text"
id="author-search-input"
class="flex-grow outline-none bg-transparent"
placeholder="Начните вводить..."
/>
</div>
<div id="author-dropdown" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto"></div>
<div
id="author-dropdown"
class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto"
></div>
</div>
</div>
<div class="mb-4">
<h3 class="font-medium mb-2">Жанры</h3>
<ul id="genres-list"></ul>
</div>
<button class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200">
<button
id="apply-filters-btn"
class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200 mb-2"
>
Применить фильтры
</button>
<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>
</aside>
<main class="flex-1">
<div class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start">
<main class="flex-1" id="books-container">
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
>
<div>
<h3 class="text-lg font-bold mb-1">Product Title 1</h3>
<p class="text-gray-700 text-sm">
A short description of the product, highlighting its
key features and benefits.
A short description of the product, highlighting its key
features and benefits.
</p>
</div>
<span class="text-lg font-semibold text-gray-600">$29.99</span>
</div>
<div class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start">
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
>
<div>
<h3 class="text-lg font-bold mb-1">Product Title 2</h3>
<p class="text-gray-700 text-sm">
Another great product with amazing features. You'll
love it!
Another great product with amazing features. You'll love it!
</p>
</div>
<span class="text-lg font-semibold text-blue-600">$49.99</span>
</div>
<div class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start">
<div
class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
>
<div>
<h3 class="text-lg font-bold mb-1">Product Title 3</h3>
<p class="text-gray-700 text-sm">
This product is a must-have for every modern home.
High quality and durable.
This product is a must-have for every modern home. High
quality and durable.
</p>
</div>
<span class="text-lg font-semibold text-gray-600">$19.99</span>
</div>
</main>
</div>
{% endblock %}
{% block scripts %}
{% endblock %} {% block scripts %}
<script type="text/javascript" src="/static/books.js"></script>
{% endblock %}
{% endblock %}