транскодирование изображений

This commit is contained in:
2026-02-01 19:21:06 +03:00
parent 80acdceba6
commit d442a37820
12 changed files with 611 additions and 115 deletions
+95 -28
View File
@@ -7,8 +7,8 @@
<meta property="og:title" content="{{ title }}" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Ваша персональная библиотека книг" />
<meta property="og:url" content="//{{ domain }}/" />
<!--<meta property="og:image" content="//{{ domain }}/img/{{ img }}.png" />-->
<meta property="og:url" content="//{{ domain }}/" />
<script
defer
@@ -23,42 +23,55 @@
<body
class="flex flex-col min-h-screen bg-gray-100"
x-data="{
user: null,
async init() {
document.addEventListener('auth:login', async (e) => {
this.user = e.detail;
this.user.avatar = await Utils.getGravatarUrl(this.user.email);
});
await Auth.init();
}
}"
user: null,
menuOpen: false,
async init() {
document.addEventListener('auth:login', async (e) => {
this.user = e.detail;
this.user.avatar = await Utils.getGravatarUrl(this.user.email);
});
await Auth.init();
}
}"
>
<header class="bg-gray-600 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>
<div class="mx-auto px-3 md:pl-5 md:pr-3 flex justify-between items-center">
<div class="flex items-center">
<button
@click="menuOpen = !menuOpen"
class="md:hidden flex gap-2 items-center hover:opacity-80 transition focus:outline-none"
:aria-expanded="menuOpen"
aria-label="Меню навигации"
>
<img class="invert max-w-10 h-auto" src="/static/logo.svg" />
<h1 class="text-xl font-bold">
<span class="text-gray-300 mr-1"></span>LiB
</h1>
</button>
<a class="hidden md: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>
</div>
<nav class="hidden md:block">
<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
>
<a href="/books" class="hover:text-gray-200">Книги</a>
</li>
<li>
<a href="/authors" class="hover:text-gray-200"
>Авторы</a
>
<a href="/authors" class="hover:text-gray-200">Авторы</a>
</li>
<li>
<a href="/api" class="hover:text-gray-200">API</a>
</li>
</ul>
</nav>
<div class="relative" x-data="{ open: false }">
<template x-if="!user">
<a
@@ -110,7 +123,7 @@
<div
x-show="open"
x-transition
class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden text-gray-900"
class="absolute right-0 mt-2 w-56 max-w-[calc(100vw-2rem)] bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden text-gray-900"
style="display: none"
>
<div class="px-4 py-3 border-b border-gray-200">
@@ -235,17 +248,71 @@
</template>
</div>
</div>
<nav
x-show="menuOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2"
@click.outside="menuOpen = false"
class="md:hidden mt-4 pb-2 border-t border-gray-500"
style="display: none"
>
<ul class="flex flex-col space-y-1 pt-3">
<li>
<a
href="/"
@click="menuOpen = false"
class="block px-3 py-2 rounded hover:bg-gray-500 transition"
>
Главная
</a>
</li>
<li>
<a
href="/books"
@click="menuOpen = false"
class="block px-3 py-2 rounded hover:bg-gray-500 transition"
>
Книги
</a>
</li>
<li>
<a
href="/authors"
@click="menuOpen = false"
class="block px-3 py-2 rounded hover:bg-gray-500 transition"
>
Авторы
</a>
</li>
<li>
<a
href="/api"
@click="menuOpen = false"
class="block px-3 py-2 rounded hover:bg-gray-500 transition"
>
API
</a>
</li>
</ul>
</nav>
</header>
<main class="flex-grow">{% block content %}{% endblock %}</main>
<div
id="toast-container"
class="fixed bottom-5 right-5 flex flex-col gap-2 z-50"
class="fixed bottom-5 left-4 right-4 md:left-auto md:right-5 flex flex-col gap-2 z-50 items-center md:items-end"
></div>
<footer class="bg-gray-800 text-white p-4 mt-8">
<div class="container mx-auto text-center">
<p>&copy; 2026 LiB Library. Разработано в рамках дипломного проекта.
Код открыт под лицензией <a href="https://github.com/wowlikon/LiB/blob/main/LICENSE">MIT</a>.
<div class="container mx-auto text-center text-sm md:text-base">
<p>
&copy; 2026 LiB Library. Разработано в рамках дипломного проекта.
<br class="sm:hidden" />
Код открыт под лицензией
<a href="https://github.com/wowlikon/LiB/blob/main/LICENSE" class="underline hover:text-gray-300">MIT</a>.
</p>
</div>
</footer>