init
This commit is contained in:
146
public/modules/dashboard/dashboard.html
Normal file
146
public/modules/dashboard/dashboard.html
Normal file
@@ -0,0 +1,146 @@
|
||||
<!-- Dashboard Module -->
|
||||
<div id="dashboardModule" class="dashboard-module hidden h-screen flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 h-16 flex items-center justify-between px-4 sm:px-6 shadow-sm z-10">
|
||||
<div class="flex items-center gap-2 sm:gap-4">
|
||||
<button id="toggleSidebar" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg md:hidden">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
</button>
|
||||
<div class="flex items-center gap-2 text-blue-600 dark:text-blue-400">
|
||||
<i data-lucide="database" class="w-6 h-6"></i>
|
||||
<span class="font-bold text-lg hidden sm:inline">SensoLab</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<button id="toggleTheme" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors" title="Переключить тему">
|
||||
<i data-lucide="moon" class="w-5 h-5 dark:hidden"></i>
|
||||
<i data-lucide="sun" class="w-5 h-5 hidden dark:block"></i>
|
||||
</button>
|
||||
<div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden sm:block"></div>
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white font-semibold hidden sm:flex" id="avatarCircle">A</div>
|
||||
<div class="hidden sm:block">
|
||||
<p class="font-semibold text-slate-900 dark:text-white text-sm" id="userName">Admin</p>
|
||||
<p class="text-xs text-slate-500 dark:text-slate-400" id="userRole">Администратор</p>
|
||||
</div>
|
||||
</div>
|
||||
<button id="logoutBtn" class="p-2 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors" title="Выход">
|
||||
<i data-lucide="log-out" class="w-5 h-5 text-red-500"></i>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- Sidebar -->
|
||||
<aside id="sidebar" class="fixed md:static inset-y-16 left-0 w-64 bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 overflow-y-auto transform -translate-x-full md:translate-x-0 transition-transform z-40">
|
||||
<nav class="p-4 space-y-2">
|
||||
<h3 class="px-4 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Меню</h3>
|
||||
|
||||
<a href="#dashboard" class="nav-item active flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
|
||||
<i data-lucide="home" class="w-5 h-5"></i>
|
||||
<span>Панель управления</span>
|
||||
</a>
|
||||
|
||||
<a href="#databases" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
|
||||
<i data-lucide="database" class="w-5 h-5"></i>
|
||||
<span>Базы данных</span>
|
||||
</a>
|
||||
|
||||
<a href="#tables" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
|
||||
<i data-lucide="table" class="w-5 h-5"></i>
|
||||
<span>Таблицы</span>
|
||||
</a>
|
||||
|
||||
<a href="#queries" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
|
||||
<i data-lucide="terminal" class="w-5 h-5"></i>
|
||||
<span>SQL Запросы</span>
|
||||
</a>
|
||||
|
||||
<div class="my-4 h-px bg-slate-200 dark:bg-slate-700"></div>
|
||||
|
||||
<h3 class="px-4 py-2 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider">Администрирование</h3>
|
||||
|
||||
<a href="#admin-users" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
|
||||
<i data-lucide="users" class="w-5 h-5"></i>
|
||||
<span>Пользователи</span>
|
||||
</a>
|
||||
|
||||
<a href="#admin-settings" class="nav-item flex items-center gap-3 px-4 py-3 rounded-lg font-medium transition-colors">
|
||||
<i data-lucide="settings" class="w-5 h-5"></i>
|
||||
<span>Настройки</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 overflow-auto">
|
||||
<div id="dashboardContent" class="p-4 sm:p-6 space-y-6">
|
||||
<!-- Stats Row -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">Таблиц</p>
|
||||
<p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsTableCount">0</p>
|
||||
</div>
|
||||
<div class="p-3 bg-blue-100 dark:bg-blue-900/30 rounded-lg">
|
||||
<i data-lucide="table" class="w-6 h-6 text-blue-600 dark:text-blue-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">Записей</p>
|
||||
<p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsRecordCount">0</p>
|
||||
</div>
|
||||
<div class="p-3 bg-green-100 dark:bg-green-900/30 rounded-lg">
|
||||
<i data-lucide="database" class="w-6 h-6 text-green-600 dark:text-green-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">Пользователей</p>
|
||||
<p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsUserCount">0</p>
|
||||
</div>
|
||||
<div class="p-3 bg-purple-100 dark:bg-purple-900/30 rounded-lg">
|
||||
<i data-lucide="users" class="w-6 h-6 text-purple-600 dark:text-purple-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-slate-500 dark:text-slate-400">Размер БД</p>
|
||||
<p class="text-2xl font-bold text-slate-900 dark:text-white" id="statsDbSize">-</p>
|
||||
</div>
|
||||
<div class="p-3 bg-orange-100 dark:bg-orange-900/30 rounded-lg">
|
||||
<i data-lucide="hard-drive" class="w-6 h-6 text-orange-600 dark:text-orange-400"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tables Preview -->
|
||||
<div class="card">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<i data-lucide="table" class="w-5 h-5"></i>
|
||||
Таблицы
|
||||
</h2>
|
||||
<a href="#tables" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">Все таблицы</a>
|
||||
</div>
|
||||
<div id="tablesList" class="space-y-2">
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm">Загрузка...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user