init
This commit is contained in:
245
index.html
Normal file
245
index.html
Normal 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>© 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
9
static/avatar.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/dited.regular.ttf
Normal file
BIN
static/dited.regular.ttf
Normal file
Binary file not shown.
BIN
static/novem.regular.ttf
Normal file
BIN
static/novem.regular.ttf
Normal file
Binary file not shown.
107
static/script.js
Normal file
107
static/script.js
Normal 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
82
static/styles.css
Normal 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%;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user