Your Name
330 lines
16 KiB
HTML
330 lines
16 KiB
HTML
<!doctype html>
|
|
<html lang="ru" class="dark">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" type="image/png" href="/favi.png">
|
|
<title>{{ title or app_title or "Редакторская" }}</title>
|
|
|
|
<!-- Fonts: Fira Sans (UI) & Fira Code (Data) -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<script>
|
|
(function() {
|
|
const theme = localStorage.getItem('admin-theme') || 'dark';
|
|
document.documentElement.classList.toggle('dark', theme !== 'light');
|
|
})();
|
|
</script>
|
|
|
|
<!-- Tailwind CSS via CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['"Fira Sans"', 'sans-serif'],
|
|
mono: ['"Fira Code"', 'monospace'],
|
|
},
|
|
colors: {
|
|
app: {
|
|
bg: 'rgb(var(--app-bg) / <alpha-value>)',
|
|
surface: 'rgb(var(--app-surface) / <alpha-value>)',
|
|
surfaceHover: 'rgb(var(--app-surface-hover) / <alpha-value>)',
|
|
border: 'rgb(var(--app-border) / <alpha-value>)',
|
|
borderFocus: 'rgb(var(--app-border-focus) / <alpha-value>)',
|
|
primary: 'rgb(var(--app-primary) / <alpha-value>)',
|
|
primaryHover: 'rgb(var(--app-primary-hover) / <alpha-value>)',
|
|
textMain: 'rgb(var(--app-text-main) / <alpha-value>)',
|
|
textMuted: 'rgb(var(--app-text-muted) / <alpha-value>)',
|
|
success: 'rgb(var(--app-success) / <alpha-value>)',
|
|
successBg: 'var(--app-success-bg)',
|
|
warning: 'rgb(var(--app-warning) / <alpha-value>)',
|
|
warningBg: 'var(--app-warning-bg)',
|
|
error: 'rgb(var(--app-error) / <alpha-value>)',
|
|
errorBg: 'var(--app-error-bg)',
|
|
}
|
|
},
|
|
boxShadow: {
|
|
'glow': '0 0 15px rgba(59, 130, 246, 0.3)',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- HTMX & AlpineJS -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.11"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.8/dist/cdn.min.js"></script>
|
|
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--app-bg: 248 250 252;
|
|
--app-surface: 255 255 255;
|
|
--app-surface-hover: 226 232 240;
|
|
--app-border: 203 213 225;
|
|
--app-border-focus: 148 163 184;
|
|
--app-primary: 37 99 235;
|
|
--app-primary-hover: 29 78 216;
|
|
--app-text-main: 15 23 42;
|
|
--app-text-muted: 100 116 139;
|
|
--app-success: 5 150 105;
|
|
--app-success-bg: rgba(5, 150, 105, 0.1);
|
|
--app-warning: 217 119 6;
|
|
--app-warning-bg: rgba(217, 119, 6, 0.1);
|
|
--app-error: 220 38 38;
|
|
--app-error-bg: rgba(220, 38, 38, 0.1);
|
|
}
|
|
.dark {
|
|
--app-bg: 15 23 42;
|
|
--app-surface: 30 41 59;
|
|
--app-surface-hover: 51 65 85;
|
|
--app-border: 51 65 85;
|
|
--app-border-focus: 71 85 105;
|
|
--app-primary: 59 130 246;
|
|
--app-primary-hover: 37 99 235;
|
|
--app-text-main: 248 250 252;
|
|
--app-text-muted: 148 163 184;
|
|
--app-success: 16 185 129;
|
|
--app-success-bg: rgba(16, 185, 129, 0.1);
|
|
--app-warning: 245 158 11;
|
|
--app-warning-bg: rgba(245, 158, 11, 0.1);
|
|
--app-error: 239 68 68;
|
|
--app-error-bg: rgba(239, 68, 68, 0.1);
|
|
}
|
|
:root:not(.dark) .text-white { color: rgb(var(--app-text-main)) !important; }
|
|
</style>
|
|
|
|
<style type="text/tailwindcss">
|
|
@layer components {
|
|
/* Form inputs */
|
|
.input {
|
|
@apply bg-app-bg border border-app-border rounded-lg px-3 py-2 text-sm text-app-textMain focus:outline-none focus:border-app-primary focus:ring-1 focus:ring-app-primary transition-colors w-full placeholder:text-app-textMuted;
|
|
}
|
|
.select {
|
|
@apply input appearance-none bg-no-repeat bg-[right_0.5rem_center] bg-[length:1.5em_1.5em];
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
|
|
}
|
|
.textarea {
|
|
@apply bg-app-bg border border-app-border rounded-lg px-3 py-2 text-sm text-app-textMain focus:outline-none focus:border-app-primary focus:ring-1 focus:ring-app-primary transition-colors w-full placeholder:text-app-textMuted;
|
|
}
|
|
.checkbox {
|
|
@apply w-4 h-4 rounded border-app-border bg-app-bg text-app-primary focus:ring-app-primary focus:ring-offset-app-surface;
|
|
}
|
|
/* Buttons */
|
|
.btn {
|
|
@apply inline-flex items-center justify-center gap-2 rounded-lg font-medium text-sm px-4 py-2 transition-all disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-app-bg;
|
|
}
|
|
.btn-primary {
|
|
@apply bg-app-primary text-white hover:bg-app-primaryHover focus:ring-app-primary border border-transparent;
|
|
}
|
|
.btn-surface {
|
|
@apply bg-app-surface border border-app-border text-app-textMain hover:bg-app-surfaceHover focus:ring-app-border;
|
|
}
|
|
.btn-ghost {
|
|
@apply text-app-textMuted hover:text-app-textMain hover:bg-app-surfaceHover border border-transparent;
|
|
}
|
|
.btn-danger {
|
|
@apply bg-app-error text-white hover:bg-red-600 focus:ring-app-error border border-transparent;
|
|
}
|
|
.btn-danger-outline {
|
|
@apply bg-transparent border border-app-error text-app-error hover:bg-app-error hover:text-white focus:ring-app-error;
|
|
}
|
|
.btn-primary-outline {
|
|
@apply bg-transparent border border-app-primary text-app-primary hover:bg-app-primary hover:text-white focus:ring-app-primary;
|
|
}
|
|
.btn-sm {
|
|
@apply px-3 py-1.5 text-xs;
|
|
}
|
|
.btn-xs {
|
|
@apply px-2 py-1 text-xs;
|
|
}
|
|
.btn-icon {
|
|
@apply p-2;
|
|
}
|
|
/* Cards */
|
|
.card {
|
|
@apply bg-app-surface border border-app-border rounded-xl shadow-sm overflow-hidden;
|
|
}
|
|
/* Badges */
|
|
.badge {
|
|
@apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border;
|
|
}
|
|
.badge-success {
|
|
@apply bg-app-successBg text-app-success border-app-success/20;
|
|
}
|
|
.badge-error {
|
|
@apply bg-app-errorBg text-app-error border-app-error/20;
|
|
}
|
|
.badge-warning {
|
|
@apply bg-app-warningBg text-app-warning border-app-warning/20;
|
|
}
|
|
.badge-neutral {
|
|
@apply bg-app-bg text-app-textMuted border-app-border;
|
|
}
|
|
.badge-primary {
|
|
@apply bg-app-primary/10 text-app-primary border-app-primary/20;
|
|
}
|
|
.badge-info {
|
|
@apply bg-blue-500/10 text-blue-400 border-blue-500/20;
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
@apply flex space-x-1 bg-app-bg p-1 rounded-lg border border-app-border overflow-x-auto;
|
|
}
|
|
.tab {
|
|
@apply flex items-center px-3 py-1.5 text-sm font-medium rounded-md text-app-textMuted hover:text-app-textMain transition-colors whitespace-nowrap;
|
|
}
|
|
.tab-active {
|
|
@apply bg-app-surface text-app-textMain shadow-sm border border-app-border;
|
|
}
|
|
|
|
/* HTMX Indicators */
|
|
.htmx-indicator { display:none; }
|
|
.htmx-request .htmx-indicator { display:inline-block; }
|
|
.htmx-request.htmx-indicator { display:inline-block; }
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* Scrollbar */
|
|
::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
::-webkit-scrollbar-track { @apply bg-transparent; }
|
|
::-webkit-scrollbar-thumb { @apply bg-app-border rounded-full hover:bg-app-borderFocus; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-app-bg text-app-textMain min-h-screen font-sans flex antialiased">
|
|
|
|
{% if user %}
|
|
<!-- Sidebar -->
|
|
<aside x-data="{ expanded: false }" :class="expanded ? 'w-64' : 'w-20'" class="flex-shrink-0 bg-app-surface border-r border-app-border flex flex-col hidden md:flex sticky top-0 h-screen transition-all duration-200">
|
|
<div class="p-4">
|
|
<div class="flex items-center gap-3 text-app-textMain font-bold text-lg tracking-wide" :class="expanded ? 'justify-between' : 'justify-center'">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<span x-show="expanded" x-cloak class="truncate">{{ app_title or "Редакторская" }}</span>
|
|
</div>
|
|
<button type="button" class="btn btn-ghost btn-icon flex-shrink-0" @click="expanded = !expanded" :aria-label="expanded ? 'Свернуть меню' : 'Развернуть меню'" :title="expanded ? 'Свернуть меню' : 'Развернуть меню'">
|
|
<i data-lucide="panel-left" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex-1 px-4 space-y-1 overflow-y-auto">
|
|
<a href="/raw" title="Сырые посты" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'raw' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}" :class="expanded ? '' : 'justify-center'">
|
|
<i data-lucide="inbox" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span x-show="expanded" x-cloak>Сырые посты</span>
|
|
</a>
|
|
<a href="/editor" title="Редактор" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'editor' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}" :class="expanded ? '' : 'justify-center'">
|
|
<i data-lucide="edit-3" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span x-show="expanded" x-cloak>Редактор</span>
|
|
</a>
|
|
<a href="/sources" title="Источники" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'sources' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}" :class="expanded ? '' : 'justify-center'">
|
|
<i data-lucide="database" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span x-show="expanded" x-cloak>Источники</span>
|
|
</a>
|
|
{% if user.role != "editor" %}
|
|
<a href="/workers" title="Воркеры" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'workers' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}" :class="expanded ? '' : 'justify-center'">
|
|
<i data-lucide="cpu" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span x-show="expanded" x-cloak>Воркеры</span>
|
|
</a>
|
|
<a href="/users" title="Пользователи" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'users' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}" :class="expanded ? '' : 'justify-center'">
|
|
<i data-lucide="users" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span x-show="expanded" x-cloak>Пользователи</span>
|
|
</a>
|
|
<a href="/logs" title="Логи" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors {{ 'bg-app-primary/10 text-app-primary' if 'logs' in request.url.path else 'text-app-textMuted hover:bg-app-surfaceHover hover:text-app-textMain' }}" :class="expanded ? '' : 'justify-center'">
|
|
<i data-lucide="file-text" class="w-5 h-5 flex-shrink-0"></i>
|
|
<span x-show="expanded" x-cloak>Логи</span>
|
|
</a>
|
|
{% endif %}
|
|
</nav>
|
|
|
|
<div class="p-4 border-t border-app-border">
|
|
<button type="button" title="Переключить тему" class="w-full flex items-center justify-center gap-2 px-3 py-2 mb-2 rounded-lg text-sm font-medium text-app-textMuted hover:text-app-textMain hover:bg-app-surfaceHover transition-colors" onclick="toggleTheme()">
|
|
<i data-lucide="sun-moon" class="w-4 h-4"></i>
|
|
<span x-show="expanded" x-cloak>Тема</span>
|
|
</button>
|
|
<div class="flex items-center gap-3 px-3 py-2 mb-2" :class="expanded ? '' : 'justify-center'">
|
|
<div class="w-8 h-8 rounded-full bg-app-primary/20 flex items-center justify-center text-app-primary font-bold text-sm flex-shrink-0">
|
|
{{ user.login[0]|upper }}
|
|
</div>
|
|
<div x-show="expanded" x-cloak class="flex-1 min-w-0">
|
|
<div class="text-sm font-medium text-app-textMain truncate">{{ user.login }}</div>
|
|
<div class="text-xs text-app-textMuted truncate">{{ user.role }}</div>
|
|
</div>
|
|
</div>
|
|
<form method="post" action="/logout" class="m-0">
|
|
<input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
|
|
<button type="submit" title="Выйти" class="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-sm font-medium text-app-error hover:bg-app-errorBg transition-colors">
|
|
<i data-lucide="log-out" class="w-4 h-4"></i>
|
|
<span x-show="expanded" x-cloak>Выйти</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mobile Topbar (Visible only on small screens) -->
|
|
<div class="md:hidden fixed top-0 left-0 right-0 h-16 bg-app-surface border-b border-app-border z-50 flex items-center justify-between px-4">
|
|
<div class="flex items-center gap-2 font-bold text-app-textMain">
|
|
{{ app_title or "Редакторская" }}
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<button class="btn btn-ghost btn-icon" type="button" onclick="toggleTheme()" title="Тема">
|
|
<i data-lucide="sun-moon" class="w-5 h-5"></i>
|
|
</button>
|
|
<button class="btn btn-ghost btn-icon" onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
|
|
<i data-lucide="menu" class="w-6 h-6"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Dropdown -->
|
|
<div id="mobile-menu" class="hidden md:hidden fixed top-16 left-0 right-0 bg-app-surface border-b border-app-border z-40 p-4 space-y-2 shadow-lg">
|
|
<a href="/raw" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'raw' in request.url.path else 'text-app-textMuted' }}">Сырые посты</a>
|
|
<a href="/editor" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'editor' in request.url.path else 'text-app-textMuted' }}">Редактор</a>
|
|
<a href="/sources" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'sources' in request.url.path else 'text-app-textMuted' }}">Источники</a>
|
|
{% if user.role != "editor" %}
|
|
<a href="/workers" class="block px-3 py-2 rounded-lg text-sm {{ 'bg-app-bg text-app-textMain' if 'workers' in request.url.path else 'text-app-textMuted' }}">Воркеры</a>
|
|
{% endif %}
|
|
<div class="pt-2 mt-2 border-t border-app-border">
|
|
<form method="post" action="/logout" class="m-0">
|
|
<input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
|
|
<button type="submit" class="w-full text-left px-3 py-2 rounded-lg text-sm text-app-error">Выйти</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 min-w-0 flex flex-col h-screen overflow-y-auto {% if user %}pt-16 md:pt-0{% endif %} relative">
|
|
<div class="p-4 md:p-8 max-w-[1600px] w-full mx-auto">
|
|
{% block body %}{% endblock %}
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
function toggleTheme() {
|
|
const light = document.documentElement.classList.toggle('dark') === false;
|
|
localStorage.setItem('admin-theme', light ? 'light' : 'dark');
|
|
}
|
|
|
|
// Initialize Lucide icons
|
|
lucide.createIcons();
|
|
|
|
// Re-initialize icons after HTMX swap
|
|
document.body.addEventListener('htmx:afterSwap', function() {
|
|
lucide.createIcons();
|
|
});
|
|
|
|
document.body.addEventListener('htmx:responseError', function(evt) {
|
|
alert("Ошибка при загрузке: " + evt.detail.xhr.status);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|