wowlikon/LibraryWEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
wowlikon
2025-12-07 23:02:18 +03:00
commit 35562bcb69
6 changed files with 443 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
index.html Normal file
View File

@@ -0,0 +1,245 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LiB</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="static/styles.css" />
</head>
<body class="flex flex-col min-h-screen bg-gray-100">
<!-- Header -->
<header class="bg-gray-500 text-white p-4 shadow-md">
<div class="mx-auto pl-5 pr-3 flex justify-between items-center">
<h1 class="text-2xl font-bold">LiB</h1>
<nav>
<ul class="flex space-x-4">
<li><a href="#" class="hover:text-gray-200">Home</a></li>
<li><a href="#" class="hover:text-gray-200">Products</a></li>
<li><a href="#" class="hover:text-gray-200">About</a></li>
<li><a href="#" class="hover:text-gray-200">Contact</a></li>
</ul>
</nav>
<img class="max-w-6 h-auto invert" src="static/avatar.svg">
</div>
</header>
<!-- Main -->
<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>
<!-- Authors -->
<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>
<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
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Автор 1"
>
Автор 1
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Автор 2"
>
Автор 2
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Автор 3"
>
Автор 3
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Автор 4"
>
Автор 4
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Автор 5"
>
Автор 5
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Джон Доу"
>
Джон Доу
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Джейн Смит"
>
Джейн Смит
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Алексей Иванов"
>
Алексей Иванов
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Мария Петрова"
>
Мария Петрова
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Сергей Сидоров"
>
Сергей Сидоров
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Анна Кузнецова"
>
Анна Кузнецова
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Дмитрий Васильев"
>
Дмитрий Васильев
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Елена Морозова"
>
Елена Морозова
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Иван Козлов"
>
Иван Козлов
</div>
<div
class="p-2 hover:bg-gray-100 cursor-pointer"
data-value="Ольга Новикова"
>
Ольга Новикова
</div>
</div>
</div>
</div>
<!-- Genres -->
<div class="mb-4">
<h3 class="font-medium mb-2">Жанры</h3>
<ul>
<li class="mb-1">
<label class="custom-checkbox flex items-center">
<input type="checkbox" />
<span class="checkmark"></span>
Фантастика
</label>
</li>
<li class="mb-1">
<label class="custom-checkbox flex items-center">
<input type="checkbox" />
<span class="checkmark"></span>
Детектив
</label>
</li>
<li class="mb-1">
<label class="custom-checkbox flex items-center">
<input type="checkbox" />
<span class="checkmark"></span>
Фэнтези
</label>
</li>
<li class="mb-1">
<label class="custom-checkbox flex items-center">
<input type="checkbox" />
<span class="checkmark"></span>
Роман
</label>
</li>
<li class="mb-1">
<label class="custom-checkbox flex items-center">
<input type="checkbox" />
<span class="checkmark"></span>
Научная литература
</label>
</li>
</ul>
</div>
<!-- Apply -->
<button
class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200"
>
Применить фильтры
</button>
</aside>
<!-- Main Area -->
<main class="flex-1">
<!-- Book Card 1 -->
<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.
</p>
</div>
<span class="text-lg font-semibold text-gray-600">$29.99</span>
</div>
<!-- Book Card 2 -->
<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!
</p>
</div>
<span class="text-lg font-semibold text-blue-600">$49.99</span>
</div>
<!-- Book Card 3 -->
<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.
</p>
</div>
<span class="text-lg font-semibold text-gray-600">$19.99</span>
</div>
</main>
</div>
<!-- Footer -->
<footer class="bg-gray-800 text-white p-4 mt-8">
<div class="container mx-auto text-center">
<p>&copy; 2023 My Awesome Store. All rights reserved.</p>
</div>
</footer>
<script type="text/javascript" src="static/script.js"></script>
</body>
</html>

9
static/avatar.svg Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.877014 7.49988C0.877014 3.84219 3.84216 0.877045 7.49985 0.877045C11.1575 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1575 14.1227 7.49985 14.1227C3.84216 14.1227 0.877014 11.1575 0.877014 7.49988ZM7.49985 1.82704C4.36683 1.82704 1.82701 4.36686 1.82701 7.49988C1.82701 8.97196 2.38774 10.3131 3.30727 11.3213C4.19074 9.94119 5.73818 9.02499 7.50023 9.02499C9.26206 9.02499 10.8093 9.94097 11.6929 11.3208C12.6121 10.3127 13.1727 8.97172 13.1727 7.49988C13.1727 4.36686 10.6328 1.82704 7.49985 1.82704ZM10.9818 11.9787C10.2839 10.7795 8.9857 9.97499 7.50023 9.97499C6.01458 9.97499 4.71624 10.7797 4.01845 11.9791C4.97952 12.7272 6.18765 13.1727 7.49985 13.1727C8.81227 13.1727 10.0206 12.727 10.9818 11.9787ZM5.14999 6.50487C5.14999 5.207 6.20212 4.15487 7.49999 4.15487C8.79786 4.15487 9.84999 5.207 9.84999 6.50487C9.84999 7.80274 8.79786 8.85487 7.49999 8.85487C6.20212 8.85487 5.14999 7.80274 5.14999 6.50487ZM7.49999 5.10487C6.72679 5.10487 6.09999 5.73167 6.09999 6.50487C6.09999 7.27807 6.72679 7.90487 7.49999 7.90487C8.27319 7.90487 8.89999 7.27807 8.89999 6.50487C8.89999 5.73167 8.27319 5.10487 7.49999 5.10487Z"
fill="#000000"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/dited.regular.ttf Normal file
View File

Binary file not shown.

BIN
static/novem.regular.ttf Normal file
View File

Binary file not shown.

107
static/script.js Normal file
View File

@@ -0,0 +1,107 @@
document.addEventListener("DOMContentLoaded", () => {
const authorSearchInput = document.getElementById(
"author-search-input"
);
const authorDropdown = document.getElementById("author-dropdown");
const selectedAuthorsContainer = document.getElementById(
"selected-authors-container"
);
const dropdownItems = authorDropdown.querySelectorAll('[data-value]');
let selectedAuthors = new Set();
// Function to update highlights in dropdown
const updateDropdownHighlights = () => {
dropdownItems.forEach(item => {
const value = item.dataset.value;
if (selectedAuthors.has(value)) {
item.classList.add('bg-blue-200');
} else {
item.classList.remove('bg-blue-200');
}
});
};
// Function to render selected authors
const renderSelectedAuthors = () => {
// Clear existing chips, but keep the input field
Array.from(selectedAuthorsContainer.children).forEach((child) => {
if (child.id !== "author-search-input") {
child.remove();
}
});
selectedAuthors.forEach((author) => {
const authorChip = document.createElement("span");
authorChip.className =
"flex items-center bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded-full";
authorChip.innerHTML = `
${author}
<button type="button" class="ml-1 inline-flex items-center p-0.5 text-sm text-blue-400 bg-transparent rounded-sm hover:bg-blue-200 hover:text-blue-900" data-author="${author}">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove author</span>
</button>
`;
selectedAuthorsContainer.insertBefore(
authorChip,
authorSearchInput
);
});
updateDropdownHighlights(); // Update highlights after rendering
authorSearchInput.focus(); // Keep focus on the input
};
// Handle input focus to show dropdown
authorSearchInput.addEventListener("focus", () => {
authorDropdown.classList.remove("hidden");
});
// Handle input for filtering
authorSearchInput.addEventListener('input', () => {
const query = authorSearchInput.value.toLowerCase();
dropdownItems.forEach(item => {
const text = item.textContent.toLowerCase();
item.style.display = text.includes(query) ? 'block' : 'none';
});
authorDropdown.classList.remove('hidden');
});
// Handle clicks outside to hide dropdown
document.addEventListener("click", (event) => {
if (
!selectedAuthorsContainer.contains(event.target) &&
!authorDropdown.contains(event.target)
) {
authorDropdown.classList.add("hidden");
}
});
// Handle author selection from dropdown
authorDropdown.addEventListener("click", (event) => {
const selectedValue = event.target.dataset.value;
if (selectedValue) {
if (selectedAuthors.has(selectedValue)) {
selectedAuthors.delete(selectedValue);
} else {
selectedAuthors.add(selectedValue);
}
authorSearchInput.value = ""; // Clear input after selection
renderSelectedAuthors();
// Keep dropdown open for further selections
}
});
// Handle removing selected author chip
selectedAuthorsContainer.addEventListener("click", (event) => {
if (event.target.closest("button")) {
const authorToRemove =
event.target.closest("button").dataset.author;
selectedAuthors.delete(authorToRemove);
renderSelectedAuthors();
}
});
// Initial render and highlights
renderSelectedAuthors();
});

82
static/styles.css Normal file
View File

@@ -0,0 +1,82 @@
@font-face {
font-family: 'Novem';
src: url('novem.regular.ttf') format('truetype');
}
@font-face {
font-family: 'Dited';
src: url('dited.regular.ttf') format('truetype');
}
h1 {
font-family: 'Novem', sans-serif;
letter-spacing: 10px;
}
nav ul li a {
font-family: 'Dited', sans-serif;
letter-spacing: 2.5px;
font-size: large;
}
/* Custom checkbox styles */
.custom-checkbox {
display: inline-block;
position: relative;
cursor: pointer;
font-size: 14px;
user-select: none;
}
.custom-checkbox input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
height: 18px;
width: 18px;
background-color: #fff;
border: 2px solid #d1d5db; /* gray-300 */
border-radius: 4px;
transition: all 0.2s ease;
display: inline-block;
margin-right: 8px;
}
.custom-checkbox:hover input ~ .checkmark {
border-color: #6b7280; /* gray-500 */
}
.custom-checkbox input:checked ~ .checkmark {
background-color: #6b7280; /* gray-500 */
border-color: #6b7280;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.custom-checkbox input:checked ~ .checkmark:after {
display: block;
}
.custom-checkbox .checkmark:after {
left: 6.5px;
top: 4px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#author-dropdown {
height: 500%;
}