feat: complete UI redesign of admin dashboard with custom Tailwind
This commit is contained in:
Your Name
@@ -1,62 +1,259 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" data-theme="light">
|
||||
<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 "VK Parser Admin" }}</title>
|
||||
|
||||
<!-- Tailwind CSS & DaisyUI -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.10.1/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<!-- 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">
|
||||
|
||||
<!-- HTMX -->
|
||||
<!-- 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: '#0F172A', // slate-900 (Main Background)
|
||||
surface: '#1E293B', // slate-800 (Cards, Sidebar)
|
||||
surfaceHover: '#334155', // slate-700
|
||||
border: '#334155', // slate-700
|
||||
borderFocus: '#475569',// slate-600
|
||||
primary: '#3B82F6', // blue-500
|
||||
primaryHover: '#2563EB',// blue-600
|
||||
textMain: '#F8FAFC', // slate-50
|
||||
textMuted: '#94A3B8', // slate-400
|
||||
success: '#10B981', // emerald-500
|
||||
successBg: 'rgba(16, 185, 129, 0.1)',
|
||||
warning: '#F59E0B', // amber-500
|
||||
warningBg: 'rgba(245, 158, 11, 0.1)',
|
||||
error: '#EF4444', // red-500
|
||||
errorBg: 'rgba(239, 68, 68, 0.1)',
|
||||
}
|
||||
},
|
||||
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>
|
||||
<!-- AlpineJS (optional but useful for local state) -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.8/dist/cdn.min.js"></script>
|
||||
|
||||
<style>
|
||||
/* Custom tweaks to match Tailwind typography nicely */
|
||||
body { font-family: 'Inter', system-ui, sans-serif; }
|
||||
.htmx-indicator { display:none; }
|
||||
.htmx-request .htmx-indicator { display:inline-block; }
|
||||
.htmx-request.htmx-indicator { display:inline-block; }
|
||||
<!-- Lucide Icons -->
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<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; }
|
||||
|
||||
/* 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-base-200 min-h-screen">
|
||||
<body class="bg-app-bg text-app-textMain min-h-screen font-sans flex antialiased">
|
||||
|
||||
{% if user %}
|
||||
<div class="navbar bg-base-100 shadow-sm sticky top-0 z-50">
|
||||
<div class="flex-1 px-2 mx-2">
|
||||
<span class="text-lg font-bold">Parser Admin</span>
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-64 flex-shrink-0 bg-app-surface border-r border-app-border flex flex-col hidden md:flex sticky top-0 h-screen">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 text-app-textMain font-bold text-lg tracking-wide">
|
||||
<i data-lucide="zap" class="w-6 h-6 text-app-primary"></i>
|
||||
<span>Parser Admin</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li><a href="/raw" class="{{ 'active' if 'raw' in request.url.path }}">Сырые посты</a></li>
|
||||
<li><a href="/editor" class="{{ 'active' if 'editor' in request.url.path }}">Редактор</a></li>
|
||||
<li><a href="/sources" class="{{ 'active' if 'sources' in request.url.path }}">Источники</a></li>
|
||||
<li><a href="/workers" class="{{ 'active' if 'workers' in request.url.path }}">Воркеры</a></li>
|
||||
</ul>
|
||||
|
||||
<nav class="flex-1 px-4 space-y-1 overflow-y-auto">
|
||||
<a href="/raw" 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' }}">
|
||||
<i data-lucide="inbox" class="w-5 h-5"></i>
|
||||
Сырые посты
|
||||
</a>
|
||||
<a href="/editor" 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' }}">
|
||||
<i data-lucide="edit-3" class="w-5 h-5"></i>
|
||||
Редактор
|
||||
</a>
|
||||
<a href="/sources" 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' }}">
|
||||
<i data-lucide="database" class="w-5 h-5"></i>
|
||||
Источники
|
||||
</a>
|
||||
<a href="/workers" 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' }}">
|
||||
<i data-lucide="cpu" class="w-5 h-5"></i>
|
||||
Воркеры
|
||||
</a>
|
||||
<a href="/users" 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' }}">
|
||||
<i data-lucide="users" class="w-5 h-5"></i>
|
||||
Пользователи
|
||||
</a>
|
||||
<a href="/logs" 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' }}">
|
||||
<i data-lucide="file-text" class="w-5 h-5"></i>
|
||||
Логи
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="p-4 border-t border-app-border">
|
||||
<div class="flex items-center gap-3 px-3 py-2 mb-2">
|
||||
<div class="w-8 h-8 rounded-full bg-app-primary/20 flex items-center justify-center text-app-primary font-bold text-sm">
|
||||
{{ user.login[0]|upper }}
|
||||
</div>
|
||||
<div 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" 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>
|
||||
Выйти
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="flex-none hidden lg:block">
|
||||
<ul class="menu menu-horizontal gap-2">
|
||||
<li>
|
||||
<form method="post" action="/logout" class="m-0">
|
||||
<input type="hidden" name="csrf_token" value="{{ user.csrf_token }}">
|
||||
<button class="btn btn-ghost btn-sm text-error">Выйти</button>
|
||||
</form>
|
||||
</li>
|
||||
</ul>
|
||||
</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">
|
||||
<i data-lucide="zap" class="w-5 h-5 text-app-primary"></i>
|
||||
Parser
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
<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>
|
||||
<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 class="container mx-auto p-4 md:p-6 max-w-7xl">
|
||||
{% block body %}{% endblock %}
|
||||
<!-- 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>
|
||||
// Handle HTMX errors
|
||||
// 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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user