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>
|
||||
Reference in New Issue
Block a user