153 lines
8.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
{{ template "head" . }}
<title>Цитаты | SkazaNull</title>
</head>
<body class="min-h-screen bg-gray-50 flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
<div class="text-center">
<i class="fas fa-quote-left text-4xl text-custom mb-4"></i>
<h2 class="mt-6 text-3xl font-bold font-[&#39;Playfair_Display&#39;] text-gray-900">Пацанские цитаты</h2>
<p class="mt-2 text-sm text-gray-600 font-[&#39;Inter&#39;]">Читайте и угорайте :)</p>
</div>
<div id="error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
<p id="error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
</div>
<div class="mb-6 flex justify-between items-center flex-wrap gap-4">
<div class="flex flex-wrap gap-4">
<input type="text" id="input-search" placeholder="Поиск цитат..." class="px-4 py-2 border rounded-lg" />
<select id="input-sorting" class="px-4 py-2 border rounded-lg" style="padding-right: 3.5rem;">
<option value="-datetime">По дате ↑</option>
<option value="+datetime">По дате ↓</option>
<option value="+author">По автору А</option>
<option value="-author">По автору Я-А</option>
<option value="+text">По тексту А</option>
<option value="-text">По тексту Я-А</option>
<option value="+creator.name">По цитатору А</option>
<option value="-creator.name">По цитатору Я-А</option>
<option value="random">Рандом Рандомыч</option>
</select>
<button class="text-gray-600 hover:text-blue-500" id="btn-refresh">
<i class="fas fa-refresh"></i>
</button>
</div>
<button class="bg-custom text-white px-4 py-2 rounded-lg hover:bg-custom/90" id="btn-add-open">Добавить цитату</button>
</div>
<hr>
<div id="block-quotes" class="space-y-4">
<img id="block-quotes-loader" src="/static/images/loader.gif" alt="Loading..." class="loader">
</div>
<hr>
<div class="mt-6 flex justify-center gap-2">
<button id="btn-page-first" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">1</button>
<div id="pages-prev" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
<button id="btn-page-prev" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">1</button>
<button id="btn-page-curr" class="px-3 py-1 border rounded-lg bg-custom text-white">2</button>
<button id="btn-page-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">3</button>
<div id="pages-next" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">...</div>
<button id="btn-page-last" class="hidden px-3 py-1 border rounded-lg hover:bg-gray-50">10</button>
</div>
<a href="/settings" class="block fas fa-gear text-gray-800" style="text-align: center;"> Настройки</a>
<div class="text-center mt-8">
<p class="text-xs text-gray-500 font-[&#39;Inter&#39;]">
<i class="fas fa-quote-right text-custom mr-1"></i>
&copy; Masahiko AMANO (H1K0), 2025—present
<i class="fas fa-quote-left text-custom ml-1"></i>
</p>
</div>
</div>
<div id="quote-creator" class="hidden quote-form flex flex-col items-center justify-center">
<div class="max-w-4xl w-full mt-8 p-6">
<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
<h3 class="text-xl font-bold font-[&#39;Playfair_Display&#39;] text-gray-900 mb-4">Создать цитату</h3>
<div id="quote-creator-error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
<p id="quote-creator-error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
</div>
<form id="quote-create" class="space-y-4">
<div>
<label for="new-quote-text" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
Цитата
</label>
<textarea id="new-quote-text" name="text" rows="3" placeholder="Сказанная цитата может быть сказана тем, кто её сказанул." required
class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#39;Inter&#39;]"></textarea>
</div>
<div>
<label for="new-quote-author" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
Автор
</label>
<input type="text" id="new-quote-author" name="author" placeholder="Узбекс" required
class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#39;Inter&#39;]" />
</div>
<div>
<label for="new-quote-datetime" class="block text-sm font-medium text-gray-700 font-[&#39;Inter&#39;]">
Дата и время
</label>
<input type="datetime-local" id="new-quote-datetime" name="datetime" step="1"
class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#39;Inter&#39;]" />
</div>
<div class="flex justify-end space-x-3">
<button type="button" id="btn-add-close"
class="!rounded-button px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#39;Inter&#39;]">
Отмена
</button>
<button type="submit"
class="!rounded-button px-4 py-2 text-sm font-medium text-white bg-custom hover:bg-custom/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#39;Inter&#39;]">
Создать
</button>
</div>
</form>
</div>
</div>
</div>
<div id="quote-editor" class="hidden quote-form flex flex-col items-center justify-center">
<div class="max-w-4xl w-full mt-8 p-6">
<div class="max-w-4xl w-full space-y-8 bg-white p-10 rounded-lg shadow-lg">
<h3 class="text-xl font-bold font-[&#34;Playfair_Display&#34;] text-gray-900 mb-4">Редактировать цитату</h3>
<div id="quote-editor-error" class="hidden mt-4 p-4 rounded-md bg-red-50 border border-red-200">
<p id="quote-editor-error-message" class="text-sm text-red-600 font-[&#39;Inter&#39;]"></p>
</div>
<form id="quote-update" class="space-y-4">
<div>
<label for="edit-quote-text" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
Цитата
</label>
<textarea id="edit-quote-text" name="text" rows="3" placeholder="Сказанная цитата может быть сказана тем, кто её сказанул." required
class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]"></textarea>
</div>
<div>
<label for="edit-quote-author" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
Автор
</label>
<input type="text" id="edit-quote-author" name="author" placeholder="Узбекс" required
class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
</div>
<div>
<label for="edit-quote-datetime" class="block text-sm font-medium text-gray-700 font-[&#34;Inter&#34;]">
Дата и время
</label>
<input type="datetime-local" id="edit-quote-datetime" name="datetime" step="1"
class="!rounded-button mt-1 block w-full px-3 py-2 border border-gray-300 shadow-sm placeholder-gray-400 focus:outline-none focus:ring-custom focus:border-custom sm:text-sm font-[&#34;Inter&#34;]" />
</div>
<div class="flex justify-end space-x-3">
<button type="button" id="btn-edit-close"
class="!rounded-button px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#34;Inter&#34;]">
Отмена
</button>
<button type="submit"
class="!rounded-button px-4 py-2 text-sm font-medium text-white bg-custom hover:bg-custom/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-custom font-[&#34;Inter&#34;]">
Сохранить
</button>
</div>
</form>
</div>
</div>
</div>
<script src="/static/js/utils.js"></script>
<script src="/static/js/quotes.js"></script>
</body>
</html>