mirror of
https://github.com/wowlikon/LiB.git
synced 2026-02-04 04:31:09 +00:00
Добавление авторизации и улучшение качества кода
This commit is contained in:
@@ -0,0 +1,193 @@
|
||||
<!-- templates/auth.html -->
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}LiB - Авторизация{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex flex-1 items-center justify-center p-4">
|
||||
<div class="w-full max-w-md">
|
||||
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
||||
<div class="flex border-b border-gray-200">
|
||||
<button type="button" id="login-tab" class="flex-1 py-4 text-center font-medium transition duration-200 text-gray-700 bg-gray-50 border-b-2 border-gray-500">Вход</button>
|
||||
<button type="button" id="register-tab" class="flex-1 py-4 text-center font-medium transition duration-200 text-gray-400 hover:text-gray-600">Регистрация</button>
|
||||
</div>
|
||||
|
||||
<form id="login-form" class="p-6">
|
||||
<div class="mb-4">
|
||||
<label for="login-username" class="block text-sm font-medium text-gray-700 mb-2">Имя пользователя</label>
|
||||
<input
|
||||
type="text"
|
||||
id="login-username"
|
||||
name="username"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="Введите имя пользователя"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="login-password" class="block text-sm font-medium text-gray-700 mb-2">Пароль</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="login-password"
|
||||
name="password"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="Введите пароль"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
onclick="togglePassword(this)"
|
||||
>
|
||||
<svg class="eye-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
<svg class="eye-closed w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<label class="custom-checkbox flex items-center text-sm text-gray-600">
|
||||
<input type="checkbox" id="remember-me" />
|
||||
<span class="checkmark"></span>Запомнить меня
|
||||
</label>
|
||||
<a href="#" class="text-sm text-gray-500 hover:text-gray-700 transition">Забыли пароль?</a>
|
||||
</div>
|
||||
|
||||
<div id="login-error" class="hidden mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm"></div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="login-submit"
|
||||
class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium"
|
||||
>Войти</button>
|
||||
</form>
|
||||
|
||||
<form id="register-form" class="p-6 hidden" onsubmit="return handleRegister(event)">
|
||||
<div class="mb-4">
|
||||
<label for="register-username" class="block text-sm font-medium text-gray-700 mb-2">Имя пользователя</label>
|
||||
<input
|
||||
type="text"
|
||||
id="register-username"
|
||||
name="username"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="Придумайте имя пользователя (мин. 3 символа)"
|
||||
required
|
||||
minlength="3"
|
||||
maxlength="50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="register-email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
id="register-email"
|
||||
name="email"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="example@mail.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="register-fullname" class="block text-sm font-medium text-gray-700 mb-2">Полное имя <span class="text-gray-400">(необязательно)</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="register-fullname"
|
||||
name="full_name"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="Иван Иванов"
|
||||
maxlength="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="register-password" class="block text-sm font-medium text-gray-700 mb-2">Пароль</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="register-password"
|
||||
name="password"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="Минимум 8 символов, A-Z, a-z, 0-9"
|
||||
required
|
||||
minlength="8"
|
||||
maxlength="100"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
onclick="togglePassword(this)"
|
||||
>
|
||||
<svg class="eye-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
<svg class="eye-closed w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<div class="h-1 w-full bg-gray-200 rounded-full overflow-hidden">
|
||||
<div id="password-strength-bar" class="h-full w-0 transition-all duration-300"></div>
|
||||
</div>
|
||||
<p id="password-strength-text" class="text-xs mt-1 text-gray-500"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="register-password-confirm" class="block text-sm font-medium text-gray-700 mb-2">Подтвердите пароль</label>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="password"
|
||||
id="register-password-confirm"
|
||||
name="password_confirm"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
|
||||
placeholder="Повторите пароль"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
onclick="togglePassword(this)"
|
||||
>
|
||||
<svg class="eye-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
|
||||
</svg>
|
||||
<svg class="eye-closed w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<p id="password-match-error" class="text-xs mt-1 text-red-500 hidden">Пароли не совпадают</p>
|
||||
</div>
|
||||
|
||||
<div id="register-error" class="hidden mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm"></div>
|
||||
|
||||
<div id="register-success" class="hidden mb-4 p-3 bg-green-100 border border-green-300 text-green-700 rounded-lg text-sm"></div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="register-submit"
|
||||
class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium disabled:bg-gray-300 disabled:cursor-not-allowed"
|
||||
>
|
||||
Зарегистрироваться
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script type="text/javascript" src="/static/auth.js"></script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,77 @@
|
||||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<title>{% block title %}LiB{% endblock %}</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script async="" src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.11.0/sha256.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.5/cash.min.js"></script>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link rel="stylesheet" href="/static/styles.css" />
|
||||
{% block extra_head %}{% endblock %}
|
||||
</head>
|
||||
<body class="flex flex-col min-h-screen bg-gray-100">
|
||||
<header class="bg-gray-500 text-white p-4 shadow-md">
|
||||
<div class="mx-auto pl-5 pr-3 flex justify-between items-center">
|
||||
<a class="flex gap-4 items-center max-w-10 h-auto" href="/">
|
||||
<img class="invert" src="/static/logo.svg" />
|
||||
<h1 class="text-2xl font-bold">LiB</h1>
|
||||
</a>
|
||||
<nav>
|
||||
<ul class="flex space-x-4">
|
||||
<li><a href="/" class="hover:text-gray-200">Главная</a></li>
|
||||
<li><a href="/books" class="hover:text-gray-200">Книги</a></li>
|
||||
<li><a href="/about" class="hover:text-gray-200">О нас</a></li>
|
||||
<li><a href="/api" class="hover:text-gray-200">API</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="relative" id="user-menu-area">
|
||||
<a href="/auth" id="guest-link" class="block hover:opacity-80 transition"><img class="w-6 h-6 invert" src="/static/avatar.svg" /></a>
|
||||
<button type="button" id="user-btn" class="hidden items-center gap-2 hover:opacity-80 transition focus:outline-none">
|
||||
<img
|
||||
id="user-avatar"
|
||||
src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y"
|
||||
class="w-8 h-8 rounded-full border-2 border-white object-cover bg-gray-600"
|
||||
alt="User Avatar"
|
||||
/>
|
||||
|
||||
<svg id="user-arrow" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div id="user-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden">
|
||||
<div class="px-4 py-3 border-b border-gray-200">
|
||||
<p id="dropdown-name" class="text-sm font-semibold text-gray-900 truncate">Пользователь</p>
|
||||
<p id="dropdown-username" class="text-sm text-gray-500 truncate">@username</p>
|
||||
<p id="dropdown-email" class="text-xs text-gray-400 truncate mt-1">email@example.com</p>
|
||||
</div>
|
||||
<a href="/profile" class="flex items-center px-4 py-2 text-sm hover:bg-gray-100">
|
||||
<svg class="w-4 h-4 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
|
||||
<p class="text-gray-700 text-sm">Мой профиль</p>
|
||||
</a>
|
||||
<a href="/my-books" class="flex items-center px-4 py-2 text-sm hover:bg-gray-100">
|
||||
<svg class="w-4 h-4 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
|
||||
<p class="text-gray-700 text-sm">Мои книги</p>
|
||||
</a>
|
||||
<div class="border-t border-gray-200 mt-1 pt-1">
|
||||
<button type="button" id="logout-btn" class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50">
|
||||
<svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
|
||||
<p class="text-gray-700 text-sm">Выйти</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
<footer class="bg-gray-800 text-white p-4 mt-8">
|
||||
<div class="container mx-auto text-center">
|
||||
<p>© 2025 My Awesome Library. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
{% 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="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>
|
||||
</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>
|
||||
</aside>
|
||||
|
||||
<main class="flex-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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script type="text/javascript" src="/static/books.js"></script>
|
||||
{% endblock %}
|
||||
@@ -1,139 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>LiB</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="https://unpkg.com/cash-dom@1.4.0/dist/cash.min.js"></script>
|
||||
<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">
|
||||
<a class="flex gap-4 items-center max-w-10 h-auto" href="/">
|
||||
<img class="invert" src="static/logo.svg" />
|
||||
<h1 class="text-2xl font-bold">LiB</h1>
|
||||
</a>
|
||||
<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">books</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="hover:text-gray-200">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/api" class="hover:text-gray-200">API</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>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Genres -->
|
||||
<div class="mb-4">
|
||||
<h3 class="font-medium mb-2">Жанры</h3>
|
||||
<ul id="genres-list"></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>© 2025 My Awesome Library. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="text/javascript" src="static/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user